탐색

Master

브랜드

하나의 금빛 리본과 공유 제품군, 이들을 잇는 세부 요소로 구성된 Master의 정체성입니다.

이 페이지의 내용

하나의 금빛 리본을 접어 M을 만듭니다. Master의 정체성은 제품들을 연결하면서도 각 제품이 고유한 목적을 가질 여지를 남깁니다.

Master CSS 금색 마크Master CSS 금색 마크
마크의 모든 방향에 높이의 절반만큼 여백을 유지합니다.

조직을 소개할 때는 제공된 Master 워드마크를 사용하세요. 이름이 이미 명확하면 마크만 사용해도 됩니다. 제품 이름은 승인된 시그니처를 유지합니다. Master CSS와 Master UI가 해당됩니다.

밝은 배경용 Master 워드마크 다운로드 · 어두운 배경용

#구조

마크는 연속된 금색 면을 가진 접힌 리본입니다. 기하, 비율, 그라데이션, 여백을 유지하세요. 모든 방향에 마크 높이의 절반 이상을 비워 두세요. 높이 24px 미만에서는 소형 마크를 사용하고 입체 이미지는 마크 높이가 64px 이상일 때만 사용합니다.

#사용 방법

배경에 맞게 제작된 이미지를 선택하세요. 늘이거나 회전하거나 다시 그리거나 색을 바꾸지 마세요. 효과를 추가하거나 여백 안에 경쟁하는 세부 요소를 배치하지 마세요. 제품 시그니처는 해당 제품을, 조직 시그니처는 Master를 나타냅니다.

#색상

금색은 정체성에 따뜻함을 더하는 지점입니다. 인터페이스는 중립적인 표면과 읽기 쉬운 텍스트로 구성합니다. 제공된 그라데이션 색상 지점을 유지하고 인터페이스 강조에는 공유 amber 신호 토큰을 사용하세요.

밝은 배경의 마크#FDE2A7 → #E6B65D
어두운 배경의 마크#FCDD98 → #E6B65D
신호--color-amber-40
마크 그라데이션은 이미지의 일부입니다. 인터페이스 금색은 프리셋 amber 계열에서 가져옵니다.

#타이포그래피

인터페이스와 라틴 문자에는 Geist, 번체 중국어에는 Noto Sans TC, 코드·식별자·정렬된 숫자에는 IBM Plex Mono를 사용합니다.

Geist인터페이스와 라틴 문자
Noto Sans TC번체 중국어
IBM Plex Mono코드, 식별자, 정렬된 숫자

#토큰

브랜드 토큰은 정체성을 기술합니다. 디자인 시스템은 인터페이스 재질, 간격, 높낮이, 컨트롤, 동작을 담당합니다. 제품을 추가할 때도 역할을 구분하세요.

#컴포넌트

제품 사이트에는 공통 디자인 시스템을 사용하세요. 제품은 공유 재질, 글꼴, 상호작용 규칙을 유지하면서 자체 홈페이지와 예제를 구성할 수 있습니다.

#브랜드 키트

Master 브랜드 키트 다운로드. 승인된 조직·제품 이미지, 아이콘, 소셜 이미지, 브랜드 토큰이 포함됩니다.

#제품 정체성 정책

Master CSS 정체성 가이드에 해당 제품의 기존 사용 정책이 있습니다.