Lock Rule
Downstream Only
This route documents the current implementation. If the system changes in code, update this page only to mirror those upstream source files.
Internal Reference
Current design system, mirrored from the live source files.
This page is a read-only visual reference of the current design system. Update the system at its true source files, not here.
Source of truth audited from src/styles/globals.css, tailwind.config.mjs, src/layouts/BaseLayout.astro, and the primitives in src/components/.
Colors
Palette families and semantic theme tokens
Palette ramps come from `src/styles/globals.css`. Semantic tokens switch between `:root` and `.dark` and are mapped into Tailwind in `tailwind.config.mjs`.
obsidian
src/styles/globals.css
--obsidian-50
252 31% 97%
--obsidian-100
252 28% 94%
--obsidian-200
251 24% 88%
--obsidian-300
250 21% 74%
--obsidian-400
249 18% 59%
--obsidian-500
248 18% 44%
--obsidian-600
249 22% 33%
--obsidian-700
248 26% 25%
--obsidian-800
247 30% 18%
--obsidian-900
246 33% 13%
--obsidian-950
245 38% 8%
ember
src/styles/globals.css
--ember-50
48 100% 96%
--ember-100
47 100% 89%
--ember-200
46 100% 79%
--ember-300
46 99% 69%
--ember-400
45 99% 60%
--ember-500
45 100% 52%
--ember-600
40 100% 46%
--ember-700
34 88% 38%
--ember-800
30 72% 30%
--ember-900
25 71% 20%
--ember-950
23 74% 10%
relic
src/styles/globals.css
--relic-50
318 44% 97%
--relic-100
316 45% 92%
--relic-200
315 42% 83%
--relic-300
312 41% 68%
--relic-400
309 40% 55%
--relic-500
303 44% 43%
--relic-600
299 52% 35%
--relic-700
292 55% 28%
--relic-800
284 52% 22%
--relic-900
276 47% 17%
--relic-950
270 51% 11%
aether
src/styles/globals.css
--aether-50
196 100% 96%
--aether-100
197 95% 90%
--aether-200
195 88% 80%
--aether-300
194 83% 70%
--aether-400
193 79% 61%
--aether-500
193 83% 50%
--aether-600
197 89% 40%
--aether-700
203 90% 32%
--aether-800
210 84% 25%
--aether-900
215 70% 20%
--aether-950
220 63% 12%
Light semantic tokens
:root in src/styles/globals.css
--background
200 37% 97%
hsl(200 37% 97%)
--foreground
206 42% 13%
hsl(206 42% 13%)
--muted
204 18% 40%
hsl(204 18% 40%)
--surface
198 42% 99%
hsl(198 42% 99%)
--surface-muted
200 30% 95%
hsl(200 30% 95%)
--surface-elevated
196 45% 99%
hsl(196 45% 99%)
--line
202 23% 85%
hsl(202 23% 85%)
--line-strong
204 19% 72%
hsl(204 19% 72%)
--primary
var(--ember-500)
hsl(45 100% 52%)
--primary-strong
var(--ember-600)
hsl(40 100% 46%)
--primary-foreground
var(--obsidian-950)
hsl(245 38% 8%)
--accent
199 62% 36%
hsl(199 62% 36%)
--accent-foreground
0 0% 100%
hsl(0 0% 100%)
--highlight
var(--aether-700)
hsl(203 90% 32%)
--highlight-foreground
0 0% 100%
hsl(0 0% 100%)
--ring
var(--ember-400)
hsl(45 99% 60%)
Dark semantic tokens
:root[data-theme="dark"] in src/styles/globals.css
--background
202 50% 5%
hsl(202 50% 5%)
--foreground
198 24% 91%
hsl(198 24% 91%)
--muted
198 14% 71%
hsl(198 14% 71%)
--surface
198 34% 10%
hsl(198 34% 10%)
--surface-muted
198 28% 12%
hsl(198 28% 12%)
--surface-elevated
198 24% 16%
hsl(198 24% 16%)
--line
198 16% 22%
hsl(198 16% 22%)
--line-strong
198 16% 32%
hsl(198 16% 32%)
--primary
var(--ember-400)
hsl(45 99% 60%)
--primary-strong
var(--ember-500)
hsl(45 100% 52%)
--primary-foreground
var(--obsidian-950)
hsl(245 38% 8%)
--accent
198 46% 40%
hsl(198 46% 40%)
--accent-foreground
var(--obsidian-950)
hsl(245 38% 8%)
--highlight
191 84% 63%
hsl(191 84% 63%)
--highlight-foreground
var(--obsidian-950)
hsl(245 38% 8%)
--ring
var(--ember-400)
hsl(45 99% 60%)
Typography
Font families, type scale, and tracking
Typography values come from `src/styles/globals.css` and the Tailwind font and size mappings in `tailwind.config.mjs`.
--font-display
Display Voice
Display Voice
"Protest Strike", "Impact", sans-serif
--font-sans
Body and interface text stay clear and grounded.
Body and interface text stay clear and grounded.
"IBM Plex Sans", "Trebuchet MS", sans-serif
--font-mono
Meta Labels 2026
Meta Labels 2026
"IBM Plex Mono", "SFMono-Regular", monospace
--text-xs
line-height: 1.4
letter-spacing: -
Type xs
0.75rem
--text-sm
line-height: 1.55
letter-spacing: -
Type sm
0.875rem
--text-base
line-height: 1.7
letter-spacing: -
Type base
1rem
--text-lg
line-height: 1.6
letter-spacing: -
Type lg
1.125rem
--text-xl
line-height: 1.35
letter-spacing: -
Type xl
1.375rem
--text-2xl
line-height: 1.08
letter-spacing: -
Type 2xl
2.125rem
--text-3xl
line-height: 1.02
letter-spacing: -
Type 3xl
2.75rem
--text-display
line-height: 0.9
letter-spacing: var(--tracking-display)
Display Heading
clamp(2.5rem, 6vw, 5.25rem)
--text-hero
line-height: 0.86
letter-spacing: var(--tracking-display)
Hero Heading
clamp(3.5rem, 10vw, 8rem)
--tracking-display
0.032em
Display Rhythm
--tracking-ui
0.18em
Interface Meta
Foundations
Spacing, radius, shadows, and layout widths
These values come directly from the Tailwind extensions that point back to the CSS variables in `src/styles/globals.css`.
Spacing
--space-1
1 / 0.25rem
--space-2
2 / 0.5rem
--space-3
3 / 0.75rem
--space-4
4 / 1rem
--space-5
5 / 1.25rem
--space-6
6 / 1.5rem
--space-8
8 / 2rem
--space-10
10 / 2.5rem
--space-12
12 / 3rem
--space-16
16 / 4rem
--space-20
20 / 5rem
--space-24
24 / 6rem
--space-gutter
gutter / clamp(1rem, 2vw, 1.75rem)
--space-section
section / clamp(3rem, 7vw, 6rem)
Radius
--radius-sm
rounded-sm / 0.375rem
--radius-md
rounded-md / 0.625rem
--radius-lg
rounded-lg / 1rem
--radius-xl
rounded-xl / 1.5rem
--radius-panel
rounded-panel / 1.125rem
--radius-stage
rounded-stage / 1.75rem
--radius-pill
rounded-pill / 999px
Shadows
shadow-soft
var(--shadow-soft)
shadow-card
var(--shadow-card)
shadow-lift
var(--shadow-lift)
shadow-glow
var(--shadow-glow)
Containers
--container-prose
max-w-prose / 42rem
42rem
--container-content
max-w-content / 72rem
72rem
--container-shell
max-w-shell / 80rem
80rem
--container-stage
max-w-stage / 90rem
90rem
Background image utilities
bg-atmosphere
var(--bg-atmosphere)
bg-card-sheen
var(--bg-card-sheen)
bg-accent-burst
var(--bg-accent-burst)
Components
Live reusable primitives from src/components
Examples below use the actual Astro components and only the variants, sizes, and tones defined in their source files.
Button
Card and wrappers
default
Card default
Standard framed panel from `Card.astro`.
Used for regular content blocks and supportive surfaces.
feature
Card feature
Feature treatment from `Card.astro`.
Uses the live `bg-card-sheen` background and `shadow-lift`.
outline
Card outline
Outline treatment from `Card.astro`.
Lower-emphasis treatment using the existing component variant.
Wrapper
ContentCard
Thin wrapper around `Card.astro` with the same rendered primitive.
Included because it exists as a reusable component in `src/components/ContentCard.astro`.
ContentBlock, Section, and PageSection
ContentBlock
Section intro primitive
This demo uses the live ContentBlock component with the current display type, prose width, and body styles.
plain
Section plain
The plain tone in `Section.astro` only controls internal spacing.
Additional slot content inside the real Section component.
panel
Section panel
Panel tone defined in the component.
Uses the existing stage radius, border, background, and shadow.
feature
Section feature
Feature tone defined in the component.
Uses the current feature border, background image, and lifted shadow.
PageSection
Wrapper component
`PageSection.astro` delegates directly to `Section.astro` and is shown here as an existing composition helper.
Forms and utilities
Input
Implemented form primitive
Coverage
What is not present
No reusable textarea, select, checkbox, radio, badge, alert, or chip component was found in the active source files, so those are intentionally not invented here.
Actual ui-pill
Actual ui-section-label
Actual ui-section-stack handles the spacing beneath the label.
Component sources
Utilities
src/styles/globals.css
Shared presentation classes include `.ui-pill`, `.ui-section-label`, and `.ui-section-stack`.
Button
src/components/Button.astro
Variants: primary, secondary, ghost. Sizes: sm, md, lg.
Card
src/components/Card.astro
Variants: default, feature, outline.
ContentCard
src/components/ContentCard.astro
Wrapper around Card.
ContentBlock
src/components/ContentBlock.astro
Supports sizes sm, md, lg and left/center alignment.
Section
src/components/Section.astro
Tones: plain, panel, feature.
PageSection
src/components/PageSection.astro
Wrapper around Section.
Input
src/components/Input.astro
Only shared form primitive currently implemented.
SiteHeader
src/components/SiteHeader.astro
Already rendered by BaseLayout on this route.
SiteFooter
src/components/SiteFooter.astro
Already rendered by BaseLayout on this route.