{
  "name": "Human Layer Design System",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "dark",
        "name": "Dark"
      },
      {
        "id": "light",
        "name": "Light"
      }
    ],
    "tokens": [
      {
        "name": "orange",
        "value": "#f69f19",
        "usage": "Primary brand color, #F69F19 \u2014 the same orange as the logo. Logo, primary buttons, the one bright move per view. 9.6:1 on `neutral-primary`; 2.1:1 on white, so on light grounds it is a fill only, never text. Same value in both themes."
      },
      {
        "name": "green",
        "value": "#3fb984",
        "usage": "Secondary brand color. The dot in the logo, verified states, positive deltas. 8.2:1 on `neutral-primary`; a fill only on white. Same value in both themes."
      },
      {
        "name": "neutral-primary",
        "value": "#070501",
        "usage": "Neutral (P) from the brand book: the warm near-black. Dark page ground, and the ink on orange and green fills (10:1 and 8.2:1)."
      },
      {
        "name": "neutral-secondary",
        "value": "#020805",
        "usage": "Neutral (S) from the brand book: the green-black. Sunken wells and alternate bands in dark mode."
      },
      {
        "name": "purple",
        "value": "#9139f6",
        "usage": "Supporting color. Platinum tier fills and data-viz series. White text on it passes (5.1:1); as text on `neutral-primary` it is 4.0:1, so use `tier-platinum` for text in dark mode."
      },
      {
        "name": "gold",
        "value": "#e4b300",
        "usage": "Supporting color. Gold tier fills, streaks, points. Ink text on it (10.4:1); never text on white."
      },
      {
        "name": "slate",
        "value": "#7f9fb1",
        "usage": "Supporting color. Silver tier, secondary data-viz series, quiet metadata marks on dark."
      },
      {
        "name": "surface-page",
        "value": {
          "dark": "{neutral-primary}",
          "light": "#ffffff"
        },
        "usage": "Default page ground."
      },
      {
        "name": "surface-card",
        "value": {
          "dark": "#12100b",
          "light": "#ffffff"
        },
        "usage": "Cards and tiles on `surface-page`. In the light client app, cards are white with a `border-subtle` edge."
      },
      {
        "name": "surface-raised",
        "value": {
          "dark": "#22201c",
          "light": "#f7f4f0"
        },
        "usage": "Nested panels, hover rows, the active tab pill (dark), and the client app sidebar and header (light)."
      },
      {
        "name": "surface-sunken",
        "value": {
          "dark": "{neutral-secondary}",
          "light": "#efede8"
        },
        "usage": "Inset wells, progress tracks, input fields."
      },
      {
        "name": "text-primary",
        "value": {
          "dark": "#ffffff",
          "light": "{neutral-primary}"
        },
        "usage": "Headings, numbers, primary labels on every surface (15:1 or better in both themes)."
      },
      {
        "name": "text-secondary",
        "value": {
          "dark": "#d6d3cc",
          "light": "#3d3a33"
        },
        "usage": "Body copy and descriptions on every surface (9.6:1 or better in both themes)."
      },
      {
        "name": "text-muted",
        "value": {
          "dark": "#a8a49a",
          "light": "#6b675e"
        },
        "usage": "Captions, metadata, inactive tabs on every surface (4.8:1 or better in both themes). Nothing lighter is text."
      },
      {
        "name": "border-subtle",
        "value": {
          "dark": "#2a2720",
          "light": "#e6e3dc"
        },
        "usage": "Decorative hairlines: card edges, dividers. Meaning never rides on it."
      },
      {
        "name": "border-control",
        "value": {
          "dark": "#77705f",
          "light": "#858074"
        },
        "usage": "Edges of inputs, secondary buttons and toggles; 3.2:1 or better on every surface in both themes."
      },
      {
        "name": "brand-fill",
        "value": "{orange}",
        "usage": "Primary button fill and the active tab marker."
      },
      {
        "name": "brand-fill-hover",
        "value": {
          "dark": "#fdb43f",
          "light": "#e8920a"
        },
        "usage": "Hover of `brand-fill`; the label stays `on-brand`."
      },
      {
        "name": "on-brand",
        "value": "{neutral-primary}",
        "usage": "Label and icon on `brand-fill`, `secondary-fill` and `gold` (8:1 or better). Never white on orange or green."
      },
      {
        "name": "brand-text",
        "value": {
          "dark": "{orange}",
          "light": "#a35f00"
        },
        "usage": "Orange as text and links: `surface-page`, `surface-card`, `surface-raised` (4.6:1 or better). Light mode deepens it; bright orange is never text on white."
      },
      {
        "name": "brand-wash",
        "value": {
          "dark": "#513303",
          "light": "#fff3dc"
        },
        "usage": "Orange tint: the \"Copy link\" button fill and highlight badges. Text on it is `brand-text` (5.7:1 dark, 4.6:1 light)."
      },
      {
        "name": "secondary-fill",
        "value": "{green}",
        "usage": "Verified states, accept and confirm fills, the positive delta chip."
      },
      {
        "name": "secondary-text",
        "value": {
          "dark": "{green}",
          "light": "#1f7a52"
        },
        "usage": "Green as text: positive amounts (+$260), 'Verified'. On `surface-page`, `surface-card`, `surface-raised`."
      },
      {
        "name": "secondary-wash",
        "value": {
          "dark": "#101f11",
          "light": "#e6f6ee"
        },
        "usage": "Green tint: the Refer and earn card and \"Medical verified\" badges. Text on it is `secondary-text` (6.9:1 dark, 4.7:1 light)."
      },
      {
        "name": "tier-platinum",
        "value": {
          "dark": "#b07dfa",
          "light": "#7a24e0"
        },
        "usage": "Platinum tier text on `surface-card` and `tier-platinum-wash` (5.5:1 or better). Bright `purple` is the tier color in charts and rings."
      },
      {
        "name": "tier-gold",
        "value": {
          "dark": "{gold}",
          "light": "#7d6200"
        },
        "usage": "Gold tier text on `surface-card` and `tier-gold-wash` (5.2:1 or better)."
      },
      {
        "name": "tier-silver",
        "value": {
          "dark": "{slate}",
          "light": "#4f6d7e"
        },
        "usage": "Silver tier text on `surface-card` and `tier-silver-wash` (4.9:1 or better)."
      },
      {
        "name": "tier-platinum-wash",
        "value": {
          "dark": "#2a1547",
          "light": "#f3eafe"
        },
        "usage": "Platinum badge fill; text on it is `tier-platinum`."
      },
      {
        "name": "tier-gold-wash",
        "value": {
          "dark": "#2b2300",
          "light": "#fcf4d6"
        },
        "usage": "Gold badge fill; text on it is `tier-gold`."
      },
      {
        "name": "tier-silver-wash",
        "value": {
          "dark": "#1b232a",
          "light": "#eef3f6"
        },
        "usage": "Silver badge fill; text on it is `tier-silver`."
      },
      {
        "name": "logo-ink",
        "value": "#24211c",
        "usage": "The near-black of the mono logo on orange and green grounds. Reference only."
      },
      {
        "name": "danger",
        "value": {
          "dark": "#ff6b5e",
          "light": "#c4321f"
        },
        "usage": "Errors and destructive actions only, with a word or icon beside it. Not in the brand book; added so apps have an error state."
      },
      {
        "name": "focus-ring",
        "value": {
          "dark": "{orange}",
          "light": "#a35f00"
        },
        "usage": "2px solid focus outline with 2px offset on every interactive element; 4.2:1 or better on every surface."
      }
    ]
  },
  "type": {
    "fonts": [
      {
        "family": "Geist",
        "file": "fonts/Geist-Regular.woff2",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "Geist",
        "file": "fonts/Geist-Medium.woff2",
        "weight": "500",
        "style": "normal"
      },
      {
        "family": "Geist",
        "file": "fonts/Geist-SemiBold.woff2",
        "weight": "600",
        "style": "normal"
      },
      {
        "family": "Geist",
        "file": "fonts/Geist-Bold.woff2",
        "weight": "700",
        "style": "normal"
      }
    ],
    "families": {
      "sans": "\"Geist\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "groups": [
      {
        "name": "Display and headings",
        "family": "sans",
        "styles": [
          {
            "name": "display",
            "fontSize": "56px",
            "lineHeight": "1.05",
            "fontWeight": 700,
            "letterSpacing": "-0.03em",
            "sample": "Verified humans for AI.",
            "usage": "Hero lines and covers. One per view."
          },
          {
            "name": "h1",
            "fontSize": "40px",
            "lineHeight": "1.1",
            "fontWeight": 700,
            "letterSpacing": "-0.025em",
            "sample": "Good morning, Jonathan!",
            "usage": "Page titles and the app greeting."
          },
          {
            "name": "h2",
            "fontSize": "28px",
            "lineHeight": "1.2",
            "fontWeight": 600,
            "letterSpacing": "-0.02em",
            "sample": "Recommended studies",
            "usage": "Section headings."
          },
          {
            "name": "h3",
            "fontSize": "20px",
            "lineHeight": "1.3",
            "fontWeight": 600,
            "letterSpacing": "-0.01em",
            "sample": "Your food habits and routines",
            "usage": "Card titles: a study, a respondent."
          }
        ]
      },
      {
        "name": "Numbers",
        "family": "sans",
        "styles": [
          {
            "name": "stat",
            "fontSize": "32px",
            "lineHeight": "1.1",
            "fontWeight": 600,
            "letterSpacing": "-0.02em",
            "sample": "$624.48",
            "usage": "Balances and KPI tiles. Set `font-variant-numeric: tabular-nums`."
          },
          {
            "name": "stat-sm",
            "fontSize": "20px",
            "lineHeight": "1.2",
            "fontWeight": 600,
            "letterSpacing": "-0.01em",
            "sample": "1,786",
            "usage": "Secondary figures in a tile row; tabular numerals."
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "sample": "Share your experience of using fitness apps to track weight, steps and diet.",
            "usage": "Body copy in `text-secondary`."
          },
          {
            "name": "body-sm",
            "fontSize": "14px",
            "lineHeight": "1.45",
            "fontWeight": 400,
            "sample": "About your food intake, what you like to eat and how often.",
            "usage": "Card descriptions."
          },
          {
            "name": "label",
            "fontSize": "13px",
            "lineHeight": "1.3",
            "fontWeight": 500,
            "sample": "Video call \u00b7 45 min",
            "usage": "Buttons (at 15px), badges, meta rows, tab labels."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": "1.4",
            "fontWeight": 400,
            "sample": "7 days left",
            "usage": "Deadlines and fine print in `text-muted`."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Icon-to-label gap inside badges."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Gap between badges and meta items."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Gap between stacked lines inside a card; tile row gaps."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Card padding on mobile; gap between cards."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "Phone screen side gutter."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Card padding on desktop."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Between sections inside a screen."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Between page sections on marketing pages."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Marketing section padding."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "8px",
        "usage": "Inputs, small chips, progress tracks."
      },
      {
        "name": "radius-md",
        "value": "12px",
        "usage": "Buttons and stat tiles."
      },
      {
        "name": "radius-lg",
        "value": "16px",
        "usage": "Cards: study, respondent, wallet."
      },
      {
        "name": "radius-xl",
        "value": "24px",
        "usage": "Sheets, hero panels, the phone frame."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Badges, tier pills, the tab marker."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-overlay",
        "value": {
          "dark": "0 16px 40px rgba(0,0,0,.55)",
          "light": "0 16px 40px rgba(7,5,1,.14)"
        },
        "usage": "Sheets, menus and modals only. Cards use borders, not shadows."
      }
    ]
  },
  "borderWidth": {
    "tokens": [
      {
        "name": "border-width",
        "value": "1px",
        "usage": "Card and control edges."
      },
      {
        "name": "focus-width",
        "value": "2px",
        "usage": "Width of the `focus-ring` outline, offset 2px."
      },
      {
        "name": "ring-width",
        "value": "6px",
        "usage": "Stroke of the trust score ring."
      }
    ]
  }
}