{
  "name": "uFawkes design tokens",
  "version": "0.1.0",
  "status": "draft",
  "docs": "https://github.com/paruff/uFawkes.dev/blob/main/DESIGN.md",
  "note": "Canonical tokens for Fawkes and the uFawkes suite. Published at https://ufawkes.dev/design/tokens.json. Indigo, neutral and status scales follow the existing Fawkes design system (paruff/fawkes, design-system/src/tokens/colors.ts); Flame, Ember and Night are new and come from the Fawkes phoenix image.",
  "color": {
    "flame": {
      "400": "#fc8200",
      "500": "#f06300",
      "600": "#e85800"
    },
    "ember": {
      "700": "#c2410c",
      "800": "#9a3412"
    },
    "night": "#061723",
    "indigo": {
      "50": "#eef2ff",
      "100": "#e0e7ff",
      "200": "#c7d2fe",
      "300": "#a5b4fc",
      "400": "#818cf8",
      "500": "#6366f1",
      "600": "#4f46e5",
      "700": "#4338ca",
      "800": "#3730a3",
      "900": "#312e81"
    },
    "neutral": {
      "50": "#f9fafb",
      "100": "#f3f4f6",
      "200": "#e5e7eb",
      "400": "#9ca3af",
      "500": "#6b7280",
      "600": "#4b5563",
      "700": "#374151",
      "800": "#1f2937",
      "900": "#111827"
    },
    "green": {
      "100": "#dcfce7",
      "400": "#4ade80",
      "700": "#15803d"
    },
    "red": {
      "100": "#fee2e2",
      "400": "#f87171",
      "700": "#b91c1c"
    },
    "amber": {
      "100": "#fef3c7",
      "400": "#fbbf24",
      "800": "#92400e"
    }
  },
  "semantic": {
    "light": {
      "background": "color.neutral.50",
      "surface": "#ffffff",
      "text": "color.neutral.900",
      "textMuted": "color.neutral.600",
      "border": "color.neutral.200",
      "action": "color.indigo.600",
      "actionText": "#ffffff",
      "actionHover": "color.indigo.700",
      "buttonBackground": "color.flame.500",
      "buttonText": "color.night",
      "buttonHover": "color.flame.600",
      "link": "color.indigo.600",
      "focus": "color.indigo.600",
      "brand": "color.flame.500",
      "brandText": "color.ember.700",
      "passText": "color.green.700",
      "passBackground": "color.green.100",
      "failText": "color.red.700",
      "failBackground": "color.red.100",
      "warnText": "color.amber.800",
      "warnBackground": "color.amber.100",
      "manualText": "color.neutral.600",
      "manualBackground": "color.neutral.100"
    },
    "dark": {
      "background": "color.night",
      "surface": "color.neutral.800",
      "text": "color.neutral.50",
      "textMuted": "color.neutral.400",
      "border": "color.neutral.700",
      "action": "color.indigo.400",
      "actionText": "color.night",
      "actionHover": "color.indigo.300",
      "buttonBackground": "color.flame.500",
      "buttonText": "color.night",
      "buttonHover": "color.flame.400",
      "link": "color.indigo.300",
      "focus": "color.indigo.300",
      "brand": "color.flame.400",
      "brandText": "color.flame.400",
      "passText": "color.green.400",
      "failText": "color.red.400",
      "warnText": "color.amber.400",
      "manualText": "color.neutral.400"
    }
  },
  "contrast": [
    {
      "fg": "semantic.light.text",
      "bg": "semantic.light.surface",
      "min": 4.5,
      "use": "Body text"
    },
    {
      "fg": "semantic.light.text",
      "bg": "semantic.light.background",
      "min": 4.5,
      "use": "Body text on page"
    },
    {
      "fg": "semantic.light.textMuted",
      "bg": "semantic.light.surface",
      "min": 4.5,
      "use": "Secondary text"
    },
    {
      "fg": "semantic.light.textMuted",
      "bg": "semantic.light.background",
      "min": 4.5,
      "use": "Secondary text on page"
    },
    {
      "fg": "semantic.light.buttonText",
      "bg": "semantic.light.buttonBackground",
      "min": 4.5,
      "use": "Primary button label"
    },
    {
      "fg": "semantic.light.buttonText",
      "bg": "semantic.light.buttonHover",
      "min": 4.5,
      "use": "Primary button label, hover"
    },
    {
      "fg": "semantic.light.buttonBackground",
      "bg": "semantic.light.surface",
      "min": 3,
      "use": "Primary button edge against a white page"
    },
    {
      "fg": "semantic.light.buttonBackground",
      "bg": "semantic.light.background",
      "min": 3,
      "use": "Primary button edge against the page background"
    },
    {
      "fg": "semantic.light.actionText",
      "bg": "semantic.light.action",
      "min": 4.5,
      "use": "Label on an Indigo fill"
    },
    {
      "fg": "semantic.light.link",
      "bg": "semantic.light.surface",
      "min": 4.5,
      "use": "Link on white"
    },
    {
      "fg": "semantic.light.link",
      "bg": "semantic.light.background",
      "min": 4.5,
      "use": "Link on page"
    },
    {
      "fg": "semantic.light.focus",
      "bg": "semantic.light.surface",
      "min": 3,
      "use": "Focus ring"
    },
    {
      "fg": "semantic.light.brandText",
      "bg": "semantic.light.surface",
      "min": 4.5,
      "use": "Orange text on white"
    },
    {
      "fg": "semantic.light.brand",
      "bg": "semantic.light.surface",
      "min": 3,
      "use": "Brand mark and large graphics on white"
    },
    {
      "fg": "semantic.light.passText",
      "bg": "semantic.light.passBackground",
      "min": 4.5,
      "use": "Pass badge"
    },
    {
      "fg": "semantic.light.failText",
      "bg": "semantic.light.failBackground",
      "min": 4.5,
      "use": "Fail badge"
    },
    {
      "fg": "semantic.light.warnText",
      "bg": "semantic.light.warnBackground",
      "min": 4.5,
      "use": "Warning badge"
    },
    {
      "fg": "semantic.light.manualText",
      "bg": "semantic.light.manualBackground",
      "min": 4.5,
      "use": "Manual badge"
    },
    {
      "fg": "semantic.dark.text",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Body text, dark"
    },
    {
      "fg": "semantic.dark.text",
      "bg": "semantic.dark.surface",
      "min": 4.5,
      "use": "Body text on cards, dark"
    },
    {
      "fg": "semantic.dark.textMuted",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Secondary text, dark"
    },
    {
      "fg": "semantic.dark.textMuted",
      "bg": "semantic.dark.surface",
      "min": 4.5,
      "use": "Secondary text on cards, dark"
    },
    {
      "fg": "semantic.dark.buttonText",
      "bg": "semantic.dark.buttonBackground",
      "min": 4.5,
      "use": "Primary button label, dark"
    },
    {
      "fg": "semantic.dark.buttonText",
      "bg": "semantic.dark.buttonHover",
      "min": 4.5,
      "use": "Primary button label, hover, dark"
    },
    {
      "fg": "semantic.dark.buttonBackground",
      "bg": "semantic.dark.background",
      "min": 3,
      "use": "Primary button edge against the dark page"
    },
    {
      "fg": "semantic.dark.link",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Link, dark"
    },
    {
      "fg": "semantic.dark.link",
      "bg": "semantic.dark.surface",
      "min": 4.5,
      "use": "Link on cards, dark"
    },
    {
      "fg": "semantic.dark.focus",
      "bg": "semantic.dark.background",
      "min": 3,
      "use": "Focus ring, dark"
    },
    {
      "fg": "semantic.dark.brandText",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Orange text, dark"
    },
    {
      "fg": "semantic.dark.passText",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Pass text, dark"
    },
    {
      "fg": "semantic.dark.failText",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Fail text, dark"
    },
    {
      "fg": "semantic.dark.warnText",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Warning text, dark"
    },
    {
      "fg": "semantic.dark.manualText",
      "bg": "semantic.dark.background",
      "min": 4.5,
      "use": "Manual text, dark"
    }
  ],
  "typography": {
    "fontFamily": {
      "sans": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
      "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
    },
    "fontWeight": {
      "normal": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "lineHeight": {
      "tight": 1.2,
      "snug": 1.3,
      "normal": 1.5,
      "relaxed": 1.6
    }
  },
  "spacing": {
    "unit": "8px",
    "scale": ["8px", "16px", "24px", "32px", "40px", "48px", "64px"]
  },
  "radius": {
    "small": "4px",
    "medium": "8px"
  },
  "breakpoint": {
    "tablet": "767px",
    "mobile": "640px"
  },
  "layout": {
    "readingWidth": "960px",
    "headerWidth": "1100px"
  },
  "marks": {
    "flame": "https://ufawkes.dev/design/marks/flame.svg"
  }
}