← OpenDesign
큐레이션 · 오픈 · 무료
Descript
선도적인 AI 비디오 편집 플랫폼을 위한 깨끗하고 따뜻하며 기능적인 디자인입니다.
ai video
01
디자인 DNA
AI 비디오 편집기 협업 직관적 전문적
강력하면서도 접근 가능한 현대 스튜디오.
02
컬러
#1A1A1AInk
#F1EAEDBG
#D1C7CBMuted
rgba(229,231,235,1.0)Line
가독성을 위해 고대비의 어두운 잉크가 적용된 따뜻한 오프 화이트 캔버스를 기본으로 하며, 히어로 섹션에서 강조를 위해 딥 버건디를 사용합니다.
03
타이포그래피
transitional-serif · humanist-sans · monospace
display 56px · 400body 18px · 400
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
표준 4px 베이스에 padding과 간격을 위한 명확한 8px/16px/24px 단계적 증가.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #E5E7EB
rgba(0,0,0,0.16) 0px 2px 4px 0px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
핵심 메시지를 위한 중앙 정렬 레이아웃을 가진 전체 너비 히어로 섹션, 그 다음 기능 카드를 위한 다중 열 그리드.
07
모션과 인터랙션
100ms micro
200ms small
300ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
hover 및 focus 시 페이드인 전환 · 부드러운 background-color 변화
인터랙티브 요소에서 미세한 배경색 변화 또는 불투명도 변화. · 지연된 애니메이션 없이 즉각적인 시각적 피드백.
08
컴포넌트
button 4px radius와 16px 수직 padding을 가진 깔끔한 사각형 버튼. card 12px radius의 카드, 큰 배경 이미지와 오버레이 텍스트 적용. chip 카테고리를 위한 간단한 텍스트 기반 레이블. input 미세한 테두리가 있는 표준 폼 입력 필드. hero 딥 버건디 배경과 볼드한 세리프 타이포그래피를 가진 크고 중앙 정렬된 히어로 섹션.
09
보이스와 금지 목록
톤 전문적이고 명확하며, 사용자에게 힘을 실어주는 어조. 헤드라인 권위와 명확성을 전달하는 볼드하고 큰 세리프 글꼴. CTA 직관적이고 행동 지향적 (예: '무료로 시작하기'). 다크 모드 인터페이스를 사용하지 마세요 — 스크린샷은 밝고 따뜻한 오프 화이트 배경을 기본 캔버스로 보여줍니다. 헤드라인에 지나치게 기하학적인 산세리프를 사용하지 마세요 — 스크린샷은 디스플레이 텍스트에 고전적인 트랜지셔널 세리프를 보여줍니다. 네온 또는 일렉트릭 블루를 주요 강조색으로 사용하지 마세요 — 스크린샷은 강조를 위해 딥 버건디와 부드러운 코랄 레드를 사용합니다. 기본 버튼에 과도하게 둥글거나 '알약' 모양을 사용하지 마세요 — 스크린샷은 4px border-radius의 버튼을 보여줍니다. 과도한 드롭 섀도우나 3D 효과를 사용하지 마세요 — 스크린샷은 높이감을 위해 미세한 단일 box-shadow만 사용한 평면적이고 깔끔한 표면을 보여줍니다. 혼잡한 다중 사이드바 네비게이션을 사용하지 마세요 — 스크린샷은 충분한 여백을 가진 깔끔한 수평 상단 네비게이션 바를 보여줍니다. 피하기: 지나치게 기술적인 전문 용어 피하기: 지저분한 레이아웃 피하기: 공격적인 네온 색상 피하기: 둥글고 벌룬 같은 UI 요소 피하기: 과도한 장식적 애니메이션 피하기: 다크 모드를 기본 테마로 사용
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 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Descript의 디자인은 따뜻함과 권위를 균형 있게 맞춘 깨끗하고 전문적인 SaaS 미학입니다. 가독성을 위해 밝은 오프 화이트 배경(#F1EAED)과 고대비의 어두운 잉크(#1A1A1A)를 사용합니다. 타이포그래피는 볼드한 헤드라인용 고전적인 트랜지셔널 세리프와 본문용 휴머니스트 산세리프를 특징으로 하여, 세련되면서도 접근 가능한 느낌을 줍니다. 핵심 디자인 요소로는 4px 기반의 간격 스케일, 미세한 1px 테두리(#E5E7EB), 그리고 히어로 섹션을 위한 절제된 딥 버건디 색상 사용이 포함됩니다. 중요한 디자인 규칙은 다음과 같습니다: 1) 기본 모드로 다크 모드를 사용하지 않습니다; 2) 지나치게 둥글거나 벌룬 같은 UI 컴포넌트를 사용하지 않습니다; 3) 절대로 네온 또는 고채도의 강조색을 사용하지 않습니다; 4) 넉넉한 여백과 구조화된 12열 그리드 레이아웃을 유지합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 고전적인 타이포그래피와 절제된 팔레트를 사용하여 신뢰와 명확성을 구축하는 현대적이고 전문적인 SaaS 디자인의 대표적인 예시입니다.