큐레이션 · 오픈 · 무료

Metabase

AI로 질문에 답변하는 오픈소스 분석 플랫폼입니다.

01

디자인 DNA

깔끔한 데이터 중심 대시보드

02

컬러

흰색 배경 위에 강한 주요 블루 강조색을 사용하는 깨끗하고 데이터 중심적인 팔레트입니다.

03

타이포그래피

humanist-sans · monospace

• display48px · 700
• h140px · 700
• h228px · 700
• body16px · 400
• small14px · 400

04

여백

일관된 8px 기본 단위와 4px 마이크로 간격을 사용합니다.

05

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

1px solid rgba(90, 96, 114, 0.15)

0 1px 2px rgba(16, 24, 40, 0.05) · 0 16px 28px -6px rgba(24, 39, 75, 0.12) · 0 32px 88px -4px rgba(24, 39, 75, 0.14)

06

레이아웃

명확한 섹션 구분선이 있는 표준 중앙 정렬 컨테이너입니다.

07

모션과 인터랙션

스크롤 시 페이드인 · 버튼 hover 전환

상호작용 요소에서 미묘한 배경색 변화 또는 그림자 상승 효과입니다. · 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button 주요 버튼은 둥근 모서리(8px)와 함께 강조 블루색을 사용합니다. 보조 버튼은 테두리 스타일입니다.
• card 미묘한 테두리와 부드러운 그림자를 갖춘 깨끗한 흰색 카드입니다.
• chip 명시적으로 보이지 않지만, 유사한 UI 요소는 부드러운 알약 형태를 띠고 있습니다.
• input 깨끗하고 테두리가 있는 텍스트 입력 필드입니다.
• hero 두 개의 두드러진 행동 유도(CTA) 버튼을 갖춘 큰 헤드라인과 부제입니다.

09

보이스와 금지 목록

• 톤 전문적이고 명확하며 유용한 어조입니다.
• 헤드라인 직관적이며, 혜택 중심적이고, 굵은 스타일입니다.
• CTA '시도하기', '배포하기'와 같은 행동 지향적인 동사를 사용합니다.

• 다크 모드 테마를 사용하지 마세요. 스크린샷은 밝고 라이트 테마 인터페이스를 보여줍니다.
• 고대비 네온색을 사용하지 마세요. 팔레트는 부드러운 블루와 중립색이 주를 이룹니다.
• 카드나 버튼에 날카로운 90도 모서리를 사용하지 마세요. 스크린샷은 둥근 모서리를 보여줍니다.
• 본문 텍스트에 가늘고 우아한 세리프를 사용하지 마세요. 글꼴은 깨끗한 humanist-sans입니다.
• 풍부한 여백 없이 크고 밀도 높은 텍스트 블록을 사용하지 마세요. 레이아웃은 개방적이고 통풍이 잘 됩니다.
• 주요 배경에 복잡한 그래디언트를 사용하지 마세요. 배경은 대부분 단색 흰색이나 매우 미묘한 라이트 블루입니다.
• 장난스럽거나 기발한 일러스트레이션 스타일을 사용하지 마세요. 시각적 요소는 깨끗하고 기능적이며 전문적입니다.
• 피하기: 본문에 지나치게 전문적인 용어 사용
• 피하기: 공격적인 판매 언어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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