← OpenDesign
큐레이션 · 오픈 · 무료
Deel
글로벌 팀을 고용하고, 관리하며, 지불하기 위한 깔끔하고 체계적인 SaaS 플랫폼입니다.
fintech saas
01
디자인 DNA
글로벌 인력 급여 컴플라이언스 플랫폼
글로벌 팀 관리를 위한 전문적인 기업용 대시보드.
02
컬러
#FAAF00Accent
#1B1B1BInk
#3B3B3BInk soft
#FFFFFFBG
#F7F5F2BG soft
#141414BG quiet
#888888Muted
rgba(0, 0, 0, 0.16)Line
고대비의 다크 및 라이트 섹션을 갖춘 깔끔한 화이트스페이스로, 밝은 기본 악센트로 안정감을 줍니다.
03
타이포그래피
transitional-serif · humanist-sans · monospace
display 56px · 560heading 36px · 500body 16px · 400caption 14px · 400헤드라인은 프리미엄 웨이트를 위해 트랜지션 세리프 폰트를 사용합니다. · 본문은 가독성이 뛰어난 휴머니트 산세리프를 사용합니다. · 기본 텍스트 색상은 순수 블랙이 아닌 깊은 차콜(#1B1B1B)입니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
패딩, 간격, 마진에 적용되는 일관된 4px 기본 그리드입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 16px
pill · 999px
최소한의 테두리로, 미묘한 그림자와 색상 대비를 사용하여 표면을 정의합니다.
rgba(27, 27, 27, 0.16) 0px 16px 32px 0px · rgba(27, 27, 27, 0.05) 0px 2px 32px 0px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
멀티컬럼 히어로가 전체 너비의 다크 및 라이트 콘텐츠 밴드로 전환됩니다.
07
모션과 인터랙션
150ms micro
200ms small
400ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
인터랙티브 요소에서의 매끄러운 채우기 및 색상 트랜지션. · 버튼과 링크의 미묘한 hover 변환.
인터랙티브함을 나타내기 위한 미묘한 색상 변화 또는 불투명도 변경. · 버튼 프레스 상태를 통한 즉각적인 시각적 피드백.
08
컴포넌트
button 고대비(화이트 온 블랙 또는 블랙 온 화이트)의 둥근 알약 형태 버튼으로, 미묘한 border-radius를 가집니다. card 가벼운 그림자를 가진 약간 둥근 컨테이너로, 종종 기본 액션이나 이미지가 포함됩니다. chip PEO, EOR 같은 기능을 분류하기 위한 아이콘과 함께 사용되는 작은 둥근 태그입니다. input 명확한 라벨과 표준 둥근 테두리를 갖춘 깔끔한 폼 필드입니다. hero 왼쪽에 큰 텍스트 블록과 오른쪽에 라이프스타일 이미지가 있는 분할 레이아웃입니다.
09
보이스와 금지 목록
톤 전문적이고 권위적이며 직설적입니다. 헤드라인 핵심 가치 제안을 강조하는 크고 강렬한 문구. CTA '데모 예약' 또는 '자세히 알아보기'와 같은 행동 지향적 라벨. 밝은 네온색을 사용하지 마세요 — 스크린샷은 블랙, 화이트, 차콜로 구성된 안정적인 팔레트를 보여줍니다. 지나치게 장식적인 스크립트를 사용하지 마세요 — 스크린샷은 트랜지션 세리프와 휴머니트 산세리프의 구조화된 조합을 보여줍니다. 가혹한 순수 블랙 배경을 사용하지 마세요 — 스크린샷은 다크 모드 섹션을 위해 부드러운 차콜(#141414)을 보여줍니다. 날카롭고 직사각형 버튼을 사용하지 마세요 — 스크린샷은 매우 둥근, 알약 형태의 버튼을 보여줍니다. 밀도 높고 지저분한 그리드를 사용하지 마세요 — 스크린샷은 넉넉한 화이트스페이스와 명확한 구획을 보여줍니다. 얇고 읽기 어려운 폰트를 사용하지 마세요 — 스크린샷은 고대비, 잘 조정된 타이포그래피를 보여줍니다. 피하기: 지나치게 캐주얼한 은어를 피합니다. 피하기: 지저분한 레이아웃을 피합니다. 피하기: 네온색이나 안정감 없는 팔레트를 피합니다.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(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
Deel은 글로벌 인력 관리를 위한 프리미엄 SaaS 플랫폼입니다. 그 디자인 DNA는 화이트, 차콜(#1B1B1B, #141414), 그리고 독특한 골든 악센트(#FAAF00)로 구성된 깔끔하고 고대비의 팔레트 위에 구축되었습니다. 타이포그래피는 굵은 헤드라인을 위해 전문적인 트랜지션 세리프를, 본문을 위해 가독성이 뛰어난 휴머니트 산세리프를 조합하여 사용합니다. 레이아웃은 1280px 컨테이너와 넉넉한 화이트스페이스, 4px 기본 그리드를 활용하여 넓습니다. 인터랙션은 세련되어, 둥근 알약 형태 버튼, 미묘한 그림자, 매끄러운 cubic-bezier 트랜지션을 특징으로 합니다. 중요 주의사항: 네온색 사용, 날카롭고 직사각형 버튼 사용, 밀도 높고 지저분한 레이아웃 사용을 피합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 권위와 친근함의 균형을 갖춘 현대적이고 전문적인 B2B 플랫폼의 대표적인 예시입니다.