void #03060c
--void — overlay backdrop
Main content area
This demonstrates the sidebar + main content layout pattern. The sidebar is sticky on larger screens and collapses on mobile.
◆ 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.
Uptime 99.9%
Components 140+
Gzipped CSS 13.1kb
Possibilities ∞
0
区块色相 · Hues
0
区块底色 · Treatments
0
表面层级 · Surfaces
0
演示分区 · Sections
[ 01 ]
Surface ramp
层级不是装饰，是结构。六级表面从最暗的 void 一路走到 surface-3，再外挂一个比页面更暗的 inset 凹槽层 —— 每一级只差一点明度，却足够让边界被读出来。
Six levels, side by side
static surfaces 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
[*] 面板映射：thin / medium → surface-1，heavy / elevated → surface-2。 边框与阴影从不同时出现在静态表面上 —— 两者同时存在，边界就糊了。
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
组件按职责分四层：承担表面的、承担结构的、承担交互的、承担反馈的。层的划分决定了它能不能被复用 —— 越靠上的层越少，越靠下的层越通用。
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
[*] 等宽标注层（.micro / .note / .fig）是这套系统的第二种声音： 它承担规格、编号与读数，所有会变动的数字都用 tabular-nums 对齐。
Band Panel CodeBlock Terminal Meter Empty Skeleton
[ 03 ]
Inputs
表单控件的第一原则是高度统一、焦点可见。所有控件都是 36px 高、10px 圆角、1px 发丝线边框，聚焦时换成主色边加 3px 柔光环。
Text fields
height 36 Must be 3–24 characters
Please enter a valid email address
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- [*]select height36px
- [*]padding-right32px (arrow)
- [*]disabledopacity .5
Checkboxes & radios
appearance: none- [*]box16 × 16 · radius 4
- [*]checkedaccent fill + ink tick
Toggle controlSpace
Move between rowsTab
Toggle switches
34 × 20 track[*] 轨道与滑块完全由 CSS 绘制（label 的 ::before / ::after），组件不引入额外 DOM。 轨道 34 × 20，滑块 14px、位移 14px，只有 transform 与 background 参与过渡。
Textarea
min-height 90 0 / 500 characters
[ 04 ]
Data display
表格、列表与卡片共享同一套发丝线语言：外框 1px，行与行之间只留更淡的 line-faint，不用斑马纹，也不用浮起卡片 —— 数据自己会形成节奏。
Data table
sortable aria-sort| 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 |
[*] 表头是等宽大写的 micro 字形；点击表头由 StrataRuntime 排序并写入 aria-sort， 排序后箭头旋转 180°。表头本身可 Tab 聚焦，Enter / Space 都能触发。
List group
hairline rows AC
Alice Chen
Online now
Admin Online now
BM
Bob Martinez
Away
Editor Away
CW
Carol Wu
Offline
Offline
Card grid
tagHueQuantum engine
NewHigh-performance rendering core with sub-millisecond latency.
v3.2.1
Neural sync
StableReal-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
[*] 轨道 5px、胶囊圆角、底色 surface-3；填充色取所在的区块色相 --hue， 所以同一套 Meter 在不同分区里会自动换色。
[ 05 ]
Date & time
原生日期控件保留浏览器自带的弹层，只统一高度、内边距与文字颜色；日历是唯一手写的网格，单元格用 10px 等宽数字对齐。
Date & time pickers
native inputMini 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 (selected) 16 17 18 19 20 21 22 23 24 25 26 27 28 (today) 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
浮层是全场唯一允许出现投影的地方 —— 静态表面靠边框，真正浮起来的层才用阴影把体积说清楚。全部由 data-strata-* 属性驱动，页面不写一行 JS。
Modal & toast triggers
data-strata-open Hover or focus for a tooltip This is a helpful tooltip message!
Close overlayESC
Cycle inside dialogTAB
- [*]overlayvoid 74% + blur 3px
- [*]dialogmin(460px, 100%) · radius 18
- [*]tooltipink on --text-hi · radius 6
Dropdown menu
role=menu[*] 菜单 208px 起宽、radius 14、surface-2 底加 line-strong 边与 --shadow-pop； 点击空白处或按 Esc 收起，并把焦点还给触发器。
Empty state
EmptyNo data sources yet
Connect a Postgres instance and Strata will chart it automatically.
[ 07 ]
Layout
侧栏加主内容是最常用的页面骨架：侧栏在宽屏吸附、窄屏落回文档流，折叠按钮由运行时注入，折叠态只留两位等宽序号。
Sidebar & main content
layout-sidebarSkeleton loading
shimmer 1.5scard variant
title + text
[*] 行高 9px、标题 13px 且宽 42%、圆角 4px，底 surface-3，扫光用 line-faint 渐变。 骨架屏整体 aria-hidden，另配 sr-only 说明，屏幕阅读器不会读出空洞内容。
[ 08 ]
Media
媒体框是 16:9 容器加一层薄渐变底，播放键是这里唯一的圆形浮起元素。轮播点用 active 状态与 aria-current 同步，键盘可达。
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
横向滚动容器把内容藏进一个可聚焦的 region：拿到焦点后方向键即可滚动，滚动条本身也属于发丝线语言。
Horizontal scroll container
role=regionPanel 1
Scroll horizontally →
Panel 2
More content
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
加载与状态反馈全部走语义色：ok / warn / err / info 四档只出现在 2px 导轨、图标与文字上，绝不整块填充。
Spinners & pulse
motion primitives Spinner
Large
Pulse
Skeleton loading Loading preview content
Progress bars
role=progressbar Uploading... 68%
Processing Indeterminate
[*] 轨道 5px 胶囊；确定态写入 aria-valuenow，不确定态省略该属性， 让 35% 宽的高亮条在轨道内平移。
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
工具栏是一排等高的 26px 图标按钮，用 active 与 aria-pressed 表示按下态，分隔线只是 1px 发丝线，不使用背景块分组。
Editor toolbar
aria-pressed[*] 按钮高度 26px、圆角 6px、内边距 0 9px；按下态写回 aria-pressed， 键盘用户与读屏用户看到的是同一个状态。
[ 13 ]
Text, code & rich text
等宽字形是这套系统的第二种声音：代码块、终端、键帽与规格清单共享同一个 12px 等宽尺度。长文则共用同一套原语，但服从阅读节奏而不是布局网格。
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;}
[*] 三例都走 code 属性渲染：自动转义、补零行号、右上角复制按钮（复制后回显 1.6s）。 代码块底是全场最暗的 --inset，用边框界定体积，不加投影。
Terminal
windowedstrata 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
KeyCapCommand palette⌘K
Close overlayESC
Palette selection↑↓
Press ⌘ + K to search Article specimen
one .prose containerRendering 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:
"A hairline is not a decoration — it is the contract between background and foreground."
Figure placeholder
评论区 留下您的想法
令牌