跳到正文
AstraFoundry

颜色

纸上的暖色墨水，加上唯一的黄色。所有取值都是 Token，明暗模式只在 Token 层有差异。

色阶

黄色有四阶，暖色墨水有十阶，色相都在 22–48 之间。点击色块即可复制变量。

黄色

暖色墨水

表面与文字

组件只使用这些语义名称，不直接使用色阶。

  • 页面：暖色纸面，深色模式下为暖色近黑。

  • 正文与标题。

  • 实色表面：面板、窗口和模拟产品界面。

  • 凹槽、悬停填充和行内代码。

  • 导语、说明和次要标签。

  • 单元格之间和卡片周围的细线。

品牌

每屏只出现一次黄色：主操作、焦点环，或场景的结果。

  • 唯一的主操作。

  • 主操作上的文字。

  • 选中或高亮行的浅黄色底。

  • 浅黄色底上的文字。

  • 键盘焦点环。

状态

只用于真实的结果，并且总是配合图标或文字。

  • 已完成、已保存、已连接。

  • 破坏性操作和错误。

  • 中性提示及提示中的链接。

底层

演示和代码背后始终为深色的后台表面。它在两种模式下都保持深色，其中的 tint Token 用于照片上的标签。

规则

  1. 1使用语义工具类：bg-background、text-muted-foreground、border-border。
  2. 2组件中不写物理颜色：不用 #fff、zinc-500、bg-white。
  3. 3组件中不写 dark: 分支。深色模式由 .dark 类和 Token 层负责。
  4. 4阴影偏暖、两层，以 ink-900 为基准。不用中性黑，也不用彩色。
  5. 5不用渐变文字、渐变描边或大面积色彩晕染。