Frosty design system
Tokens and component rules for the Frosty Control Plane, a Deno-native LLM gateway console. Revision ds-r2: a dense, near-neutral monochrome developer console. Dark is the default theme; every value on this page is a token, and this page is styled by the system it documents.
Source of truth: docs/design/DESIGN.md and tokens.css. ds-r2 supersedes ds-r1 (glacier-blue). Contrast figures below are computed (WCAG 2.x); each shows dark, then light.
Color
Near-neutral monochrome (hue 265, chroma at or below 0.006). Primary is the shadcn-neutral inversion: near-white in dark, near-black in light. One accent blue (hue 252 to 255) is reserved for focus, links, and the active-nav indicator, never a fill. Four semantic status hues plus a five-color chart family.
Surfaces
Text
Primary and accent
Semantic status
Chart family
Five data-mark colors (blue, green, amber, red, violet) derived from the accent blue and the semantic hues. Each verified at 3:1 or better as a non-text mark on the card surface, in both themes.
Lines
Typography
System sans for UI, mono for telemetry. JetBrains Mono (OFL) is an optional local enhancement; no font files ship. Compact scale, px-snapped, 13.5px body. Small labels, large stat values.
Mono telemetry specimens
Spacing
Base unit 4px. Stay on the scale; when in doubt, round down.
Radius and shadow
One radius family from a 6px base. Three shadow steps, near-neutral; dark theme leans on borders first. No glassmorphism.
Motion
Motion is feedback, not decoration. Enter toward rest, exit away. Under reduced motion every duration and travel distance collapses to zero.
| token | value | use |
|---|---|---|
| --motion-fast | 100ms | hover, focus, pressed feedback |
| --motion-default | 150ms | menus, popovers, switches, tabs |
| --motion-slow | 220ms | dialogs, sheets, command palette |
| --motion-spin | 800ms | loading spinner rotation |
| --motion-ease-out | cubic-bezier(0.2, 0, 0, 1) | enters and hovers |
| --motion-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | exits, reversible toggles |
| --motion-rise | -2px | hover lift distance |
| --motion-enter | 8px | enter-toward travel |
Components
Every state below is built purely from tokens. shadcn/ui is the one kit; these are its Frosty ds-r2 specimens.
Buttons
Primary is the monochrome emphasis surface (near-white in dark, near-black in light). Visual height is 34px; a pseudo-element extends every button's hit area to the 44px minimum. Hover and focus columns are simulated for the doc.
Inputs
Checkbox and switch
Badges
Soft is the default shape for tables and lists; solid is reserved for the single most important state in a region.
Application status vocabulary (locked D-CONTRACT strings). ds-r2: default is now a solid primary chip.
The pulse dot appears only on streaming (a real live-connection state), at most once per view.
Chips and tags
Model chips (removable) and the CUSTOM provider tag.
Stat tiles
Small xs label, large 3xl mono value, xs mono delta. Four-up on the dashboard.
Chart cards
Bar/line toggle, legend keyed to --chart-1..5, and a graceful empty state. Axes and gridlines use --muted-foreground and --border.
Data table (resources)
Sortable headers, inline secret reveal and copy, row edit and delete actions, status pills, pagination.
| id | type | key | status | actions |
|---|---|---|---|---|
| openai | openai | sk-............... | default enabled | |
| anthropic | anthropic | sk-............... | enabled | |
| azure-eu CUSTOM | azure | not set | missing disabled |
Log table
| time | status | request | model | latency | tokens | cost |
|---|---|---|---|---|---|---|
| 07:41:23 | 200 | POST /v1/chat/completions | openai/gpt-4o | 612 ms | 1,204 | $0.0038 |
| 07:41:19 | 200 | POST /v1/messages | anthropic/claude-sonnet | 1,847 ms | 2,388 | $0.0121 |
| 07:41:12 | 500 | POST /v1/embeddings | openai/text-embedding-3 | 93 ms | 0 | $0.0000 |
| 07:41:08 | processing | POST /v1/chat/completions | groq/llama-3.3-70b | … | … | … |
Sidebar navigation
Top search box carries a Ctrl K / Cmd K affordance and opens the command palette. Groups are nested-expandable (rotating chevron); an external-link glyph marks items that leave the app. Active item: sidebar-accent fill, sidebar-accent-foreground text, 2px sidebar-primary inset bar. Section labels are 2xs mono muted.
Command palette
Opened by Cmd K / Ctrl K. Popover surface, shadow-lg, radius-xl. Highlighted row uses the accent wash; each row may carry a trailing mono shortcut hint.
Tabs and configuration panel
Horizontal tabs over a dense field grid with toggles and a sticky Save/Remove footer on the card surface.
Filter and facet sidebar
Collapsible facet groups with a searchable list, checkbox groups, and mono counts. Group headers are 2xs mono muted with a rotating chevron. Selected facets echo as removable soft-neutral chips above the results.
Dialog
Custom-provider modal
Sheet (detail panel)
- Request id
- req_8f3ka92
- Model
- openai/gpt-4o
- Latency
- 612 ms
- Prompt tokens
- 1,204
- Completion tokens
- 356
- Cost
- $0.0038
Toast
Error banner
Empty state
Loading skeleton
Focus ring
Every interactive element shows a 2px ring at 2px offset in the accent blue; the ring passes 3:1 against both canvases and 4.5:1 as link text.
Application frame
Component preview of the app shell built from tokens: sidebar with a search box and nested nav, content region with a page header, stat tiles, a chart card, and a paginated resource table.
| id | type | key | status |
|---|---|---|---|
| openai | openai | set | default enabled |
| anthropic | anthropic | set | enabled |
| azure-eu | azure | missing | disabled |