◆ Strata v1.0 — Layered Design System

Build at the speed of light

A layered component library built for precision, structure, and performance. Five surface levels, eight hue tracks and a hairline for every boundary — every specimen below is live.

Get started Browse components View on GitHub

Uptime 99.9%

Components 140+

Gzipped CSS 13.1kb

Possibilities ∞

0

Hues

0

Treatments

0

Surfaces

0

Sections

[ 01 ]

Surface ramp

Hierarchy is not decoration, it is structure. Six surface levels run from the darkest void all the way up to surface-3, with an inset well layer darker than the page hung off the side — each step differs by only a little lightness, yet that is enough for the boundary to be read.

6 levels
never border + shadow
hairline carries all structure
hue cast ≈ 4–5%

Six levels, side by side

static surfaces

void #03060c

--void — overlay backdrop

base #060b14

--base — page · band--base

surface-1 #0b111f

--surface-1 — panels · cards

surface-2 #101827

--surface-2 — headers · controls

surface-3 #161f33

--surface-3 — tracks · hover

inset #04070f

--inset — wells · code

[*]--void#03060c
[*]--base#060b14
[*]--surface-1#0b111f
[*]--surface-2#101827
[*]--surface-3#161f33
[*]--inset#04070f
[*]--line / --line-strong.09 / .17 white

[*] Panel mapping: thin / medium → surface-1, heavy / elevated → surface-2. A border and a shadow never appear together on a static surface — with both present, the boundary goes muddy.

Panel pane matrix spec-strip

Every treatment, nested in its own band

rail={false}

base band--base

var(--base)

raised band--raised

var(--surface-1)

tinted band--tinted

hue 5% + surface-1

well band--well

hue 4% + base

inset band--inset

var(--inset)

grid band--grid

64px grid on base

[*]basevar(--base)
[*]raisedvar(--surface-1)
[*]tintedcolor-mix(hue 5%, surface-1) + top wash
[*]wellcolor-mix(hue 4%, base) + top wash
[*]insetvar(--inset) + inset hairlines
[*]grid64px grid, mask-faded at 50% 0%

Eight hue tracks

one per section

indigo #6366f1

--h-indigo

blue #3b82f6

--h-blue

cyan #22d3ee

--h-cyan

teal #14b8a6

--h-teal

emerald #10b981

--h-emerald

amber #f59e0b

--h-amber

rose #f43f5e

--h-rose

purple #a855f7

--h-purple

[ 02 ]

Component inventory

Components are split into four layers by responsibility: those that carry surface, structure, interaction and feedback. The layer split is what decides whether a component can be reused — the higher the layer, the fewer its members; the lower the layer, the more general it is.

4 layers
6 surface components
7 interaction
7 feedback

Surface 05 + inset

Panel · Card · StatCard · GlassTable · ListGroup · Meter

Structure 07

Band · SectionHeading · SpecList · KeyCap · CodeBlock · Terminal

Interaction 06

Button · Modal · Toast · Tooltip · Dropdown · Tabs · CommandPalette

Feedback 07

Alert · Progress · Spinner · Skeleton · Empty · Badge · StatusIndicator

[*]content base15px
[*]headingssentence case · weight 600
[*]radii4 / 6 / 10 / 14 / 18
[*]spacing4px rhythm
[*]hovercolour swap, no tween
[*]static surfacesborder, never + shadow

[*] The monospace annotation layer (.micro / .note / .fig) is the system's second voice: it carries specs, numbering and readouts, and every number that can change is aligned with tabular-nums.

Band Panel CodeBlock Terminal Meter Empty Skeleton

[ 03 ]

Inputs

The first principle for form controls is uniform height with a visible focus state. Every control is 36px tall with a 10px radius and a 1px hairline border; on focus the border switches to the accent colour plus a 3px soft ring.

control height 36
radius 10
focus ring 3px
label ↔ control by id

Text fields

height 36

Username Must be 3–24 characters

Email Please enter a valid email address

API key Connected successfully ✓

[*]height36px
[*]padding0 11px
[*]backgroundvar(--surface-2)
[*]focus1px accent + 0 0 0 3px accent/18%
[*]error / success--err / --ok border

Select dropdown

native select

Region

Environment

Locked by admin

[*]select height36px
[*]padding-right32px (arrow)
[*]disabledopacity .5

Checkboxes & radios

appearance: none

Accept terms Subscribe to newsletter Option A Option B

[*]box16 × 16 · radius 4
[*]checkedaccent fill + ink tick

Toggle controlSpace

Move between rowsTab

Toggle switches

34 × 20 track

Dark mode Notifications Locked on

[*] The track and the knob are drawn entirely in CSS (the label's ::before / ::after), so the component adds no extra DOM. The track is 34 × 20, the knob 14px travelling 14px, and only transform and background take part in the transition.

Textarea

min-height 90

Bio 0 / 500 characters

[ 04 ]

Data display

Tables, lists and cards share one hairline language: a 1px outer frame, with only the fainter line-faint left between rows — no zebra stripes, no lifted cards. The data finds its own rhythm.

th 10 / 16
td 11 / 16
row hover = surface-2
sortable headers

Data table

sortable aria-sort

Team members and their current status
Name	Role	Status	Last Active
Alice Chen	Administrator	Online	Just now
Bob Martinez	Editor	Away	12 min ago
Carol Wu	Viewer	Offline	3 hours ago
David Kim	Developer	Online	5 min ago

[*] Headers use the monospace uppercase micro face; clicking a header lets StrataRuntime sort it and write aria-sort, rotating the arrow 180°. The headers themselves are Tab-focusable, and both Enter and Space trigger them.

List group

hairline rows

AC

Alice Chen
Online now

Admin

BM

Bob Martinez
Away

Editor

CW

Carol Wu
Offline

Card grid

tagHue

Quantum engine

New

High-performance rendering core with sub-millisecond latency.

v3.2.1

Neural sync

Stable

Real-time data synchronization across distributed nodes.

Crystal vault

Encrypted storage with zero-knowledge proof authentication.

Beta

KPI row with sparklines

StatCard.spark

Requests / day 2.41M ▲ 12.4%

p95 latency 142ms ▼ 6.1%

Error rate 0.42% ▼ 0.3 pp

Uptime 99.98% ▲ 0.02 pp

[*]sparkline viewBox0 0 200 34
[*]stroke-width1.6 · non-scaling
[*]valuetabular-nums · 30px
[*]grid / axisnone

Quota meters

Meter · hue

Edge requests 2.41M / 5M

Storage 812 GB / 1 TB

Build minutes 1 240 / 3 000

Bandwidth 9.2 TB / 10 TB

[*] The track is 5px with a pill radius on a surface-3 base; the fill takes the hue of the band it sits in (--hue), so the same Meter recolours itself from section to section.

[ 05 ]

Date & time

The native date controls keep the browser's own picker and only unify height, padding and text colour; the calendar is the one hand-built grid here, its cells aligned with 10px monospace digits.

3 native pickers
cal cell 10px mono
today = accent fill
muted = 50% opacity

Date & time pickers

native input

Date

Time

Date & time

Mini calendar

August 2026

August 2026 Mo — Su

MoTuWeThFrSaSu 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6

[*]grid7 × 1fr
[*]cell6px 0 · hairline
[*]todayaccent fill + ink
[*]mutedopacity .5

28 · today 15 · selected

[ 06 ]

Overlays & Pop-ups

Overlays are the only place on the page where a shadow is allowed — static surfaces lean on borders, and only a layer that genuinely floats uses shadow to spell out its volume. Everything is driven by data-strata-* attributes; the page ships not one line of JS.

modal radius 18
dropdown pop shadow
toast 3.5s auto-dismiss
Esc restores focus

Modal & toast triggers

data-strata-open

Hover or focus for a tooltip

Close overlayESC

Cycle inside dialogTAB

[*]overlayvoid 74% + blur 3px
[*]dialogmin(460px, 100%) · radius 18
[*]tooltipink on --text-hi · radius 6

Dropdown menu

role=menu

[*] The menu starts at 208px wide, radius 14, on a surface-2 base with a line-strong border and --shadow-pop; clicking outside or pressing Esc dismisses it and hands focus back to the trigger.

Empty state

Empty

No data sources yet

Connect a Postgres instance and Strata will chart it automatically.

[ 07 ]

Layout

Sidebar plus main content is the most common page skeleton: the sidebar sticks on wide screens and drops back into the document flow on narrow ones, the collapse button is injected by the runtime, and the collapsed state keeps only two-digit monospace numbering.

sidebar 260px
sticky at nav + 24
collapsed 62px
skeleton 9px lines

Sidebar & main content

layout-sidebar

Skeleton loading

shimmer 1.5s

card variant

title + text

[*] Lines are 9px tall, the title 13px and 42% wide, radius 4px, on a surface-3 base, with a line-faint gradient sweeping across. The whole skeleton is aria-hidden and paired with sr-only copy, so screen readers never announce hollow content.

[ 08 ]

Media

A media frame is a 16:9 container over a thin gradient ground, and the play key is the only round, floating element here. The carousel dots keep active in sync with aria-current and stay keyboard reachable.

16 : 9 frame
gradient, not image
play 44px circle
dots 7px

Image & video frames

16:9

Image placeholder

Video placeholder

[*]frameaspect-ratio 16 / 9 · radius 14
[*]backgroundlinear-gradient(135deg)
[*]play button44px · radius 999
[*]carousel dot7px · active = --hue

[ 09 ]

Scrolling

The horizontal scroll container tucks its content into a focusable region: once it has focus the arrow keys scroll it, and the scrollbar itself belongs to the hairline language.

region tabindex 0
scroll-snap x
card 260px min
keyboard scrollable

Horizontal scroll container

role=region

Panel 1

Scroll horizontally →

Panel 2

Panel 3

Keep scrolling

Panel 4

Keep going

Panel 5

Still there

Panel 6

Nearly done

Panel 7

Almost there

Panel 8

Last one!

[*]overflow-xauto · snap-type x mandatory
[*]cardmin-width 260px · snap-align start
[*]focusregion is tabbable

[ 10 ]

Feedback

Loading and status feedback run entirely on semantic colour: the four steps ok / warn / err / info appear only on the 2px rail, the icon and the text — never as a full fill.

rail 2px only
spinner 18px
progress 5px
badge 22px pill

Spinners & pulse

motion primitives

Spinner

Large

Pulse

Skeleton loading

Progress bars

role=progressbar

Uploading... 68%

Processing Indeterminate

[*] The track is a 5px pill; the determinate state writes aria-valuenow, the indeterminate state omits it and lets a 35%-wide highlight slide along the track.

Badges & tags

22 / 24px

Online Success Warning Error Beta Indigo Teal Outline Beta.fill

Astro TypeScript CSS Hairlines 8 hues

Alerts

left rail only

Information: A new update is available for your system.

Success: Your changes have been saved successfully.

Warning: Your storage is 85% full. Consider upgrading.

Error: Connection to the server was lost. Retrying...

Status indicator

live dot

System operational

Partial degradation

Build failed

[ 11 ]

Menus & toolbars

The toolbar is a row of equal-height 26px icon buttons that signal their pressed state through active and aria-pressed; dividers are just a 1px hairline, never a background block grouping.

toolbar-btn 26px
aria-pressed sync
divider 1px
icon-only → aria-label

Editor toolbar

aria-pressed

[*] Buttons are 26px tall with a 6px radius and 0 9px padding; the pressed state is written back to aria-pressed, so keyboard users and screen reader users see the same state.

[ 12 ]

Navigation

Breadcrumbs, tabs, pagination and the stepper all share one 1px baseline: the current item is marked by colour and a 2px underline, not by a background block. Tabs implement the full ARIA tabs pattern, navigable with the arrow keys and Home / End.

tablist + roving tabindex
arrow / home / end keys
page-btn 30px
step-dot 22px

Breadcrumbs

aria-current

Tabs

role=tablist

Cluster overview: 4 nodes online, average render latency 12 ms, 99.98% uptime over the last 30 days.

[*]tab padding9px 13px
[*]active rail2px · inset 9px · --hue
[*]roving tabindexselected = 0
[*]panel[hidden]display: none

Pagination

30 × 30

Stepper

22px dots

Details

Shipping

Payment

[*] The connector is not extra DOM — it is the ::before of each .step (top 11px, filling all the way to the right), so changing the number of steps needs no markup change.

[ 13 ]

Text, code & rich text

The monospace face is the system's second voice: code blocks, terminals, keycaps and spec lists all share the same 12px monospace scale. Long-form text borrows the same primitives but obeys reading rhythm rather than a layout grid.

code 13.5px mono
line numbers 34px
terminal #05070d
prose 16.5 / 1.85

Code block — HTML / CSS / TS

copy enabled

html usage.astro


      <!-- interactions are declared with data-strata-* attributes --><label class="input-label" for="email">Email</label><input class="input-field input-error" type="email" id="email"       name="email" value="invalid-email"       aria-invalid="true" aria-describedby="email-error" /><span class="input-error-text" id="email-error">  Please enter a valid email address</span> <button class="btn btn-primary" type="button"        data-strata-open="demoModal">Open modal</button> <button class="btn btn-outline" type="button"        data-strata-toast="Action completed successfully!">  Show toast</button>

css strata.css


      /* surface ramp - structure is carried by value + hairline */html.strata-root {  --base:        #060b14;  --surface-1:   #0b111f;  --surface-3:   #161f33;  --inset:       #04070f;  --line:        rgba(255,255,255,.09);  --line-strong: rgba(255,255,255,.17);  --accent:      #3b82f6;} /* hover swaps colour, never tweens it */.strata .btn { transition: transform var(--duration-fast) var(--ease); }.strata .btn-primary:hover { background: var(--accent-hi); }

ts bands.ts


      import type { BandTreatment, BandHue } from '../types/strata'; /** Adjacent bands never share a background - the runtime reuses this table. */const VALID_NEIGHBOURS: Record<BandTreatment, BandTreatment[]> = {  hero:   ['tinted', 'base', 'well', 'raised'],  grid:   ['tinted', 'base', 'well', 'raised'],  tinted: ['base', 'well', 'raised', 'inset'],  base:   ['well', 'raised', 'inset', 'tinted'],  well:   ['raised', 'inset', 'tinted', 'base'],  raised: ['inset', 'tinted', 'base', 'well'],  inset:  ['tinted', 'base', 'well', 'raised'],}; export function assertOrder(order: { hue: BandHue; treatment: BandTreatment }[]) {  for (let i = 1; i < order.length; i++) {    const prev = order[i - 1]!;    const next = order[i]!;    if (prev.treatment === next.treatment) {      throw new Error(next.treatment + ' touches ' + prev.treatment + ' at band ' + i);    }    if (!VALID_NEIGHBOURS[prev.treatment]!.includes(next.treatment)) {      throw new Error(next.treatment + ' is not a valid neighbour at band ' + i);    }  }  return true;}

[*] All three render through the code prop: automatic escaping, zero-padded line numbers, and a copy button in the top-right corner (it echoes back for 1.6s). The code block sits on --inset, the darkest surface on the page, defined by a border rather than a shadow.

Terminal

windowed

strata build

pnpm · zsh

strata — build — 96×24

$ strata build --out ./dist STRATA v1.0.0 · node v22.14.0 · astro 5.13.2 ✓ scan 42 pages, 118 components ✓ tokens 8 hues · 6 treatments · 5 surfaces ✓ bundle runtime.js 3.4 kB gzip 1.6 kB ✓ css strata.css 83.4 kB gzip 13.1 kB ! contrast 2 tokens below AA on --surface-2 → see https://strata.dev/docs/contrast ✓ build 42 pages in 3.41s 0 errors 0 fatal $

[*]pane header10px 16px · surface-2
[*]pane body.pane-bd--well → --inset
[*]terminal chrome3 lights 9px · centered title
[*]terminal body#05070d · mono 12px · lh 1.95
[*].pprompt → --accent-hi
[*].ccomment → #7b8698
[*].ok / .w / .e--ok / --warn / --err
[*]caret7 × 14 · 1.05s steps blink

Blockquote

2px hue rail

"Design is not just what it looks like and feels like. Design is how it works — especially at the edge of tomorrow."

Keyboard shortcuts & tags

KeyCap

Command palette⌘K

Close overlayESC

Palette selection↑↓

Press ⌘ + K to search

Article specimen

one .prose container

Rendering the layered surface

Every surface is composited from three parts: a flat background, a hairline border, and the text layer on top. The stacking order is what keeps text legible — ~~a single blurred backdrop~~ the surface ramp plus one 1px line does the heavy lifting.

Tuning the ramp

Start from --base #060b14 and step up through --surface-1 to --surface-3, then add --inset for anything that should read as a well. See Feedback for the status colours, or press ⌘ + K to search design tokens.

Hairline boundaries

A single 1px border at rgba(255,255,255,0.09) is enough to separate a panel from the deep background. Underlines stay reserved for inline annotations, never decoration.

Documents borrow the same primitives as UI but follow reading rhythm instead of layout grids — lists, quotes and figures slot straight into the flow:

Design tokens
- Surface ramp & hue tracks
- Spacing on a 4px scale
One border-radius vocabulary
Declarative interactions

Pick a band treatment (base → well)
Attach interactions with data-strata-* attributes
Override tokens at :root when branding changes

Open items can render as checkable tasks:

Contrast audit (AA)
Keyboard pass on dialogs
Reduced-motion fallback
RTL smoke test

"A hairline is not a decoration — it is the contract between background and foreground."
— Strata Design Notes, v1.0

Figure placeholder

Fig. 1 — Layer composite: base, surface-1, hairline border.

Comments Leave your thoughts

Build at the speed of light

Surface ramp

Six levels, side by side

Every treatment, nested in its own band

Eight hue tracks

Component inventory

Inputs

Text fields

Select dropdown

Checkboxes & radios

Toggle switches

Textarea

Data display

Data table

List group

Card grid

Quantum engine

Neural sync

Crystal vault

KPI row with sparklines

Quota meters

Date & time

Date & time pickers

Mini calendar

Overlays & Pop-ups

Modal & toast triggers

Dropdown menu

Empty state

No data sources yet

Layout

Sidebar & main content

Main content area

Skeleton loading

Media

Image & video frames

Scrolling

Horizontal scroll container

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 6

Panel 7

Panel 8

Feedback

Spinners & pulse

Progress bars

Badges & tags

Alerts

Status indicator

Menus & toolbars

Editor toolbar

Navigation

Breadcrumbs

Tabs

Pagination

Stepper

Text, code & rich text

Code block — HTML / CSS / TS

Terminal

strata build

Blockquote

Keyboard shortcuts & tags

Article specimen

Rendering the layered surface

Tuning the ramp

Hairline boundaries