Far

{
  "$type": "color",
  "$description": "A small Mediterranean palette, named after what it actually looks like rather than a numbered grey scale: sand, ink, tide, aqua, olive.",
  "sand": {
    "50": {
      "$value": "#FBFAF8"
    },
    "100": {
      "$value": "#F6F5F1"
    },
    "200": {
      "$value": "#EFEDE7"
    },
    "300": {
      "$value": "#E4E1D9"
    },
    "400": {
      "$value": "#D2CEC4"
    }
  },
  "ink": {
    "300": {
      "$value": "#8993A3"
    },
    "400": {
      "$value": "#5F6673"
    },
    "500": {
      "$value": "#525A67"
    },
    "700": {
      "$value": "#2A3547"
    },
    "800": {
      "$value": "#1A2434"
    },
    "900": {
      "$value": "#0B1320"
    }
  },
  "tide": {
    "50": {
      "$value": "#E8ECF2"
    },
    "200": {
      "$value": "#9AA5B5"
    },
    "600": {
      "$value": "#1E2A3C"
    },
    "700": {
      "$value": "#152033"
    },
    "800": {
      "$value": "#101827"
    },
    "900": {
      "$value": "#0B1320"
    },
    "950": {
      "$value": "#08111F"
    },
    "1000": {
      "$value": "#060D18"
    }
  },
  "aqua": {
    "300": {
      "$value": "#4FD6CF"
    },
    "400": {
      "$value": "#2FB8B2"
    },
    "600": {
      "$value": "#0A7178"
    },
    "700": {
      "$value": "#075B61"
    }
  },
  "olive": {
    "400": {
      "$value": "#7FB89A"
    },
    "600": {
      "$value": "#2F6B4F"
    }
  }
}

{
  "light": {
    "$type": "color",
    "bg": {
      "$value": "{primitive.color.sand.100}"
    },
    "bg-subtle": {
      "$value": "{primitive.color.sand.200}"
    },
    "surface": {
      "$value": "{primitive.color.sand.50}"
    },
    "surface-raised": {
      "$value": "#FFFFFF"
    },
    "text": {
      "$value": "{primitive.color.ink.900}"
    },
    "text-muted": {
      "$value": "{primitive.color.ink.500}"
    },
    "text-subtle": {
      "$value": "{primitive.color.ink.400}"
    },
    "text-inverse": {
      "$value": "{primitive.color.sand.100}"
    },
    "border": {
      "$value": "{primitive.color.sand.400}"
    },
    "border-subtle": {
      "$value": "{primitive.color.sand.300}"
    },
    "border-strong": {
      "$value": "{primitive.color.ink.900}"
    },
    "frame": {
      "$value": "#FFFFFF",
      "$description": "The page frame: a white mat around everything, as on the previous site."
    },
    "accent": {
      "$value": "{primitive.color.aqua.600}"
    },
    "accent-hover": {
      "$value": "{primitive.color.aqua.700}"
    },
    "accent-contrast": {
      "$value": "#FFFFFF"
    },
    "positive": {
      "$value": "{primitive.color.olive.600}"
    },
    "danger": {
      "$value": "#B42318"
    },
    "focus": {
      "$value": "{primitive.color.aqua.600}"
    },
    "cursor": {
      "$value": "{primitive.color.ink.900}"
    },
    "grid-dot": {
      "$value": "{primitive.color.sand.400}"
    },
    "selection": {
      "$value": "#C9EEEC"
    }
  },
  "dark": {
    "$type": "color",
    "bg": {
      "$value": "{primitive.color.tide.1000}"
    },
    "bg-subtle": {
      "$value": "{primitive.color.tide.900}"
    },
    "surface": {
      "$value": "{primitive.color.tide.900}"
    },
    "surface-raised": {
      "$value": "{primitive.color.tide.800}"
    },
    "text": {
      "$value": "{primitive.color.tide.50}"
    },
    "text-muted": {
      "$value": "{primitive.color.tide.200}"
    },
    "text-subtle": {
      "$value": "{primitive.color.ink.300}"
    },
    "text-inverse": {
      "$value": "{primitive.color.tide.950}"
    },
    "border": {
      "$value": "{primitive.color.tide.600}"
    },
    "border-subtle": {
      "$value": "{primitive.color.tide.700}"
    },
    "border-strong": {
      "$value": "{primitive.color.tide.50}"
    },
    "frame": {
      "$value": "#FFFFFF",
      "$description": "Same pure white in both themes."
    },
    "accent": {
      "$value": "{primitive.color.aqua.300}"
    },
    "accent-hover": {
      "$value": "#8AEDE6"
    },
    "accent-contrast": {
      "$value": "{primitive.color.tide.950}"
    },
    "positive": {
      "$value": "{primitive.color.olive.400}"
    },
    "danger": {
      "$value": "#FF8A7A"
    },
    "focus": {
      "$value": "{primitive.color.aqua.300}"
    },
    "cursor": {
      "$value": "{primitive.color.tide.50}"
    },
    "grid-dot": {
      "$value": "{primitive.color.tide.600}"
    },
    "selection": {
      "$value": "#0F4A4F"
    }
  }
}

{
  "font": {
    "family": {
      "$type": "fontFamily",
      "sans": {
        "$value": "'Aeonik Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif"
      },
      "mono": {
        "$value": "ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
      }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": {
        "$value": 400
      },
      "medium": {
        "$value": 500
      },
      "bold": {
        "$value": 700
      }
    }
  },
  "size": {
    "$type": "dimension",
    "$description": "Fluid scale (≈ Major Third on mobile → Perfect Fourth on desktop).",
    "xs": {
      "$value": "0.75rem"
    },
    "sm": {
      "$value": "0.875rem"
    },
    "base": {
      "$value": "clamp(1rem, 0.96rem + 0.18vw, 1.125rem)"
    },
    "md": {
      "$value": "clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem)"
    },
    "lg": {
      "$value": "clamp(1.3125rem, 1.18rem + 0.6vw, 1.75rem)"
    },
    "xl": {
      "$value": "clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem)"
    },
    "2xl": {
      "$value": "clamp(2rem, 1.5rem + 2.2vw, 3.5rem)"
    },
    "3xl": {
      "$value": "clamp(2.5rem, 1.7rem + 3.6vw, 5rem)"
    },
    "display": {
      "$value": "clamp(2.875rem, 1.6rem + 5.6vw, 7.5rem)"
    }
  },
  "leading": {
    "$type": "number",
    "tight": {
      "$value": 1.02
    },
    "snug": {
      "$value": 1.15
    },
    "normal": {
      "$value": 1.5
    },
    "relaxed": {
      "$value": 1.65
    }
  },
  "tracking": {
    "$type": "dimension",
    "tight": {
      "$value": "-0.035em"
    },
    "snug": {
      "$value": "-0.02em"
    },
    "normal": {
      "$value": "0"
    },
    "wide": {
      "$value": "0.08em"
    }
  }
}

{
  "$type": "typography",
  "$description": "Text styles. Each one is a ready-made class (.t-*) that combines size, leading, tracking and weight.",
  "display": {
    "$value": {
      "fontSize": "{type.display}",
      "lineHeight": "{leading.tight}",
      "letterSpacing": "{tracking.tight}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "The hero headline",
    "$extensions": {
      "class": "t-display"
    }
  },
  "title": {
    "$value": {
      "fontSize": "{type.3xl}",
      "lineHeight": 1.05,
      "letterSpacing": "{tracking.tight}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Page titles",
    "$extensions": {
      "class": "t-3xl"
    }
  },
  "heading": {
    "$value": {
      "fontSize": "{type.2xl}",
      "lineHeight": 1.1,
      "letterSpacing": "{tracking.tight}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Section titles",
    "$extensions": {
      "class": "t-2xl"
    }
  },
  "subheading": {
    "$value": {
      "fontSize": "{type.xl}",
      "lineHeight": "{leading.snug}",
      "letterSpacing": "{tracking.snug}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Titles inside a section",
    "$extensions": {
      "class": "t-xl"
    }
  },
  "lead": {
    "$value": {
      "fontSize": "{type.lg}",
      "lineHeight": 1.4,
      "letterSpacing": "-0.01em",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Introductions and list titles",
    "$extensions": {
      "class": "t-lg"
    }
  },
  "body-large": {
    "$value": {
      "fontSize": "{type.md}",
      "lineHeight": "{leading.normal}",
      "letterSpacing": "{tracking.normal}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Larger running text",
    "$extensions": {
      "class": "t-md"
    }
  },
  "body": {
    "$value": {
      "fontSize": "{type.base}",
      "lineHeight": "{leading.relaxed}",
      "letterSpacing": "{tracking.normal}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Running text, the default",
    "$extensions": {
      "class": "(default)"
    }
  },
  "caption": {
    "$value": {
      "fontSize": "{type.sm}",
      "lineHeight": "{leading.normal}",
      "letterSpacing": "{tracking.normal}",
      "fontWeight": "{primitive.font.weight.regular}"
    },
    "$description": "Captions, interface text and metadata",
    "$extensions": {
      "class": "t-sm"
    }
  },
  "label": {
    "$value": {
      "fontSize": "{type.xs}",
      "lineHeight": "{leading.normal}",
      "letterSpacing": "{tracking.wide}",
      "fontWeight": "{primitive.font.weight.medium}"
    },
    "$description": "Eyebrows and section markers, always uppercase",
    "$extensions": {
      "class": "t-label"
    }
  }
}

{
  "space": {
    "0": {
      "$value": "0"
    },
    "1": {
      "$value": "0.25rem"
    },
    "2": {
      "$value": "0.5rem"
    },
    "3": {
      "$value": "0.75rem"
    },
    "4": {
      "$value": "1rem"
    },
    "5": {
      "$value": "1.5rem"
    },
    "6": {
      "$value": "2rem"
    },
    "7": {
      "$value": "3rem"
    },
    "8": {
      "$value": "4rem"
    },
    "9": {
      "$value": "6rem"
    },
    "10": {
      "$value": "8rem"
    },
    "11": {
      "$value": "12rem"
    }
  },
  "breakpoint": {
    "$type": "dimension",
    "$description": "Reference only — CSS media queries can't read custom properties. Mirror these in @media rules.",
    "sm": {
      "$value": "480px"
    },
    "md": {
      "$value": "768px"
    },
    "lg": {
      "$value": "1024px"
    },
    "xl": {
      "$value": "1280px"
    },
    "2xl": {
      "$value": "1536px"
    }
  }
}

{
  "rhythm": {
    "section": {
      "$value": "clamp(4.5rem, 3rem + 5vw, 8.5rem)",
      "$description": "Vertical rhythm between page sections"
    },
    "block": {
      "$value": "clamp(3rem, 2rem + 4vw, 6rem)",
      "$description": "Vertical rhythm between blocks inside a section"
    }
  },
  "layout": {
    "$type": "dimension",
    "max": {
      "$value": "1440px",
      "$description": "Widest the content ever gets"
    },
    "margin": {
      "$value": "clamp(1.25rem, 0.5rem + 3.5vw, 5rem)",
      "$description": "Space between the page edge and the content"
    },
    "gutter": {
      "$value": "clamp(1rem, 0.6rem + 1.4vw, 2rem)",
      "$description": "Space between grid columns"
    },
    "nav-h": {
      "$value": "4.5rem",
      "$description": "Height of the navigation bar"
    }
  },
  "measure": {
    "$type": "dimension",
    "narrow": {
      "$value": "34ch",
      "$description": "Short blocks: captions, pull quotes"
    },
    "body": {
      "$value": "64ch",
      "$description": "Running text; the default reading width"
    },
    "wide": {
      "$value": "80ch",
      "$description": "Long-form and code"
    }
  }
}

{
  "radius": {
    "$type": "dimension",
    "$description": "Mostly square UI, but photography gets a bigger, more modern curve: lg is for images specifically, not general UI.",
    "none": {
      "$value": "0"
    },
    "xs": {
      "$value": "2px"
    },
    "sm": {
      "$value": "4px"
    },
    "md": {
      "$value": "8px"
    },
    "lg": {
      "$value": "20px"
    },
    "pill": {
      "$value": "999px"
    }
  },
  "border": {
    "$type": "dimension",
    "hairline": {
      "$value": "1px"
    },
    "strong": {
      "$value": "1.5px"
    },
    "focus": {
      "$value": "2px"
    }
  },
  "elevation": {
    "0": {
      "$value": "none"
    },
    "1": {
      "$value": "0 1px 2px rgb(11 19 32 / 0.06), 0 2px 8px rgb(11 19 32 / 0.04)"
    },
    "2": {
      "$value": "0 8px 24px rgb(11 19 32 / 0.08), 0 2px 6px rgb(11 19 32 / 0.05)"
    },
    "3": {
      "$value": "0 24px 64px rgb(11 19 32 / 0.14), 0 6px 16px rgb(11 19 32 / 0.06)"
    },
    "$type": "shadow"
  }
}

{
  "$description": "Which radius, border and shadow to reach for, by job.",
  "media": {
    "$type": "dimension",
    "$value": "{radius.lg}",
    "$description": "Images, project tiles, callouts and video previews"
  },
  "control": {
    "$type": "dimension",
    "$value": "{radius.pill}",
    "$description": "Anything you press: buttons, toggles, tags"
  },
  "field": {
    "$type": "dimension",
    "$value": "{radius.sm}",
    "$description": "Inputs, code blocks and the password gate"
  },
  "inline": {
    "$type": "dimension",
    "$value": "{radius.xs}",
    "$description": "Small marks and focus corners"
  },
  "divider": {
    "$type": "dimension",
    "$value": "{border.hairline}",
    "$description": "Every rule and outline: lists, cards, fields"
  },
  "focus-ring": {
    "$type": "dimension",
    "$value": "{border.focus}",
    "$description": "The keyboard focus outline"
  },
  "raised": {
    "$type": "shadow",
    "$value": "{elevation.1}",
    "$description": "A control that sits above its track, like a toggle thumb"
  },
  "floating": {
    "$type": "shadow",
    "$value": "{elevation.2}",
    "$description": "Cards that float over a surface"
  },
  "overlay": {
    "$type": "shadow",
    "$value": "{elevation.3}",
    "$description": "Previews and dialogs above the page"
  }
}

{
  "duration": {
    "$type": "duration",
    "$description": "Named for how long they feel, not what they're for. Reused across the site by feel, not by component.",
    "blink": {
      "$value": "80ms"
    },
    "quick": {
      "$value": "160ms"
    },
    "easy": {
      "$value": "280ms"
    },
    "unhurried": {
      "$value": "560ms"
    },
    "patient": {
      "$value": "900ms"
    }
  },
  "ease": {
    "$type": "cubicBezier",
    "$description": "Four hand-tuned curves, not the stock Material/CSS ones. Named by what they do rather than a spec keyword.",
    "steady": {
      "$value": [
        0.22,
        0.04,
        0.03,
        1
      ],
      "$description": "The default. Even-handed, for ordinary state changes: hover, colour, border."
    },
    "float": {
      "$value": [
        0.14,
        0.8,
        0.24,
        1
      ],
      "$description": "Slow to start, gentle landing. For things arriving: reveals, headlines, dialogs."
    },
    "drop": {
      "$value": [
        0.36,
        0.02,
        0.94,
        0.06
      ],
      "$description": "Leaves fast and doesn't look back. For things dismissed or scrolled past."
    },
    "pivot": {
      "$value": [
        0.62,
        0.04,
        0.32,
        1
      ],
      "$description": "A short pause, then commits. For things that swing between two states: the theme switch, a toggle."
    }
  }
}

{
  "$type": "transition",
  "$description": "Which duration and curve to reach for, by job. Movement explains, never decorates.",
  "feedback": {
    "$value": {
      "duration": "{motion.duration.easy}",
      "timingFunction": "{motion.ease.steady}"
    },
    "$description": "Hover, colour and border changes: the everyday state change"
  },
  "move": {
    "$value": {
      "duration": "{motion.duration.unhurried}",
      "timingFunction": "{motion.ease.float}"
    },
    "$description": "Things that move or arrive: lifts, image zoom, underlines drawing"
  },
  "reveal": {
    "$value": {
      "duration": "{motion.duration.patient}",
      "timingFunction": "{motion.ease.float}"
    },
    "$description": "Scroll reveals and headlines entering the page"
  },
  "toggle": {
    "$value": {
      "duration": "{motion.duration.easy}",
      "timingFunction": "{motion.ease.pivot}"
    },
    "$description": "Switches that swing between two states, like a toggle thumb"
  }
}