/dev/ui-components
UI components
Theme (brand1–4,
neutral) × mode (light,
dark,
color). Animation is off so everything is visible without scrolling. Not
linked from the site nav.
Eyebrow
Pill label; optional link. Rows = mode, columns = theme. Same label in every cell to compare surfaces.
variant="solid"
variant="outline"
Title (page hero)
Title with primary + secondary line
and short description. variant="standard".
| mode \ theme | brand1 | brand2 | brand3 | brand4 | neutral |
|---|---|---|---|---|---|
| light | Primary title | Primary title | Primary title | Primary title | Primary title |
| dark | Primary title | Primary title | Primary title | Primary title | Primary title |
| color | Primary title | Primary title | Primary title | Primary title | Primary title |
Headline (section)
Headline with primary, secondary, and
accent. Two variants below; brand1 + light only to save space - switch theme
in code or duplicate the table if needed.
variant="standard" · brand1 · light
Section headline Subtitle line
variant="subheading" · brand2 · dark (on dark surface)
Subheading style
Supporting text
Cards
ContentCard: default vs highlight, emoji + badge. ListCard: checklist + status dots. FeatureCard: neo shadow + decorative ring (brand1–3 styles in component).
ContentCard · vertical · default
Card title
Plain text description for a content card in default variant.
ContentCard · vertical · highlight
Highlight card
Highlight variant bumps the surface tint.
ContentCard · horizontal · link
ListCard · mixed statuses
Timeline
FeatureCard · brand2 · dark
Headline accepts HTML for inline spans (e.g. accent color).
Decorations
HorizontalPathLine uses stroke-current - color follows the parent text color.
on white · text-brand1-600
on dark · text-brand2-300
on color · text-brand3-100