큐레이션 · 오픈 · 무료

Supabase

흰색 캔버스에 밝은 그린 악센트를 사용하고 기하학적 산세리프 타이포그래피를 적용한 고대비, 클린한 개발자 플랫폼 사이트.

01

디자인 DNA

명확성과 기능적 미학을 우선시하는 클린하고 개발자 중심적인 스위스 디자인.

02

컬러

고대비 텍스트와 주요 액션을 위한 단일 밝은 그린 악센트가 적용된 클린한 흰색 캔버스.

03

타이포그래피

geometric-sans · monospace

• display64px · 500
• h236px · 500
• body16px · 400
• small14px · 400

모든 텍스트에 Circular 또는 유사한 기하학적 산세리프 사용. · 헤드라인은 임팩트를 위해 타이트한 행간(1.0-1.1) 사용. · 본문은 가독성을 위한 1.5 행간 유지.

04

여백

컴포넌트 간격을 위한 일관된 8px 그리드, 주요 섹션 사이에 넉넉한 수직 패딩(96px) 적용.

05

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

1px solid #dfdfdf

0 1px 3px rgba(0, 0, 0, 0.1)

06

레이아웃

히어로를 위한 단일 컬럼 중앙 정렬 레이아웃에서 콘텐츠 섹션을 위한 더 넓은 컨테이너로 전환.

07

모션과 인터랙션

hover 시 미묘한 색상 및 배경 전환. · UI 피드백을 위한 부드러운 불투명도 변화.

미묘한 배경 색상 변화 또는 테두리 강조. · 상태 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 액션용 단색 그린 채움이 적용된 둥근 필形状, 보조 액션용 투명하고 테두리가 있는 둥근 필形状.
• card 미묘한 1px 테두리와 둥근 모서리가 있는 클린한 흰색 카드.
• chip 얇은 테두리가 있는 둥근 필形状 태그 또는 탭.
• input 둥근 모서리와 미묘한 테두리가 있는 표준 입력 필드.
• hero 강력한 헤드라인 계층과 명확한 CTA 버튼이 적용된 거대한 중앙 정렬 텍스트.

09

보이스와 금지 목록

• 톤 직설적이고, 개발자 친화적이며, 자신감 있는 어조.
• 헤드라인 짧고 강렬하며 혜택을 강조하는 문장.
• CTA 'Start your project'와 같이 행동을 유도하고 명확한 CTA.

• 산세리프 외 서체 사용 금지 — 스크린샷은 전체적으로 클린한 기하학적 산세리프 사용.
• 다크 배경을 주요 테마로 사용 금지 — 스크린샷은 주로 흰색(#ffffff) 캔버스 사용.
• 경쟁적인 여러 악센트 색상 사용 금지 — 스크린샷은 단일 밝은 그린(#00bb68) 악센트에 의존.
• 날카롭고 사각형 모서리 사용 금지 — 스크린샷은 모든 컴포넌트에 둥근 모서리(4px ~ 16px) 사용.
• 무거운 드롭 섀도우 사용 금지 — 스크린샷은 최소화하거나 없으며, 깊이감을 위해 미묘한 테두리에 의존.
• 밀집되고 비좁은 레이아웃 사용 금지 — 스크린샷은 넉넉한 여백과 명확한 섹션 구분 사용.
• 피하기: 마케팅성 표현
• 피하기: 지나치게 복잡한 전문 용어
• 피하기: 모호한 약속

10

팩 안의 실제 스크린샷

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

11

System Prompt

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