A working reference for the portfolio’s foundations, layout, and shared components. Start with the decision you need; open the exhaustive token catalogs only when implementation detail matters.
The small set of decisions every interface inherits before component styling begins.
Components use semantic roles, never primitive colours. Appearance mode remaps those roles without changing component code.
Core roles
--background --muted --card --foreground --accent --border The complete primitive palette, canonical semantic roles, page palettes, and compatibility aliases live in Reference .
Four sizes carry the system. Regular carries display, title, and body; Medium separates headings and genuine labels. Tracking stays at zero.
Display
text-display · clamp(36px → 64px) / 1.02 · Apparat Regular 400
Page or section title
text-title · clamp(28px → 36px) / 1.08 · Apparat Regular 400
Shared heading
text-heading · clamp(18px → 20px) / 1.3 · Apparat Medium 500
Body, metadata, captions, and compact interface text.
text-body · 14px / 1.5 · Apparat Regular 400
Sample Case Study
Titles carry hierarchy. Reading text uses secondary colour and a tighter reading leading without creating another font size.
Section heading
Semantic h2 and h3 elements can share this visual role; document structure and space explain their relationship.
KMR Apparat is self-hosted from the original Kimera WOFF2 files. Regular and Medium serve the shared roles; Light is approved but currently unassigned.
Role tokens own size, leading, and weight. Call sites never add tracking, leading, or weight utilities, and the browser does not synthesize missing cuts.
Content rhythm follows a 4px base scale. Structural roles name page geometry separately from component spacing.
3xs 0.25rem · 4px 2xs 0.5rem · 8px xs 0.75rem · 12px sm 1rem · 16px md 1.5rem · 24px lg 2rem · 32px xl 3rem · 48px 2xl 4rem · 64px 3xl 6rem · 96px 4xl 8rem · 128px | Role | Value and use |
|---|---|
--spacing-gutter | 20px — page inset and safe-area floor |
--spacing-section | clamp(48px → 96px) — section rhythm |
--spacing-stack | 16px — stacked content |
--spacing-card | 16px — card interior |
--spacing-grid | 10px — structural grid gutter |
Tone carries depth: canvas, inset, raised, then raised hover. A fixed top-left light adds crisp one-pixel edge definition to selected interactive surfaces.
Canvas
Raised
Card rest
Inset
Media and recessed content
Raised hover
One tonal step forward
Inset
Still distinct from its parent
Control geometry
Compact for precise pointers; touch targets grow without changing the visual hierarchy.
--control-height-compact--control-height-touch--control-icon-size--control-switch-width / height--control-switch-thumb-width / height--control-switch-inset / travel--control-slider-field-height--control-slider-handle-width / heightFunctional corners
Structural surfaces stay square; curvature is reserved for controls and physical forms.
--radius-control--radius-round--radius-deviceMotion
Immediate feedback, restrained settling, and a reduced-motion path.
--motion-none--motion-feedback--motion-theme--motion-settleLive raised surface
One page container, one reading measure, and one structural grid keep every route on the same geometry.
Pages compose Section > Container > Stack | Grid + GridItem | Cluster.
The grid has 24 tracks and a 10px gutter; items begin
full width, then opt into named fractions.
24 tracks
Container roles
--container-page · 81.25rem · 1300px content / 1340px outer cap with gutters
--container-measure · 36rem · 576px reading measure
Sidebar uses the same grid for a 4 / 20
content split and collapses below its measured 56rem
boundary. This page’s desktop directory is the live
specimen.
Shared patterns shown in their real states and with their implementation contracts close at hand.
Primary names the action a region is for. Secondary is the bordered default; link belongs inside or beside running text. React commands share the same roles.
| Variant | Use | State model |
|---|---|---|
| Primary | One defining action per region | Filled rest, hover, and pressed surfaces |
| Secondary | Supporting or navigational action | Transparent rest; surface and border strengthen |
| Link | Action in or beside text | Underlined, wrapping, and boxless |
The keycap is a shortcut hint inside the theme toggle’s one action, not a standalone button.
| State | Effect |
|---|---|
| Rest | Raised |
| Hover or keyboard focus | Raised hover |
| Pointer or physical key press | Pressed |
Use Switch for an immediate boolean setting. The supported primitive keeps one compact, neutral treatment across themes and page palettes.
The track remains visible in either state. Thumb position and nearby text communicate the current value without relying on colour alone.
Keep the current focus mode synchronized when you move between devices.
Use quieter transitions while reviewing long project pages and experiment states.
Unavailable until the archive migration is complete.
Use Slider for an approximate continuous value. Its full field supports quick movement while the inline value and endpoints keep the current range visible.
Use the full field for quick pointer movement, or focus the handle and use the arrow keys for fine adjustments.
Adjust the working preview without changing the published page.
Choose how strongly the preview responds to pointer movement.
Locked while the live preview is open.
One quiet-ledger treatment: strong outer and header rules, quiet row separators, no vertical walls, and tabular figures. Wide tables scroll inside their own labelled region rather than reflowing.
| Token | Value | Applies to |
|---|---|---|
| Cell padding | 8px 12px | Header and value cells |
| Rule | 1px horizontal | Outer block, column header, and rows |
| Column header | 14px, 500, uppercase | thead th |
| Row header | 14px, 500, natural case | tbody th |
Line and Contained tabs share one accessible behaviour contract. Use them for a small set of peer content views shown one at a time.
Current direction: left-to-right
Use for peer views that share an edge with the content below. This controlled set also proves that tabs can be added and removed without changing the interaction contract.
3 tabs in this set
A concise view of the project’s current direction and status.
Use for a compact group of peer views. This content-sized stress case also removes its current view without controlling the next selection, proving the primitive’s missing-item fallback.
12 views in this set · Current: Summary
Scroll sideways to reach later views. Arrow keys continue through the full set; the final view is unavailable.
The release is ready for its final design and engineering review.
Exhaustive implementation detail. These catalogs remain complete, but stay out of the main reading path until they are needed.
An authored page palette is separate from the visitor’s light or dark appearance. The infrastructure remains available even when no published content opts in.
| Palette | Appearance mapping | Current use |
|---|---|---|
Defaultpalette: default | Light neutral-150 / neutral-600 / sage-500 Dark neutral-800 / neutral-200 / sage-500 | Site default |
Bluepalette: blue | Light blue-100 / blue-600 / blue-400 Dark blue-900 / blue-200 / blue-300 | Available · currently unused |
Sage accentpalette: sage | Light neutral-150 / neutral-600 / sage-500 Dark neutral-800 / neutral-200 / sage-500 | Available · currently unused |
Raw palette values are identical in both appearances. Components never consume them directly.
black
CSS value
900
CSS value
800
CSS value
700
CSS value
600
CSS value
500
CSS value
400
CSS value
375
CSS value
350
CSS value
325
CSS value
300
CSS value
200
CSS value
150
CSS value
100
CSS value
white
CSS value
600
CSS value
500
CSS value
400
CSS value
300
CSS value
200
CSS value
100
CSS value
50
CSS value
400
CSS value
300
CSS value
200
CSS value
100
CSS value
950
CSS value
900
CSS value
800
CSS value
700
CSS value
600
CSS value
500
CSS value
400
CSS value
350
CSS value
300
CSS value
200
CSS value
100
CSS value
50
CSS value
400
CSS value
300
CSS value
200
CSS value
100
CSS value
900
CSS value
700
CSS value
500
CSS value
400
CSS value
300
CSS value
200
CSS value
100
CSS value
600
CSS value
500
CSS value
400
CSS value
300
CSS value
200
CSS value
100
CSS value
Role names map to different primitives in light and dark appearance. Open only the family you need.
--bg-primary --bg-secondary --bg-tertiary --bg-quaternary --bg-primary-hover --bg-secondary-hover --bg-tertiary-hover --bg-quaternary-hover --bg-black-solid --bg-black-solid-hover --bg-disabled --bg-disabled-alt --bg-accent-primary --bg-accent-primary-hover --bg-accent-solid --bg-accent-solid-hover --bg-error-primary --bg-error-primary-hover --bg-error-secondary --bg-error-secondary-hover --bg-success-primary --bg-success-primary-hover --bg-success-secondary --bg-success-secondary-hover --bg-warning-primary --bg-warning-primary-hover --bg-warning-secondary --bg-warning-secondary-hover --bg-info-primary --bg-info-primary-hover --bg-info-secondary --bg-info-secondary-hover --text-primary --text-secondary --text-tertiary --text-primary-hover --text-secondary-hover --text-tertiary-hover --text-disabled --text-disabled-alt --text-placeholder --text-accent-primary --text-accent-secondary --text-accent-primary-hover --text-accent-secondary-hover --text-error-primary --text-error-secondary --text-error-primary-hover --text-error-secondary-hover --text-success-primary --text-success-secondary --text-success-primary-hover --text-success-secondary-hover --text-warning-primary --text-warning-secondary --text-warning-primary-hover --text-warning-secondary-hover --text-info-primary --text-info-secondary --text-info-primary-hover --text-info-secondary-hover --icon-primary --icon-secondary --icon-tertiary --icon-primary-hover --icon-secondary-hover --icon-tertiary-hover --icon-disabled --icon-disabled-alt --icon-placeholder --icon-accent-primary --icon-accent-secondary --icon-accent-primary-hover --icon-accent-secondary-hover --icon-error-primary --icon-error-secondary --icon-error-primary-hover --icon-error-secondary-hover --icon-success-primary --icon-success-secondary --icon-success-primary-hover --icon-success-secondary-hover --icon-warning-primary --icon-warning-secondary --icon-warning-primary-hover --icon-warning-secondary-hover --icon-info-primary --icon-info-secondary --icon-info-primary-hover --icon-info-secondary-hover --border-primary --border-interactive --border-secondary --border-tertiary --border-primary-solid --border-disabled --border-disabled-alt --border-accent-primary --border-accent-secondary --border-error-primary --border-error-secondary --border-success-primary --border-success-secondary --border-warning-primary --border-warning-secondary --border-info-primary --border-info-secondary --background-primary --background-secondary --background-alternate --background-alternate-hover --background-hover --background-elevated --background-elevated-hover --text-interactive --text-reading --text-alternate --border-hover --decorative-accent --lighting-highlight --lighting-shade --button-primary-background --button-primary-background-hover --button-primary-background-active --button-primary-foreground --button-primary-foreground-active --button-secondary-background-hover --button-secondary-background-active --button-secondary-foreground --button-secondary-foreground-hover --button-secondary-border --button-secondary-border-hover --button-secondary-border-active --button-quiet-foreground --button-quiet-foreground-hover --button-disabled-background --button-disabled-foreground --button-disabled-border Tailwind and shadcn-facing names point to the canonical semantic roles above. They are a bridge, not a second colour system.
| Alias | Canonical role |
|---|---|
--background | --background-primary |
--foreground | --text-primary |
--card | --background-elevated |
--muted | --background-secondary |
--muted-foreground | --text-secondary |
--accent | --text-interactive |
--accent-foreground | --text-alternate |
--border | --border-primary |
--ring | --border-hover |
Base tokens live in src/styles/global.css;
authored palette remaps live in src/styles/themes/.
Update this reference whenever those contracts change.