큐레이션 · 오픈 · 무료

Craft

구조와 표현적 창의성을 결합한 프리미엄, 고요한 생산성 워크스페이스입니다.

01

디자인 DNA

현대적인 사고자를 위한 세련된 디지털 노트.

02

컬러

가독성을 위해 깨끗한 배경에 고명도 잉크색을 사용하고, 일러스트레이션에서는 부드러운 파스텔 톤으로 포인트를 줍니다.

03

타이포그래피

transitional-serif · geometric-sans

• display56px · 500

세련미와 사고력 전달을 위해 display headlines에는 세리프를 사용합니다. · 명확성을 위해 본문, 내비게이션, UI 요소에는 모두 산세리프를 사용합니다. · display 폰트에는 좁은 자간(negative letter-spacing)을 유지합니다.

04

여백

풍부한 여백을 통해 차분하고 숨쉬기 편한 읽기 경험을 만듭니다.

05

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

1px solid rgba(3,3,2,0.09)

0px 20px 40px 0px rgba(0, 0, 0, 0.05) · 0px 3px 10px 0px rgba(0, 0, 0, 0.08)

06

레이아웃

강한 타이포그래피 계층과 넓은 섹션을 갖춘 깔끔하고 중앙 정렬된 수직 레이아웃입니다.

07

모션과 인터랙션

hover 상태에서의 부드러운 색상 및 불투명도 전환.

미세한 배경색 변화 또는 불투명도 변화. · 즉각적이고 명료한 반응.

08

컴포넌트

• button 높은 명도 대비 배경의 알약 형태 버튼입니다 (주요 CTA는 검정, 보조는 흰색).
• card 미세한 drop shadows가 있는 부드럽게 둥근 카드로, 관련 콘텐츠나 작업을 그룹화하는 데 자주 사용됩니다.
• chip 가벼운 파스텔 배경의 상태나 태그를 위한 미니멀리스트 알약 형태입니다.
• input 배경과 자연스럽게 어우러지는 깔끔하고 borderless하거나 미세한 테두리가 있는 입력 필드입니다.
• hero 표현적이고 질감 있는 콜라주 일러스트레이션 위에 레이어링된 큰 타이포그래피 문구입니다.

09

보이스와 금지 목록

• 톤 친근하고, 사려 깊으며, 역량을 강화하는.
• 헤드라인 세련된 세리프 타이포그래피를 사용한 명확하고 혜택 중심적인 진술.
• CTA 즉각적인 가치에 초점을 맞춘 직접적이고 격려하는 내용 (예: 'Try Craft Free').

• 모든 요소에 단일 악센트 색상을 사용하지 않습니다 — 스크린샷에서는 일러스트레이션에 다양한 파스텔 색상이 사용되었습니다.
• 무거운 drop shadows를 사용하지 않습니다 — 스크린샷에서는 깊이감을 위해 미세하고 부드러운 그림자를 보여줍니다.
• 본문에 대문자(all-caps)를 사용하지 않습니다 — 스크린샷에서는 소문자 카테고리 라벨에만 대문자를 사용합니다.
• 다크 모드 인터페이스를 사용하지 않습니다 — 스크린샷에서는 주로 밝고 화사한 배경을 보여줍니다.
• 날카롭고 정사각형 모서리를 사용하지 않습니다 — 스크린샷에서는 최대 24px 또는 알약 형태의 매우 둥근 모서리를 보여줍니다.
• 경직되고 격자가 강조된 레이아웃을 사용하지 않습니다 — 스크린샷에서는 일러스트레이션에서 더 유기적이고 흐르는 배치를 보여줍니다.
• 피하기: 전문 용어가过多하거나 지나치게 기술적인 언어.
• 피하기: 공격적이거나 시끄러운 홍보 톤.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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