返回列表
行业: 开发者工具与 IDEWebsite

OpenCode

OpenCode 全站使用 Berkeley Mono 等宽字体，将英雄标题、正文和页脚统一成终端原生语言，配合克制的明暗表面与代码细节，形成纯粹的开发者工具气质。

Light UIGradientDeveloper-focusedDesign System
OpenCode 网站预览
设计系统
品牌色彩 · 27

primary

#201D1D

--color-primary

on primary

#FDFCFC

--color-on-primary

ink

#201D1D

--color-ink

ink deep

#0F0000

--color-ink-deep

charcoal

#302C2C

--color-charcoal

body

#424245

--color-body

mute

#646262

--color-mute

stone

#6E6E73

--color-stone

ash

#9A9898

--color-ash

canvas

#FDFCFC

--color-canvas

surface soft

#F8F7F7

--color-surface-soft

surface card

#F1EEEE

--color-surface-card

surface dark

#201D1D

--color-surface-dark

surface dark elevated

#302C2C

--color-surface-dark-elevated

hairline strong

#646262

--color-hairline-strong

on dark

#FDFCFC

--color-on-dark

on dark mute

#9A9898

--color-on-dark-mute

accent

#007AFF

--color-accent

accent hover

#0056B3

--color-accent-hover

accent active

#004085

--color-accent-active

warning

#FF9F0A

--color-warning

warning hover

#CC7F08

--color-warning-hover

warning active

#995F06

--color-warning-active

danger

#FF3B30

--color-danger

danger hover

#D70015

--color-danger-hover

danger active

#A50011

--color-danger-active

success

#30D158

--color-success

字体系统

字体家族

Berkeley Mono

字重

700400500

备注

1 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIGradientDeveloper-focusedDesign System
设计文档

品牌设计系统的完整 Markdown 文档

OpenCode — Style Reference

> 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

**Source website:** [https://opencode.ai/](https://opencode.ai/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#201d1d` | `--color-primary` | primary role extracted from the source design |

| on primary | `#fdfcfc` | `--color-on-primary` | on primary role extracted from the source design |

| ink | `#201d1d` | `--color-ink` | ink role extracted from the source design |

| ink deep | `#0f0000` | `--color-ink-deep` | ink deep role extracted from the source design |

| charcoal | `#302c2c` | `--color-charcoal` | charcoal role extracted from the source design |

| body | `#424245` | `--color-body` | body role extracted from the source design |

| mute | `#646262` | `--color-mute` | mute role extracted from the source design |

| stone | `#6e6e73` | `--color-stone` | stone role extracted from the source design |

| ash | `#9a9898` | `--color-ash` | ash role extracted from the source design |

| canvas | `#fdfcfc` | `--color-canvas` | canvas role extracted from the source design |

| surface soft | `#f8f7f7` | `--color-surface-soft` | surface soft role extracted from the source design |

| surface card | `#f1eeee` | `--color-surface-card` | surface card role extracted from the source design |

| surface dark | `#201d1d` | `--color-surface-dark` | surface dark role extracted from the source design |

| surface dark elevated | `#302c2c` | `--color-surface-dark-elevated` | surface dark elevated role extracted from the source design |

| hairline | `rgba(15,0,0,0.12)` | `--color-hairline` | hairline role extracted from the source design |

| hairline strong | `#646262` | `--color-hairline-strong` | hairline strong role extracted from the source design |

| on dark | `#fdfcfc` | `--color-on-dark` | on dark role extracted from the source design |

| on dark mute | `#9a9898` | `--color-on-dark-mute` | on dark mute role extracted from the source design |

| accent | `#007aff` | `--color-accent` | accent role extracted from the source design |

| accent hover | `#0056b3` | `--color-accent-hover` | accent hover role extracted from the source design |

| accent active | `#004085` | `--color-accent-active` | accent active role extracted from the source design |

| warning | `#ff9f0a` | `--color-warning` | warning role extracted from the source design |

| warning hover | `#cc7f08` | `--color-warning-hover` | warning hover role extracted from the source design |

| warning active | `#995f06` | `--color-warning-active` | warning active role extracted from the source design |

| danger | `#ff3b30` | `--color-danger` | danger role extracted from the source design |

| danger hover | `#d70015` | `--color-danger-hover` | danger hover role extracted from the source design |

| danger active | `#a50011` | `--color-danger-active` | danger active role extracted from the source design |

| success | `#30d158` | `--color-success` | success role extracted from the source design |

Tokens — Typography

Berkeley Mono · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 700, 400, 500
  • **Sizes:** 38px, 16px, 14px
  • **Line height:** 1.5, 1, 2
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | display-xl | 38px | 1.5 | 0 | `--text-display-xl` |

    | heading-md | 16px | 1.5 | 0 | `--text-heading-md` |

    | body-md | 16px | 1.5 | 0 | `--text-body-md` |

    | body-strong | 16px | 1.5 | 0 | `--text-body-strong` |

    | body-tight | 16px | 1 | 0 | `--text-body-tight` |

    | link-md | 16px | 1.5 | 0 | `--text-link-md` |

    | button-md | 16px | 2 | 0 | `--text-button-md` |

    | caption-md | 14px | 2 | 0 | `--text-caption-md` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 1px | `--spacing-xxs` |

    | xs | 4px | `--spacing-xs` |

    | sm | 8px | `--spacing-sm` |

    | md | 12px | `--spacing-md` |

    | lg | 16px | `--spacing-lg` |

    | xl | 24px | `--spacing-xl` |

    | xxl | 32px | `--spacing-xxl` |

    | section | 96px | `--spacing-section` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | none | 0px | `--radius-none` |

    | sm | 4px | `--radius-sm` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 96px
  • **Card padding:** 16px
  • **Element gap:** 12px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `4px 20px`
  • **height:** `36px`

    • button primary active

    **Role:** button primary active component

  • **backgroundColor:** `{colors.ink-deep}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.sm}`

    • button secondary

    **Role:** button secondary component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `4px 20px`

    • button tab

    **Role:** button tab component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.mute}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `8px 16px`

    • button tab active

    **Role:** button tab active component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.none}`

    • button disabled

    **Role:** button disabled component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ash}`
  • **rounded:** `{rounded.sm}`

    • badge news

    **Role:** badge news component

  • **backgroundColor:** `{colors.surface-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.caption-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `2px 8px`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `8px 12px`
  • **height:** `40px`

    • text input focused

    **Role:** text input focused component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.sm}`

    • textarea

    **Role:** textarea component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `12px`

    • install snippet

    **Role:** install snippet component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `12px 16px`

    • hero tui mockup

    **Role:** hero tui mockup component

  • **backgroundColor:** `{colors.surface-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `64px 32px`

    • tui prompt row

    **Role:** tui prompt row component

  • **backgroundColor:** `{colors.surface-dark-elevated}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `8px 12px`

    • list row

    **Role:** list row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `8px 0px`

    • faq row

    **Role:** faq row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `12px 0px`

    • testimonial row

    **Role:** testimonial row component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `16px 20px`

    • chart tile

    **Role:** chart tile component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.caption-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `16px`

    • primary nav

    **Role:** primary nav component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-strong}`
  • **rounded:** `{rounded.none}`
  • **height:** `56px`

    • footer section

    **Role:** footer section component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.caption-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `32px 0px`

    • link inline

    **Role:** link inline component

  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.link-md}`

    • badge section label

    **Role:** badge section label component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.heading-md}`
  • **rounded:** `{rounded.none}`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live OpenCode website](https://opencode.ai/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://opencode.ai/).

    同类品牌推荐

    Composio

    Dark UI · Gradient

    Cursor

    Light UI · Editorial

    Expo

    Light UI · Editorial

    OpenCode 设计系统 | 品牌模板 · ViboDesign