큐레이션 · 오픈 · 무료

Xata

즉시 Postgres 브랜칭이 가능한 최신 개발자 도구

01

디자인 DNA

데이터베이스 워크플로우를 위한 정밀 기기

02

컬러

모노크롬 정밀함과 최소한의 포인트 컬러를 적용한 고대비 다크 모드

03

타이포그래피

geometric-sans · monospace

• display48px · 500

제목은 타이트한 트래킹의 기하학적 산세리프 사용 · 본문 및 UI 텍스트는 기술적 정확성을 위해 모노스페이스 사용 · 보조 정보에는 무드 텍스트 사용

04

여백

명확성을 위한 넉넉한 여백과 8px 베이스 그리드

05

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

1px solid rgba(255, 255, 255, 0.07)

0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset · 0px 4px 6px -1px rgba(0, 0, 0, 0.2) · 0px 2px 4px -2px rgba(0, 0, 0, 0.2) · 0px 0px 2.56702px 0px rgba(52, 211, 153, 0.192)

06

레이아웃

깨끗한 그리드를 갖춘 중앙 정렬 고정 폭 레이아웃

07

모션과 인터랙션

부드러운 불투명도 전환 · 호버 시 트랜스폼 효과 · 배경 필터 전환

미세한 밝기 변화와 박스 그림자 · 약간 축소

08

컴포넌트

• button 흰색 텍스트와 약간의 둥근 모서리를 가진 퍼플 배경
• card 얇은 테두리와 은은한 그림자가 있는 어두운 미세 배경
• chip 상태 표시를 위한 무드 텍스트의 아웃라인 스타일
• input 은은한 테두리가 있는 어두운 배경
• hero 어두운 배경과 흩어진 UI 요소를 갖춘 큰 모노스페이스 제목

09

보이스와 금지 목록

• 톤 기술적이고 정확하며 전문적인 어조
• 헤드라인 기능성에 대한 직접적이고 대담한 진술
• CTA 모노스페이스 폰트를 사용한 명확한 행동 동사

• 세리프 폰트 사용 금지 — 스크린샷에 모노스페이스와 기하학적 산세리프 표시
• 밝은 기본 색상 사용 금지 — 스크린샷에 버튼에만 은은한 퍼플 포인트 컬러 표시
• 둥근 카드 사용 금지 — 스크린샷에 작은 반경의 직사각형 카드 표시
• 복잡한 배경 사용 금지 — 스크린샷에 은은한 패턴이 있는 어두운 단색 배경 표시
• 큰 패딩 사용 금지 — 스크린샷에 밀도를 위한 컴팩트 간격 표시
• 기울임꼴 텍스트 사용 금지 — 스크린샷에 모든 직립 타이포그래피 표시
• 피하기: 마케팅 용어
• 피하기: 과도한 감탄사
• 피하기: 지나치게 캐주얼한 언어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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