Tokens

The literal values agents build with — served over MCP as JSON, CSS variables, or a Tailwind theme.

color

canvas

#F4F4F2

surface

#FFFFFF

ink

#161614

muted

#71716C

faint

#A8A8A2

hairline

#E7E7E2

sage

#C3D2BE

sky

#9FB8E8

blush

#E3BFB3

dusk

#232A3A

typography

displaySF Pro Display · 28/34 · 500 · -0.02empage titles

titleSF Pro Text · 17/24 · 500 · -0.01emcard and section titles

bodySF Pro Text · 14/22 · 400default text

labelSF Mono · 10/16 · 400 · +0.1em · uppercasemetadata, system text

spacing

2xs4px

xs8px

sm12px

md16px

lg24px

xl32px

2xl48px

3xl64px

radius

pill

edit as json

{
  "colors": [
    {
      "name": "canvas",
      "note": "page background",
      "value": "#F4F4F2"
    },
    {
      "name": "surface",
      "note": "cards and inputs",
      "value": "#FFFFFF"
    },
    {
      "name": "ink",
      "note": "primary text",
      "value": "#161614"
    },
    {
      "name": "muted",
      "note": "secondary text",
      "value": "#71716C"
    },
    {
      "name": "faint",
      "note": "tertiary text, placeholders",
      "value": "#A8A8A2"
    },
    {
      "name": "hairline",
      "note": "borders, dividers",
      "value": "#E7E7E2"
    },
    {
      "name": "sage",
      "note": "gradient accent",
      "value": "#C3D2BE"
    },
    {
      "name": "sky",
      "note": "gradient accent",
      "value": "#9FB8E8"
    },
    {
      "name": "blush",
      "note": "gradient accent",
      "value": "#E3BFB3"
    },
    {
      "name": "dusk",
      "note": "dark accent, night surfaces",
      "value": "#232A3A"
    }
  ],
  "radius": [
    {
      "name": "sm",
      "note": "small controls",
      "value": "8px"
    },
    {
      "name": "md",
      "note": "inputs",
      "value": "12px"
    },
    {
      "name": "lg",
      "note": "cards",
      "value": "16px"
    },
    {
      "name": "xl",
      "note": "hero surfaces",
      "value": "24px"
    },
    {
      "name": "pill",
      "note": "pills, buttons",
      "value": "999px"
    }
  ],
  "spacing": [
    {
      "name": "2xs",
      "value": "4px"
    },
    {
      "name": "xs",
      "value": "8px"
    },
    {
      "name": "sm",
      "value": "12px"
    },
    {
      "name": "md",
      "value": "16px"
    },
    {
      "name": "lg",
      "value": "24px"
    },
    {
      "name": "xl",
      "value": "32px"
    },
    {
      "name": "2xl",
      "value": "48px"
    },
    {
      "name": "3xl",
      "value": "64px"
    }
  ],
  "typography": [
    {
      "name": "display",
      "note": "page titles",
      "value": "SF Pro Display · 28/34 · 500 · -0.02em"
    },
    {
      "name": "title",
      "note": "card and section titles",
      "value": "SF Pro Text · 17/24 · 500 · -0.01em"
    },
    {
      "name": "body",
      "note": "default text",
      "value": "SF Pro Text · 14/22 · 400"
    },
    {
      "name": "label",
      "note": "metadata, system text",
      "value": "SF Mono · 10/16 · 400 · +0.1em · uppercase"
    }
  ]
}