{
  "$description": "Tokens for the personal design system. Edit here, then run python3 scripts/build.py. Colours come in light/dark pairs.",
  "color": {
    "$description": "Raspberry comes from the shirt in the profile photo, slate from the sky behind it.",
    "paper": {
      "light": "#f3f4f6",
      "dark": "#1d1e20",
      "$description": "Page background"
    },
    "surface": {
      "light": "#ffffff",
      "dark": "#2e2e33",
      "$description": "Cards, panels, bubbles"
    },
    "surface-hover": {
      "light": "#f6f7f9",
      "dark": "#34353a",
      "$description": "Row and card hover"
    },
    "sunken": {
      "light": "#e9ecf0",
      "dark": "#37383e",
      "$description": "Inline code, icon-button hover"
    },
    "line": {
      "light": "#e2e5ea",
      "dark": "#3a3b3f",
      "$description": "Hairline borders and dividers"
    },
    "line-strong": {
      "light": "#cdd1d8",
      "dark": "#4a4b4f",
      "$description": "Dashed outlines, slash in the header, inactive dots. Decoration only, never text"
    },
    "ink": {
      "light": "#1f2329",
      "dark": "#dadadb",
      "$description": "Headings and strong text"
    },
    "text": {
      "light": "#2c3038",
      "dark": "#c4c4c5",
      "$description": "Body copy"
    },
    "muted": {
      "light": "#5d636d",
      "dark": "#a8a9aa",
      "$description": "Meta, captions, secondary text"
    },
    "raspberry": {
      "light": "#a8325e",
      "dark": "#ec8db1",
      "$description": "Primary brand colour"
    },
    "raspberry-strong": {
      "light": "#8f2950",
      "dark": "#f4a9c5",
      "$description": "Primary hover/pressed"
    },
    "raspberry-soft": {
      "light": "#f8e5ed",
      "dark": "#3a1f2b",
      "$description": "Primary tint for tags and highlights"
    },
    "slate": {
      "light": "#3a5a80",
      "dark": "#93b4da",
      "$description": "Secondary brand colour: links, focus rings, current page"
    },
    "slate-strong": {
      "light": "#2f6690",
      "dark": "#82b6dd",
      "$description": "Secondary accent for sections and dates"
    },
    "slate-soft": {
      "light": "#e2edf6",
      "dark": "#1c2b38",
      "$description": "Secondary tint"
    },
    "amber": {
      "light": "#995700",
      "dark": "#f2a94a",
      "$description": "New, warnings"
    },
    "amber-soft": {
      "light": "#fff1dc",
      "dark": "#3a2c19"
    },
    "green": {
      "light": "#0e7553",
      "dark": "#7fcca2",
      "$description": "Success, ok states"
    },
    "green-soft": {
      "light": "#ddf3ea",
      "dark": "#1f3328"
    },
    "red": {
      "light": "#c2302f",
      "dark": "#ef8f8e",
      "$description": "Errors, bad states"
    },
    "red-soft": {
      "light": "#fbe6e6",
      "dark": "#3a2020"
    },
    "on-accent": {
      "light": "#ffffff",
      "dark": "#1d1e20",
      "$description": "Text on a solid raspberry or slate fill"
    },
    "glass": {
      "light": "rgba(243,244,246,.86)",
      "dark": "rgba(29,30,32,.86)",
      "$description": "Sticky header behind the blur"
    },
    "scrim": {
      "light": "rgba(15,17,20,.45)",
      "dark": "rgba(0,0,0,.6)",
      "$description": "Behind dialogs"
    }
  },
  "font": {
    "display": "\"Fraunces\", \"Iowan Old Style\", \"Palatino Linotype\", Palatino, Georgia, serif",
    "sans": "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif",
    "mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
    "hand": "\"Caveat\", \"Segoe Print\", \"Bradley Hand\", cursive"
  },
  "size": {
    "$description": "Type scale in px. Body copy is 18px; UI text is 16px. The small and *-sm steps are for tiles, badges and phone headings.",
    "tile": "10px",
    "badge": "11px",
    "xs": "12px",
    "sm": "13px",
    "md": "14px",
    "compact": "15px",
    "ui": "16px",
    "tile-day": "17px",
    "body": "18px",
    "card": "20px",
    "h4": "18px",
    "h3": "22px",
    "xl": "24px",
    "h2": "28px",
    "h1-sm": "32px",
    "hero-sm": "38px",
    "h1": "40px",
    "hero": "52px"
  },
  "leading": {
    "tight": "1.15",
    "snug": "1.3",
    "body": "1.6"
  },
  "tracking": {
    "heading": "-.01em",
    "label": ".08em"
  },
  "space": {
    "$description": "4px base.",
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "20px",
    "6": "24px",
    "8": "32px",
    "9": "36px",
    "12": "48px",
    "18": "72px"
  },
  "layout": {
    "column": "720px",
    "wide": "1024px",
    "gap": "24px",
    "bar": "60px"
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "pill": "999px",
    "round": "50%"
  },
  "shadow": {
    "rest": {
      "light": "0 1px 2px rgba(31,35,41,.05), 0 2px 8px rgba(31,35,41,.04)",
      "dark": "none"
    },
    "lift": {
      "light": "0 2px 4px rgba(31,35,41,.06), 0 10px 24px rgba(31,35,41,.09)",
      "dark": "0 8px 24px rgba(0,0,0,.45)"
    },
    "tilt": {
      "light": "0 4px 10px rgba(31,35,41,.12)",
      "dark": "0 4px 10px rgba(0,0,0,.4)"
    }
  },
  "motion": {
    "$description": "Calm: one main motion per view, slow loops, finished states when reduced motion is on.",
    "fast": ".18s",
    "base": ".3s",
    "slow": ".45s",
    "ease": "cubic-bezier(.2,.7,.2,1)",
    "ease-out": "cubic-bezier(.3,.8,.3,1)"
  },
  "typography": {
    "$description": "Named text styles. DESIGN.md publishes these; CSS classes in brackets.",
    "headline-display": {
      "font": "display",
      "size": "52px",
      "weight": 600,
      "leading": 1.08,
      "tracking": "-0.02em",
      "class": "pb-display"
    },
    "headline-lg": {
      "font": "display",
      "size": "40px",
      "weight": 600,
      "leading": 1.15,
      "tracking": "-0.01em",
      "class": "pb-h1"
    },
    "headline-md": {
      "font": "display",
      "size": "28px",
      "weight": 600,
      "leading": 1.3,
      "tracking": "-0.01em",
      "class": "pb-h2"
    },
    "headline-sm": {
      "font": "display",
      "size": "22px",
      "weight": 500,
      "leading": 1.35,
      "class": "pb-h3"
    },
    "title": {
      "font": "sans",
      "size": "18px",
      "weight": 600,
      "leading": 1.4,
      "class": "pb-h4"
    },
    "body-lg": {
      "font": "sans",
      "size": "18px",
      "weight": 400,
      "leading": 1.6,
      "class": "pb-body"
    },
    "body-md": {
      "font": "sans",
      "size": "16px",
      "weight": 400,
      "leading": 1.5,
      "class": "pb-ui"
    },
    "body-sm": {
      "font": "sans",
      "size": "14px",
      "weight": 400,
      "leading": 1.6,
      "class": "pb-small"
    },
    "label-md": {
      "font": "sans",
      "size": "13px",
      "weight": 600,
      "leading": 1.4,
      "tracking": "0.08em",
      "class": "pb-label"
    },
    "label-sm": {
      "font": "mono",
      "size": "12px",
      "weight": 600,
      "leading": 1.5,
      "class": "pb-tag"
    },
    "button": {
      "font": "sans",
      "size": "15px",
      "weight": 600,
      "leading": 1,
      "class": "pb-btn"
    },
    "code": {
      "font": "mono",
      "size": "14px",
      "weight": 400,
      "leading": 1.6,
      "class": "pb-code"
    },
    "hand": {
      "font": "hand",
      "size": "19px",
      "weight": 600,
      "leading": 1.15,
      "class": "pb-hand"
    }
  }
}