큐레이션 · 오픈 · 무료

Svelte

고대비 타이포그래피와 재미있는 3D 히어로 일러스트레이션이 특징인 깔끔한 에디토리얼 개발자 문서 사이트.

01

디자인 DNA

에디토리얼 영혼을 가진 정교한 오픈소스 개발자 도구.

02

컬러

깔끔한 화이트와 그레이 토대 위에 단일의 선명한 오렌지 악센트를 배치한 고대비 에디토리얼 팔레트입니다.

03

타이포그래피

didone-serif · humanist-sans · monospaced

• display54px · 400
• headline22px · 400
• body16px · 400
• mono12px · 400

04

여백

표준 4px 그리드와 100px 세로 섹션 패딩을 사용합니다.

05

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

1px solid #EBEBEB

06

레이아웃

표준 중앙 정렬 단일 컬럼 문서 레이아웃입니다.

07

모션과 인터랙션

미세한 인터랙티브 상태를 위한 필터 및 opacity 트랜지션.

미세한 opacity 및 scale 조정. · 표준 포인터 상태.

08

컴포넌트

• button 대문자와 화살표가 포함된 텍스트 기반 액션 링크입니다.
• card 2px solid 테두리가 있는 플랫 배경 컨테이너입니다.
• chip 어두운 배경의 소문자 대문자 텍스트 배지입니다.
• input 둥근 모서리와 키보드 단축키 표시기가 있는 검색 창입니다.
• hero 과대 크기의 세리프 제목과 짝을 이루는 대형 3D 일러스트레이션입니다.

09

보이스와 금지 목록

• 톤 환영하는, 자신감 있는, 그리고 교육적인 어조.
• 헤드라인 재미있는, 소문자 세리프 문장.
• CTA 직설적인, 대문자 산세리프 명령어.

• 메인 제목에 산세리프를 사용하지 마세요 — 스크린샷에서는 제목에 디도느 세리프를 사용합니다.
• 카드에 둥근 모서리를 사용하지 마세요 — 스크린샷에서는 날카로운 2px 또는 4px 테두리를 사용합니다.
• 경쟁하는 여러 강조 색상을 사용하지 마세요 — 스크린샷에서는 오렌지만 사용합니다.
• 다크 모드를 기본으로 사용하지 마세요 — 스크린샷에서는 화이트(#FFFFFF) 배경을 사용합니다.
• 작고 타이트한 타이포그래피를 사용하지 마세요 — 스크린샷에서는 넉넉한 1.5 라인 높이를 사용합니다.
• 복잡한 박스 그림자를 사용하지 마세요 — 스크린샷에서는 플랫하거나 최소한의 그림자가 있는 표면을 사용합니다.
• 피하기: 전문 용어가 많거나 공격적인 언어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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