Design system
The foundations and components behind every UGCBloom page. Everything here renders from the live site styles, so this is the source of truth: when the site changes, this changes with it.
Explore
01
Foundations
Logo, color, typography, gradients, spacing, motion and voice.
02Components
19 components in 6 categories, each with usage, specs, code and accessibility.
03Brand guide
Social rules and 142 Figma templates, connected to the same tokens.
04Use with AI
Copy any component, token or page as a prompt for an AI tool.
What's new
- 2026-10-08v1.3.1The design system and brand guide pages now use a neutral system font for all documentation text, so they never mix with the brand and website fonts. Component previews and type specimens keep the brand fonts.
- 2026-10-08v1.3Brand guide added next to the design system: the social rules from the Figma “Brand Guidelines, Social” page (principles, colors, typography, logo, images, CTA, formats, do & don't, Figma components) and a library of 155 Figma templates in 12 sets, each with a thumbnail, Figma link and prompt. Shared tokens are marked, and design system pages link to the matching brand rules and back.
- 2026-10-07v1.2Rebuilt on the structure of mature systems (Uber Base, IBM Carbon, Atlassian, GitHub Primer): Overview, Foundations, Components by category, Resources. Every component page has Usage, Specs, Code and Accessibility tabs, with anatomy, types, do and don't, states, tokens and related components.
Status
| Component | Category | Status |
|---|---|---|
| Button | Action | Stable |
| Segmented control | Input & control | Stable |
| Filter pills | Input & control | Stable |
| Search field | Input & control | Stable |
| Card | Surfaces | Stable |
| Dark panel | Surfaces | Stable |
| Callout | Surfaces | Stable |
| Stats strip | Data display | Stable |
| Tag | Data display | Stable |
| Check list | Data display | Stable |
| Chips row | Data display | Beta |
| Accordion | Data display | Stable |
| Table of contents | Navigation | Stable |
| Breadcrumb | Navigation | Stable |
| Page header | Content & layout | Stable |
| Section heading | Content & layout | Stable |
| Highlight mark | Content & layout | Stable |
| CTA block | Content & layout | Stable |
| Step | Content & layout | Beta |