← OpenDesign
큐레이션 · 오픈 · 무료
Slite
팀의 현실과 정확하게 동기화되는 AI 기반 지식 베이스입니다.
SaaS AI Productivity Clean Calm
01
디자인 DNA
지식 검증됨 동기화 정확성 신뢰
팀의 집단 지성을 위한 체계적이고 신뢰할 수 있는 도서관입니다.
02
컬러
#F67748Accent
#3F434AInk
#2D2F34Ink soft
#FDF9F4BG
#FFFFFFBG soft
#A8AAAFMuted
rgba(244,244,244,1.0)Line
따뜻하고 고대비의 중립적인 색상들이 친근하면서도 전문적인 느낌을 줍니다. 주요 액션을 위한 단 하나의 생동감 있는 오렌지 강조색을 사용합니다.
03
타이포그래피
humanist-sans · geometric-sans
display 56px · 600h1 36px · 600body 16px · 400small 13px · 400시각적 계층 유지를 위해 주요 및 부제목에 display 및 h1 토큰을 사용합니다. · 가독성을 위해 본문 텍스트의 일관된 line-height 1.6을 유지합니다. · 내비게이션이나 배지 같은 UI 요소에는 눈에 띄지 않도록 small 토큰을 사용합니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
120px
4px 기반 그리드와 주요 섹션을 위한 넉넉한 패딩(120px)이 개방적이고 호흡이 편한 레이아웃을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 6px
md · 10px
lg · 16px
pill · 999px
1px solid rgba(244,244,244,1.0)
rgba(0, 0, 0, 0.3) 0px 32px 68px 0px · rgba(0, 0, 0, 0.06) 0px 1px 0px 0px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
중앙 정렬된 단일 컬럼 히어로와 그 아래의 3컬럼 기능 그리드입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.215, 0.61, 0.355, 1) easing
페이지 로드 및 스크롤 트리거 요소를 위한 미묘한 페이드인 및 슬라이드업 애니메이션. · 버튼과 인터랙티브 요소를 위한 부드러운 hover 트랜지션.
버튼과 링크의 미묘한 배경색 변화 또는 그림자 증가. · 즉각적인 시각적 피드백(예: 버튼 누름 또는 색상 변화).
08
컴포넌트
button 알약 모양의 고대비 주요 버튼(오렌지 배경, 흰색 텍스트)과 고스트 버튼(테두리만 있음). card 미묘한 그림자나 테두리가 있는 밝은 배경의 카드로, 제목과 목록을 포함합니다. chip 아이콘이 있는 알약 모양 태그(예: '검증됨', '자동 유지됨')와 부드러운 배경색. input 미묘한 테두리와 둥근 모서리를 가진 깔끔하고 미니멀한 검색 또는 입력 필드. hero 대형 중앙 정렬 헤드라인, 부제목, 주요 CTA 버튼, 신뢰 배지(SOC 2, HIPAA, GDPR)를 포함합니다.
09
보이스와 금지 목록
톤 자신감 있고 명확하며 도움이 되는 톤으로, 정확성과 신뢰에 중점을 둡니다. 헤드라인 직접적이고 이점 지향적이며 약간 격식 있는, 능동태를 사용하는 스타일. CTA 행동을 촉구하고 격려하는 스타일(예: '문서를 최신으로 유지하세요'). 순백색 배경을 사용하지 마세요 — 스크린샷에서는 주요 캔버스로 따뜻한 오프화이트(#FDF9F4)를 보여줍니다. 오렌지 외의 주요 강조색을 사용하지 마세요 — 스크린샷에서는 CTA를 위해 단 하나의 생동감 있는 오렌지(#F67748)를 보여줍니다. 헤드라인에 세리프 폰트를 사용하지 마세요 — 스크린샷에서는 일관되게 깔끔한 휴머니스트 산세리프를 사용합니다. 주요 구성 요소에 날카로운 직사각형 모서리를 사용하지 마세요 — 스크린샷에서는 일관되게 둥근 모서리(6px~알약 모양)를 보여줍니다. 히어로 섹션에 밀집된 다중 컬럼 레이아웃을 사용하지 마세요 — 스크린샷에서는 여유롭고 중앙 정렬된 단일 컬럼 접근 방식을 보여줍니다. 다크 모드 또는 고채도 색상 배경을 사용하지 마세요 — 스크린샷에서는 밝고 공기 같은 중립적 팔레트를 유지합니다. 피하기: 과장된 주장 피하기: 전문 용어가 과도한 설명 피하기: 공격적이거나 강요하는 언어
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 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Slite는 팀을 위한 신뢰할 수 있는 AI 기반 지식 베이스로 포지셔닝하는 B2B SaaS 제품입니다. 디자인은 깔끔하고 전문적이며 친근하며, 따뜻한 오프화이트(#FDF9F4) 배경, 진한 회색(#3F434A) 텍스트, 그리고 주요 액션을 위한 단 하나의 생동감 있는 오렌지(#F67748) 강조색을 사용합니다. 타이포그래피는 UniversalSans와 같은 깔끔한 휴머니스트 산세리프 패밀리로, 헤드라인용 크고 볼드한 display 폰트를 사용합니다. 레이아웃은 여유롭고 중앙 정렬되어 있으며, 넉넉한 패딩과 기능을 위한 3컬럼 그리드가 있습니다. 중요한 주의사항: 메인 캔버스에 절대 순백색 배경을 사용하지 마세요; 둘 이상의 주요 강조색을 도입하지 마세요; display 텍스트에 절대 세리프 폰트를 사용하지 마세요; 카드와 버튼에 날카로운 모서리를 피하세요; 넉넉한 여백 없이 밀집된 레이아웃을 만들지 마세요; 헤드라인에 공격적이거나 과장된 언어를 사용하지 마세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 현대적인 B2B SaaS 디자인의 훌륭한 예로, 색상, 타이포그래피, 여백을 세심하게 활용하여 전문성과 따뜻하고 친근한 미학을 조화시킵니다.