본문으로 건너뛰기

브랜드 가이드라인

OpenCode 브랜드를 활용하는 데 도움이 되는 리소스와 자산입니다.

모든 자산 다운로드
목차

OpenCode는 대문자 O와 대문자 C를 써서 한 단어로 표기합니다. Opencode, Open Code, OpenCode AI, Open-Code로 쓰지 마세요.

소문자 opencode는 opencode-figma나 @acme/opencode-plugin처럼 코드와 패키지 이름에만 쓰세요.

앱 아이콘, 아바타 등 작은 공간을 위한 로고 단독형입니다. 정사각형 버전은 정사각형으로 잘리는 곳을 위해 여백을 더했습니다.

Slack, Discord, GitHub 등의 프로필을 위한 1024px 정사각형 아바타입니다. 배경이 정사각형 전체를 채우고 로고는 원 안쪽에 넉넉히 들어가므로, 원형으로 잘려도 문제없습니다.

OpenCode 글자꼴로 쓴 전체 이름입니다. 이름을 모두 쓸 공간이 있는 곳이라면 어디서나 사용하세요.

워드마크의 단색 버전으로, 인쇄, 자수, 한 가지 색만 쓸 수 있는 곳을 위한 것입니다.

배경에서 로고가 또렷하게 보이는 버전을 고르세요. 밝은 배경에는 다크, 어두운 배경에는 라이트를 씁니다. 로고와 워드마크는 별도 파일이니 둘 중 하나만 사용하세요.

거의 모든 곳에 쓰는 로고입니다. 안쪽 음영이 투명해서 흰색이나 검은색 위에서는 2톤 회색과 똑같이 보이고, 사진, 그라데이션, 컬러 위에서는 배경이 비쳐 보입니다.

로고

워드마크

단색에 속공간이 열려 있고 안쪽 음영이 없습니다. 단색 컬러 배경, 1도 인쇄, 회색을 쓸 수 없는 곳에 사용하세요. 밝은 색에는 심플 다크, 어두운 색에는 심플 라이트를 씁니다.

워드마크

로고와 워드마크는 한 가지 잉크를 세 가지 불투명도로 쓰며, 어두운 배경에는 더 밝은 잉크를 씁니다. 아래 값은 표준 파일과 같이 그 잉크를 흰색 또는 #0B0B0B 위에 올린 결과입니다. 값을 클릭하면 복사됩니다.

  • 잉크로고 외곽선과 “code”의 글자.
  • 잉크 70%“open”의 글자. 불투명도 70%의 잉크.
  • 잉크 20%로고 안쪽 음영. 불투명도 20%의 잉크.

  • 잉크로고 외곽선과 “code”의 글자.
  • 잉크 72%“open”의 글자. 불투명도 72%의 잉크.
  • 잉크 28%로고 안쪽 음영. 불투명도 28%의 잉크.

밝은 배경에는 라이트 버전을, 어두운 배경에는 다크 버전을 사용하세요. 로고와 워드마크는 별개이므로 둘 중 하나만 쓰고, 함께 쓰지 마세요.

  • 1 스트로크1 스트로크

    로고와 워드마크의 모든 면에 최소 2 스트로크의 여백을 두세요. 로고에서 1 스트로크는 외곽선의 두께로 너비의 4분의 1이고, 워드마크에서는 글자의 두께로 높이의 7분의 1입니다.
  • Do 모든 가장자리와 4px 스트로크를 정수 픽셀에 맞추기.
    금지 4:5에서 벗어난 크기로 쓰기. 가장자리가 픽셀 사이에 걸려 흐려집니다.

    로고의 비율은 4:5로 고정되어 있고, 1 스트로크는 너비의 4분의 1입니다. 4 × 5px 단위로 크기를 조절해 모든 가장자리와 스트로크가 정수 픽셀에 맞도록 하세요.
    로고스트로크
    16 × 20px4px
    20 × 25px5px
    24 × 30px6px
    32 × 40px8px
    48 × 60px12px
    64 × 80px16px
    워드마크스트로크
    78 × 14px2px
    117 × 21px3px
    156 × 28px4px
    195 × 35px5px
    234 × 42px6px
    312 × 56px8px
  • 로고

    최소 16 × 20px, 스트로크 4px. 이보다 작으면 흐려집니다.
  • 워드마크

    최소 117 × 21px, 스트로크 3px. 이보다 작으면 흐려집니다.

로고와 워드마크를 사용할 때 피해야 할 흔한 실수입니다.

  • 금지 로고를 새로운 색으로 바꾸기.
  • 금지 밝은 단색 하나로 쓰기.
  • 금지 로고를 그라데이션으로 채우기.
  • 금지 톤을 서로 바꾸기.
  • 금지 로고를 늘이거나 찌그러뜨리기.
  • 금지 그림자 넣기.
  • 금지 글로나 외곽선 넣기.
  • 금지 로고 옆에 다른 단어 붙이기.
  • 금지 대비가 낮은 회색 위에 회색 쓰기.
  • 금지 회색 2톤 로고를 컬러 배경에 올리기. 회색이 탁해집니다.

OpenCode와 함께 동작하는 플러그인, 제공자, 도구와 OpenCode로 만든 프로젝트는 그 사실을 밝힐 수 있습니다. 배지나 파트너 록업을 사용하고, 프로젝트가 내 것임이 분명하도록 이름을 지으세요.

README, 문서, 웹사이트에 배지를 넣고 opencode.ai로 링크하세요. 배경에 맞춰 라이트 또는 다크 파일을 고르고(HTML은 자동으로 전환됩니다), 색상이나 텍스트는 바꾸지 마세요. 모든 스타일은 20, 32, 44px(Shields는 20px만)로 제공되며, SVG와 2배 PNG 형식입니다.

OpenCode와 함께 실행되는 플러그인, 제공자, 도구용.

프레임

셀

솔리드

Shields

프레임

셀

솔리드

Shields

프레임

셀

솔리드

Shields

OpenCode로 만든 프로젝트용.

프레임

셀

솔리드

Shields

프레임

셀

솔리드

Shields

프레임

셀

솔리드

Shields

OpenCode 로고와 파트너 로고를 나란히 놓고 사이에 ×를 넣으세요. × 양옆에 3 스트로크씩 간격을 두고, 파트너 로고는 OpenCode 로고와 같은 높이로 보이게 맞추고, 록업 전체 주위에 여백을 두세요.

  • OpenCode × GitHub, 라이트
  • OpenCode × GitHub, 다크

프로젝트가 내 것임이 분명하도록 내 이름을 앞에 두세요.

Linear for OpenCode로 쓰거나 패키지 이름을 opencode-linear로 지으세요. OpenCode Linear나 Linear by OpenCode로 쓰지 마세요.

OpenCode와 OpenCode 로고는 Anomaly의 상표입니다. Anomaly가 보증하거나 후원한다고 암시하는 데, 제품명이나 회사명에, 또는 허락 없이 굿즈에 사용하지 마세요. 문의 사항은 press@opencode.ai(으)로 이메일을 보내 주세요.