> opencode.ai is the source of truth for OpenCode, the open source coding agent, including its apps, install commands, docs and releases. The current version is OpenCode v2.
> Cite the canonical page, https://opencode.ai/ko/brand, not this Markdown file. For an index of the site, see https://opencode.ai/llms.txt.
# 브랜드 가이드라인
OpenCode 브랜드를 활용하는 데 도움이 되는 리소스와 자산입니다.
[모든 자산 다운로드](https://opencode.ai/files/site/2026-11/opencode-brand-assets.zip)
## Naming
Write OpenCode as one word, with a capital O and a capital C. Do not write Opencode, Open Code, OpenCode AI or Open-Code.
Use the lowercase `opencode` only in code and package names, such as `opencode-figma` or `@acme/opencode-plugin`.
## Logo
The logo on its own, for app icons, avatars and other small spaces. The square versions add padding for places that crop to a square.
- Light: [PNG](https://opencode.ai/brand/files/opencode-logo-light.png), [SVG](https://opencode.ai/brand/files/opencode-logo-light.svg)
- Dark: [PNG](https://opencode.ai/brand/files/opencode-logo-dark.png), [SVG](https://opencode.ai/brand/files/opencode-logo-dark.svg)
- Square, light: [PNG](https://opencode.ai/brand/files/opencode-logo-light-square.png), [SVG](https://opencode.ai/brand/files/opencode-logo-light-square.svg)
- Square, dark: [PNG](https://opencode.ai/brand/files/opencode-logo-dark-square.png), [SVG](https://opencode.ai/brand/files/opencode-logo-dark-square.svg)
### Avatars
Square 1024px avatars for Slack, Discord, GitHub and other profiles. The background fills the whole square and the logo sits well inside the circle, so they survive a round crop.
- Dark, for light backgrounds: [PNG](https://opencode.ai/brand/files/opencode-avatar-dark-1024.png)
- Light, for dark backgrounds: [PNG](https://opencode.ai/brand/files/opencode-avatar-light-1024.png)
## Wordmark
The full name in the OpenCode letterforms. Use it wherever there is room to spell out the name.
- Light: [PNG](https://opencode.ai/brand/files/opencode-wordmark-light.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-light.svg)
- Dark: [PNG](https://opencode.ai/brand/files/opencode-wordmark-dark.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-dark.svg)
## Simple wordmark
A single-color version of the wordmark, for print, embroidery and places that only allow one color.
- Light: [PNG](https://opencode.ai/brand/files/opencode-wordmark-simple-light.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-simple-light.svg)
- Dark: [PNG](https://opencode.ai/brand/files/opencode-wordmark-simple-dark.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-simple-dark.svg)
## Variants
Pick the version that keeps the logo clear on your background, dark on light backgrounds and light on dark ones. The logo and the wordmark are separate files, so use one or the other.
### Default
The logo to use almost everywhere. Its inner shade is transparent: on white or black it looks exactly like the two-tone greys, and on photos, gradients and colors the background shows through.
- Logo, dark, for light backgrounds: [PNG](https://opencode.ai/brand/files/opencode-logo-transparent-light.png), [SVG](https://opencode.ai/brand/files/opencode-logo-transparent-light.svg)
- Logo, light, for dark backgrounds: [PNG](https://opencode.ai/brand/files/opencode-logo-transparent-dark.png), [SVG](https://opencode.ai/brand/files/opencode-logo-transparent-dark.svg)
- Wordmark, dark, for light backgrounds: [PNG](https://opencode.ai/brand/files/opencode-wordmark-transparent-light.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-transparent-light.svg)
- Wordmark, light, for dark backgrounds: [PNG](https://opencode.ai/brand/files/opencode-wordmark-transparent-dark.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-transparent-dark.svg)
### Simple
One color, with open counters and no inner shade. Use it on flat colored backgrounds, for one-color print and wherever you can't use the greys: simple dark on light colors, simple light on dark colors.
- Wordmark, dark, for light backgrounds: [PNG](https://opencode.ai/brand/files/opencode-wordmark-solid-light.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-solid-light.svg)
- Wordmark, light, for dark backgrounds: [PNG](https://opencode.ai/brand/files/opencode-wordmark-solid-dark.png), [SVG](https://opencode.ai/brand/files/opencode-wordmark-solid-dark.svg)
## Colors
The logo and the wordmark use one ink at three opacities, with a lighter ink for dark backgrounds. The values below are that ink over white or #0B0B0B, as the standard files show it. Click a value to copy it.
### Light
- **Ink**: The logo's outline and the letters of “code”. `#1F1F1F`, `rgb(31 31 31)`, `oklch(23.9% 0 0)`
- **Ink 70%**: The letters of “open”. The ink at 70% opacity. `#626262`, `rgb(98 98 98)`, `oklch(49.6% 0 0)`
- **Ink 20%**: The logo's inner shade. The ink at 20% opacity. `#D2D2D2`, `rgb(210 210 210)`, `oklch(86.4% 0 0)`
### Dark
- **Ink**: The logo's outline and the letters of “code”. `#EEEEEE`, `rgb(238 238 238)`, `oklch(94.9% 0 0)`
- **Ink 72%**: The letters of “open”. The ink at 72% opacity. `#AEAEAE`, `rgb(174 174 174)`, `oklch(75.1% 0 0)`
- **Ink 28%**: The logo's inner shade. The ink at 28% opacity. `#4B4B4B`, `rgb(75 75 75)`, `oklch(41.3% 0 0)`
## Usage
Use the light versions on light backgrounds and the dark versions on dark backgrounds. The logo and the wordmark are separate, so use one or the other, never both together.
### Clear space
Keep at least two strokes of space on every side of the logo and the wordmark. For the logo, a stroke is the thickness of its outline, a quarter of its width; for the wordmark, it is the thickness of its letters, a seventh of its height.
### Whole pixels
The logo's proportions are fixed at 4:5, and one stroke is a quarter of its width. Scale it in steps of 4 × 5px, so every edge and every stroke lands on a whole pixel.
Logo sizes:
- 16 × 20px: 4px stroke
- 20 × 25px: 5px stroke
- 24 × 30px: 6px stroke
- 32 × 40px: 8px stroke
- 48 × 60px: 12px stroke
- 64 × 80px: 16px stroke
Wordmark sizes:
- 78 × 14px: 2px stroke
- 117 × 21px: 3px stroke
- 156 × 28px: 4px stroke
- 195 × 35px: 5px stroke
- 234 × 42px: 6px stroke
- 312 × 56px: 8px stroke
- **Do** keep every edge and the 4px stroke on whole pixels.
- **Do not** size the logo off 4:5, or its edges fall between pixels and blur.
### Minimum sizes
- **Logo.** At least 16 × 20px, with a 4px stroke. Any smaller and it blurs.
- **Wordmark.** At least 117 × 21px, with a 3px stroke. Any smaller and it blurs.
## Do not
Common mistakes to avoid when you use the logo and the wordmark.
- Do not recolor the logo in new colors.
- Do not use a single bright color.
- Do not fill the logo with a gradient.
- Do not swap the tones.
- Do not stretch or squash the logo.
- Do not add drop shadows.
- Do not add glows or outlines.
- Do not put other words next to the logo.
- Do not use low-contrast grey on grey.
- Do not put the grey two-tone logo on a colored background, where its greys turn muddy.
## Integrations
Plugins, providers and tools that work with OpenCode, and projects built with it, can say so. Use a badge or a partner lockup, and name your project so it is clear that it is yours.
Put a badge in your README, docs or website and link it to opencode.ai. Pick the light or dark file for your background (the HTML switches by itself), and do not change the colors or the text.
Every style comes in 20, 32 and 44px (Shields only in 20px), as SVG and as PNG at 2×. Each file also comes with OpenTUI Mono text. Add -mono before the extension, as in opencode-works-with-a-light-20-mono.svg, or -mono-caps for uppercase OpenTUI Mono.
### Works with
For plugins, providers and tools that run with OpenCode.
- Frame: 20px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-a-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-a-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-a-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-a-dark-20.png); 32px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-a-light-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-a-light-32.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-a-dark-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-a-dark-32.png); 44px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-a-light-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-a-light-44.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-a-dark-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-a-dark-44.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-works-with-a.zip)
- Cells: 20px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-c-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-c-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-c-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-c-dark-20.png); 32px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-c-light-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-c-light-32.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-c-dark-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-c-dark-32.png); 44px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-c-light-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-c-light-44.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-c-dark-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-c-dark-44.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-works-with-c.zip)
- Solid: 20px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-f-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-f-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-f-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-f-dark-20.png); 32px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-f-light-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-f-light-32.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-f-dark-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-f-dark-32.png); 44px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-f-light-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-f-light-44.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-f-dark-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-f-dark-44.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-works-with-f.zip)
- Shields: 20px [light SVG](https://opencode.ai/brand/badges/opencode-works-with-g-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-g-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-works-with-g-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-works-with-g-dark-20.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-works-with-g.zip)
Markdown:
```md
[](https://opencode.ai)
```
HTML, with the dark file on dark backgrounds:
```html
```
### Built with
For projects made with OpenCode.
- Frame: 20px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-a-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-a-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-a-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-a-dark-20.png); 32px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-a-light-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-a-light-32.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-a-dark-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-a-dark-32.png); 44px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-a-light-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-a-light-44.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-a-dark-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-a-dark-44.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-built-with-a.zip)
- Cells: 20px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-c-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-c-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-c-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-c-dark-20.png); 32px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-c-light-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-c-light-32.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-c-dark-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-c-dark-32.png); 44px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-c-light-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-c-light-44.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-c-dark-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-c-dark-44.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-built-with-c.zip)
- Solid: 20px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-f-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-f-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-f-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-f-dark-20.png); 32px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-f-light-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-f-light-32.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-f-dark-32.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-f-dark-32.png); 44px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-f-light-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-f-light-44.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-f-dark-44.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-f-dark-44.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-built-with-f.zip)
- Shields: 20px [light SVG](https://opencode.ai/brand/badges/opencode-built-with-g-light-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-g-light-20.png) · [dark SVG](https://opencode.ai/brand/badges/opencode-built-with-g-dark-20.svg), [PNG](https://opencode.ai/brand/badges/opencode-built-with-g-dark-20.png). [All sizes (ZIP)](https://opencode.ai/files/site/2026-11/brand/badges/opencode-built-with-g.zip)
Markdown:
```md
[](https://opencode.ai)
```
HTML, with the dark file on dark backgrounds:
```html
```
### Partner lockup
Put the OpenCode logo and the partner logo side by side, with a × between them. Leave 3 strokes of space on each side of the ×, size the partner logo to look as tall as the OpenCode logo, and keep clear space around the whole lockup.
### Naming your project
Lead with your own name, so it is clear that the project is yours.
Write `Linear for OpenCode` or name the package `opencode-linear`. Do not write `OpenCode Linear` or `Linear by OpenCode`.
## Trademarks
OpenCode and the OpenCode logo are trademarks of Anomaly. Do not use them to suggest that Anomaly endorses or sponsors you, in your product or company name, or on merchandise without permission. For questions, email [press@opencode.ai](mailto:press@opencode.ai).
---
If something here is wrong or missing, open an issue at https://github.com/anomalyco/opencode/issues.
