← OpenDesign
큐레이션 · 오픈 · 무료
Svelte
고대비 타이포그래피와 재미있는 3D 히어로 일러스트레이션이 특징인 깔끔한 에디토리얼 개발자 문서 사이트.
devtools framework
01
디자인 DNA
개발자 친화적 접근성 우아한 현대적인 오픈소스
에디토리얼 영혼을 가진 정교한 오픈소스 개발자 도구.
02
컬러
#FF3E00Accent
#262626Ink
#808080Ink soft
#FFFFFFBG
#F2F2F2BG soft
#E5E5E5BG quiet
#666666Muted
rgba(235, 235, 235, 1)Line
깔끔한 화이트와 그레이 토대 위에 단일의 선명한 오렌지 악센트를 배치한 고대비 에디토리얼 팔레트입니다.
03
타이포그래피
didone-serif · humanist-sans · monospaced
display 54px · 400headline 22px · 400body 16px · 400mono 12px · 400
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
표준 4px 그리드와 100px 세로 섹션 패딩을 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 2px
md · 4px
lg · 56px
pill · 999px
1px solid #EBEBEB
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
표준 중앙 정렬 단일 컬럼 문서 레이아웃입니다.
07
모션과 인터랙션
200ms micro
200ms small
400ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
미세한 인터랙티브 상태를 위한 필터 및 opacity 트랜지션.
미세한 opacity 및 scale 조정. · 표준 포인터 상태.
08
컴포넌트
button 대문자와 화살표가 포함된 텍스트 기반 액션 링크입니다. card 2px solid 테두리가 있는 플랫 배경 컨테이너입니다. chip 어두운 배경의 소문자 대문자 텍스트 배지입니다. input 둥근 모서리와 키보드 단축키 표시기가 있는 검색 창입니다. hero 과대 크기의 세리프 제목과 짝을 이루는 대형 3D 일러스트레이션입니다.
09
보이스와 금지 목록
톤 환영하는, 자신감 있는, 그리고 교육적인 어조. 헤드라인 재미있는, 소문자 세리프 문장. CTA 직설적인, 대문자 산세리프 명령어. 메인 제목에 산세리프를 사용하지 마세요 — 스크린샷에서는 제목에 디도느 세리프를 사용합니다. 카드에 둥근 모서리를 사용하지 마세요 — 스크린샷에서는 날카로운 2px 또는 4px 테두리를 사용합니다. 경쟁하는 여러 강조 색상을 사용하지 마세요 — 스크린샷에서는 오렌지만 사용합니다. 다크 모드를 기본으로 사용하지 마세요 — 스크린샷에서는 화이트(#FFFFFF) 배경을 사용합니다. 작고 타이트한 타이포그래피를 사용하지 마세요 — 스크린샷에서는 넉넉한 1.5 라인 높이를 사용합니다. 복잡한 박스 그림자를 사용하지 마세요 — 스크린샷에서는 플랫하거나 최소한의 그림자가 있는 표면을 사용합니다. 피하기: 전문 용어가 많거나 공격적인 언어
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 Svelte 개발자 문서 사이트로, 깔끔한 에디토리얼 미학과 재미있고 굵은 타이포그래피를 결합합니다. 디자인은 화이트(#FFFFFF)와 다크 그레이(#262626)의 고대비 팔레트 위에 디도느 세리프 디스플레이 폰트와 휴머니스트 산세리프 본문 폰트에 의존하며, 단일의 선명한 오렌지 악센트(#FF3E00)를 사용합니다. 레이아웃은 1280px 컨테이너로 중앙 정렬되고 여유롭습니다. 중요한 주의사항: 메인 제목에 절대로 산세리프를 사용하지 말고, 항상 주요 액션에 오렌지 악센트를 절제 있게 사용하며, 에디토리얼 느낌을 유지하기 위해 넉넉한 수직 간격을 유지하세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 에디토리얼 타이포그래피와 재미있고 고품질의 3D 일러스트레이션으로 개발자 도구를 어떻게 고급스럽게 만들 수 있는지 보여주는 좋은 예시입니다.