Bloom Seeds includes accessible and mobile-friendly React components, and implements Bloom’s design system tokens, to ensure visual consistency, accessibility, and theme-ability within the Bloom platform and for outside collaborators.
<aside> 🛠 UI Seeds is a work in progress. The team is actively developing the concepts we are outlining here. Our goal is to establish a shared language and promote effective collaboration through the process of customizing components.
</aside>
🏡 This page centralizes Seeds links, history, and more detailed written documentation
🔌 The GitHub repo includes installation and setup instructions
📕 The Storybook includes live code examples for tokens and each component
✏️ The Zeroheight includes design and best practice documentation for components, and integrates both Storybook and Figma
🌱 The Seeds Figma includes design assets and asset guidelines for Seeds components
🪙 The Tokens Figma includes design assets and asset guidelines for Seeds tokens
Tokens are predefined units of color, typography, spacing, and more that form a design language and can be customized to meet the needs of a specific context.
Components are simple building blocks that allow for a consistent user experience.
Implementations or jurisdictions are the specific uses of the design system in cities, counties, and regions.
The background behind why we decided to move this direction.
Get started with our code base
Components and styles are available to extend and customize