{
  "$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"
    }
  }
}