{
  "$description": "Flaghand’s design tokens, light only: one scheme, the bright red. Design Tokens format with CSS values; each token names its CSS custom property in $extensions.",
  "$extensions": {
    "com.flaghand": {
      "page": "https://flaghand.com/foundation",
      "markdown": "https://flaghand.com/foundation.md",
      "tokensCss": "https://flaghand.com/assets/tokens.css",
      "stylesheet": "https://flaghand.com/assets/flaghand.css",
      "colorScheme": "only light",
      "breakpoints": [
        {
          "maxWidth": "959px",
          "tokens": {
            "--sec": "84px",
            "--gutter": "16px"
          }
        },
        {
          "maxWidth": "759px",
          "tokens": {
            "--sec": "64px",
            "--margin": "20px",
            "--fs-display": "min(46px, 11.6vw)",
            "--fs-hold": "min(52px, 13.3vw)",
            "--fs-lede": "17px",
            "--fs-head": "22px"
          }
        },
        {
          "maxWidth": "359px",
          "tokens": {
            "--margin": "16px"
          }
        }
      ]
    }
  },
  "color": {
    "$type": "color",
    "$description": "Colour roles. Light only: one scheme, the bright red.",
    "field": {
      "$value": "#c8321e",
      "$description": "The page: the bright red field.",
      "$extensions": {
        "com.flaghand": {
          "css": "--field",
          "value": "#c8321e"
        }
      }
    },
    "on": {
      "$value": "#fff5e9",
      "$description": "Type and the button on the field.",
      "$extensions": {
        "com.flaghand": {
          "css": "--on",
          "value": "#fff5e9"
        }
      }
    },
    "on-2": {
      "$value": "#fff5e9",
      "$description": "Second type on the field.",
      "$extensions": {
        "com.flaghand": {
          "css": "--on-2",
          "value": "#fff5e9"
        }
      }
    },
    "on-hair": {
      "$value": "rgba(255, 245, 233, .28)",
      "$description": "Hairlines on the field.",
      "$extensions": {
        "com.flaghand": {
          "css": "--on-hair",
          "value": "rgba(255, 245, 233, .28)"
        }
      }
    },
    "on-line": {
      "$value": "rgba(255, 245, 233, .5)",
      "$description": "Edges on the field, as on a text field.",
      "$extensions": {
        "com.flaghand": {
          "css": "--on-line",
          "value": "rgba(255, 245, 233, .5)"
        }
      }
    },
    "sheet": {
      "$value": "#fffaf3",
      "$description": "A sheet: the cream where work happens.",
      "$extensions": {
        "com.flaghand": {
          "css": "--sheet",
          "value": "#fffaf3"
        }
      }
    },
    "well": {
      "$value": "#f6ebdf",
      "$description": "A well on a sheet: code blocks and tool results.",
      "$extensions": {
        "com.flaghand": {
          "css": "--well",
          "value": "#f6ebdf"
        }
      }
    },
    "ink": {
      "$value": "#24110c",
      "$description": "Type on a sheet.",
      "$extensions": {
        "com.flaghand": {
          "css": "--ink",
          "value": "#24110c"
        }
      }
    },
    "ink-2": {
      "$value": "#5a3f37",
      "$description": "Second type on a sheet.",
      "$extensions": {
        "com.flaghand": {
          "css": "--ink-2",
          "value": "#5a3f37"
        }
      }
    },
    "muted": {
      "$value": "#7a6159",
      "$description": "Quiet type on a sheet: labels and times.",
      "$extensions": {
        "com.flaghand": {
          "css": "--muted",
          "value": "#7a6159"
        }
      }
    },
    "hair": {
      "$value": "rgba(36, 17, 12, .11)",
      "$description": "Hairlines on a sheet.",
      "$extensions": {
        "com.flaghand": {
          "css": "--hair",
          "value": "rgba(36, 17, 12, .11)"
        }
      }
    },
    "act": {
      "$value": "#c8321e",
      "$description": "The pennant: the one button that sends something out.",
      "$extensions": {
        "com.flaghand": {
          "css": "--act",
          "value": "#c8321e"
        }
      }
    },
    "act-on": {
      "$value": "#fff5e9",
      "$description": "Type on the pennant.",
      "$extensions": {
        "com.flaghand": {
          "css": "--act-on",
          "value": "#fff5e9"
        }
      }
    },
    "act-text": {
      "$value": "#c8321e",
      "$description": "The act red as text on a sheet.",
      "$extensions": {
        "com.flaghand": {
          "css": "--act-text",
          "value": "#c8321e"
        }
      }
    },
    "ok": {
      "$value": "#2f6b45",
      "$description": "Done.",
      "$extensions": {
        "com.flaghand": {
          "css": "--ok",
          "value": "#2f6b45"
        }
      }
    },
    "bad": {
      "$value": "#a12a16",
      "$description": "A problem.",
      "$extensions": {
        "com.flaghand": {
          "css": "--bad",
          "value": "#a12a16"
        }
      }
    },
    "night": {
      "$value": "#0d0807",
      "$description": "The near-black posts sit on, as in the launch video.",
      "$extensions": {
        "com.flaghand": {
          "css": "--night",
          "value": "#0d0807"
        }
      }
    },
    "on-night": {
      "$value": "#f6ece4",
      "$description": "Type on night.",
      "$extensions": {
        "com.flaghand": {
          "css": "--on-night",
          "value": "#f6ece4"
        }
      }
    },
    "on-night-2": {
      "$value": "rgba(246, 236, 228, .62)",
      "$description": "Second type on night.",
      "$extensions": {
        "com.flaghand": {
          "css": "--on-night-2",
          "value": "rgba(246, 236, 228, .62)"
        }
      }
    },
    "night-hair": {
      "$value": "rgba(246, 236, 228, .14)",
      "$description": "Hairlines on night.",
      "$extensions": {
        "com.flaghand": {
          "css": "--night-hair",
          "value": "rgba(246, 236, 228, .14)"
        }
      }
    },
    "scrim": {
      "$value": "rgba(60, 10, 4, .42)",
      "$description": "Behind a sheet laid over the page.",
      "$extensions": {
        "com.flaghand": {
          "css": "--scrim",
          "value": "rgba(60, 10, 4, .42)"
        }
      }
    }
  },
  "shadow": {
    "$type": "shadow",
    "$description": "One shadow, for sheets, phones and posts. None on night.",
    "shadow": {
      "$value": [
        {
          "color": "rgba(60, 10, 4, .22)",
          "offsetX": "0px",
          "offsetY": "0px",
          "blur": "0px",
          "spread": ".5px"
        },
        {
          "color": "rgba(60, 10, 4, .10)",
          "offsetX": "0px",
          "offsetY": "1px",
          "blur": "2px",
          "spread": "0px"
        },
        {
          "color": "rgba(70, 8, 0, .14)",
          "offsetX": "0px",
          "offsetY": "10px",
          "blur": "24px",
          "spread": "0px"
        },
        {
          "color": "rgba(70, 8, 0, .20)",
          "offsetX": "0px",
          "offsetY": "32px",
          "blur": "72px",
          "spread": "0px"
        }
      ],
      "$description": "The one shadow.",
      "$extensions": {
        "com.flaghand": {
          "css": "--shadow",
          "value": "0 0 0 .5px rgba(60, 10, 4, .22), 0 1px 2px rgba(60, 10, 4, .10), 0 10px 24px rgba(70, 8, 0, .14), 0 32px 72px rgba(70, 8, 0, .20)"
        }
      }
    }
  },
  "font": {
    "$type": "fontFamily",
    "$description": "Familjen Grotesk, self-hosted, 400 to 700.",
    "font": {
      "$value": [
        "Familjen Grotesk",
        "Familjen Grotesk Arial",
        "Familjen Grotesk Roboto",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "system-ui",
        "sans-serif"
      ],
      "$description": "Familjen Grotesk, then its Arial and Roboto stand-ins, scaled so no line moves when it loads.",
      "$extensions": {
        "com.flaghand": {
          "css": "--font",
          "value": "\"Familjen Grotesk\", \"Familjen Grotesk Arial\", \"Familjen Grotesk Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif"
        }
      }
    },
    "ios": {
      "$value": [
        "-apple-system",
        "BlinkMacSystemFont",
        "system-ui",
        "sans-serif"
      ],
      "$description": "The system’s own type, for screens drawn as Apple draws them.",
      "$extensions": {
        "com.flaghand": {
          "css": "--ios",
          "value": "-apple-system, BlinkMacSystemFont, system-ui, sans-serif"
        }
      }
    },
    "mono": {
      "$value": [
        "ui-monospace",
        "SF Mono",
        "SFMono-Regular",
        "Menlo",
        "Consolas",
        "Roboto Mono",
        "monospace"
      ],
      "$description": "Code, and Claude Code.",
      "$extensions": {
        "com.flaghand": {
          "css": "--mono",
          "value": "ui-monospace, \"SF Mono\", SFMono-Regular, Menlo, Consolas, \"Roboto Mono\", monospace"
        }
      }
    }
  },
  "size": {
    "$type": "dimension",
    "$description": "Each step’s size; the larger ones scale with the page.",
    "fs-display": {
      "$value": "96px",
      "$description": "Display: a page’s headline.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-display",
          "value": "clamp(46px, 6.6vw, 96px)"
        }
      }
    },
    "fs-hold": {
      "$value": "144px",
      "$description": "Hold: a step’s one held line.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-hold",
          "value": "clamp(52px, 10vw, 144px)"
        }
      }
    },
    "fs-title": {
      "$value": "72px",
      "$description": "Title: a section.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-title",
          "value": "clamp(38px, 4.8vw, 72px)"
        }
      }
    },
    "fs-heading": {
      "$value": "48px",
      "$description": "Heading: a guide’s title.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-heading",
          "value": "clamp(34px, 3.4vw, 48px)"
        }
      }
    },
    "fs-head": {
      "$value": "24px",
      "$description": "Head: a small heading.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-head",
          "value": "24px"
        }
      }
    },
    "fs-lede": {
      "$value": "19px",
      "$description": "Lede: the line under a headline.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-lede",
          "value": "19px"
        }
      }
    },
    "fs-read": {
      "$value": "17px",
      "$description": "Read: a guide’s running text.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-read",
          "value": "17px"
        }
      }
    },
    "fs-body": {
      "$value": "16px",
      "$description": "Body.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-body",
          "value": "16px"
        }
      }
    },
    "fs-small": {
      "$value": "14.5px",
      "$description": "Small.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-small",
          "value": "14.5px"
        }
      }
    },
    "fs-meta": {
      "$value": "13px",
      "$description": "Meta: labels, times and counts.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fs-meta",
          "value": "13px"
        }
      }
    }
  },
  "space": {
    "$type": "dimension",
    "$description": "On 4 px. A section has --sec at each end.",
    "s-1": {
      "$value": "4px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-1",
          "value": "4px"
        }
      }
    },
    "s-2": {
      "$value": "8px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-2",
          "value": "8px"
        }
      }
    },
    "s-3": {
      "$value": "12px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-3",
          "value": "12px"
        }
      }
    },
    "s-4": {
      "$value": "16px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-4",
          "value": "16px"
        }
      }
    },
    "s-5": {
      "$value": "20px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-5",
          "value": "20px"
        }
      }
    },
    "s-6": {
      "$value": "24px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-6",
          "value": "24px"
        }
      }
    },
    "s-7": {
      "$value": "32px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-7",
          "value": "32px"
        }
      }
    },
    "s-8": {
      "$value": "44px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-8",
          "value": "44px"
        }
      }
    },
    "s-9": {
      "$value": "56px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-9",
          "value": "56px"
        }
      }
    },
    "s-10": {
      "$value": "84px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-10",
          "value": "84px"
        }
      }
    },
    "s-11": {
      "$value": "120px",
      "$extensions": {
        "com.flaghand": {
          "css": "--s-11",
          "value": "120px"
        }
      }
    },
    "sec": {
      "$value": "120px",
      "$description": "A section’s space at each end.",
      "$extensions": {
        "com.flaghand": {
          "css": "--sec",
          "value": "120px"
        }
      }
    }
  },
  "grid": {
    "$type": "dimension",
    "$description": "12 columns.",
    "page": {
      "$value": "1440px",
      "$description": "The page at its widest.",
      "$extensions": {
        "com.flaghand": {
          "css": "--page",
          "value": "1440px"
        }
      }
    },
    "margin": {
      "$value": "56px",
      "$description": "The page’s side margins.",
      "$extensions": {
        "com.flaghand": {
          "css": "--margin",
          "value": "56px"
        }
      }
    },
    "gutter": {
      "$value": "24px",
      "$description": "Between the 12 columns.",
      "$extensions": {
        "com.flaghand": {
          "css": "--gutter",
          "value": "24px"
        }
      }
    },
    "measure": {
      "$value": "680px",
      "$description": "Running text at its widest, about seventy characters.",
      "$extensions": {
        "com.flaghand": {
          "css": "--measure",
          "value": "680px"
        }
      }
    },
    "sheet-w": {
      "$value": "880px",
      "$description": "A sheet at its widest.",
      "$extensions": {
        "com.flaghand": {
          "css": "--sheet-w",
          "value": "880px"
        }
      }
    }
  },
  "radius": {
    "$type": "dimension",
    "$description": "One small set.",
    "r-inline": {
      "$value": "4px",
      "$description": "Inline code and focus rings.",
      "$extensions": {
        "com.flaghand": {
          "css": "--r-inline",
          "value": "4px"
        }
      }
    },
    "r-control": {
      "$value": "12px",
      "$description": "Buttons and fields.",
      "$extensions": {
        "com.flaghand": {
          "css": "--r-control",
          "value": "12px"
        }
      }
    },
    "r-card": {
      "$value": "14px",
      "$description": "Cards, posts and code blocks.",
      "$extensions": {
        "com.flaghand": {
          "css": "--r-card",
          "value": "14px"
        }
      }
    },
    "r-sheet": {
      "$value": "22px",
      "$description": "Sheets.",
      "$extensions": {
        "com.flaghand": {
          "css": "--r-sheet",
          "value": "22px"
        }
      }
    }
  },
  "motion": {
    "$type": "duration",
    "$description": "Fast and quiet, never on scroll; off when reduced motion is on.",
    "ease": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0,
        1
      ],
      "$description": "Every transition’s curve.",
      "$extensions": {
        "com.flaghand": {
          "css": "--ease",
          "value": "cubic-bezier(.2, 0, 0, 1)"
        }
      }
    },
    "fast": {
      "$value": "150ms",
      "$description": "Hovers and fields.",
      "$extensions": {
        "com.flaghand": {
          "css": "--fast",
          "value": "150ms"
        }
      }
    },
    "base": {
      "$value": "220ms",
      "$description": "Buttons and loops.",
      "$extensions": {
        "com.flaghand": {
          "css": "--base",
          "value": "220ms"
        }
      }
    },
    "slow": {
      "$value": "400ms",
      "$description": "The longest.",
      "$extensions": {
        "com.flaghand": {
          "css": "--slow",
          "value": "400ms"
        }
      }
    }
  },
  "type": {
    "$type": "typography",
    "$description": "The type steps, one family set tight. Each is a CSS class or names the rule it reads.",
    "display": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-display}",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": "-0.045em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".display"
        }
      }
    },
    "hold": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-hold}",
        "fontWeight": 700,
        "lineHeight": 0.92,
        "letterSpacing": "-0.045em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".hold"
        }
      }
    },
    "title": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-title}",
        "fontWeight": 700,
        "lineHeight": 0.98,
        "letterSpacing": "-0.04em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".title"
        }
      }
    },
    "heading": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-heading}",
        "fontWeight": 700,
        "lineHeight": 1,
        "letterSpacing": "-0.035em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".heading"
        }
      }
    },
    "head": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-head}",
        "fontWeight": 700,
        "lineHeight": 1.15,
        "letterSpacing": "-0.025em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".head"
        }
      }
    },
    "lede": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-lede}",
        "fontWeight": 400,
        "lineHeight": 1.45,
        "letterSpacing": "-0.01em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".lede"
        }
      }
    },
    "read": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-read}",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "-0.005em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".article p"
        }
      }
    },
    "body": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-body}",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.005em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": "body"
        }
      }
    },
    "small": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-small}",
        "fontWeight": 400,
        "lineHeight": 1.45,
        "letterSpacing": "-0.005em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".small"
        }
      }
    },
    "meta": {
      "$value": {
        "fontFamily": "{font.font}",
        "fontSize": "{size.fs-meta}",
        "fontWeight": 400,
        "lineHeight": 1.35,
        "letterSpacing": "-0.005em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".meta"
        }
      }
    },
    "mono": {
      "$value": {
        "fontFamily": "{font.mono}",
        "fontSize": "15px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "0em"
      },
      "$extensions": {
        "com.flaghand": {
          "css": ".term"
        }
      }
    }
  }
}