큐레이션 · 오픈 · 무료

Slite

팀의 현실과 정확하게 동기화되는 AI 기반 지식 베이스입니다.

01

디자인 DNA

팀의 집단 지성을 위한 체계적이고 신뢰할 수 있는 도서관입니다.

02

컬러

따뜻하고 고대비의 중립적인 색상들이 친근하면서도 전문적인 느낌을 줍니다. 주요 액션을 위한 단 하나의 생동감 있는 오렌지 강조색을 사용합니다.

03

타이포그래피

humanist-sans · geometric-sans

• display56px · 600
• h136px · 600
• body16px · 400
• small13px · 400

시각적 계층 유지를 위해 주요 및 부제목에 display 및 h1 토큰을 사용합니다. · 가독성을 위해 본문 텍스트의 일관된 line-height 1.6을 유지합니다. · 내비게이션이나 배지 같은 UI 요소에는 눈에 띄지 않도록 small 토큰을 사용합니다.

04

여백

4px 기반 그리드와 주요 섹션을 위한 넉넉한 패딩(120px)이 개방적이고 호흡이 편한 레이아웃을 만듭니다.

05

표면 (라운드 / 그림자 / 경계선)

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

레이아웃

중앙 정렬된 단일 컬럼 히어로와 그 아래의 3컬럼 기능 그리드입니다.

07

모션과 인터랙션

페이지 로드 및 스크롤 트리거 요소를 위한 미묘한 페이드인 및 슬라이드업 애니메이션. · 버튼과 인터랙티브 요소를 위한 부드러운 hover 트랜지션.

버튼과 링크의 미묘한 배경색 변화 또는 그림자 증가. · 즉각적인 시각적 피드백(예: 버튼 누름 또는 색상 변화).

08

컴포넌트

• button 알약 모양의 고대비 주요 버튼(오렌지 배경, 흰색 텍스트)과 고스트 버튼(테두리만 있음).
• card 미묘한 그림자나 테두리가 있는 밝은 배경의 카드로, 제목과 목록을 포함합니다.
• chip 아이콘이 있는 알약 모양 태그(예: '검증됨', '자동 유지됨')와 부드러운 배경색.
• input 미묘한 테두리와 둥근 모서리를 가진 깔끔하고 미니멀한 검색 또는 입력 필드.
• hero 대형 중앙 정렬 헤드라인, 부제목, 주요 CTA 버튼, 신뢰 배지(SOC 2, HIPAA, GDPR)를 포함합니다.

09

보이스와 금지 목록

• 톤 자신감 있고 명확하며 도움이 되는 톤으로, 정확성과 신뢰에 중점을 둡니다.
• 헤드라인 직접적이고 이점 지향적이며 약간 격식 있는, 능동태를 사용하는 스타일.
• CTA 행동을 촉구하고 격려하는 스타일(예: '문서를 최신으로 유지하세요').

• 순백색 배경을 사용하지 마세요 — 스크린샷에서는 주요 캔버스로 따뜻한 오프화이트(#FDF9F4)를 보여줍니다.
• 오렌지 외의 주요 강조색을 사용하지 마세요 — 스크린샷에서는 CTA를 위해 단 하나의 생동감 있는 오렌지(#F67748)를 보여줍니다.
• 헤드라인에 세리프 폰트를 사용하지 마세요 — 스크린샷에서는 일관되게 깔끔한 휴머니스트 산세리프를 사용합니다.
• 주요 구성 요소에 날카로운 직사각형 모서리를 사용하지 마세요 — 스크린샷에서는 일관되게 둥근 모서리(6px~알약 모양)를 보여줍니다.
• 히어로 섹션에 밀집된 다중 컬럼 레이아웃을 사용하지 마세요 — 스크린샷에서는 여유롭고 중앙 정렬된 단일 컬럼 접근 방식을 보여줍니다.
• 다크 모드 또는 고채도 색상 배경을 사용하지 마세요 — 스크린샷에서는 밝고 공기 같은 중립적 팔레트를 유지합니다.
• 피하기: 과장된 주장
• 피하기: 전문 용어가 과도한 설명
• 피하기: 공격적이거나 강요하는 언어

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko