한국어

브랜드 가이드라인

무무의 모든 화면과 자료에 적용하는 로고, 색상, 글꼴, UI 규칙입니다.

로고

넓고 낮은 워드마크가 무무의 대표 로고입니다. 폰트로 타이핑하지 말고 제공된 벡터 파일을 쓰세요.

여백

로고 높이만큼의 여백을 사방에 둡니다.

최소 크기

화면에서는 너비 96px, 인쇄물에서는 25mm 이상으로 씁니다. 더 작으면 앱 아이콘을 쓰세요.

하지 말 것: 늘리거나 눌러서 비율을 바꾸기
하지 말 것: 그라데이션, 그림자, 외곽선 넣기
하지 말 것: 지정 색 외의 색으로 칠하기
하지 말 것: 대비가 낮은 배경 위에 놓기

Wordmark, indigo ↓Wordmark, ink ↓Wordmark, white ↓App icon, indigo ↓App icon, white ↓App icon, ink ↓

색상

화면은 뉴트럴을 바탕으로 하고, 사용자가 눌러야 할 곳에만 Indigo를 씁니다. 코드에서는 --mm-* 토큰만 사용합니다.

브랜드

강조색은 MUMU Indigo 하나만 씁니다. 버튼, 링크, 선택 상태에 사용합니다.

--mm-accent

#3129A5 / #5048D6

--mm-accent-hover

#261F86 / #625AE6

--mm-accent-text

#3129A5 / #AAA5FF

--mm-accent-soft

#ECEBFA / #24224E

뉴트럴

화면의 대부분은 뉴트럴입니다.

--mm-bg

#F6F6F9 / #0D0D14

--mm-surface

#FFFFFF / #16161F

--mm-fill

#F0F0F5 / #20202B

--mm-border

#E1E1E9 / #2B2B38

--mm-text

#14131F / #F4F4F8

--mm-text-2

#3B3A4A / #D2D2DC

--mm-text-3

#62617A / #A2A2B4

상태

상태를 알릴 때만 씁니다. 장식에 쓰지 않으며 항상 글자와 함께 표시합니다.

--mm-success

#0F7B4F / #4CD39A

--mm-warning

#975A06 / #F2B95C

--mm-danger

#C4281C / #FF8A80

차트

차트 계열을 구분할 때만 이 순서대로 씁니다. 색각 이상 대비를 검증했습니다.

--mm-data-1

#4A42C8 / #7A72F0

--mm-data-2

#00A098 / #00A89F

--mm-data-3

#C4742B / #CC7D36

--mm-data-4

#B0488F / #C258A4

스와치 왼쪽은 라이트, 오른쪽은 다크 값입니다.

글꼴

Syne은 로고의 형태와 이어지며 마케팅 페이지의 큰 제목에만 씁니다. 제품 UI와 본문은 Geist, 한글은 Pretendard를 씁니다.

키워드에서 광고까지Display · Syne 700, 48/1.15

키워드에서 광고까지H1 · Geist 600, 28

키워드에서 광고까지H2 · Geist 600, 16

키워드에서 광고까지Body · Geist 400, 14

키워드에서 광고까지Caption · Geist 400, 12

UI 요소

모서리는 6, 8, 12px 세 단계입니다. 칩은 6px, 버튼과 입력창은 8px, 카드는 12px입니다.

주요 버튼보조 버튼입력창선택됨통과검토 필요실패

언어와 표현

글로벌 서비스이므로 영어가 기본입니다. 내부 코드(A, B, C, KW-001) 대신 셀러의 말로 씁니다: 리서치, 광고 제작, 이미지 편집, 게시 준비.

버튼에는 동작을, 빈 화면에는 다음에 할 일을 적습니다. 데모 데이터는 데모라고 표시합니다.