Design System · Specification

Brand & Visual System

Design tokens, color schemes, typography hierarchy, and asset specifications.

01 / Color Scheming

Theme Engine & Adaptive Palette

Themes define 4 base properties: background, text, primary, and secondary. Selecting a preset updates the stage canvas, foundation tokens, and derived opacity scales in real time.

Active Preset: themes.defaultDark

Category · Overview

Component Title

Secondary description demonstrating layout hierarchy and dual-accent styling.

stage.theme(themes.defaultDark)

Foundation Input Tokens (`themes.defaultDark`)

The 4 explicit properties configured in stage.theme() for the selected theme.

Adaptive Derived Scales (Computed from `#ffffff`)

Component glass fills, borders, and text contrasts generated dynamically via CSS color-mix().

72% Text Opacity

color-mix(in srgb, #ffffff 72%, transparent)

--sr-text-muted

Secondary text. Use for subtitles, body paragraphs, and descriptive labels.

50% Text Opacity

color-mix(in srgb, #ffffff 50%, transparent)

--sr-text-dim

Low-contrast text. Use for code snippets, line numbers, and metadata.

10% → 4% Surface

linear-gradient(text 10% / bg 50% to text 4% / bg 45%)

--sr-surface

Container background. Use for card surfaces, dialog boxes, and floating panels.

15% Border Stroke

1px solid color-mix(#ffffff 15%, transparent)

--sr-surface-border

Container outline. Use for card borders, table gridlines, and section dividers.

25% Surface Fill

color-mix(in srgb, #ffffff 25%, transparent)

--sr-surface-highlight

Interactive feedback. Use for hover fills, active row states, and focus rings.

Accent: #818cf8

var(--sr-secondary) → #818cf8

--sr-secondary

Secondary accent. Use for badges, status indicators, and divider rule accents.

02 / Typography

Type Families & Scale

Three font families used for interface elements, editorial text, and code.

Aa Bb Gg 123System Interface

Sans-serif

Inter

--sr-font-sans

Used for headings, labels, navigation, and body copy.

Editorial Text &Secondary Narrative

Serif Italic

Newsreader

--sr-font-serif

Used for subtitles, quotes, and narrative callouts.

const value = 42;x: 100, y: 200

Monospace

JetBrains Mono

--sr-font-mono

Used for code blocks, terminal components, and data values.

Default sizes are listed in the theming reference. Samples below are scaled to fit.

Hero Scale--sr-font-size-hero

Display Headline

Title Scale--sr-font-size-title

Section Heading

Lead / Subtitle--sr-font-size-lead

A secondary lead sentence demonstrating typographic scale.

Body Text--sr-font-size-body

Standard interface copy and paragraph descriptions for readable presentation.

Code & Monospace--sr-font-size-code

const result = compute(options);

Kicker & Label--sr-font-size-kicker

Category · Overview

03 / Logomark

Mark & Lockups

A responsive vector mark combining bracket syntax with a playhead. Automatically adapts to an optically tuned, antialiased micro vector at ≤20px.

Standalone Mark

Mark only. Use for application icons, favicons, and compact avatar spaces.

Type: Mark OnlyAspect: 1:1 Square

StageRoutine

Horizontal Lockup

Inline mark and wordmark. Use for header navigation, title bars, and banners.

Type: InlineAlign: Horizontal Baseline

StageRoutineSub-headline text

Stacked Lockup

Centered mark above wordmark. Use for title cards, presentation slides, and splash screens.

Type: StackedAlign: Center Column

64px

44px

28px

20px

16px