큐레이션 · 오픈 · 무료

Nothing

타이포그래피 정밀도와 고대비 UI 요소에 중점을 둔, 날것의 단색 미학입니다.

01

디자인 DNA

고정밀 기술 도면이나 럭셔리 산업 부품

02

컬러

중성 회색 계열을 엄격히 준수하는 고대비 단색입니다.

03

타이포그래피

geometric-serif · grotesque-sans · dot-matrix

• display-large40px · 400
• display-medium24px · 400
• body16px · 400
• caption11px · 400

04

여백

표준 4px 기본 그리드

05

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

1px solid #E5E7EB

0px 0px 0px 1px rgba(229,231,235,1)

06

레이아웃

풍부한 padding으로 수직 및 수평 중앙 정렬된 모달입니다.

07

모션과 인터랙션

불투명도를 이용한 페이드 인/아웃 · hover 시 미세한 변환

상호작용 요소에 불투명도 또는 미세한 변환 변화를 적용합니다. · 모든 클릭 가능 요소에 표준 포인터 커서를 사용합니다.

08

컴포넌트

• button 주요 버튼: 흰색 텍스트가 들어간 검정색 채워진 pill 형태. 보조 버튼: 1px solid 밑줄이 있는 텍스트입니다.
• card 미세한 1px 테두리와 pill 형태 버튼을 가진 모달 컨테이너입니다.
• chip 표준 sans-serif 스타일링이 적용된 텍스트 기반 레이블입니다.
• input 깔끔한 라인을 가진 미니멀리스트 텍스트 입력 필드입니다.
• hero 디스플레이 타이포그래피를 주도하는, 중앙 정렬 및 수직 스택 레이아웃입니다.

09

보이스와 금지 목록

• 톤 정보 전달적이고 직선적입니다.
• 헤드라인 짧은, 전부 대문자 문구입니다.
• CTA 명확하고, 행동 지향적이며, 대문자입니다.

• 둥근 컨테이너를 사용하지 마세요 — 스크린샷은 pill 형태 버튼(반지름: 9999px)과 약간 둥근 모달 코너(6px-8px)를 보여줍니다.
• 여러 색상을 사용하지 마세요 — 스크린샷은 검정, 흰색, 단일 중성 회색으로 구성된 엄격한 단색 팔레트를 보여줍니다.
• 장식용 sans-serif 폰트를 사용하지 마세요 — 스크린샷은 디스플레이용 기하학적 serif와 본문용 표준 grotesque sans를 보여줍니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 깊이감을 위해 미세한 테두리 또는 매우 부드럽고 확산된 섀도우를 보여줍니다.
• 긴 단락에 중앙 정렬 텍스트를 사용하지 마세요 — 스크린샷은 짧은 형태 UI 카피에만 엄격히 중앙 정렬을 적용합니다.
• 주요 CTA에 소문자를 사용하지 마세요 — 스크린샷은 버튼과 디스플레이 텍스트에 전부 대문자를 사용합니다.
• 피하기: 模棱两可的表述
• 피하기: 지나치게 친근하거나 비공식적인 언어
• 피하기: 복잡한 문장

10

팩 안의 실제 스크린샷

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

11

System Prompt

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