← OpenDesign
큐레이션 · 오픈 · 무료
Trigger.dev
AI 에이전트와 워크플로를 구축 및 배포하기 위한, 완전한 런타임 제어 기능을 갖춘 어두운 개발자 중심 플랫폼.
devtools dark
01
디자인 DNA
개발자 AI 자동화 런타임 TypeScript
AI 워크플로를 위한 산업용 멀티탭
02
컬러
#BFFF00Accent
#D7D9DDInk
#878C99Ink soft
#121317BG
#1C1E21BG soft
#15171ABG quiet
rgba(59, 62, 69, 1)Line
깊은 어두운 표면, 고대비 중립 텍스트, 그리고 주요 액션을 위한 단일의 네온 그린 강조색.
03
타이포그래피
geometric-sans · humanist-sans · monospace
display 56px · 500heading-2 30px · 500body 16px · 400caption 14px · 400큰 디스플레이 헤드라인에는 기하학적 산세리프를 사용합니다. · 인라인 코드 참조 및 터미널 UI 요소에는 고정폭 글꼴을 사용합니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
일관된 4px 그리드와 큰 컨테이너 요소를 위한 넉넉한 padding.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 6px
lg · 12px
pill · 9999px
1px solid rgba(59, 62, 69, 1)
0 1px 2px 0 rgba(0, 0, 0, 0.05)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
눈에 띄는 전체 너비의 히어로 섹션과 그리드 기반의 기능 섹션을 따르는 표준 중앙 정렬 레이아웃.
07
모션과 인터랙션
150ms micro
200ms small
300ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
인터랙티브 요소에서의 표준 색상 및 background-color 전환. · hover 상태를 위한 미세한 불투명도 및 변형 변경.
요소는 0.15초에서 0.3초의 지속 시간 동안 hover 시 미세하게 색상이나 background-color를 변경합니다. · 최소한의 피드백으로, 주로 상태 변화를 나타내기 위해 색상 전환에 의존합니다.
08
컴포넌트
button 주요 버튼은 검정 텍스트를 사용하는 고채도 네온 그린 배경을 사용하며, 약간 둥글게(4px) 처리됩니다. card 카드는 미세한 테두리와 어두운 배경을 가지며, 종종 명확한 제목과 설명을 포함한 기능 목록을 담고 있습니다. chip 어두운 배경과 미세한 테두리를 가진 작고 둥근(필) 뱃지로, 기능 태그에 사용됩니다. input 미세한 테두리와 둥근 모서리를 가진 어두운 테마의 입력 필드. hero 크고 굵은 흰색 헤드라인과 고대비 CTA 버튼을 특징으로 하는 전체 너비의 어두운 배경 섹션.
09
보이스와 금지 목록
톤 기술적이고 권위 있으며 직접적입니다. 헤드라인 굵고, 선언적이며, 이점 중심적입니다. CTA 행동을 유도하고 직접적이며, 종종 고대비 버튼을 사용합니다. 밝고 포화된 다색 팔레트를 사용하지 마세요 — 스크린샷은 제한된 강조색과 함께 주로 어두운 거의 단색 배경을 보여줍니다. 장식적 또는 필기체 서체를 사용하지 마세요 — 스크린샷은 모든 텍스트에 깨끗한 기하학적 및 인본주의 산세리프를 보여줍니다. 카드나 컨테이너에 크고 복잡한 border-radius 값을 사용하지 마세요 — 스크린샷은 주로 4px에서 12px의 둥근 모서리를 보여줍니다. 고도를 위해 무거운 drop shadow나 glow를 사용하지 마세요 — 스크린샷은 매우 미세하고 거의 존재하지 않는 그림자를 보여줍니다. 라이트 모드 색상 체계를 사용하지 마세요 — 스크린샷은 깊이 어두운 저명도 인터페이스를 보여줍니다. 본문 텍스트에 중앙 정렬, 다중 열 레이아웃을 사용하지 마세요 — 스크린샷은 대부분의 비히어로 섹션에서 왼쪽 정렬 텍스트를 보여줍니다. 피하기: 지나치게 캐주얼하거나 장난스러운 언어. 피하기: 기술적 내용 없는 마케팅 용어. 피하기: 모호하거나 불확실한 기능 설명.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 어두운 산업 미학을 가진 개발자 중심 AI 플랫폼입니다. 디자인 DNA는 깊은 숯색 배경(#121317)과 고대비 중립 텍스트(#D7D9DD), 그리고 주요 CTA를 위한 단일의 고채도 네온 그린 강조색(#BFFF00)을 중심으로 합니다. 타이포그래피는 헤드라인과 본문 텍스트를 위한 기하학적 및 인본주의 산세리프의 깨끗한 조합과 기술적 참조를 위한 고정폭 글꼴을 사용합니다. 레이아웃은 중앙 정렬되고 넓으며, 일관된 4px 간격 그리드를 사용합니다. 중요하지 않은 사항: 라이트 모드 팔레트를 절대 사용하지 마세요, 장식 글꼴을 절대 사용하지 마세요, 제품의 기술적이고 집중적인 본질을 산만하게 하는 무거운 drop shadow나 다색 강조를 절대 사용하지 마세요. 시스템은 전체적으로 전문적이고 권위적이며 기술적인 어조를 유지해야 합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 해당 사이트는 단일의 강렬한 강조색으로 시선을 유도하여, 기술 중심의 전문적인 SaaS 디자인의 강력한 예시인 어두운 개발자 중심 미학을 효과적으로 활용하고 있습니다.