BDTK / Components
Component kit
The shared primitives — @studio/ui. Import as @studio/ui/Button.astro. Source in packages/ui/src/. Every variant and state shown below.
Button
Renders <a> with href, else <button>. Variants: primary, accent, ghost, link.
Eyebrow
Label above a heading. muted dims it for inverse surfaces.
Default eyebrow
Muted eyebrow
Stack
Vertical spacing. gap: sm | md | lg.
Section
Full-bleed, owns vertical rhythm + surface tone. tone: default | muted | inverse — each pairs a background with its correct text color, so dark text can never land on a dark surface by accident. pad: sm | md.
tone="default" — --color-bg / --color-text
tone="muted" — --color-surface-muted / --color-on-muted
tone="inverse" — --color-surface-inverse / --color-on-inverse
Container
Max-width + gutter wrapper — the one place horizontal page insets are defined. Caps at --layout-max.
Card & CardGrid
Renders <a> when href is set, else <div>. CardGrid establishes a container-query context — cards collapse to 1 column when their own container is narrow, not the viewport.
Renders as an anchor, hover shows accent border.
No href — renders as a plain div.
Icon
Name-based wrapper over @lucide/astro — call sites never import lucide directly. Curated set only, added on first real use.
Sizes: sm (16px) · md (20px) · lg (24px)
NavItem
Generic nav link with an active state. 44px min touch target.
SiteHeader & SiteFooter
Shared page shells. SiteHeader takes a brand slot + default slot (nav/actions). SiteFooter takes a tone matching Section's tones.