Brand Identity
브랜드
share.dev cloud 의 얼굴을 이루는 것들입니다. 여기 적힌 값은 설명이 아니라 실제로 화면이 쓰고 있는 값입니다 — 이 문서와 제품이 다르면 문서가 틀린 것입니다.
보도·제휴 자료에 쓰실 때는 이 페이지의 규칙을 지켜 주십시오. 변형이 필요하시면 devops@share.dev 로 먼저 문의해 주시기 바랍니다.
워드마크
기본형
SHARE.DEV Cloud
도메인을 대문자로 묶어 로고처럼 굳히고, Cloud 는
설명어라 한 걸음 물러섭니다. 강조색을 받는 것은 가운데 점 하나뿐입니다.
| 서체 | Source Code Pro — 모노로 짭니다. 이 제품은 화면의 절반이 주소와 식별자라, 워드마크가 같은 얼굴이면 다루는 것이 무엇인지 한 번에 섭니다 |
|---|---|
| 자간 | 대문자 구간 0.12em — 대문자는 글자 사이 여백이
원래 좁아서 그냥 두면 뭉쳐 보입니다 |
| 굵기 | 도메인 600 · Cloud 400 |
| 최소 크기 | 가로 96px. 그보다 작아지면 점이 사라져 워드마크가 아니라 글자가 됩니다 — 그 아래에서는 아이콘을 쓰십시오 |
| 여백 | 사방으로 SHARE 의 S 높이만큼 비웁니다 |
작은 크기 — 머리말·꼬리말에서 쓰는 크기
SHARE.DEV Cloud
SHARE.DEV Cloud
색
밝은 화면과 어두운 화면이 각각의 값을 가집니다. 아래 칩은 지금 보시는 테마와 무관하게 그 값 자체를 보여 줍니다.
강조색
브랜드를 대표하는 색입니다. 링크, 단추, 워드마크의 점에 씁니다. 넓은 면을 칠하는 데 쓰지 않습니다 — 강조는 드물어야 강조입니다.
#0b5fff#6aa5ff중립색
글자와 선입니다. 네 단계로 위계를 만들고 그 밖의 회색을 늘리지 않습니다.
#111418#6b727d#99a0aa#c7ccd4#e2e5ea#ffffff#f5f6f8#e8ebf0#99a1ac#6d747f#3a414b#22262d#0e1013#0b0d10상태색
색만으로 상태를 말하지 않습니다. 글자나 기호를 함께 둡니다 — 색을 구분하지 못하는 분에게도 화면이 같은 것을 말해야 합니다.
#1e8449#8a6100#c0392b#4ade80#e5be6a#ff7a70두 번째 강조색
운영자용 도구에만 쓰는 색입니다. 고객이 보는 화면과 운영자가 보는 화면을 눈으로 구분하기 위한 것이라, 대외 자료에는 쓰지 않습니다.
#6d28d9#a78bfa서체
SUIT · 본문과 화면 — 400 / 600
클라우드 인프라를 직접 만들어 운영합니다
Regular 400 · 다람쥐 헌 쳇바퀴에 타고파 · The quick brown fox 0123456789
Source Code Pro · 주소와 식별자 — 400
203.0.113.24 / 10.0.0.0/24
c4.8 · 2026-08-13T09:41:02Z · 0123456789
| SUIT | 한글과 라틴이 한 몸이라 섞어 짜도 크기·굵기·세로 정렬이
흔들리지 않습니다. 두 벌을 섞으면 서버 c4.8 을 만듭니다 같은 줄에서
라틴만 작아 보입니다 |
|---|---|
| Source Code Pro | 주소·용량·시각처럼 자리를 맞춰 읽어야 하는 것에 씁니다. 워드마크도 같은 서체입니다 |
| 줄표 | 본문의 줄표는 ―(U+2015)를 씁니다. SUIT 에
em dash(U+2014)가 없어서, 쓰면 그 글자만 다른 글꼴로 떨어져 굵기가 튑니다 |
| 라이선스 | 둘 다 SIL Open Font License 1.1 — SUIT © 2022 Sun · Source Code Pro © Adobe |
| 대체 서체 | 서체를 쓸 수 없는 환경에서는 시스템 기본
(-apple-system, Apple SD Gothic Neo, Noto Sans KR)으로 떨어집니다 |
아이콘
favicon · 앱 아이콘
워드마크가 작아지면 글자는 어차피 안 읽힙니다. 그래서 아이콘에는 읽히는 것 하나 — 강조색 점만 남겼습니다. 16px 까지 내려가는 자리에서는 워드마크 대신 이것을 쓰십시오.
이렇게 써 주십시오
○ 되는 것
- 배경과 충분한 대비가 있는 곳에 올리기
- 밝은 배경에는 기본형, 어두운 배경에는 다크 값 그대로
- 사방 여백을 S 높이만큼 확보하기
- 가로 크기만 조절하기 (비율 고정)
× 안 되는 것
- 워드마크의 색을 바꾸는 것 — 점의 강조색을 빼거나 다른 색으로 칠하기
- 다른 서체로 다시 쓰는 것 — 모노가 아니면 워드마크가 아닙니다
- 자간을 없애 뭉치게 두기
- 기울이기, 그림자·외곽선·그라디언트 넣기, 세로쓰기
- 가로세로 비율을 따로 늘이거나 줄이기
- 사진 위에 대비 없이 얹기
- 다른 로고와 붙여 하나의 잠금 형태로 만들기
내려받기
- 아이콘 (SVG) 벡터 · 452바이트
- brand.css 워드마크와 서체를 정의하는 파일 그대로
- SUIT 400 woff2 · OFL 1.1
- SUIT 600 woff2 · OFL 1.1
- Source Code Pro 400 woff2 · OFL 1.1
- SUIT 라이선스 전문 서체를 다시 배포하실 때 함께 두셔야 합니다
- Source Code Pro 라이선스 전문 서체를 다시 배포하실 때 함께 두셔야 합니다
워드마크와 아이콘은 주식회사 쉐어데브의 자산입니다. 회사와 서비스를 가리키는 용도로 원형 그대로 쓰실 수 있고, 후원·제휴·인증 관계를 나타내는 데에는 쓰실 수 없습니다. 서체는 각각의 OFL 1.1 을 따릅니다.