{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for OpenCode",
  "meta": {
    "name": "OpenCode",
    "description": "A terminal-native marketing system rendered entirely in Berkeley Mono — every word on the page, from the hero headline down to the footer fine print, is monospaced. The page itself reads like a manpage or a static-site README: warm cream canvas (`#fdfcfc`), nearly-black ink (`#201d1d`), 4px-radius rectangles for the few interactive elements, and bracketed `[+]`/`[-]` ASCII markers used as bullets. The brand's only \"visual moment\" is a single dark hero card that mocks up the OpenCode TUI itself — black background, monospaced terminal output, ASCII pipe characters, and a wordmark rendered as block-pixel ASCII. Every section sits as a hairline-bordered text block on the cream canvas with no shadows, no gradients, no decorative imagery, and no non-monospaced character anywhere in the system.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#201d1d",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#fdfcfc",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#201d1d",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-deep": {
      "$value": "#0f0000",
      "$type": "color",
      "$description": "Use for the ink deep role."
    },
    "charcoal": {
      "$value": "#302c2c",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "body": {
      "$value": "#424245",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "mute": {
      "$value": "#646262",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "stone": {
      "$value": "#6e6e73",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "ash": {
      "$value": "#9a9898",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "canvas": {
      "$value": "#fdfcfc",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-soft": {
      "$value": "#f8f7f7",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-card": {
      "$value": "#f1eeee",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-dark": {
      "$value": "#201d1d",
      "$type": "color",
      "$description": "Use for the surface dark role."
    },
    "surface-dark-elevated": {
      "$value": "#302c2c",
      "$type": "color",
      "$description": "Use for the surface dark elevated role."
    },
    "hairline": {
      "$value": "rgba(15,0,0,0.12)",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-strong": {
      "$value": "#646262",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "on-dark": {
      "$value": "#fdfcfc",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "on-dark-mute": {
      "$value": "#9a9898",
      "$type": "color",
      "$description": "Use for the on dark mute role."
    },
    "accent": {
      "$value": "#007aff",
      "$type": "color",
      "$description": "Use for the accent role."
    },
    "accent-hover": {
      "$value": "#0056b3",
      "$type": "color",
      "$description": "Use for the accent hover role."
    },
    "accent-active": {
      "$value": "#004085",
      "$type": "color",
      "$description": "Use for the accent active role."
    },
    "warning": {
      "$value": "#ff9f0a",
      "$type": "color",
      "$description": "Use for the warning role."
    },
    "warning-hover": {
      "$value": "#cc7f08",
      "$type": "color",
      "$description": "Use for the warning hover role."
    },
    "warning-active": {
      "$value": "#995f06",
      "$type": "color",
      "$description": "Use for the warning active role."
    },
    "danger": {
      "$value": "#ff3b30",
      "$type": "color",
      "$description": "Use for the danger role."
    },
    "danger-hover": {
      "$value": "#d70015",
      "$type": "color",
      "$description": "Use for the danger hover role."
    },
    "danger-active": {
      "$value": "#a50011",
      "$type": "color",
      "$description": "Use for the danger active role."
    },
    "success": {
      "$value": "#30d158",
      "$type": "color",
      "$description": "Use for the success role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "38px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "16px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-strong": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body strong."
    },
    "body-tight": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body tight."
    },
    "link-md": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for link md."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "caption-md": {
      "$value": {
        "fontFamily": "Berkeley Mono",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption md."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "1px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://opencode.ai/",
      "note": "Official brand website used for visual comparison."
    }
  }
}