← OpenDesign
큐레이션 · 오픈 · 무료
StackBlitz
StackBlitz는 브라우저 기반 클라우드 IDE로, 최신 웹 팀에 번개처럼 빠르고 안전한 개발 환경을 제공합니다.
dev tool
01
디자인 DNA
개발자 브라우저 클라우드 IDE 속도 AI
브라우저 기반 개발을 위한 고성능 엔진입니다.
02
컬러
#00a8dbAccent
#ffffffInk
rgba(255,255,255,0.8)Ink soft
#0f1014BG
#151619BG soft
#1c1f25BG quiet
#a1a5b0Muted
rgba(255,255,255,0.12)Line
단일의 선명한 블루 악센트를 사용하여 속도와 집중력을 강조하는 고대비 다크 UI입니다.
03
타이포그래피
humanist-sans · monospace
display 94px · 700heading 40px · 700body 16px · 400small 13px · 500대형 디스플레이 타이포그래피에는 Manrope를, 본문/UI 텍스트에는 Inter를 사용합니다. · 제목에 타이트한 자간을 유지하여 밀도 높고 강렬한 느낌을 만듭니다. · 기술적이거나 코드 관련 스니펫에는 Roboto Mono를 사용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
주요 섹션 간에는 넉넉한 간격을, UI 컴포넌트 내부에는 타이트한 패딩을 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(255, 255, 255, 0.12)
rgba(0, 0, 0, 0.32) 0px 4px 8px 0px · rgba(255, 255, 255, 0.1) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
전체 폭의 다크 히어로 섹션, 중앙 정렬된 콘텐츠 칼럼, 그리고 나란히 배치된 비교 그리드를 사용하는 표준 고급 마케팅 사이트 레이아웃입니다.
07
모션과 인터랙션
100ms micro
1200ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
콘텐츠 표시를 위한 부드러운 페이드 및 슬라이드 트랜지션. · UI 상태 변경을 위한 탄성/플렉스 트랜지션.
인터랙티브 요소에서 미세한 색상 변화 또는 불투명도 변경. · 상태 변경을 통한 즉각적인 피드백.
08
컴포넌트
button 흰색 텍스트와 알약 모양 또는 큰 반경을 가진 단색 블루 주요 버튼; 미세한 hover 상태. card 미세한 테두리가 있는 다크 표면, 주로 데이터나 기능 비교에 사용됩니다. chip 데이터 테이블 내 상태 표시기 또는 작은 태그에 사용됩니다. input 미세한 인셋 그림자와 얇은 테두리가 있는 미니멀한 다크 입력 필드입니다. hero 대담한 배경 그라디언트와 은은한 와이어프레임 형태의 UI 일러스트레이션이 있는 대규모 타이포그래피 중심의 히어로 섹션입니다.
09
보이스와 금지 목록
톤 자신감 있고 기술적이며 직접적입니다. 헤드라인 대담하고 이점 중심적이며, 종종 주요 키워드를 강조하기 위해 대규모 타이포그래피를 사용합니다. CTA 'Try Bolt.new'와 같이 간단하고 행동 지향적인 레이블입니다. 흰색 배경을 사용하지 마세요 — 스크린샷은 다크하고 근접 블랙의 주요 배경을 보여줍니다. 세리프 서체를 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 산세리프 타이포그래피를 보여줍니다. 여러 경쟁 악센트 색상을 사용하지 마세요 — 스크린샷은 단일의 지배적인 블루 악센트를 보여줍니다. 주요 버튼에 큰 border-radius를 사용하지 마세요 — 스크린샷은 직사각형 또는 약간 둥근 버튼을 보여줍니다. 포커스 상태에 얇고 밝은색 윤곽선을 사용하지 마세요 — 스크린샷은 고대비 흰색 또는 블루 테두리를 사용합니다. 지나치게 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 은은하고 어두운 톤의 그라디언트 또는 단색 다크 표면을 사용합니다. 피하기: 모호한 마케팅 용어 피하기: 명확한 이점 없는 지나치게 복잡한 기술 설명 피하기: 수동적인 표현
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
StackBlitz는 개발자를 위한 고성능 브라우저 기반 클라우드 IDE입니다. 이 디자인은 프리미엄 다크 모드 미학을 구현하여 제품을 빠르고 현대적이며 전문적인 것으로 포지셔닝합니다. 주요 색상은 매우 어두운 회색/블랙 배경(#0f1014, #151619), 선명한 흰색 텍스트(#ffffff, rgba(255,255,255,0.8)), 그리고 선명한 고채도 블루 악센트(#00a8db)입니다. 타이포그래피는 humanist-sans 계열(Inter, Manrope)을 사용하며 매우 크고 타이트한 자간의 디스플레이 스케일을 적용합니다. 핵심 주의 사항: 라이트 테마를 절대 사용하지 마세요; 얇고 장식적인 서체를 피하세요; 단일 선명한 악센트 색상 이상을 사용하지 마세요. 전체적인 느낌은 차분하고 집중적이며 생산성을 위해 구축되었습니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 고급 개발자 도구 미학의 훌륭한 예시로, 강렬한 타이포그래피와 집중적이고 방해 없는 다크 환경의 균형을 잘 보여줍니다.