/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).
Background textures
SectionTexture fills a relative
parent (absolute inset-0,
pointer-events-none). Put texture
first, then content in relative z-10. Each card uses a unique instanceKey so SVG pattern / filter ids stay unique on this page.
type="pattern" · dots · brand1 · light
pattern · hex · scale 1.2
pattern · crosshatch · placement corner-tr
type="paper" · laid · tinted
paper · watercolor · neutral tint
type="organic" · blob · background
organic · stroke · corner-br · md
type="topo" · contourStyle sparse
TopoTexture direct · dense · dark surface
type="topo", imported directly when you do not need the facade.
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