Colors

color-* · element/color/

H1 Display

typography-h1 · element/typography/h1.md

• Font family: references typography-heading (Montserrat)
• Size: 128px / line-height 0.9 (115.2px)
• Weight: 900
• Letter spacing: -3.2px
• Transform: uppercase
• Color: --text-display alias — color-brand-black (#000000) in light brands, color-neutral-0 (#FFFFFF) in dark brands
• Margin bottom: 16px · smoothing: antialiased

H1 Small

typography-h1-small · element/typography/h1-small.md

• Font family: references typography-heading (Montserrat)
• Size: 48px / line-height 112% (53.76px)
• Weight: 900
• Letter spacing: 0
• Transform: uppercase
• Color: --text-display alias — color-brand-black (#000000) in light brands, color-neutral-0 (#FFFFFF) in dark brands
• Margin bottom: 16px · smoothing: antialiased

H2 Section

typography-h2 · element/typography/h2.md

• Font family: references typography-heading (Montserrat)
• Size: 36px / line-height 40px (30px / 36px below md)
• Weight: 700
• Letter spacing: 0.25em (9px at 36px)
• Transform: uppercase
• Color: --text-display alias — color-brand-black (#000000) in light brands, color-neutral-0 (#FFFFFF) in dark brands
• Hover: color-brand-highlight (#ff5e6c) when the heading is a link — hover the preview

Heading Text

typography-heading · element/typography/heading.md

• Font family: Montserrat, system-ui, sans-serif
• Usage: headings, titles, UI labels, buttons
• Weight: 600 / 700

Body Text

typography-body · element/typography/body.md

• Font family: 'Montserrat', system-ui, sans-serif
• Size: 1.05rem / line-height 1.75
• Weight: 400
• Color: color-neutral-3 (#0D0F10)

Buttons

component-button-primary · element/component/button-primary.md

• Shared: radius 0, uppercase, 20px, padding 16px, border 0; stretches to fill (16px gap)
• Primary — bg brand-highlight, text brand-main; hover bg brand-main-light, text neutral-0
• Outline — 4px inset border brand-main, text brand-main, bg neutral-0; hover border + text brand-main-light
• Muted — bg neutral-0, text brand-main; hover bg neutral-1, text brand-main-light
• Destructive — bg semantic-error, text neutral-0; hover bg brand-main-light, text neutral-0
• Warning — bg semantic-warning, text brand-main; hover bg brand-main-light, text neutral-0
• Info — bg semantic-info, text neutral-0; hover bg brand-main-light, text neutral-0
• Success — bg semantic-success, text brand-main; hover bg brand-main-light, text neutral-0
• Disabled (all variants) — opacity 0.5, cursor not-allowed, no hover

Card

component-card · element/component/card.md

• Border radius: 0
• Border: 4px solid — --border alias (color-brand-main, #1a0002, in light brands)
• Shadow: 8px 8px 0 0 using the --border alias
• Background: --surface alias (color-neutral-0, #FFFFFF, in light brands)

Input

component-input · element/component/input.md

• Border radius: 0; border 2px solid — --border alias
• Background --surface, text --text-body
• Padding: 8px 12px
• Font: references typography-body, size 14px
• Focus: 2px outline in color-brand-highlight (#ff5e6c), offset -1px

Nav Item

component-nav-item · element/component/nav-item.md

• Display block, padding 8px 16px
• Font: references typography-heading, size 14px
• Rest: text --text-muted, no background, no underline
• Hover: background color-brand-main-light (#3a2026), text color-neutral-0
• Active [data-active="true"]: background color-brand-highlight (#ff5e6c), text color-neutral-0, weight 600

Badge

component-badge · element/component/badge.md

• Display inline-block; border radius 0
• Border: 2px solid — --border alias
• Text color: --text-muted alias
• Font: ui-monospace, monospace, size 11px
• Padding: 2px 8px
• Tones set border + text only, never a fill: [data-tone="info"] color-semantic-info, success color-semantic-success, warning color-semantic-warning, error color-semantic-error

Semantic Card

component-semantic-card · element/component/semantic-card.md

• Inherits component-card: border radius 0, border 4px solid — --border alias, shadow 8px 8px 0 0 — --border alias, background --surface alias
• Stripe: 8px wide, full height, flush inside the left border
• Content padding: 24px
• Tone via data-tone, sets the stripe fill only: absent or [data-tone="info"] color-semantic-info, success color-semantic-success, warning color-semantic-warning, error color-semantic-error

Link

component-link · element/component/link.md

• Color: inherited from color-brand-highlight (#ff5e6c)
• Weight: 600
• Decoration: underline (always, not hover-only)
• Hover color: --brand-highlight-hover (#EA5663)

Table

component-table · element/component/table.md

• Wrapper overflow-x: auto; table width: 100%, border-collapse: collapse
• Border radius 0; outer border 2px solid — --border alias; background --surface
• Header cell: references typography-heading, 12px, weight 700, uppercase, letter spacing 1px, text --text-muted, padding 12px 16px, border bottom 2px solid — --border
• Body cell: references typography-body, 14px, text --text-body, padding 12px 16px
• Zebra and hover: row background --bg alias
• [data-numeric="true"]: right aligned, ui-monospace, monospace
• [data-muted="true"] row: text --text-muted alias
• Empty state: one full-width cell, padding 24px 16px, centred, --text-muted

Select

component-select · element/component/select.md

• Border radius 0; border 2px solid — --border alias
• Background --surface, text --text-body
• Padding: 8px 32px 8px 12px — the right pad clears the caret
• Font: references typography-body, size 14px
• Focus: 2px outline in color-brand-highlight, offset -1px
• Disabled: opacity 0.5, cursor not-allowed

Textarea

component-textarea · element/component/textarea.md

• Border radius 0; border 2px solid — --border alias
• Background --surface, text --text-body
• Padding: 8px 12px
• Font: references typography-body, size 14px, line height 1.5
• Min height 96px; resize vertical only
• Focus: 2px outline in color-brand-highlight, offset -1px

Checkbox

component-checkbox · element/component/checkbox.md

• Box: 16px square, radius 0, border 2px solid — --border, background --surface
• Check mark drawn by the control in --text-on-highlight
• Checked: background and border color-brand-highlight
• Focus: 2px outline in color-brand-highlight, offset 2px
• Disabled: opacity 0.5, cursor not-allowed
• Label: references typography-body, 14px, --text-body, 8px gap

Default Spacing

layout-spacing-default · element/layout/spacing-default.md

• Default margin: 24px
• Scale: multiples of 4/8 — 8 / 12 / 16 / 24 / 48px

Sidebar

layout-sidebar · element/layout/sidebar.md

• Sidebar: 240px fixed width, position: fixed; inset: 0 auto 0 0
• Sidebar ground: --sidebar-bg alias (--background) — in Distro, linear-gradient(90deg, color-brand-highlight, color-brand-main) (#30C5D2 → #471069)
• Sidebar text/icons: --text-inverse at rest — component-nav-item's hover and active fills are unchanged
• Brand wordmark: references typography-heading, 20px, weight 900, letter-spacing 2px, uppercase, --text-inverse, padding 0 16px 24px
• Content region: margin-left: 240px, padding 36px 28px 48px; inner wrap max-width: 1200px; margin: 0 auto; background is the --bg alias (Distro re-points --bg to --neutral-1 so content never sits on the gradient)
• Footer: signed-in identity + sign out, padding 16px, border-top 2px solid — --text-inverse, 12px text, 8px gap, word-break: break-all; sign-out is an underlined text button, no background/border; nothing else
• Active state: inherited from component-nav-item's [data-active="true"] contract — the item whose route prefixes the current path
• Collapse: single breakpoint at 767px — sidebar becomes position: static, full width, padding 12px 0; nav list hidden until the sidebar carries [data-open="true"]; a hamburger toggle (hidden above the breakpoint) flips it — described behaviourally, no specific icon library