s3://rustfs-brand/tokens/Resources · Design tokens
Design TokensDesign tokens
The single source in code, generating a Tailwind v4 theme and CSS variables.
Format W3C DTCGOutputs Tailwind v4 · CSSSemantic names shadcn/ui
FilesFiles
Same values; pick one.
TiersThree tiers
Components reference semantic tokens only.
01 · PrimitivePrimitive
--color-blue-500: #0062FFRaw values02 · SemanticSemantic
--primary: var(--color-blue-500)By role, light and dark03 · ComponentComponent
bg-primary text-primary-foregroundUsed through utilitiesUsageUsing the tokens
Tailwind v4 projects (including shadcn/ui)css
/* 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 … */Fonts (Next.js)tsx
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}`}>In componentstsx
<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" />Plain CSScss
@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);
}Importing it replaces the blue and neutral scales and sets every radius to 0.
Semantic coloursAll semantic colours
Every shadcn/ui role plus RustFS roles.
| Token | Light | Dark | Tailwind |
|---|---|---|---|
--background | #FFFFFF | #0B0E14 | bg-background |
--foreground | #0B0E14 | #F4F6F9 | text-foreground |
--card | #FFFFFF | #13171E | bg-card |
--card-foreground | #0B0E14 | #F4F6F9 | text-card-foreground |
--popover | #FFFFFF | #13171E | bg-popover |
--popover-foreground | #0B0E14 | #F4F6F9 | text-popover-foreground |
--primary | #0062FF | #0062FF | bg-primary |
--primary-foreground | #FFFFFF | #FFFFFF | text-primary-foreground |
--secondary | #EAEDF2 | #1E232B | bg-secondary |
--secondary-foreground | #0B0E14 | #F4F6F9 | text-secondary-foreground |
--muted | #F4F6F9 | #13171E | bg-muted |
--muted-foreground | #5A616D | #9AA0AC | text-muted-foreground |
--accent | #EAEDF2 | #1E232B | bg-accent |
--accent-foreground | #0B0E14 | #F4F6F9 | text-accent-foreground |
--destructive | #C51B32 | #FF6B78 | bg-destructive |
--destructive-foreground | #FFFFFF | #0B0E14 | text-destructive-foreground |
--border | #DCE0E6 | #2B313A | border-border |
--input | #C4C9D2 | #424853 | border-input |
--ring | #0062FF | #5C99FF | ring-ring |
--chart-1 | #0062FF | #0062FF | bg-chart-1 |
--chart-2 | #FF5E14 | #FF5E14 | bg-chart-2 |
--chart-3 | #00AEAE | #00AEAE | bg-chart-3 |
--chart-4 | #7D5BE6 | #7D5BE6 | bg-chart-4 |
--chart-5 | #F7AE0C | #F7AE0C | bg-chart-5 |
--sidebar | #FFFFFF | #0B0E14 | bg-sidebar |
--sidebar-foreground | #0B0E14 | #F4F6F9 | text-sidebar-foreground |
--sidebar-primary | #0062FF | #0062FF | bg-sidebar-primary |
--sidebar-primary-foreground | #FFFFFF | #FFFFFF | text-sidebar-primary-foreground |
--sidebar-accent | #F4F6F9 | #13171E | bg-sidebar-accent |
--sidebar-accent-foreground | #0B0E14 | #F4F6F9 | text-sidebar-accent-foreground |
--sidebar-border | #DCE0E6 | #2B313A | border-sidebar-border |
--sidebar-ring | #0062FF | #5C99FF | ring-sidebar-ring |
--brand | #0062FF | #0062FF | bg-brand |
--brand-foreground | #FFFFFF | #FFFFFF | text-brand-foreground |
--link | #014FDD | #5C99FF | text-link |
--parity | #FF5E14 | #FF5E14 | bg-parity |
--parity-foreground | #0B0E14 | #0B0E14 | text-parity-foreground |
--parity-text | #B33A10 | #FE8F5D | text-parity-text |
--subtle | #424853 | #C4C9D2 | text-subtle |
--faint | #757C88 | #757C88 | text-faint |
--strong | #C4C9D2 | #424853 | border-strong |
--surface | #F4F6F9 | #13171E | bg-surface |
--surface-2 | #EAEDF2 | #1E232B | bg-surface-2 |
--success | #037E3F | #02A855 | text-success |
--warning | #A06604 | #F7AE0C | text-warning |
--danger | #C51B32 | #FF6B78 | text-danger |
--info | #014FDD | #5C99FF | text-info |
--stage | #0B0E14 | #06070B | bg-stage |
--stage-foreground | #FFFFFF | #FFFFFF | text-stage-foreground |
--selection | #E0ECFE | #0062FF59 | selection:bg-selection |
TypographyType styles
| Utility | Size | Line height | Weight | Tracking · width |
|---|---|---|---|---|
| type-display-2xl | 128px | 0.92 | 800 | -0.03em · 125% |
| type-display-xl | 96px | 0.94 | 800 | -0.025em · 125% |
| type-display-lg | 72px | 0.96 | 800 | -0.02em · 125% |
| type-display-md | 56px | 1 | 800 | -0.02em · 125% |
| type-headline-lg | 40px | 1.08 | 750 | -0.01em · 112% |
| type-headline-md | 30px | 1.15 | 700 | -0.01em · 112% |
| type-headline-sm | 22px | 1.3 | 600 | -0.005em |
| type-title | 18px | 1.4 | 600 | 0em |
| type-body-lg | 18px | 1.7 | 400 | 0em |
| type-body-md | 16px | 1.7 | 400 | 0em |
| type-body-sm | 14px | 1.6 | 400 | 0em |
| type-caption | 12px | 1.5 | 400 | 0em |
| type-label-md | 12px | 1.3 | 500 | 0.08em |
| type-label-sm | 11px | 1.3 | 500 | 0.08em |
| type-code | 14px | 1.65 | 400 | 0em |
| type-numeral | 48px | 1 | 800 | -0.02em · 125% |
Space · motionSpace, radius and motion
Space (4px base)
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
32128px
Radius and motion
| Token | Value |
|---|---|
| --radius-* | 0px |
| --radius-full | 9999px (platform avatar crops only) |
| --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) |
| --duration-instant | 80ms |
| --duration-fast | 150ms |
| --duration-base | 240ms |
| --duration-slow | 420ms |
| --duration-scene | 720ms |
| --duration-stagger | 40ms |
| --shadow-overlay | 0 24px 48px -16px #0B0E1447 |
SourceSource
Current version.
tokens/tailwind.csscss
/* 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.jsonjson
{
"$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"
}
}
}