◆ Strata · Layered Design System

欢迎来到
NW' 数字空间

分层表面 · 发丝线 · 蓝色主色

一个由 Strata 驱动的博客界面 —— 用五级表面阶梯和八条色相轨道，让每一块内容都有自己的位置。

浏览组件库关于我 GitHub

0

分区色相轨道 · Hues

0

分区底色 · Band treatments

0

表面层级 · Surface ramp

0kb

运行时 CSS · gzip

[ 01 ]

为什么是 Strata

扁平化最大的问题不是「简单」，而是所有区块长得一样。Strata 用表面阶梯 + 色相轨道把层级重新做成可见信息。

semantic tokens only
hairline structure
no colour transitions
concentric radii

Surface

五级表面阶梯

从 void 到 surface-3，再外挂一个比页面更暗的 inset 凹槽层。明暗本身就是结构，一改全改。

Runtime

属性驱动 · 零配置交互

Modal、Toast、Dropdown、命令面板全部由 data-strata-* 属性驱动，单一运行时事件委托，页面不写一行 JS。

Astro

静态构建 · 开箱即快

零客户端框架开销；CSS 变量驱动主题， ⌘K 打开页内命令面板，在明暗之间自由穿梭。

css strata.css


      /* 表面阶梯 —— 结构由明暗承担 */--base:      #060b14;--surface-1: #0b111f;--surface-3: #161f33;--inset:     #04070f; /* 主色（蓝）与 8 条区块色相 */--accent:    #3b82f6;--h-cyan:    #22d3ee;--h-purple:  #a855f7; /* 发丝线三档 —— 边框承担全部结构 */--line:        rgba(255,255,255,.09);--line-strong: rgba(255,255,255,.17);

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

[ 02 ]

开始探索

组件库是这套语言最完整的样本：每个组件都带等宽规格注记与真实交互。

12 sections
live interactions
copy-ready markup

30+ 组件

组件库

按钮、表单、数据表、浮层、终端、反馈态 —— 全部可交互，附规格注记。

进入 Demo ▸

关于

关于博主

三角猫▲水平的软硬全栈，一个持续折腾技术与设计边界的普通人。

认识一下 ▸

文章

文章归档

项目实战、数据可视化、ASCII 播放器 —— 把踩过的坑变成可复用的经验。

阅读文章 ▸

[ 03 ]

设计理念

克制的极简和「没有区分度」只差一步。Strata 的答案是：把层级做成可读的信息，而不是靠装饰去补。

isolation
reuse
evolution

隔离复用进化

让组件成为活的文档

Strata 的一切都建立在可读、可改、可组合的 CSS 变量之上：不追求炫技，只追求「每一个元素都值得被观察」。

“扁平不是把层次删掉，而是把层次画得更准确。发丝线就够了，不必再加一道阴影。”
—— NW，2026 于 Strata v1.0

区块色相轨道

8 hues

01 基础

02 主色

03 表单

04 理念

05 数据

06 状态

07 警示

08 媒体

[*] 每个色相只出现在它的分区里：序号徽标、顶部发丝线、底色柔和染色。跨区不串色，所以每个区块都自带归属感。

保持联系

如果你也对技术、设计与「不务正业的实验」感兴趣，欢迎在任何平台找到我。

Powered by Strata · Astro · FontAwesome

欢迎来到 NW' 数字空间