{
  "$description": "Clockborn design tokens. Source of truth: clockborn.com/brand/",
  "color": {
    "ink": {
      "value": "#111111",
      "name": "Carbon",
      "role": "Ground and type"
    },
    "bone": {
      "value": "#F3EFE6",
      "name": "Cream",
      "role": "Paper and light ground"
    },
    "steel": {
      "value": "#8C8C8C",
      "name": "Graphite",
      "role": "Hinge lines, pencil and fine detail"
    },
    "copper": {
      "value": "#D9541E",
      "name": "Forge Copper",
      "role": "The B, and nothing else"
    },
    "paper": {
      "value": "#FBF9F4",
      "name": "Paper",
      "role": "Raised surface on Cream"
    },
    "sand": {
      "value": "#E9E4D8",
      "name": "Sand",
      "role": "Quiet panel on Cream"
    },
    "rule": {
      "value": "#D9D3C6",
      "name": "Rule",
      "role": "Hairlines on Cream"
    },
    "slate": {
      "value": "#4A4A4A",
      "name": "Slate",
      "role": "Secondary text on Cream"
    },
    "ink2": {
      "value": "#1B1B1B",
      "name": "Carbon Raised",
      "role": "Raised surface on Carbon"
    },
    "ruleDark": {
      "value": "#2E2E2E",
      "name": "Rule Dark",
      "role": "Hairlines on Carbon"
    },
    "mist": {
      "value": "#B9B5AC",
      "name": "Mist",
      "role": "Secondary text on Carbon"
    },
    "copperText": {
      "value": "#4A4A4A",
      "name": "Kicker",
      "role": "Small labels on Cream (grey: copper is kept for the B)"
    }
  },
  "font": {
    "display": {
      "family": "Clockborn Hand",
      "weight": 700,
      "use": "Headlines and navigation, written by hand: work made by people. Segoe Print where installed, Kalam everywhere else. Never used to retype the logo."
    },
    "text": {
      "family": "Clockborn Hand",
      "weight": 400,
      "use": "Body copy and leads, in the same hand as the headlines."
    },
    "mono": {
      "family": "IBM Plex Mono",
      "weight": 400,
      "use": "Labels, specs, data and code. The precise, technical layer."
    }
  },
  "scale": {
    "mega": {
      "minPx": 46,
      "maxPx": 120,
      "family": "display"
    },
    "d1": {
      "minPx": 40,
      "maxPx": 92,
      "family": "display"
    },
    "d2": {
      "minPx": 32,
      "maxPx": 64,
      "family": "display"
    },
    "h1": {
      "minPx": 38,
      "maxPx": 68,
      "family": "text"
    },
    "h2": {
      "minPx": 30,
      "maxPx": 48,
      "family": "text"
    },
    "h3": {
      "minPx": 22,
      "maxPx": 28,
      "family": "text"
    },
    "lead": {
      "minPx": 19,
      "maxPx": 23,
      "family": "text"
    },
    "body": {
      "minPx": 17,
      "maxPx": 19,
      "family": "text"
    },
    "small": {
      "minPx": 15,
      "maxPx": 16,
      "family": "text"
    },
    "label": {
      "minPx": 12,
      "maxPx": 13,
      "family": "mono"
    }
  },
  "space": {
    "1": {
      "px": 4
    },
    "2": {
      "px": 8
    },
    "3": {
      "px": 12
    },
    "4": {
      "px": 16
    },
    "5": {
      "px": 24
    },
    "6": {
      "px": 32
    },
    "7": {
      "px": 48
    },
    "8": {
      "px": 64
    },
    "9": {
      "px": 96
    },
    "10": {
      "px": 128
    },
    "11": {
      "px": 176
    }
  },
  "radius": {
    "s": {
      "px": 6
    },
    "m": {
      "px": 10
    },
    "l": {
      "px": 16
    },
    "xl": {
      "px": 24
    },
    "pill": {
      "px": 999
    }
  },
  "motion": {
    "quick": {
      "ms": 140,
      "use": "Hover and focus feedback"
    },
    "base": {
      "ms": 260,
      "use": "Small state changes"
    },
    "flip": {
      "ms": 520,
      "use": "A flap turning on its hinge"
    },
    "open": {
      "ms": 760,
      "use": "Panels opening along the hinge"
    },
    "easeHinge": {
      "value": "cubic-bezier(.77,0,.18,1)",
      "use": "Anything that turns or opens on the hinge"
    },
    "easeSettle": {
      "value": "cubic-bezier(.2,.8,.2,1)",
      "use": "Things arriving and coming to rest"
    }
  },
  "layout": {
    "max": 1280,
    "text": 680,
    "gutter": "clamp(16px, 5vw, 64px)"
  }
}