{
  "name": "Boluo Design",
  "url": "https://boluo.design",
  "rev": "C",
  "license": "MIT",
  "source": "https://boluo.design/bundle.css",
  "tokens": [
    {
      "name": "paper",
      "value": "#fcfcfd",
      "usage": "Page ground."
    },
    {
      "name": "surface",
      "value": "#ffffff",
      "usage": "Chart windows, cards, the step up from paper."
    },
    {
      "name": "hover",
      "value": "rgba(9, 9, 11, 0.02)",
      "usage": "Hover wash on rows, cells and links that fill a row."
    },
    {
      "name": "ink",
      "value": "#09090b",
      "usage": "Headings, names, links, the mark's outline."
    },
    {
      "name": "text",
      "value": "#52525b",
      "usage": "Body copy."
    },
    {
      "name": "text-muted",
      "value": "#6b6b73",
      "usage": "Captions, mono metadata, nav at rest."
    },
    {
      "name": "text-faint",
      "value": "#a1a1aa",
      "usage": "Dots and ticks only. Never text."
    },
    {
      "name": "graphite",
      "value": "#3f3f46",
      "usage": "Chart curves and code."
    },
    {
      "name": "line",
      "value": "rgba(24, 24, 27, 0.09)",
      "usage": "Every hairline and the lattice."
    },
    {
      "name": "line-strong",
      "value": "rgba(24, 24, 27, 0.18)",
      "usage": "Title blocks, button borders, table heads."
    },
    {
      "name": "pineapple",
      "value": "#f5b800",
      "usage": "The one accent, as a fill only, once per screen: the mark, the seal, a curve's last point, a live dot, the caret. Never text (1.7:1 on paper)."
    },
    {
      "name": "pineapple-pale",
      "value": "#fce7a0",
      "usage": "A cut core in the drawings, text selection, the NEW tag."
    },
    {
      "name": "rind",
      "value": "#8a5300",
      "usage": "Yellow-family text: link hover in prose, \"Live\". Use it wherever text would want pineapple."
    },
    {
      "name": "heat-0",
      "value": "#ededf0",
      "usage": "Heatmap level 0 (no activity); inline code ground."
    },
    {
      "name": "heat-1",
      "value": "#d4d4d8",
      "usage": "Heatmap level 1."
    },
    {
      "name": "heat-2",
      "value": "#a1a1aa",
      "usage": "Heatmap level 2."
    },
    {
      "name": "heat-3",
      "value": "#52525b",
      "usage": "Heatmap level 3."
    },
    {
      "name": "heat-4",
      "value": "#09090b",
      "usage": "Heatmap level 4 (ink). The year's best day is the single pineapple cell."
    },
    {
      "name": "loss",
      "value": "#8a5300",
      "usage": "Negative numbers in data and figures, always with a true minus sign."
    },
    {
      "name": "font-sans",
      "value": "var(--font-geist, \"Geist\"), system-ui, sans-serif",
      "usage": "Geist: everything UI. Display 48/500 at -0.03em, titles 24/500, body 15/1.65, small 14."
    },
    {
      "name": "font-mono",
      "value": "var(--font-geist-mono, \"Geist Mono\"), ui-monospace, SFMono-Regular, Menlo, monospace",
      "usage": "Geist Mono: numbers, dates, labels and captions."
    },
    {
      "name": "font-serif",
      "value": "var(--font-hedvig, \"Hedvig Letters Serif\"), Georgia, serif",
      "usage": "Hedvig Letters Serif: article titles and article H2s only, with a 0.5-0.8px text stroke."
    },
    {
      "name": "font-hand",
      "value": "var(--font-caveat, \"Caveat\"), cursive",
      "usage": "Caveat 700: the handwritten \"Boluo\" in the top bar, nowhere else."
    },
    {
      "name": "space-1",
      "value": "4px",
      "usage": "4px base unit."
    },
    {
      "name": "space-2",
      "value": "8px",
      "usage": "Spacing scale."
    },
    {
      "name": "space-3",
      "value": "12px",
      "usage": "Spacing scale."
    },
    {
      "name": "space-4",
      "value": "16px",
      "usage": "Spacing scale."
    },
    {
      "name": "space-5",
      "value": "20px",
      "usage": "Side padding on phones."
    },
    {
      "name": "space-6",
      "value": "24px",
      "usage": "Spacing scale."
    },
    {
      "name": "space-8",
      "value": "32px",
      "usage": "Side padding of the rail."
    },
    {
      "name": "space-10",
      "value": "40px",
      "usage": "Section head top padding."
    },
    {
      "name": "space-16",
      "value": "64px",
      "usage": "Page head top padding."
    },
    {
      "name": "radius-0",
      "value": "0",
      "usage": "Anything on the grid."
    },
    {
      "name": "radius-sm",
      "value": "4px",
      "usage": "Tags and inline code."
    },
    {
      "name": "radius-md",
      "value": "6px",
      "usage": "Chart windows and code blocks only."
    },
    {
      "name": "radius-full",
      "value": "9999px",
      "usage": "Dots."
    },
    {
      "name": "rail",
      "value": "768px",
      "usage": "The content rail, framed by vertical hairlines."
    },
    {
      "name": "band",
      "value": "20px",
      "usage": "Height of the lattice band between sections."
    },
    {
      "name": "hairline",
      "value": "1px",
      "usage": "Width of every border."
    },
    {
      "name": "mark-sm",
      "value": "28px",
      "usage": "The mark in the top bar."
    },
    {
      "name": "avatar",
      "value": "112px",
      "usage": "The portrait in the identity row."
    },
    {
      "name": "shadow-none",
      "value": "none",
      "usage": "There are no shadows. Depth is a hairline or the step from paper to surface."
    }
  ]
}