{
  "name": "nine75",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "forest",
        "value": "#14352A",
        "usage": "Forest green, the brand colour (Wood in tsi). The logo on light grounds, headings and text in the light theme, cards in the dark theme. Use through `ink`, `logo` and `surface`, not directly."
      },
      {
        "name": "deep",
        "value": "#0D241C",
        "usage": "Deep green, the dark ground (Wood). The page in the dark theme and the text on saffron (`on-accent`). Stands in for black, which the brand avoids (Water in tsi)."
      },
      {
        "name": "saffron",
        "value": "#F29A1F",
        "usage": "Saffron (Fire in tsi), the one accent. Fills only on light grounds (never text there, 2.0:1 on silver); as text only on the dark grounds. Use through `accent` and `mark`."
      },
      {
        "name": "silver",
        "value": "#F4F5F7",
        "usage": "Silver (Iron in tsi), the light page ground and the text colour in the dark theme."
      },
      {
        "name": "white",
        "value": "#FFFFFF",
        "usage": "White. Cards and bands in the light theme; the logo on dark and saffron-free green grounds."
      },
      {
        "name": "cream",
        "value": "#FDF3E4",
        "usage": "Saffron cream, the tint behind selected chips and highlighted rows in the light theme."
      },
      {
        "name": "bg",
        "value": {
          "light": "{silver}",
          "dark": "{deep}"
        },
        "usage": "Page background."
      },
      {
        "name": "bg-band",
        "value": {
          "light": "{white}",
          "dark": "#10291F"
        },
        "usage": "Alternate section bands, so long pages read in chapters."
      },
      {
        "name": "surface",
        "value": {
          "light": "{white}",
          "dark": "{forest}"
        },
        "usage": "Cards, fields, sheets, the menu. In light it sits on `bg` with a `line` border; in dark it is forest green on deep green."
      },
      {
        "name": "surface-raised",
        "value": {
          "light": "#ECF0EE",
          "dark": "#1B4034"
        },
        "usage": "A hovered or pressed card, table header, code."
      },
      {
        "name": "ink",
        "value": {
          "light": "{forest}",
          "dark": "{silver}"
        },
        "usage": "Headings and primary text, on `bg`, `bg-band`, `surface`, `surface-raised` and `accent-soft` (11.5:1 or more in both themes)."
      },
      {
        "name": "ink-muted",
        "value": {
          "light": "#4B5D55",
          "dark": "#B3C5BC"
        },
        "usage": "Secondary text: leads, descriptions, meta, captions. On `bg`, `bg-band`, `surface` and `surface-raised` (6.1:1 or more in both themes)."
      },
      {
        "name": "ink-dim",
        "value": {
          "light": "#71847B",
          "dark": "#7E978B"
        },
        "usage": "Text 24px and larger or purely decorative only, such as a big folio number (3.5:1 or more). Never body copy."
      },
      {
        "name": "logo",
        "value": {
          "light": "{forest}",
          "dark": "{white}"
        },
        "usage": "The logo: forest green on light grounds, white on dark ones. The logo is never saffron."
      },
      {
        "name": "mark",
        "value": {
          "light": "{forest}",
          "dark": "{saffron}"
        },
        "usage": "Small highlights inside text: the number in an eyebrow, list bullets, the active nav marker. Saffron where it reads (dark theme, 5.1:1 or more), forest green in light, where saffron text is too faint."
      },
      {
        "name": "line",
        "value": {
          "light": "#DCE2DF",
          "dark": "#24473A"
        },
        "usage": "Hairlines, dividers and resting card borders. Decorative, so no contrast floor."
      },
      {
        "name": "line-strong",
        "value": {
          "light": "#78897F",
          "dark": "#6F9083"
        },
        "usage": "Borders that carry meaning: inputs, chips, the secondary button (3.2:1 or more on every ground)."
      },
      {
        "name": "accent",
        "value": {
          "light": "{saffron}",
          "dark": "{saffron}"
        },
        "usage": "The primary button, selected states, progress fills, the key dot in a highlight. One primary button per view."
      },
      {
        "name": "on-accent",
        "value": {
          "light": "{deep}",
          "dark": "{deep}"
        },
        "usage": "Text and icons on an `accent` fill (7.3:1). Never white on saffron (2.2:1)."
      },
      {
        "name": "accent-soft",
        "value": {
          "light": "{cream}",
          "dark": "#2D371F"
        },
        "usage": "Tint behind a selected chip or a highlighted row; text on it stays `ink`."
      },
      {
        "name": "focus",
        "value": {
          "light": "{forest}",
          "dark": "{saffron}"
        },
        "usage": "Keyboard focus: a 2px solid outline, 3px offset. 5.1:1 or more on every ground in both themes."
      },
      {
        "name": "success",
        "value": {
          "light": "#1B6A45",
          "dark": "#6FD6A3"
        },
        "usage": "Success text (form sent, a check that passed), on any ground. Always with a word or a check icon."
      },
      {
        "name": "danger",
        "value": {
          "light": "#B3261E",
          "dark": "#FF9186"
        },
        "usage": "Error text and an invalid field's border, on any ground. Always with a word saying what to fix."
      }
    ]
  },
  "type": {
    "fonts": [
      {
        "family": "Schibsted Grotesk",
        "file": "fonts/schibsted-grotesk-800.woff2",
        "weight": "800",
        "style": "normal"
      },
      {
        "family": "Geist",
        "file": "fonts/geist-variable.woff2",
        "weight": "100 900",
        "style": "normal"
      }
    ],
    "families": {
      "display": "\"Schibsted Grotesk\", ui-sans-serif, system-ui, sans-serif",
      "sans": "Geist, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "note": "Schibsted Grotesk ExtraBold, the logo's face. Headings only, sentence case, tight. Sizes are fluid; the value shown is at a 1280px screen.",
        "styles": [
          {
            "name": "mega",
            "fontSize": "136px",
            "lineHeight": 0.92,
            "fontWeight": 800,
            "letterSpacing": "-0.045em",
            "sample": "We build the web for Bhutan",
            "usage": "The home hero headline only. Fluid: 52px on phones to 168px on wide screens, clamp(3.25rem, 1.2rem + 9vw, 10.5rem)."
          },
          {
            "name": "display-1",
            "fontSize": "88px",
            "lineHeight": 0.96,
            "fontWeight": 800,
            "letterSpacing": "-0.04em",
            "sample": "Selected work",
            "usage": "Page titles (h1). Fluid: 40px on phones to 104px, clamp(2.5rem, 1.4rem + 5vw, 6.5rem)."
          },
          {
            "name": "display-2",
            "fontSize": "60px",
            "lineHeight": 1,
            "fontWeight": 800,
            "letterSpacing": "-0.035em",
            "sample": "How a project runs",
            "usage": "Section titles (h2). Fluid: 32px on phones to 68px, clamp(2rem, 1.3rem + 3vw, 4.25rem)."
          },
          {
            "name": "h3",
            "fontSize": "28px",
            "lineHeight": 1.15,
            "fontWeight": 800,
            "letterSpacing": "-0.02em",
            "sample": "WordPress websites",
            "usage": "Card titles, list-row titles, FAQ questions. Fluid: 20px on phones to 30px, clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem)."
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "note": "Geist for everything that is not a heading. 16px is the floor for anything a person types into.",
        "styles": [
          {
            "name": "lead",
            "fontSize": "22px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "sample": "Websites for Bhutanese businesses that load fast on every phone.",
            "usage": "The paragraph under a page or section title, in `ink-muted`, at most 58 characters wide. 18px on phones."
          },
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": 1.65,
            "fontWeight": 400,
            "sample": "We quote in Nu., in writing, before any work starts.",
            "usage": "Reading text and descriptions, at most 68 characters wide."
          },
          {
            "name": "ui",
            "fontSize": "16px",
            "lineHeight": 1.2,
            "fontWeight": 500,
            "sample": "Start a project",
            "usage": "Buttons, inputs, nav links, chips. 16px so iPhones never zoom into a field."
          },
          {
            "name": "small",
            "fontSize": "14px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "sample": "Bhutan Time (UTC+6) · replies within 24 hours",
            "usage": "Meta lines, captions, hints under a field, table cells."
          },
          {
            "name": "label",
            "fontSize": "12px",
            "lineHeight": 1,
            "fontWeight": 500,
            "letterSpacing": "0.08em",
            "sample": "SERVICES",
            "usage": "Eyebrows, tags and table headers. Always UPPERCASE (add text-transform); the only style with open tracking."
          }
        ]
      }
    ]
  },
  "spacing": {
    "note": "A 4px base (the site's Tailwind scale). Layout steps are the semantic ones below.",
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Icon to its label, tight stacks."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Eyebrow to title, inside chips."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Title to body in a card; bento gap on phones."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Between rows of a form; bento gap from 768px."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "Page gutter on phones; bento gap from 1024px."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Card padding; a link under a section intro."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Page gutter from 768px; large card padding."
      },
      {
        "name": "space-10",
        "value": "40px",
        "usage": "Section title to its content on phones."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Page gutter from 1024px; section title to content on desktop."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Between blocks inside a section."
      },
      {
        "name": "space-20",
        "value": "80px",
        "usage": "Section padding on phones (the fluid section pad starts here)."
      },
      {
        "name": "space-24",
        "value": "96px",
        "usage": "Hero bottom space."
      },
      {
        "name": "space-32",
        "value": "128px",
        "usage": "Section padding around 1024px."
      },
      {
        "name": "space-44",
        "value": "176px",
        "usage": "Section padding on wide screens (the fluid section pad ends here): clamp(5rem, 3.5rem + 7vw, 11rem)."
      },
      {
        "name": "container",
        "value": "1320px",
        "usage": "The content column's maximum width, plus the gutters."
      },
      {
        "name": "measure",
        "value": "68ch",
        "usage": "The widest a reading paragraph gets."
      },
      {
        "name": "touch",
        "value": "44px",
        "usage": "The smallest tap target: compact buttons, icon buttons, chips."
      },
      {
        "name": "control",
        "value": "52px",
        "usage": "Height of a default button and an input."
      }
    ]
  },
  "radius": {
    "note": "Rounded, never boxy. The logo's own shapes (app icon, key dot) set the character.",
    "tokens": [
      {
        "name": "radius-sm",
        "value": "10px",
        "usage": "Inputs, small tiles."
      },
      {
        "name": "radius-md",
        "value": "16px",
        "usage": "Media inside a card, callouts, code blocks."
      },
      {
        "name": "radius-lg",
        "value": "24px",
        "usage": "Cards, sheets, the menu."
      },
      {
        "name": "radius-xl",
        "value": "32px",
        "usage": "Hero media and big panels."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Buttons and chips."
      },
      {
        "name": "radius-icon",
        "value": "22.6%",
        "usage": "The app icon and the browser-tab icon (14.5 of 64)."
      },
      {
        "name": "radius-key",
        "value": "30%",
        "usage": "A keypad key: the dot on the logo's i and the keys in the tab icon."
      }
    ]
  },
  "shadow": {
    "note": "Depth is quiet. Only the card lifts; the saffron glow is for the primary button's hover.",
    "tokens": [
      {
        "name": "shadow-card",
        "value": {
          "light": "0 1px 2px #14352a0f, 0 12px 32px -12px #14352a29",
          "dark": "0 1px 0 #ffffff0a inset, 0 20px 60px -20px #04100b99"
        },
        "usage": "Cards and sheets at rest."
      },
      {
        "name": "shadow-glow",
        "value": {
          "light": "0 0 0 1px #f29a1f59, 0 10px 32px -8px #f29a1f66",
          "dark": "0 0 0 1px #f29a1f59, 0 10px 40px -8px #f29a1f73"
        },
        "usage": "The primary button on hover. Nothing else glows."
      }
    ]
  }
}