큐레이션 · 오픈 · 무료

Mapbox

개발자, 자동차 제조업체, 혁신가들을 위한 선택받는 위치 플랫폼입니다.

01

디자인 DNA

실제 세계에 지능을 입히고 싶어하는 빌더들을 위한 강력한 툴킷입니다.

02

컬러

다양한 색상의 지도 데이터와 블루 악센트를 돋보이게 설계된 고대비 다크 모드입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display64px · 500
• body20px · 400

주요 제목은 기하학적 sans-serif를 사용합니다. · 본문 텍스트는 가독성이 뛰어난 humanist sans-serif를 사용합니다. · UI 요소는 표준 sans-serif fallback를 사용합니다.

04

여백

표준 4px 그리드 기반입니다.

05

표면 (라운드 / 그림자 / 경계선)

요소를 명확하게 구분하되 거칠지 않도록 톤 다운된 다크 그레이(#333943)를 사용한 미세한 1px 테두리입니다.

0px 0px 100px 50px rgb(14, 16, 18)

06

레이아웃

SaaS 플랫폼의 전형적인 중앙 정렬, 콘텐츠 중심 레이아웃입니다.

07

모션과 인터랙션

탐색 및 버튼에서 매끄러운 hover 전환 효과입니다.

미세한 색상 변화와 불투명도 조절입니다. · 약간의 변형을 통한 즉각적인 반응입니다.

08

컴포넌트

• button 알약 모양(border-radius: 100px)으로, 단색 악센트 채우기 또는 미세한 윤곽선을 사용합니다.
• card 부드러운 그림자와 넉넉한 둥근 모서리를 가진 다크 패널(bg: #15171B)입니다.
• chip 높은 border-radius를 가진 작고 윤곽선 처리된 텍스트 요소입니다.
• input 명확한 대비 텍스트를 가진 미세한 다크 입력 필드입니다.
• hero 양쪽 작동 버튼이 있는 중앙 정렬 대형 타이포그래피입니다.

09

보이스와 금지 목록

• 톤 전문적이고 기술적이며 권위 있는 어조입니다.
• 헤드라인 간결하고 행동 지향적이며 굵은 제목입니다.
• CTA 명확하고 혜택 중심적이며 초대하는 CTA입니다.

• 밝은 배경을 사용하지 마세요 — 스크린샷은 다크 테마 인터페이스를 보여줍니다.
• 장식용 세리프 서체를 사용하지 마세요 — 스크린샷은 깔끔한 sans-serif 타이포그래피를 보여줍니다.
• 버튼에 날카롭고 네모난 모서리를 사용하지 마세요 — 스크린샷은 알약 모양 버튼을 보여줍니다.
• 네온색이나 과도하게 채도 높은 색상을 사용하지 마세요 — 스크린샷은 집중적인 블루 악센트를 보여줍니다.
• 테두리에 얇고 연한 선을 사용하지 마세요 — 스크린샷은 명확한 1px 테두리를 보여줍니다.
• 히어로 섹션을 과도하게 채우지 마세요 — 스크린샷은 넉넉한 여백과 큰 타이포그래피를 보여줍니다.
• 피하기: 맥락 없는 전문 용어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 실질 없는 과장
• 피하기: 히어로 섹션의 밀도 높은 텍스트 블록

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko