01 / Visual Hero
비주얼 히어로Visual hero
상단 대면적 배경 실측 — 원본 규칙 그대로Measured top-area background — original rule, as-is
02 / Text Hero
텍스트 히어로Text hero
타이포가 말하는
브랜드의 위계Typography speaks
the brand hierarchy
위 문장들은 실측 스케일 40px · 36px · 32px · 24px · 18px · 16px 그대로 렌더된 것입니다 — 크기 관계가 곧 브랜드의 목소리 톤입니다.These lines are rendered on the measured scale 40px · 36px · 32px · 24px · 18px · 16px — the size relationships are the brand’s tone of voice.
03 / Colors
컬러 팔레트Color palette
역할Roles
관측 팔레트Observed palette 빈도순by frequency
04 / Typography
타이포그래피 스케일Type scale
생각을 현실로, 디자인의 힘Ideas made real, by design
모든 화면에 일관된 브랜드 경험A consistent brand on every screen
작은 디테일이 완성도를 만듭니다Small details make the difference
본문은 편안하게 읽히는 크기와 행간을 유지합니다. 실제 서비스 문장을 그대로 담아도 리듬이 무너지지 않아야 합니다.Body copy stays comfortable to read. Real product sentences should keep their rhythm at this size.
캡션과 각주는 조용히 정보를 보탭니다Captions add context, quietly
보조 텍스트는 본문을 방해하지 않는 크기로Secondary text stays out of the way
법적 고지와 메타 정보는 가장 작게, 그러나 읽히게Legal and meta stay smallest, yet legible
생각을 현실로, 디자인의 힘Ideas made real, by design
Euclid Circular A ×428
Akzidenz-Grotesk Std ×201
Source Code Pro ×107
MongoDB Value Serif ×53
Noto Sans SC ×27
Noto Sans KR ×27
06 / Forms
폼Forms
07 / Cards
카드Cards
라이트 배경On light
가볍게 시작하기Start light
실측된 라운드·그림자·패딩 규칙을 그대로 입은 기본 카드입니다.The default card, wearing the measured radius, shadow and padding rules.
정보를 담는 그릇Made to hold content
제목·본문·링크의 위계가 실측 타이포 스케일을 따릅니다.Title, body and link follow the measured type scale.
핵심 강조 카드The primary moment
역할색 배경 위에서도 카피는 자동 대비로 안전하게 읽힙니다.Copy stays readable on the primary surface with automatic contrast.
다크 배경On dark
깊이 있는 표면Depth on dark
같은 토큰이 어두운 캔버스에서도 위계를 지키는지 확인합니다.The same tokens hold their hierarchy on a dark canvas.
밤에도 선명한 포인트Accents after dark
링크와 포인트 컬러는 다크에서도 프라이머리 원색 그대로입니다.Links and accents keep the raw primary color, even at night.
대비의 증명Contrast, proven
본문 대비는 WCAG 검사 결과와 함께 기록됩니다.Body contrast ships with its WCAG check results.
08 / Badges & Chips
뱃지 · 칩Badges & chips
09 / Spacing
간격 스케일Spacing
10 / Radius
라운드 스케일Radius
16px ×226
2px ×91
4px ×72
40px ×49
8px ×43
10px ×36
50px ×18
32px ×16
11 / Elevation
그림자 깊이Elevation
실측된 그림자 단계를 카드·버튼·패널 등 실제 요소에 입혀 확인합니다Measured shadow steps, worn by real elements — cards, buttons, panels
12 / States & Motion
상태 · 모션States & motion
A1 / CSS Variables
선언된 토큰Declared tokens
사이트가 스스로 선언한 커스텀 프로퍼티 — 고신뢰 부록Custom properties declared by the site — high-confidence appendix