{
  "$description": "Saer design tokens. The machine-readable source of truth; app/styles/tokens.css is the implementation and tests/tokens.test.ts keeps the two identical. Format follows the Design Tokens Community Group conventions ($value, $type, $description, {alias} references). CSS name rule: color.palette.<hue>.<step> is --<hue>-<step>; color.palette.white is --white; color.light.<role> and color.dark.<role> are --color-<role> on the cream (:root) and charcoal ([data-theme=\"dark\"]) surfaces; every other group is --<group>-<name>.",
  "color": {
    "palette": {
      "green": {
        "400": {
          "$value": "#CCF676",
          "$type": "color",
          "$description": "Kawasaki green. Brand. Means verified, shipped, go. A fill or a mark, never text on a light surface (1.13:1 on cream)."
        },
        "700": {
          "$value": "#4A6300",
          "$type": "color",
          "$description": "Derived from green 400 in OKLCH (same hue, lower lightness) so green can carry text on light surfaces: 6.25:1 on cream, 5.20:1 on neutral."
        }
      },
      "lavender": {
        "400": {
          "$value": "#A99FEC",
          "$type": "color",
          "$description": "Soft lavender. Brand. Means inferred, in testing, intelligence. A fill or a mark on light surfaces; text on charcoal (7.79:1)."
        },
        "700": {
          "$value": "#5F4FB0",
          "$type": "color",
          "$description": "Derived from lavender 400 in OKLCH for text on light surfaces: 5.95:1 on cream, 4.95:1 on neutral."
        }
      },
      "charcoal": {
        "600": {
          "$value": "#6A6F72",
          "$type": "color",
          "$description": "Derived. Strong boundary on charcoal (3.63:1), for inputs and controls that need a visible edge (WCAG 1.4.11)."
        },
        "700": {
          "$value": "#2E3236",
          "$type": "color",
          "$description": "Derived. Hairline rule on charcoal. Decorative only."
        },
        "800": {
          "$value": "#1C1F22",
          "$type": "color",
          "$description": "Derived. Raised surface on charcoal."
        },
        "900": {
          "$value": "#121416",
          "$type": "color",
          "$description": "Deep charcoal. Brand primary dark surface and primary text on light surfaces (16.90:1 on cream)."
        }
      },
      "cream": {
        "50": {
          "$value": "#F6F5EF",
          "$type": "color",
          "$description": "Warm cream. Brand primary light surface and primary text on charcoal."
        }
      },
      "neutral": {
        "200": {
          "$value": "#DEE2D9",
          "$type": "color",
          "$description": "Soft neutral. Sunken surface and hairline rule on light surfaces. Decorative contrast only (1.20:1 on cream)."
        }
      },
      "grey": {
        "300": {
          "$value": "#959B9A",
          "$type": "color",
          "$description": "Derived from grey 500, lighter, for muted text on charcoal: 6.54:1 on charcoal, 5.86:1 on raised charcoal."
        },
        "500": {
          "$value": "#6F7574",
          "$type": "color",
          "$description": "Muted grey. Brand. Strong boundary on light surfaces (3.57:1 on neutral). Fails 4.5:1 for body text on cream (4.30:1), so muted text uses grey 600."
        },
        "600": {
          "$value": "#5A605F",
          "$type": "color",
          "$description": "Derived from grey 500, darker, for muted text on light surfaces: 5.87:1 on cream, 4.88:1 on neutral."
        }
      },
      "red": {
        "300": {
          "$value": "#FF8A80",
          "$type": "color",
          "$description": "Functional, not brand. Error text on charcoal (7.25:1 on raised charcoal). Only for validation errors."
        },
        "700": {
          "$value": "#B42318",
          "$type": "color",
          "$description": "Functional, not brand. Error text on light surfaces (6.02:1 on cream). Only for validation errors."
        }
      },
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Raised surface on cream: cards, inputs, the report frame."
      }
    },
    "light": {
      "bg": {
        "$value": "{color.palette.cream.50}",
        "$type": "color",
        "$description": "Page surface."
      },
      "bg-raised": {
        "$value": "{color.palette.white}",
        "$type": "color",
        "$description": "Cards, inputs, panels."
      },
      "bg-sunken": {
        "$value": "{color.palette.neutral.200}",
        "$type": "color",
        "$description": "Wells, code, quiet bands."
      },
      "fg": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Primary text."
      },
      "fg-muted": {
        "$value": "{color.palette.grey.600}",
        "$type": "color",
        "$description": "Supporting text, captions, metadata."
      },
      "border": {
        "$value": "{color.palette.neutral.200}",
        "$type": "color",
        "$description": "Hairline rules. Decorative."
      },
      "border-strong": {
        "$value": "{color.palette.grey.500}",
        "$type": "color",
        "$description": "Control boundaries that must be seen (3:1)."
      },
      "rule": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Structural rules: the top of a grid, a table head."
      },
      "action": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Primary action fill."
      },
      "on-action": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Text on the primary action."
      },
      "action-edge": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Edge of the primary action on cream, where green alone has no contrast with the surface."
      },
      "verified": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Fill for verified, deterministic, shipped."
      },
      "verified-fg": {
        "$value": "{color.palette.green.700}",
        "$type": "color",
        "$description": "Text that means verified."
      },
      "on-verified": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Text on a verified fill."
      },
      "inferred": {
        "$value": "{color.palette.lavender.400}",
        "$type": "color",
        "$description": "Fill for inferred, in testing, in development."
      },
      "inferred-fg": {
        "$value": "{color.palette.lavender.700}",
        "$type": "color",
        "$description": "Text that means inferred."
      },
      "on-inferred": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Text on an inferred fill."
      },
      "focus": {
        "$value": "{color.palette.lavender.700}",
        "$type": "color",
        "$description": "Focus ring. Passes 3:1 against every light surface."
      },
      "error-fg": {
        "$value": "{color.palette.red.700}",
        "$type": "color",
        "$description": "Validation error text and the invalid control edge."
      },
      "mark-verified": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Highlight band under verified words in display type; text crosses it."
      },
      "mark-inferred": {
        "$value": "{color.palette.lavender.400}",
        "$type": "color",
        "$description": "Highlight band under inferred words in display type; text crosses it."
      }
    },
    "dark": {
      "bg": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Page surface."
      },
      "bg-raised": {
        "$value": "{color.palette.charcoal.800}",
        "$type": "color",
        "$description": "Cards, inputs, panels."
      },
      "bg-sunken": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Wells and code."
      },
      "fg": {
        "$value": "{color.palette.cream.50}",
        "$type": "color",
        "$description": "Primary text."
      },
      "fg-muted": {
        "$value": "{color.palette.grey.300}",
        "$type": "color",
        "$description": "Supporting text, captions, metadata."
      },
      "border": {
        "$value": "{color.palette.charcoal.700}",
        "$type": "color",
        "$description": "Hairline rules. Decorative."
      },
      "border-strong": {
        "$value": "{color.palette.charcoal.600}",
        "$type": "color",
        "$description": "Control boundaries that must be seen (3:1)."
      },
      "rule": {
        "$value": "{color.palette.cream.50}",
        "$type": "color",
        "$description": "Structural rules."
      },
      "action": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Primary action fill."
      },
      "on-action": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Text on the primary action."
      },
      "action-edge": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "On charcoal the green fill is its own edge."
      },
      "verified": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Fill for verified, deterministic, shipped."
      },
      "verified-fg": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Text that means verified."
      },
      "on-verified": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Text on a verified fill."
      },
      "inferred": {
        "$value": "{color.palette.lavender.400}",
        "$type": "color",
        "$description": "Fill for inferred, in testing, in development."
      },
      "inferred-fg": {
        "$value": "{color.palette.lavender.400}",
        "$type": "color",
        "$description": "Text that means inferred."
      },
      "on-inferred": {
        "$value": "{color.palette.charcoal.900}",
        "$type": "color",
        "$description": "Text on an inferred fill."
      },
      "focus": {
        "$value": "{color.palette.green.400}",
        "$type": "color",
        "$description": "Focus ring."
      },
      "error-fg": {
        "$value": "{color.palette.red.300}",
        "$type": "color",
        "$description": "Validation error text and the invalid control edge."
      },
      "mark-verified": {
        "$value": "{color.palette.green.700}",
        "$type": "color",
        "$description": "Highlight band under verified words in display type; text crosses it."
      },
      "mark-inferred": {
        "$value": "{color.palette.lavender.700}",
        "$type": "color",
        "$description": "Highlight band under inferred words in display type; text crosses it."
      }
    }
  },
  "contrast": {
    "$description": "Pairs the system promises. tests/tokens.test.ts checks each on both surfaces with the WCAG 2.x formula. text = 4.5:1 (SC 1.4.3), ui = 3:1 (SC 1.4.11).",
    "pairs": [
      {
        "fg": "fg",
        "bg": "bg",
        "min": 4.5
      },
      {
        "fg": "fg",
        "bg": "bg-raised",
        "min": 4.5
      },
      {
        "fg": "fg",
        "bg": "bg-sunken",
        "min": 4.5
      },
      {
        "fg": "fg-muted",
        "bg": "bg",
        "min": 4.5
      },
      {
        "fg": "fg-muted",
        "bg": "bg-raised",
        "min": 4.5
      },
      {
        "fg": "fg-muted",
        "bg": "bg-sunken",
        "min": 4.5
      },
      {
        "fg": "on-action",
        "bg": "action",
        "min": 4.5
      },
      {
        "fg": "on-verified",
        "bg": "verified",
        "min": 4.5
      },
      {
        "fg": "on-inferred",
        "bg": "inferred",
        "min": 4.5
      },
      {
        "fg": "verified-fg",
        "bg": "bg",
        "min": 4.5
      },
      {
        "fg": "verified-fg",
        "bg": "bg-raised",
        "min": 4.5
      },
      {
        "fg": "verified-fg",
        "bg": "bg-sunken",
        "min": 4.5
      },
      {
        "fg": "inferred-fg",
        "bg": "bg",
        "min": 4.5
      },
      {
        "fg": "inferred-fg",
        "bg": "bg-raised",
        "min": 4.5
      },
      {
        "fg": "inferred-fg",
        "bg": "bg-sunken",
        "min": 4.5
      },
      {
        "fg": "fg",
        "bg": "mark-verified",
        "min": 4.5
      },
      {
        "fg": "fg",
        "bg": "mark-inferred",
        "min": 4.5
      },
      {
        "fg": "error-fg",
        "bg": "bg",
        "min": 4.5
      },
      {
        "fg": "error-fg",
        "bg": "bg-raised",
        "min": 4.5
      },
      {
        "fg": "border-strong",
        "bg": "bg",
        "min": 3
      },
      {
        "fg": "border-strong",
        "bg": "bg-raised",
        "min": 3
      },
      {
        "fg": "action-edge",
        "bg": "bg",
        "min": 3
      },
      {
        "fg": "focus",
        "bg": "bg",
        "min": 3
      },
      {
        "fg": "focus",
        "bg": "bg-raised",
        "min": 3
      },
      {
        "fg": "focus",
        "bg": "bg-sunken",
        "min": 3
      }
    ]
  },
  "font": {
    "family": {
      "sans": {
        "$value": "var(--font-jost), \"Jost\", \"Avenir Next\", \"Century Gothic\", ui-sans-serif, system-ui, sans-serif",
        "$type": "fontFamily",
        "$description": "Jost, an open-source geometric sans in the Futura tradition, self-hosted by next/font. Futura itself is not licensed for web embedding. The stack ends in sans-serif, never serif."
      },
      "mono": {
        "$value": "var(--font-martian), \"Martian Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace",
        "$type": "fontFamily",
        "$description": "Martian Mono, for technical annotation: tokens, counts, file paths, labels. Wide, geometric, and built for the same grid as Jost."
      }
    },
    "weight": {
      "light": {
        "$value": 300,
        "$type": "fontWeight",
        "$description": "Large display only."
      },
      "regular": {
        "$value": 400,
        "$type": "fontWeight",
        "$description": "Body, mono."
      },
      "medium": {
        "$value": 500,
        "$type": "fontWeight",
        "$description": "Headings and display."
      },
      "semibold": {
        "$value": 600,
        "$type": "fontWeight",
        "$description": "Small emphasis, labels."
      }
    }
  },
  "text": {
    "xs": {
      "$value": "0.75rem",
      "$type": "dimension",
      "$description": "12px. Mono labels, captions."
    },
    "sm": {
      "$value": "0.875rem",
      "$type": "dimension",
      "$description": "14px. Metadata, supporting copy, form help."
    },
    "base": {
      "$value": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
      "$type": "dimension",
      "$description": "16 to 18px. Body."
    },
    "lg": {
      "$value": "clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem)",
      "$type": "dimension",
      "$description": "18 to 22px. Lede, H5."
    },
    "xl": {
      "$value": "clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem)",
      "$type": "dimension",
      "$description": "20 to 26px. H4, card titles."
    },
    "2xl": {
      "$value": "clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)",
      "$type": "dimension",
      "$description": "24 to 36px. H3."
    },
    "3xl": {
      "$value": "clamp(2rem, 1.35rem + 2.8vw, 3.5rem)",
      "$type": "dimension",
      "$description": "32 to 56px. H2."
    },
    "4xl": {
      "$value": "clamp(2.5rem, 1.5rem + 4.4vw, 5rem)",
      "$type": "dimension",
      "$description": "40 to 80px. H1 on inner pages."
    },
    "display": {
      "$value": "clamp(3rem, 1rem + 8.4vw, 9rem)",
      "$type": "dimension",
      "$description": "48 to 144px. Display numerals. One per page at most."
    },
    "hero": {
      "$value": "clamp(2rem, 11vw, 4.5rem)",
      "$type": "dimension",
      "$description": "32 to 72px. The home statement below 64rem, set in four lines: sized to the viewport so its longest line fits at 320px. From 64rem it is two lines at text-4xl."
    }
  },
  "leading": {
    "display": {
      "$value": "0.92",
      "$type": "number",
      "$description": "Display and H1."
    },
    "tight": {
      "$value": "1.05",
      "$type": "number",
      "$description": "H2, H3."
    },
    "snug": {
      "$value": "1.25",
      "$type": "number",
      "$description": "H4 to H6, lede, card titles."
    },
    "normal": {
      "$value": "1.5",
      "$type": "number",
      "$description": "Mono, UI text."
    },
    "relaxed": {
      "$value": "1.65",
      "$type": "number",
      "$description": "Body copy."
    }
  },
  "tracking": {
    "display": {
      "$value": "-0.035em",
      "$type": "dimension",
      "$description": "Display: geometric sans needs pulling in at size."
    },
    "tight": {
      "$value": "-0.02em",
      "$type": "dimension",
      "$description": "H1 to H3."
    },
    "normal": {
      "$value": "0em",
      "$type": "dimension",
      "$description": "Body."
    },
    "mono": {
      "$value": "-0.01em",
      "$type": "dimension",
      "$description": "Mono annotation."
    },
    "caps": {
      "$value": "0.12em",
      "$type": "dimension",
      "$description": "Uppercase labels. Never on lowercase text."
    }
  },
  "space": {
    "1": {
      "$value": "0.25rem",
      "$type": "dimension",
      "$description": "4px"
    },
    "2": {
      "$value": "0.5rem",
      "$type": "dimension",
      "$description": "8px"
    },
    "3": {
      "$value": "0.75rem",
      "$type": "dimension",
      "$description": "12px"
    },
    "4": {
      "$value": "1rem",
      "$type": "dimension",
      "$description": "16px"
    },
    "5": {
      "$value": "1.5rem",
      "$type": "dimension",
      "$description": "24px"
    },
    "6": {
      "$value": "2rem",
      "$type": "dimension",
      "$description": "32px"
    },
    "7": {
      "$value": "3rem",
      "$type": "dimension",
      "$description": "48px"
    },
    "8": {
      "$value": "4rem",
      "$type": "dimension",
      "$description": "64px"
    },
    "9": {
      "$value": "6rem",
      "$type": "dimension",
      "$description": "96px"
    },
    "10": {
      "$value": "8rem",
      "$type": "dimension",
      "$description": "128px"
    },
    "gutter": {
      "$value": "clamp(1rem, 0.45rem + 2.4vw, 2.5rem)",
      "$type": "dimension",
      "$description": "16 to 40px. Page edge and grid gap."
    },
    "section": {
      "$value": "clamp(4rem, 2rem + 6vw, 8rem)",
      "$type": "dimension",
      "$description": "64 to 128px. Vertical rhythm between sections."
    }
  },
  "radius": {
    "none": {
      "$value": "0",
      "$type": "dimension",
      "$description": "Default. Saer is square: rules, grids and planes."
    },
    "sm": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Inputs and swatches, to soften a hard pixel edge."
    },
    "full": {
      "$value": "999px",
      "$type": "dimension",
      "$description": "Circles: status marks, toggles. The Bauhaus circle to the square."
    }
  },
  "border-width": {
    "hairline": {
      "$value": "1px",
      "$type": "dimension",
      "$description": "Rules, card edges, inputs."
    },
    "rule": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Structural rules, focus ring."
    }
  },
  "z": {
    "behind": {
      "$value": "-1",
      "$type": "number",
      "$description": "Behind text inside an isolated component: the hero's metric lines."
    },
    "sticky": {
      "$value": "50",
      "$type": "number",
      "$description": "The site header."
    },
    "overlay": {
      "$value": "60",
      "$type": "number",
      "$description": "The mobile menu."
    },
    "skip": {
      "$value": "100",
      "$type": "number",
      "$description": "The skip link."
    }
  },
  "duration": {
    "instant": {
      "$value": "1ms",
      "$type": "duration",
      "$description": "Reduced motion: every animation and transition collapses to one frame."
    },
    "fast": {
      "$value": "120ms",
      "$type": "duration",
      "$description": "Hover and press."
    },
    "base": {
      "$value": "240ms",
      "$type": "duration",
      "$description": "State changes, menus."
    },
    "slow": {
      "$value": "480ms",
      "$type": "duration",
      "$description": "Reconciling a visual."
    },
    "reveal": {
      "$value": "800ms",
      "$type": "duration",
      "$description": "First paint of the hero, once."
    }
  },
  "ease": {
    "standard": {
      "$value": "cubic-bezier(0.2, 0, 0, 1)",
      "$type": "cubicBezier",
      "$description": "Default."
    },
    "out": {
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)",
      "$type": "cubicBezier",
      "$description": "Arrivals."
    }
  },
  "opacity": {
    "disabled": {
      "$value": "0.5",
      "$type": "number",
      "$description": "Disabled controls, with a not-allowed or progress cursor."
    }
  },
  "container": {
    "max": {
      "$value": "82rem",
      "$type": "dimension",
      "$description": "1312px. The page grid."
    },
    "text": {
      "$value": "40rem",
      "$type": "dimension",
      "$description": "640px. Long-form reading."
    },
    "narrow": {
      "$value": "52rem",
      "$type": "dimension",
      "$description": "832px. Forms, FAQ."
    }
  },
  "breakpoint": {
    "$description": "Declared as custom properties so tools can read the scale, and written as the same literal in @media rules, because a media query cannot read a custom property. Max-width queries use the value minus 0.01rem.",
    "md": {
      "$value": "48rem",
      "$type": "dimension",
      "$description": "768px. Two columns: forms, ruled columns, the matrix as a table."
    },
    "lg": {
      "$value": "64rem",
      "$type": "dimension",
      "$description": "1024px. The full 12-column grid, inline navigation, docs sidebar."
    }
  }
}