LOCAL DEMO
NW

THE DESIGN OF FOCUS / 01

让界面,拥有触感。

一套刻痕微立体设计系统。精细的材质、安静的层次,以及恰到好处的暖橙 —— 光线恒定来自顶部:凸起上缘明亮,凹槽顶部阴影更深。

v1.0 · MATTE EDITION
CARVED. TACTILE. INTENTIONAL.

藏在暗处的细节,
浮于表面的秩序。

磨砂表面承载内容,内凹刻痕划分结构。让每一次点击,都有清晰而克制的反馈。

10 COMPONENTS·4 PAGES·ZERO DEPENDENCIES

层次来自材质

01 / MATERIAL

背景、表面、凹槽、浮起。四个明度层级,配合上下相反的光影,构建清晰的空间关系。

了解材质规范

状态始终清晰

02 / STATUS

任务、进度与日志相互联动。橙色表示进行,低饱和语义色帮助区分成功、等待与异常。

阅读示例文章

拿来就能构建

03 / BUILD

统一的 CSS 令牌、语义化 HTML 与原生交互。复制组件示例,即可开始组织自己的页面。

认识博主

四种材质

04 / SURFACE ENGINEERING
01 · 浅凹槽 输入、选择与次级操作 box-shadow: var(--carve)
02 · 微凸表面 按钮、徽章与激活状态 box-shadow: var(--raise)
03 · 深雕面板 日志、代码与运行上下文 box-shadow: var(--deep)
已处理邮件
1,284
↗ 12.4% 较上期
平均处理耗时
1.2s
↘ 8.1% 较上期
任务成功率
98.7%
↗ 0.6% 较上期
待复核任务
02
需要你的关注