Design Tokens

The complete token reference for Erika. Every visual value is defined once in :root and referenced by CSS custom properties throughout.

Backgrounds

Primary Accent

Secondary Accent

Status

Text

Borders

Terminal

Type Scale

{{ t.sample }}
{{ t.token }} {{ t.value }} {{ t.label }}

Line Height

The quick brown fox jumps over the lazy dog.
Agent sessions unfold line by line.
Every keystroke is recorded and searchable.
{{ lh.label }} {{ lh.token }} {{ lh.value }} — {{ lh.usage }}

Letter Spacing

{{ ls.sample }}
{{ ls.label }} {{ ls.token }} {{ ls.value }}

Font Weights

Font Families

Type in Context

Terminal Sessions, Unfolded

Browse and explore agent recordings

Erika transforms raw terminal sessions into navigable, searchable documents. Upload a .cast file and the system detects sections, highlights markers, and makes every keystroke findable.

Last updated 2 hours ago · 1,247 events · 23 sections detected

$ npm test
✓ should parse asciicast v3 format (5ms)

Layout Tokens

--container-max 960px Max content width for centered layouts
--container-padding var(--space-6) Side padding for content container
--grid-gap var(--space-4) Default gap between grid items
--header-height 56px Fixed app header height

Grid Classes

These utility classes live in shared/layout.css and are available to all stages. Apply .grid as the base class for display: grid and gap, then add a modifier like .grid--sidebar to set the column template. All multi-column grids collapse to a single column below 768px.

.grid.grid--auto-fill · repeat(auto-fill, minmax(200px, 1fr))
--grid-gap
--grid-gap
--grid-gap
--grid-gap
--grid-gap
--grid-gap
Tokens: --grid-gap (16px gap) · Note: minmax uses raw 200px — var() invalid in repeat(auto-fill)
.grid.grid--3col · repeat(3, 1fr)
1fr
1fr
1fr
1fr
span 2
Tokens: --grid-gap (16px), grid-column: span 2
.grid.grid--sidebar · var(--progress-width) 1fr
--progress-width (200px)
1fr content
Tokens: --progress-width (200px sidebar), --grid-gap
.grid.grid--holy-grail · var(--progress-width) 1fr var(--progress-width)
--header-height (56px)
--progress-width
1fr content
--progress-width
Tokens: --header-height, --progress-width, --grid-gap
.grid.grid--2col · repeat(2, 1fr)
1fr
1fr
span full width
Tokens: --grid-gap, grid-column: 1 / -1 for full span

Breakpoints

{{ bp.label }} {{ bp.token }}: {{ bp.value }}

Component Heights

{{ h.label }} {{ h.value }}

Border Radius

Shadows
Token Value Usage
Class CSS Output Usage