큐레이션 · 오픈 · 무료

Weaviate

Vector search, RAG, 메모리를 사용하여 완전한 AI 경험을 구축할 수 있는 오픈소스 플랫폼.

devai

↓ 디자인 시스템 다운로드 (29 MB)OpenDesign 에서 열기

원본 사이트: https://weaviate.io

📦 팩 내용 보기 →

디자인 DNA

Vector SearchAI PlatformDeveloperOpen SourceRAG

차세대 AI 애플리케이션을 구축하는 개발자를 위한 날렵한 어두운 테마 조종석.

컬러

#44e4c5Accent

#ffffffInk

#b9c8deInk soft

#151515BG

#1a1a1aBG soft

#0a0e13BG quiet

rgba(255, 255, 255, 0.1)Line

기술적 정밀함과 현대성을 강조하기 위한 활기적인 청록색 강조를 가진 어두운 베이스.

타이포그래피

transitional-serif · humanist-sans · monospace

display56px · 400

기술적 명확성을 위해 본문 텍스트로 Plus Jakarta Sans를 사용합니다. · UI 요소와 내비게이션에 Inter를 사용합니다. · 개발자 중심의 느낌을 유지하기 위해 코드 스니펫에 monospace를 사용합니다. · 지나치게 장식적이거나 장난스러운 서체는 사용하지 않습니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

여백과 명확성을 위한 넉넉한 padding과 함께 일관된 4px 기본 그리드를 유지합니다.

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

섹션을 구분하기 위한 rgba(255, 255, 255, 0.1)의 미세한 1px 테두리.

rgba(0, 0, 0, 0.16) 0px 20px 60px 0px · rgba(0, 0, 0, 0.22) 0px 10px 40px 0px · rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

중앙 정렬된 콘텐츠와 넉넉한 수직 리듬을 가진 표준 그리드 기반 레이아웃.

모션과 인터랙션

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소의 부드러운 색상 및 배경 전환. · 콘텐츠 등장 시의 미세한 페이드인.

버튼과 링크의 미세한 색상 변화 및 배경 변경. · 속도를 우선시하는 최소한의 시각적 피드백.

컴포넌트

button 투톤.primary 버튼(단색 청록색 또는 청록색 테두리가 있는 흰색)과 고스트 secondary 버튼.
card 레이어드되고 전문적인 느낌을 주는 미세한 테두리와 inset shadows가 있는 어두운 둥근 카드.
chip 'NEW' 및 'TRUSTED BY AI TEAMS'와 같은 미세한 배경을 가진 소문자 라벨.
input 미세한 테두리와 둥근 모서리가 있는 깔끔한 어두운 테마 입력 필드.
hero 눈에 띄는 3D 추상 비주얼과 굵은 세리프 타이포그래피가 있는 전체 폭의 어두운 히어로.

보이스와 금지 목록

톤 기술적이고, 권위 있으며, 사용자에게 힘을 실어주는.
헤드라인 직접적이고, 행동 지향적이며, 굵은.
CTA 'Start building' 및 'Try now'와 같이 명확하고 실행 가능한 동사.

밝거나 흰색 배경을 사용하지 마세요 — 스크린샷은 어두운 모드 인터페이스를 보여줍니다.
장난스럽거나 둥근 sans-serif 글꼴을 사용하지 마세요 — 스크린샷은 헤드라인용 transitional-serif와 본문용 humanist-sans의 혼합을 보여줍니다.
지배적인 단일 고채도 강조색을 사용하지 마세요 — 스크린샷은 주요 강조로 청록색을 사용하지만 그라데이션과 3D 비주얼도 포함합니다.
헤드라인에 얇거나 가벼운 글꼴 두께를 사용하지 마세요 — 스크린샷은 영향력을 위해 굵거나 중간 두께를 보여줍니다.
과도한 테두리나 무거운 윤곽선을 사용하지 마세요 — 스크린샷은 미세하고 낮은 불투명도의 테두리를 보여줍니다.
표준적이고 지저분한 그리드를 사용하지 마세요 — 스크린샷은 넉넉한 여백을 가진 여유로운 레이아웃을 보여줍니다.
피하기: 지나치게 캐주얼하거나 속어가 많은 언어.
피하기: 기술적 내용 없는 모호한 마케팅 용어.
피하기: 감탄사의 과도한 사용.

팩 안의 실제 스크린샷

Weaviate — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

Weaviate는 vector search와 RAG를 위한 개발자 중심 AI 플랫폼입니다. 디자인 DNA는 #151515 배경, #44e4c5 청록색 강조, 그리고 transitional-serif와 humanist-sans 타이포그래피의 혼합을 사용하는 어두운 모드 인터페이스입니다. 레이아웃은 12칼럼 그리드를 사용하여 여유롭습니다. 중요한 금지 사항은 다음과 같습니다: 밝은 배경 사용 금지, 헤드라인에 장난스러운 sans-serif 글꼴 사용 금지, 불필요한 테두리로 인터페이스를 지저분하게 만들지 마세요. 음성은 기술적이고 권위적이며, 개발자 생산성에 중점을 둡니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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