s3://rustfs-brand/tokens/Resources · Design tokens

Design Tokens设计令牌

品牌在代码中的唯一来源，生成 Tailwind v4 主题与 CSS 变量。
格式 W3C DTCG输出 Tailwind v4 · CSS语义命名 shadcn/ui

Files文件

内容一致，按需选用。

tokens.json唯一来源（DTCG）tailwind.cssTailwind v4 主题tokens.cssCSS 变量

Tiers三层结构

组件只引用语义层。

01 · Primitive原始层--color-blue-500: #0062FF原始值
02 · Semantic语义层--primary: var(--color-blue-500)按用途命名，分深浅
03 · Component组件层bg-primary text-primary-foreground通过工具类使用

Usage接入方式

Tailwind v4 项目（含 shadcn/ui）
/* app/globals.css */
@import "tailwindcss";
@import "./rustfs-tokens.css"; /* tokens/tailwind.css */

/* Remove the project's own :root / .dark colour variables:
   the file defines --background, --primary, --ring … */
字体（Next.js）
import { Archivo, Geist, Geist_Mono } from "next/font/google"

const archivo = Archivo({ subsets: ["latin"], axes: ["wdth"], variable: "--font-archivo" })
const geistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" })
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })

<html className={`${archivo.variable} ${geistSans.variable} ${geistMono.variable}`}>
组件中使用
<button className="bg-primary text-primary-foreground hover:bg-blue-600">
  Download RustFS
</button>

<h1 className="type-display-lg">AI infrastructure, accounted for byte by byte.</h1>
<span className="type-label-md text-muted-foreground">Release · 2026-10</span>
<div className="border border-border bg-surface text-subtle" />
纯 CSS
@import url("tokens.css");

.button {
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
引入后 blue 与 neutral 色阶被替换，所有圆角为 0。

Semantic colours语义色全表

shadcn/ui 全部角色，加 RustFS 扩展。

Token浅色深色Tailwind
--background#FFFFFF#0B0E14bg-background
--foreground#0B0E14#F4F6F9text-foreground
--card#FFFFFF#13171Ebg-card
--card-foreground#0B0E14#F4F6F9text-card-foreground
--popover#FFFFFF#13171Ebg-popover
--popover-foreground#0B0E14#F4F6F9text-popover-foreground
--primary#0062FF#0062FFbg-primary
--primary-foreground#FFFFFF#FFFFFFtext-primary-foreground
--secondary#EAEDF2#1E232Bbg-secondary
--secondary-foreground#0B0E14#F4F6F9text-secondary-foreground
--muted#F4F6F9#13171Ebg-muted
--muted-foreground#5A616D#9AA0ACtext-muted-foreground
--accent#EAEDF2#1E232Bbg-accent
--accent-foreground#0B0E14#F4F6F9text-accent-foreground
--destructive#C51B32#FF6B78bg-destructive
--destructive-foreground#FFFFFF#0B0E14text-destructive-foreground
--border#DCE0E6#2B313Aborder-border
--input#C4C9D2#424853border-input
--ring#0062FF#5C99FFring-ring
--chart-1#0062FF#0062FFbg-chart-1
--chart-2#FF5E14#FF5E14bg-chart-2
--chart-3#00AEAE#00AEAEbg-chart-3
--chart-4#7D5BE6#7D5BE6bg-chart-4
--chart-5#F7AE0C#F7AE0Cbg-chart-5
--sidebar#FFFFFF#0B0E14bg-sidebar
--sidebar-foreground#0B0E14#F4F6F9text-sidebar-foreground
--sidebar-primary#0062FF#0062FFbg-sidebar-primary
--sidebar-primary-foreground#FFFFFF#FFFFFFtext-sidebar-primary-foreground
--sidebar-accent#F4F6F9#13171Ebg-sidebar-accent
--sidebar-accent-foreground#0B0E14#F4F6F9text-sidebar-accent-foreground
--sidebar-border#DCE0E6#2B313Aborder-sidebar-border
--sidebar-ring#0062FF#5C99FFring-sidebar-ring
--brand#0062FF#0062FFbg-brand
--brand-foreground#FFFFFF#FFFFFFtext-brand-foreground
--link#014FDD#5C99FFtext-link
--parity#FF5E14#FF5E14bg-parity
--parity-foreground#0B0E14#0B0E14text-parity-foreground
--parity-text#B33A10#FE8F5Dtext-parity-text
--subtle#424853#C4C9D2text-subtle
--faint#757C88#757C88text-faint
--strong#C4C9D2#424853border-strong
--surface#F4F6F9#13171Ebg-surface
--surface-2#EAEDF2#1E232Bbg-surface-2
--success#037E3F#02A855text-success
--warning#A06604#F7AE0Ctext-warning
--danger#C51B32#FF6B78text-danger
--info#014FDD#5C99FFtext-info
--stage#0B0E14#06070Bbg-stage
--stage-foreground#FFFFFF#FFFFFFtext-stage-foreground
--selection#E0ECFE#0062FF59selection:bg-selection

Typography字体样式

工具类字号行高字重字距 · 宽度
type-display-2xl128px0.92800-0.03em · 125%
type-display-xl96px0.94800-0.025em · 125%
type-display-lg72px0.96800-0.02em · 125%
type-display-md56px1800-0.02em · 125%
type-headline-lg40px1.08750-0.01em · 112%
type-headline-md30px1.15700-0.01em · 112%
type-headline-sm22px1.3600-0.005em
type-title18px1.46000em
type-body-lg18px1.74000em
type-body-md16px1.74000em
type-body-sm14px1.64000em
type-caption12px1.54000em
type-label-md12px1.35000.08em
type-label-sm11px1.35000.08em
type-code14px1.654000em
type-numeral48px1800-0.02em · 125%

Space · motion间距、圆角与动效

间距（4px 基数）

14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
32128px

圆角与动效

Token取值
--radius-*0px
--radius-full9999px（仅平台头像裁切）
--ease-standardcubic-bezier(0.2, 0, 0, 1)
--ease-emphasizedcubic-bezier(0.16, 1, 0.3, 1)
--ease-exitcubic-bezier(0.4, 0, 1, 1)
--duration-instant80ms
--duration-fast150ms
--duration-base240ms
--duration-slow420ms
--duration-scene720ms
--duration-stagger40ms
--shadow-overlay0 24px 48px -16px #0B0E1447

Source源文件

当前版本。

tokens/tailwind.css
/* RustFS Design System tokens · generated from tokens/tokens.json by scripts/build-tokens.mjs. Do not edit by hand. */
/* Usage in a Tailwind v4 project:  @import "tailwindcss";  @import "./tailwind.css"; */

@custom-variant dark (&:is(.dark *));

@theme static {
  --color-blue-50: #F1F6FE;
  --color-blue-100: #E0ECFE;
  --color-blue-200: #C3DBFE;
  --color-blue-300: #96BFFF;
  --color-blue-400: #5C99FF;
  --color-blue-500: #0062FF;
  --color-blue-600: #014FDD;
  --color-blue-700: #043EB5;
  --color-blue-800: #062F8C;
  --color-blue-900: #072163;
  --color-blue-950: #051540;
  --color-oxide-50: #FEF5EE;
  --color-oxide-100: #FFE8D9;
  --color-oxide-200: #FFD2B7;
  --color-oxide-300: #FEB38D;
  --color-oxide-400: #FE8F5D;
  --color-oxide-500: #FF5E14;
  --color-oxide-600: #D9480F;
  --color-oxide-700: #B33A10;
  --color-oxide-800: #8D2E12;
  --color-oxide-900: #692311;
  --color-oxide-950: #47180D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-25: #FAFBFD;
  --color-neutral-50: #F4F6F9;
  --color-neutral-100: #EAEDF2;
  --color-neutral-200: #DCE0E6;
  --color-neutral-300: #C4C9D2;
  --color-neutral-400: #9AA0AC;
  --color-neutral-500: #757C88;
  --color-neutral-600: #5A616D;
  --color-neutral-700: #424853;
  --color-neutral-800: #2B313A;
  --color-neutral-850: #1E232B;
  --color-neutral-900: #13171E;
  --color-neutral-950: #0B0E14;
  --color-neutral-1000: #06070B;
  --color-green-500: #02A855;
  --color-green-700: #037E3F;
  --color-amber-500: #F7AE0C;
  --color-amber-700: #A06604;
  --color-red-400: #FF6B78;
  --color-red-500: #E42E41;
  --color-red-700: #C51B32;
  --color-teal-500: #00AEAE;
  --color-violet-500: #7D5BE6;
  --color-sky-500: #61C3F9;
  --color-signal: #0062FF;
  --color-oxide: #FF5E14;
  --color-ink: #0B0E14;
  --color-steel: #757C88;
  --color-paper: #F4F6F9;
  --color-dataviz-1: #0062FF;
  --color-dataviz-2: #FF5E14;
  --color-dataviz-3: #00AEAE;
  --color-dataviz-4: #7D5BE6;
  --color-dataviz-5: #F7AE0C;
  --color-dataviz-6: #61C3F9;
  --color-dataviz-7: #02A855;
  --color-dataviz-8: #9AA0AC;
  --color-syntax-background: #0B0E14;
  --color-syntax-foreground: #EAEDF2;
  --color-syntax-comment: #757C88;
  --color-syntax-punctuation: #9AA0AC;
  --color-syntax-keyword: #5C99FF;
  --color-syntax-function: #96BFFF;
  --color-syntax-property: #C3DBFE;
  --color-syntax-string: #6BDFCA;
  --color-syntax-number: #FE8F5D;

  --font-display: var(--font-archivo, "Archivo"), "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-sans: var(--font-geist-sans, "Geist"), "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: var(--font-geist-mono, "Geist Mono"), "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;

  --text-display-2xl: 128px;
  --text-display-2xl--line-height: 0.92;
  --text-display-2xl--letter-spacing: -0.03em;
  --text-display-2xl--font-weight: 800;
  --text-display-xl: 96px;
  --text-display-xl--line-height: 0.94;
  --text-display-xl--letter-spacing: -0.025em;
  --text-display-xl--font-weight: 800;
  --text-display-lg: 72px;
  --text-display-lg--line-height: 0.96;
  --text-display-lg--letter-spacing: -0.02em;
  --text-display-lg--font-weight: 800;
  --text-display-md: 56px;
  --text-display-md--line-height: 1;
  --text-display-md--letter-spacing: -0.02em;
  --text-display-md--font-weight: 800;
  --text-headline-lg: 40px;
  --text-headline-lg--line-height: 1.08;
  --text-headline-lg--letter-spacing: -0.01em;
  --text-headline-lg--font-weight: 750;
  --text-headline-md: 30px;
  --text-headline-md--line-height: 1.15;
  --text-headline-md--letter-spacing: -0.01em;
  --text-headline-md--font-weight: 700;
  --text-headline-sm: 22px;
  --text-headline-sm--line-height: 1.3;
  --text-headline-sm--letter-spacing: -0.005em;
  --text-headline-sm--font-weight: 600;
  --text-title: 18px;
  --text-title--line-height: 1.4;
  --text-title--letter-spacing: 0em;
  --text-title--font-weight: 600;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.7;
  --text-body-lg--letter-spacing: 0em;
  --text-body-lg--font-weight: 400;
  --text-body-md: 16px;
  --text-body-md--line-height: 1.7;
  --text-body-md--letter-spacing: 0em;
  --text-body-md--font-weight: 400;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.6;
  --text-body-sm--letter-spacing: 0em;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.5;
  --text-caption--letter-spacing: 0em;
  --text-caption--font-weight: 400;
  --text-label-md: 12px;
  --text-label-md--line-height: 1.3;
  --text-label-md--letter-spacing: 0.08em;
  --text-label-md--font-weight: 500;
  --text-label-sm: 11px;
  --text-label-sm--line-height: 1.3;
  --text-label-sm--letter-spacing: 0.08em;
  --text-label-sm--font-weight: 500;
  --text-code: 14px;
  --text-code--line-height: 1.65;
  --text-code--letter-spacing: 0em;
  --text-code--font-weight: 400;
  --text-numeral: 48px;
  --text-numeral--line-height: 1;
  --text-numeral--letter-spacing: -0.02em;
  --text-numeral--font-weight: 800;

  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
  --radius-4xl: 0px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --shadow-overlay: 0px 24px 48px -16px #0B0E1447;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-link: var(--link);
  --color-parity: var(--parity);
  --color-parity-foreground: var(--parity-foreground);
  --color-parity-text: var(--parity-text);
  --color-subtle: var(--subtle);
  --color-faint: var(--faint);
  --color-strong: var(--strong);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--info);
  --color-stage: var(--stage);
  --color-stage-foreground: var(--stage-foreground);
  --color-selection: var(--selection);
}

:root {
  --radius: 0rem;
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-scene: 720ms;
  --duration-stagger: 40ms;
  --background: var(--color-neutral-0);
  --foreground: var(--color-neutral-950);
  --card: var(--color-neutral-0);
  --card-foreground: var(--color-neutral-950);
  --popover: var(--color-neutral-0);
  --popover-foreground: var(--color-neutral-950);
  --primary: var(--color-blue-500);
  --primary-foreground: var(--color-neutral-0);
  --secondary: var(--color-neutral-100);
  --secondary-foreground: var(--color-neutral-950);
  --muted: var(--color-neutral-50);
  --muted-foreground: var(--color-neutral-600);
  --accent: var(--color-neutral-100);
  --accent-foreground: var(--color-neutral-950);
  --destructive: var(--color-red-700);
  --destructive-foreground: var(--color-neutral-0);
  --border: var(--color-neutral-200);
  --input: var(--color-neutral-300);
  --ring: var(--color-blue-500);
  --chart-1: #0062FF;
  --chart-2: #FF5E14;
  --chart-3: #00AEAE;
  --chart-4: #7D5BE6;
  --chart-5: #F7AE0C;
  --sidebar: var(--color-neutral-0);
  --sidebar-foreground: var(--color-neutral-950);
  --sidebar-primary: var(--color-blue-500);
  --sidebar-primary-foreground: var(--color-neutral-0);
  --sidebar-accent: var(--color-neutral-50);
  --sidebar-accent-foreground: var(--color-neutral-950);
  --sidebar-border: var(--color-neutral-200);
  --sidebar-ring: var(--color-blue-500);
  --brand: var(--color-blue-500);
  --brand-foreground: var(--color-neutral-0);
  --link: var(--color-blue-600);
  --parity: var(--color-oxide-500);
  --parity-foreground: var(--color-neutral-950);
  --parity-text: var(--color-oxide-700);
  --subtle: var(--color-neutral-700);
  --faint: var(--color-neutral-500);
  --strong: var(--color-neutral-300);
  --surface: var(--color-neutral-50);
  --surface-2: var(--color-neutral-100);
  --success: var(--color-green-700);
  --warning: var(--color-amber-700);
  --danger: var(--color-red-700);
  --info: var(--color-blue-600);
  --stage: var(--color-neutral-950);
  --stage-foreground: var(--color-neutral-0);
  --selection: var(--color-blue-100);
}

.dark {
  --background: var(--color-neutral-950);
  --foreground: var(--color-neutral-50);
  --card: var(--color-neutral-900);
  --card-foreground: var(--color-neutral-50);
  --popover: var(--color-neutral-900);
  --popover-foreground: var(--color-neutral-50);
  --primary: var(--color-blue-500);
  --primary-foreground: var(--color-neutral-0);
  --secondary: var(--color-neutral-850);
  --secondary-foreground: var(--color-neutral-50);
  --muted: var(--color-neutral-900);
  --muted-foreground: var(--color-neutral-400);
  --accent: var(--color-neutral-850);
  --accent-foreground: var(--color-neutral-50);
  --destructive: var(--color-red-400);
  --destructive-foreground: var(--color-neutral-950);
  --border: var(--color-neutral-800);
  --input: var(--color-neutral-700);
  --ring: var(--color-blue-400);
  --chart-1: #0062FF;
  --chart-2: #FF5E14;
  --chart-3: #00AEAE;
  --chart-4: #7D5BE6;
  --chart-5: #F7AE0C;
  --sidebar: var(--color-neutral-950);
  --sidebar-foreground: var(--color-neutral-50);
  --sidebar-primary: var(--color-blue-500);
  --sidebar-primary-foreground: var(--color-neutral-0);
  --sidebar-accent: var(--color-neutral-900);
  --sidebar-accent-foreground: var(--color-neutral-50);
  --sidebar-border: var(--color-neutral-800);
  --sidebar-ring: var(--color-blue-400);
  --brand: var(--color-blue-500);
  --brand-foreground: var(--color-neutral-0);
  --link: var(--color-blue-400);
  --parity: var(--color-oxide-500);
  --parity-foreground: var(--color-neutral-950);
  --parity-text: var(--color-oxide-400);
  --subtle: var(--color-neutral-300);
  --faint: var(--color-neutral-500);
  --strong: var(--color-neutral-700);
  --surface: var(--color-neutral-900);
  --surface-2: var(--color-neutral-850);
  --success: var(--color-green-500);
  --warning: var(--color-amber-500);
  --danger: var(--color-red-400);
  --info: var(--color-blue-400);
  --stage: var(--color-neutral-1000);
  --stage-foreground: var(--color-neutral-0);
  --selection: #0062FF59;
}

@utility type-display-2xl {
  font-family: var(--font-display);
  font-size: var(--text-display-2xl);
  line-height: var(--text-display-2xl--line-height);
  letter-spacing: var(--text-display-2xl--letter-spacing);
  font-weight: var(--text-display-2xl--font-weight);
  font-stretch: 125%;
}
@utility type-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--text-display-xl--line-height);
  letter-spacing: var(--text-display-xl--letter-spacing);
  font-weight: var(--text-display-xl--font-weight);
  font-stretch: 125%;
}
@utility type-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg--line-height);
  letter-spacing: var(--text-display-lg--letter-spacing);
  font-weight: var(--text-display-lg--font-weight);
  font-stretch: 125%;
}
@utility type-display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--text-display-md--line-height);
  letter-spacing: var(--text-display-md--letter-spacing);
  font-weight: var(--text-display-md--font-weight);
  font-stretch: 125%;
}
@utility type-headline-lg {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  line-height: var(--text-headline-lg--line-height);
  letter-spacing: var(--text-headline-lg--letter-spacing);
  font-weight: var(--text-headline-lg--font-weight);
  font-stretch: 112%;
}
@utility type-headline-md {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md--line-height);
  letter-spacing: var(--text-headline-md--letter-spacing);
  font-weight: var(--text-headline-md--font-weight);
  font-stretch: 112%;
}
@utility type-headline-sm {
  font-family: var(--font-sans);
  font-size: var(--text-headline-sm);
  line-height: var(--text-headline-sm--line-height);
  letter-spacing: var(--text-headline-sm--letter-spacing);
  font-weight: var(--text-headline-sm--font-weight);
}
@utility type-title {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--text-title--font-weight);
}
@utility type-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  letter-spacing: var(--text-body-lg--letter-spacing);
  font-weight: var(--text-body-lg--font-weight);
}
@utility type-body-md {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md--line-height);
  letter-spacing: var(--text-body-md--letter-spacing);
  font-weight: var(--text-body-md--font-weight);
}
@utility type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  letter-spacing: var(--text-body-sm--letter-spacing);
  font-weight: var(--text-body-sm--font-weight);
}
@utility type-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  font-weight: var(--text-caption--font-weight);
}
@utility type-label-md {
  font-family: var(--font-mono);
  font-size: var(--text-label-md);
  line-height: var(--text-label-md--line-height);
  letter-spacing: var(--text-label-md--letter-spacing);
  font-weight: var(--text-label-md--font-weight);
  text-transform: uppercase;
}
@utility type-label-sm {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  line-height: var(--text-label-sm--line-height);
  letter-spacing: var(--text-label-sm--letter-spacing);
  font-weight: var(--text-label-sm--font-weight);
  text-transform: uppercase;
}
@utility type-code {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: var(--text-code--line-height);
  letter-spacing: var(--text-code--letter-spacing);
  font-weight: var(--text-code--font-weight);
}
@utility type-numeral {
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  line-height: var(--text-numeral--line-height);
  letter-spacing: var(--text-numeral--letter-spacing);
  font-weight: var(--text-numeral--font-weight);
  font-stretch: 125%;
  font-feature-settings: "tnum" 1;
}
tokens/tokens.json
{
  "$description": "RustFS Design System tokens · v1.0 · 2026-10-14. Source of truth. Format: W3C Design Tokens Community Group (string values, Style Dictionary / Tokens Studio compatible). Run `pnpm tokens` to regenerate tokens.css, tailwind.css and lib/tokens.ts.",
  "color": {
    "blue": {
      "$type": "color",
      "50": {
        "$value": "#F1F6FE"
      },
      "100": {
        "$value": "#E0ECFE"
      },
      "200": {
        "$value": "#C3DBFE"
      },
      "300": {
        "$value": "#96BFFF"
      },
      "400": {
        "$value": "#5C99FF",
        "$description": "Brand text and links on dark surfaces (6.85:1 on Ink)."
      },
      "500": {
        "$value": "#0062FF",
        "$description": "Signal Blue. The logo colour; never shift it."
      },
      "600": {
        "$value": "#014FDD",
        "$description": "Links and small brand text on white (6.64:1)."
      },
      "700": {
        "$value": "#043EB5"
      },
      "800": {
        "$value": "#062F8C"
      },
      "900": {
        "$value": "#072163"
      },
      "950": {
        "$value": "#051540"
      }
    },
    "oxide": {
      "$type": "color",
      "50": {
        "$value": "#FEF5EE"
      },
      "100": {
        "$value": "#FFE8D9"
      },
      "200": {
        "$value": "#FFD2B7"
      },
      "300": {
        "$value": "#FEB38D"
      },
      "400": {
        "$value": "#FE8F5D"
      },
      "500": {
        "$value": "#FF5E14",
        "$description": "Oxide. Parity colour and the single focal accent; about 10% of any layout."
      },
      "600": {
        "$value": "#D9480F"
      },
      "700": {
        "$value": "#B33A10",
        "$description": "Oxide text on light surfaces (5.95:1 on white)."
      },
      "800": {
        "$value": "#8D2E12"
      },
      "900": {
        "$value": "#692311"
      },
      "950": {
        "$value": "#47180D"
      }
    },
    "neutral": {
      "$type": "color",
      "0": {
        "$value": "#FFFFFF"
      },
      "25": {
        "$value": "#FAFBFD"
      },
      "50": {
        "$value": "#F4F6F9",
        "$description": "Paper. Light alternate surface."
      },
      "100": {
        "$value": "#EAEDF2"
      },
      "200": {
        "$value": "#DCE0E6"
      },
      "300": {
        "$value": "#C4C9D2"
      },
      "400": {
        "$value": "#9AA0AC"
      },
      "500": {
        "$value": "#757C88",
        "$description": "Steel. Hairlines and non-essential labels only (4.2:1 on white)."
      },
      "600": {
        "$value": "#5A616D"
      },
      "700": {
        "$value": "#424853"
      },
      "800": {
        "$value": "#2B313A"
      },
      "850": {
        "$value": "#1E232B"
      },
      "900": {
        "$value": "#13171E"
      },
      "950": {
        "$value": "#0B0E14",
        "$description": "Ink. Primary dark surface and text colour."
      },
      "1000": {
        "$value": "#06070B"
      }
    },
    "green": {
      "$type": "color",
      "500": {
        "$value": "#02A855",
        "$description": "Online / healthy on dark surfaces."
      },
      "700": {
        "$value": "#037E3F",
        "$description": "Online / healthy text on light surfaces."
      }
    },
    "amber": {
      "$type": "color",
      "500": {
        "$value": "#F7AE0C",
        "$description": "Degraded on dark surfaces."
      },
      "700": {
        "$value": "#A06604",
        "$description": "Degraded text on light surfaces."
      }
    },
    "red": {
      "$type": "color",
      "400": {
        "$value": "#FF6B78",
        "$description": "Offline / error text on dark surfaces."
      },
      "500": {
        "$value": "#E42E41",
        "$description": "Offline / error fills."
      },
      "700": {
        "$value": "#C51B32",
        "$description": "Offline / error text on light surfaces."
      }
    },
    "teal": {
      "$type": "color",
      "500": {
        "$value": "#00AEAE"
      }
    },
    "violet": {
      "$type": "color",
      "500": {
        "$value": "#7D5BE6"
      }
    },
    "sky": {
      "$type": "color",
      "500": {
        "$value": "#61C3F9"
      }
    },
    "brand": {
      "$type": "color",
      "signal": {
        "$value": "{color.blue.500}",
        "$description": "Primary brand colour."
      },
      "oxide": {
        "$value": "{color.oxide.500}",
        "$description": "Parity / accent."
      },
      "ink": {
        "$value": "{color.neutral.950}",
        "$description": "Dark surface."
      },
      "steel": {
        "$value": "{color.neutral.500}",
        "$description": "Neutral mid-tone."
      },
      "paper": {
        "$value": "{color.neutral.50}",
        "$description": "Light surface."
      }
    },
    "dataviz": {
      "$type": "color",
      "$description": "Categorical order. RustFS is always series 1.",
      "1": {
        "$value": "{color.blue.500}"
      },
      "2": {
        "$value": "{color.oxide.500}"
      },
      "3": {
        "$value": "{color.teal.500}"
      },
      "4": {
        "$value": "{color.violet.500}"
      },
      "5": {
        "$value": "{color.amber.500}"
      },
      "6": {
        "$value": "{color.sky.500}"
      },
      "7": {
        "$value": "{color.green.500}"
      },
      "8": {
        "$value": "{color.neutral.400}"
      }
    },
    "syntax": {
      "$type": "color",
      "$description": "Code highlighting. Code is always set on Ink in both themes; every role reaches at least 4.5:1 on Ink.",
      "background": {
        "$value": "{color.neutral.950}",
        "$description": "Code surface (Ink)."
      },
      "foreground": {
        "$value": "{color.neutral.100}",
        "$description": "Plain code and identifiers."
      },
      "comment": {
        "$value": "{color.neutral.500}",
        "$description": "Comments (4.6:1)."
      },
      "punctuation": {
        "$value": "{color.neutral.400}",
        "$description": "Punctuation and operators."
      },
      "keyword": {
        "$value": "{color.blue.400}",
        "$description": "Keywords, tags, shell commands."
      },
      "function": {
        "$value": "{color.blue.300}",
        "$description": "Functions, types, components, CSS selectors."
      },
      "property": {
        "$value": "{color.blue.200}",
        "$description": "Properties, attributes, keys, flags."
      },
      "string": {
        "$value": "#6BDFCA",
        "$description": "Strings and values; a light teal from data colour 3."
      },
      "number": {
        "$value": "{color.oxide.400}",
        "$description": "Numbers, units and constants."
      }
    }
  },
  "semantic": {
    "$description": "Theme roles. Names follow shadcn/ui so rustfs.com and the console can swap their variables in place; RustFS-specific roles are listed after.",
    "light": {
      "$type": "color",
      "background": {
        "$value": "{color.neutral.0}"
      },
      "foreground": {
        "$value": "{color.neutral.950}"
      },
      "card": {
        "$value": "{color.neutral.0}"
      },
      "card-foreground": {
        "$value": "{color.neutral.950}"
      },
      "popover": {
        "$value": "{color.neutral.0}"
      },
      "popover-foreground": {
        "$value": "{color.neutral.950}"
      },
      "primary": {
        "$value": "{color.blue.500}"
      },
      "primary-foreground": {
        "$value": "{color.neutral.0}"
      },
      "secondary": {
        "$value": "{color.neutral.100}"
      },
      "secondary-foreground": {
        "$value": "{color.neutral.950}"
      },
      "muted": {
        "$value": "{color.neutral.50}"
      },
      "muted-foreground": {
        "$value": "{color.neutral.600}"
      },
      "accent": {
        "$value": "{color.neutral.100}"
      },
      "accent-foreground": {
        "$value": "{color.neutral.950}"
      },
      "destructive": {
        "$value": "{color.red.700}"
      },
      "destructive-foreground": {
        "$value": "{color.neutral.0}"
      },
      "border": {
        "$value": "{color.neutral.200}"
      },
      "input": {
        "$value": "{color.neutral.300}"
      },
      "ring": {
        "$value": "{color.blue.500}"
      },
      "chart-1": {
        "$value": "{color.dataviz.1}"
      },
      "chart-2": {
        "$value": "{color.dataviz.2}"
      },
      "chart-3": {
        "$value": "{color.dataviz.3}"
      },
      "chart-4": {
        "$value": "{color.dataviz.4}"
      },
      "chart-5": {
        "$value": "{color.dataviz.5}"
      },
      "sidebar": {
        "$value": "{color.neutral.0}"
      },
      "sidebar-foreground": {
        "$value": "{color.neutral.950}"
      },
      "sidebar-primary": {
        "$value": "{color.blue.500}"
      },
      "sidebar-primary-foreground": {
        "$value": "{color.neutral.0}"
      },
      "sidebar-accent": {
        "$value": "{color.neutral.50}"
      },
      "sidebar-accent-foreground": {
        "$value": "{color.neutral.950}"
      },
      "sidebar-border": {
        "$value": "{color.neutral.200}"
      },
      "sidebar-ring": {
        "$value": "{color.blue.500}"
      },
      "brand": {
        "$value": "{color.blue.500}"
      },
      "brand-foreground": {
        "$value": "{color.neutral.0}"
      },
      "link": {
        "$value": "{color.blue.600}"
      },
      "parity": {
        "$value": "{color.oxide.500}"
      },
      "parity-foreground": {
        "$value": "{color.neutral.950}"
      },
      "parity-text": {
        "$value": "{color.oxide.700}"
      },
      "subtle": {
        "$value": "{color.neutral.700}"
      },
      "faint": {
        "$value": "{color.neutral.500}"
      },
      "strong": {
        "$value": "{color.neutral.300}"
      },
      "surface": {
        "$value": "{color.neutral.50}"
      },
      "surface-2": {
        "$value": "{color.neutral.100}"
      },
      "success": {
        "$value": "{color.green.700}"
      },
      "warning": {
        "$value": "{color.amber.700}"
      },
      "danger": {
        "$value": "{color.red.700}"
      },
      "info": {
        "$value": "{color.blue.600}"
      },
      "stage": {
        "$value": "{color.neutral.950}"
      },
      "stage-foreground": {
        "$value": "{color.neutral.0}"
      },
      "selection": {
        "$value": "{color.blue.100}"
      }
    },
    "dark": {
      "$type": "color",
      "background": {
        "$value": "{color.neutral.950}"
      },
      "foreground": {
        "$value": "{color.neutral.50}"
      },
      "card": {
        "$value": "{color.neutral.900}"
      },
      "card-foreground": {
        "$value": "{color.neutral.50}"
      },
      "popover": {
        "$value": "{color.neutral.900}"
      },
      "popover-foreground": {
        "$value": "{color.neutral.50}"
      },
      "primary": {
        "$value": "{color.blue.500}"
      },
      "primary-foreground": {
        "$value": "{color.neutral.0}"
      },
      "secondary": {
        "$value": "{color.neutral.850}"
      },
      "secondary-foreground": {
        "$value": "{color.neutral.50}"
      },
      "muted": {
        "$value": "{color.neutral.900}"
      },
      "muted-foreground": {
        "$value": "{color.neutral.400}"
      },
      "accent": {
        "$value": "{color.neutral.850}"
      },
      "accent-foreground": {
        "$value": "{color.neutral.50}"
      },
      "destructive": {
        "$value": "{color.red.400}"
      },
      "destructive-foreground": {
        "$value": "{color.neutral.950}"
      },
      "border": {
        "$value": "{color.neutral.800}"
      },
      "input": {
        "$value": "{color.neutral.700}"
      },
      "ring": {
        "$value": "{color.blue.400}"
      },
      "chart-1": {
        "$value": "{color.dataviz.1}"
      },
      "chart-2": {
        "$value": "{color.dataviz.2}"
      },
      "chart-3": {
        "$value": "{color.dataviz.3}"
      },
      "chart-4": {
        "$value": "{color.dataviz.4}"
      },
      "chart-5": {
        "$value": "{color.dataviz.5}"
      },
      "sidebar": {
        "$value": "{color.neutral.950}"
      },
      "sidebar-foreground": {
        "$value": "{color.neutral.50}"
      },
      "sidebar-primary": {
        "$value": "{color.blue.500}"
      },
      "sidebar-primary-foreground": {
        "$value": "{color.neutral.0}"
      },
      "sidebar-accent": {
        "$value": "{color.neutral.900}"
      },
      "sidebar-accent-foreground": {
        "$value": "{color.neutral.50}"
      },
      "sidebar-border": {
        "$value": "{color.neutral.800}"
      },
      "sidebar-ring": {
        "$value": "{color.blue.400}"
      },
      "brand": {
        "$value": "{color.blue.500}"
      },
      "brand-foreground": {
        "$value": "{color.neutral.0}"
      },
      "link": {
        "$value": "{color.blue.400}"
      },
      "parity": {
        "$value": "{color.oxide.500}"
      },
      "parity-foreground": {
        "$value": "{color.neutral.950}"
      },
      "parity-text": {
        "$value": "{color.oxide.400}"
      },
      "subtle": {
        "$value": "{color.neutral.300}"
      },
      "faint": {
        "$value": "{color.neutral.500}"
      },
      "strong": {
        "$value": "{color.neutral.700}"
      },
      "surface": {
        "$value": "{color.neutral.900}"
      },
      "surface-2": {
        "$value": "{color.neutral.850}"
      },
      "success": {
        "$value": "{color.green.500}"
      },
      "warning": {
        "$value": "{color.amber.500}"
      },
      "danger": {
        "$value": "{color.red.400}"
      },
      "info": {
        "$value": "{color.blue.400}"
      },
      "stage": {
        "$value": "{color.neutral.1000}"
      },
      "stage-foreground": {
        "$value": "{color.neutral.0}"
      },
      "selection": {
        "$value": "#0062FF59"
      }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "display": {
        "$value": [
          "Archivo",
          "HarmonyOS Sans SC",
          "Source Han Sans SC",
          "Noto Sans SC",
          "PingFang SC",
          "Microsoft YaHei",
          "sans-serif"
        ],
        "$description": "Archivo variable, set at 112–125% width. Headlines and numerals only."
      },
      "sans": {
        "$value": [
          "Geist",
          "HarmonyOS Sans SC",
          "Source Han Sans SC",
          "Noto Sans SC",
          "PingFang SC",
          "Microsoft YaHei",
          "system-ui",
          "sans-serif"
        ],
        "$description": "Body copy and interface."
      },
      "mono": {
        "$value": [
          "Geist Mono",
          "SF Mono",
          "ui-monospace",
          "Menlo",
          "Consolas",
          "PingFang SC",
          "monospace"
        ],
        "$description": "Labels, data, code, key paths."
      }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": {
        "$value": 400
      },
      "medium": {
        "$value": 500
      },
      "semibold": {
        "$value": 600
      },
      "bold": {
        "$value": 700
      },
      "heavy": {
        "$value": 750
      },
      "black": {
        "$value": 800
      }
    },
    "stretch": {
      "$type": "dimension",
      "display": {
        "$value": "125%"
      },
      "headline": {
        "$value": "112%"
      },
      "text": {
        "$value": "100%"
      }
    }
  },
  "typography": {
    "$type": "typography",
    "display-2xl": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "128px",
        "fontWeight": 800,
        "lineHeight": 0.92,
        "letterSpacing": "-0.03em",
        "fontStretch": "125%"
      }
    },
    "display-xl": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "96px",
        "fontWeight": 800,
        "lineHeight": 0.94,
        "letterSpacing": "-0.025em",
        "fontStretch": "125%"
      }
    },
    "display-lg": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "72px",
        "fontWeight": 800,
        "lineHeight": 0.96,
        "letterSpacing": "-0.02em",
        "fontStretch": "125%"
      }
    },
    "display-md": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "56px",
        "fontWeight": 800,
        "lineHeight": 1,
        "letterSpacing": "-0.02em",
        "fontStretch": "125%"
      }
    },
    "headline-lg": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "40px",
        "fontWeight": 750,
        "lineHeight": 1.08,
        "letterSpacing": "-0.01em",
        "fontStretch": "112%"
      }
    },
    "headline-md": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "30px",
        "fontWeight": 700,
        "lineHeight": 1.15,
        "letterSpacing": "-0.01em",
        "fontStretch": "112%"
      }
    },
    "headline-sm": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "22px",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": "-0.005em"
      }
    },
    "title": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "18px",
        "fontWeight": 600,
        "lineHeight": 1.4,
        "letterSpacing": "0em"
      }
    },
    "body-lg": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.7,
        "letterSpacing": "0em"
      }
    },
    "body-md": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.7,
        "letterSpacing": "0em"
      }
    },
    "body-sm": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "0em"
      }
    },
    "caption": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0em"
      }
    },
    "label-md": {
      "$value": {
        "fontFamily": "{font.family.mono}",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.3,
        "letterSpacing": "0.08em",
        "textTransform": "uppercase"
      }
    },
    "label-sm": {
      "$value": {
        "fontFamily": "{font.family.mono}",
        "fontSize": "11px",
        "fontWeight": 500,
        "lineHeight": 1.3,
        "letterSpacing": "0.08em",
        "textTransform": "uppercase"
      }
    },
    "code": {
      "$value": {
        "fontFamily": "{font.family.mono}",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.65,
        "letterSpacing": "0em"
      }
    },
    "numeral": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "48px",
        "fontWeight": 800,
        "lineHeight": 1,
        "letterSpacing": "-0.02em",
        "fontStretch": "125%",
        "fontFeature": "\"tnum\" 1"
      }
    }
  },
  "space": {
    "$type": "dimension",
    "$description": "4px base. Tailwind's default --spacing (0.25rem) matches, so p-4 = 16px.",
    "0": {
      "$value": "0px"
    },
    "1": {
      "$value": "4px"
    },
    "2": {
      "$value": "8px"
    },
    "3": {
      "$value": "12px"
    },
    "4": {
      "$value": "16px"
    },
    "5": {
      "$value": "20px"
    },
    "6": {
      "$value": "24px"
    },
    "8": {
      "$value": "32px"
    },
    "10": {
      "$value": "40px"
    },
    "12": {
      "$value": "48px"
    },
    "16": {
      "$value": "64px"
    },
    "20": {
      "$value": "80px"
    },
    "24": {
      "$value": "96px"
    },
    "32": {
      "$value": "128px"
    }
  },
  "radius": {
    "$type": "dimension",
    "none": {
      "$value": "0px",
      "$description": "Every component, image and chart."
    },
    "full": {
      "$value": "9999px",
      "$description": "Only where a platform forces a circular crop (avatars)."
    }
  },
  "border": {
    "$type": "dimension",
    "hairline": {
      "$value": "1px"
    },
    "emphasis": {
      "$value": "2px"
    }
  },
  "shadow": {
    "$type": "shadow",
    "overlay": {
      "$value": {
        "color": "#0B0E1447",
        "offsetX": "0px",
        "offsetY": "24px",
        "blur": "48px",
        "spread": "-16px"
      },
      "$description": "Popovers, dialogs and menus only. Everything else is flat."
    }
  },
  "motion": {
    "duration": {
      "$type": "duration",
      "instant": {
        "$value": "80ms"
      },
      "fast": {
        "$value": "150ms"
      },
      "base": {
        "$value": "240ms"
      },
      "slow": {
        "$value": "420ms"
      },
      "scene": {
        "$value": "720ms"
      },
      "stagger": {
        "$value": "40ms",
        "$description": "Delay between shards in a write sequence."
      }
    },
    "easing": {
      "$type": "cubicBezier",
      "standard": {
        "$value": [
          0.2,
          0,
          0,
          1
        ],
        "$description": "Default for state changes."
      },
      "emphasized": {
        "$value": [
          0.16,
          1,
          0.3,
          1
        ],
        "$description": "Entrances and the heal finish."
      },
      "exit": {
        "$value": [
          0.4,
          0,
          1,
          1
        ],
        "$description": "Elements leaving the screen."
      }
    }
  },
  "layout": {
    "$type": "dimension",
    "container": {
      "$value": "1240px"
    },
    "gutter": {
      "$value": "16px",
      "$description": "Minimum side gutter at every width."
    },
    "grid-columns": {
      "$value": "12"
    },
    "artboard-unit": {
      "$value": "1u = short side / 100"
    },
    "artboard-margin": {
      "$value": "7u"
    }
  }
}