큐레이션 · 오픈 · 무료

Sketch

정제된 다크 테마 UI 내에서 사용자의 작업을 중심으로 배치하는 전문적이고 고대비의 디자인 플랫폼입니다.

01

디자인 DNA

정교하게 만들어진 스튜디오 환경과 같은 느낌을 주는 프리미엄이고 집중적인 툴킷입니다.

02

컬러

집중감과 깊이를 만들기 위해, 히어로 영역에 은은한 따뜻한 그래디언트가 포함된 고대비의 중성색입니다.

03

타이포그래피

transitional-serif · humanist-sans · monospace

• display72px · 400
• heading40px · 400
• subhead22px · 400
• body16px · 400
• caption14px · 400

디스플레이 폰트는 고대비의 전환형 세리프입니다. · 본문 텍스트는 중립적인 휴머니스트 산세리프를 사용합니다. · 큰 디스플레이 크기에서는 자간을 좁게 잡습니다.

04

여백

여유로운 공간감을 위해 4px 그리드를 기반으로 합니다.

05

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

명확한 경계를 위해 rgba(0,0,0,0.32)의 은은한 1px 테두리를 사용합니다.

rgba(0, 0, 0, 0.2) 0px 1px 4px 0px · rgba(0, 0, 0, 0.1) 0px 2px 4px 0px

06

레이아웃

넉넉한 패딩과 명확한 시각적 위계를 갖춘 중앙 정렬 콘텐츠입니다.

07

모션과 인터랙션

스크롤 시 페이드인 · 부드러운 hover 전환

인터랙티브 요소의 은은한 색상 또는 불투명도 변경입니다. · 즉각적인 피드백을 제공하는 표준 포인터 커서입니다.

08

컴포넌트

• button 고대비 텍스트를 사용한 다크하고 둥근 직사각형입니다.
• card 기능 쇼케이스에 사용되는, 은은한 그림자가 있는 둥근 컨테이너입니다.
• chip 배경색과 대문자 텍스트를 사용하는 작고 둥근 라벨입니다.
• input 은은한 테두리가 있는 미니멀하고 둥근 입력 필드입니다.
• hero 두드러진 세리프 헤드라인과 부드러운 그래디언트 배경을 가진 큰 분할형 레이아웃입니다.

09

보이스와 금지 목록

• 톤 자신감 있고, 친근하며, 전문적입니다.
• 헤드라인 직접적이며, 종종 세리프 폰트를 사용하여 임팩트와 환영하는 톤을 줍니다.
• CTA 행동 지향적이고 명확하며, 고대비 버튼을 사용합니다.

• 저대비 텍스트를 사용하지 마세요 — 스크린샷은 밝은 배경에 고대비의 잉크를 보여줍니다.
• 본문 텍스트에 지나치게 장식적인 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 휴머니스트 산세리프를 사용합니다.
• 주요 작업에 날카롭고 밝은 악센트 색상을 사용하지 마세요 — 스크린샷은 다크하고 고대비의 버튼을 사용합니다.
• 너무 많은 요소로 레이아웃을 어지럽히지 마세요 — 스크린샷은 넉넉한 여백을 유지합니다.
• 주요 컴포넌트에 날카롭고 정사각형 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(20px, 12px)를 사용합니다.
• 큰 헤드라인에 얇고 가벼운 폰트를 사용하지 마세요 — 스크린샷은 굵고 고대비의 세리프를 사용합니다.
• 피하기: 기술 전문 용어
• 피하기: 공격적인 판매 언어
• 피하기: 지나치게 캐주얼한 속어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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