tokens.json

{
  "$name": "PLOTFLOW Design Tokens",
  "color": {
    "white":   { "value": "#f5f4ef", "desc": "primary type / foreground" },
    "mute":    { "value": "#c3c5b8", "desc": "secondary text on dark" },
    "dim":     { "value": "#8f9184", "desc": "tertiary / captions" },
    "ink":     { "value": "#15160f", "desc": "near-black; manifesto + footer ground, pen reticle" },
    "paper":   { "value": "#efe7d3", "desc": "the plotted sheet (bed)" },
    "red":     { "value": "#e8351f", "desc": "single accent; pen ink + asterisk bug" },
    "concrete-1": { "value": "#5b5e54", "desc": "muted ground (light)" },
    "concrete-2": { "value": "#43463e", "desc": "muted ground (dark) / page base" },
    "line":    { "value": "rgba(245,244,239,0.22)", "desc": "hairline borders on dark" }
  },
  "font": {
    "sans": { "value": "Archivo, sans-serif", "desc": "all UI + display; simple grotesque, weights 400-900" },
    "jp":   { "value": "'Noto Sans JP', sans-serif", "desc": "Japanese accents; weights 500/700/900" }
  },
  "type": {
    "display": { "value": "clamp(3rem, 11vw, 8rem)", "weight": 900, "case": "uppercase", "tracking": "-0.02em" },
    "h2":      { "value": "clamp(2rem, 6vw, 3.4rem)", "weight": 900, "case": "uppercase" },
    "lead":    { "value": "1rem", "weight": 600 },
    "body":    { "value": "13px", "weight": 500 },
    "label":   { "value": "10px", "weight": 700, "case": "uppercase", "tracking": "0.14em" },
    "micro":   { "value": "8.5px", "weight": 700, "case": "uppercase", "tracking": "0.16em" }
  },
  "space": { "1": "4px", "2": "8px", "3": "12px", "4": "16px", "5": "24px", "6": "32px", "7": "48px", "8": "64px" },
  "layout": { "maxWidth": "1240px", "radius": "0px", "border": "1px solid rgba(245,244,239,0.22)" },
  "motif": {
    "asterisk": "4-line cross/star SVG, usually red, as the brand bug (*)",
    "halftone": "white radial-dot pattern (7px grid) masked to a soft circle",
    "grain": "fractalNoise SVG overlay, overlay/multiply blend, ~0.4 opacity",
    "scanlines": "1px repeating horizontal lines, very low opacity"
  },
  "plot": {
    "stroke": "currentColor; constant via vector-effect:non-scaling-stroke",
    "strokeWidth": { "hero": "1.1px", "cover": "0.7px" },
    "rule": "never scale a plot up to fill a small box — show it large + thin so lines don't merge"
  }
}