높은 대비의 중립적인 베이스에 작업을 위한 선명한 주요 파란색을 배치하고, 깊이감을 위해 미세한 따뜻한 색에서 차가운 색으로의 그라데이션을 사용합니다.
03
타이포그래피
geometric-sans · humanist-sans · monospace
display56px · 500
h240px · 500
body16px · 400
small14px · 400
브랜드 아이덴티티를 구축하기 위해 두드러진 디스플레이 텍스트에는 Poppins를 사용합니다. · 본문 텍스트와 UI 요소에는 최적의 가독성을 위해 Inter를 사용합니다. · 본문 텍스트는 기본 크기 16px와 줄 간격 1.5를 유지합니다. · 큰 제목에는 더 타이트하고 현대적인 느낌을 위해 음수 자간을 적용합니다.
04
여백
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
일관된 4px 기본 그리드와 충분한 여백을 사용하여 깔끔하고 통풍이 잘 되는 레이아웃을 유지합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #AEAEBC
0px 1px 2px rgba(0,0,0,0.05)
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
히어로를 위한 중심 단일 열 레이아웃에서 기능 카드를 위한 다중 열 그리드로 전환합니다.
07
모션과 인터랙션
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
인터랙티브 요소에서 부드러운 색상 및 배경 전환. · hover 상태를 위한 미세한 불투명도 변화. · 히어로 배경을 위한 CSS 기반 그라데이션 애니메이션.
링크에 대한 색상 변화와 버튼에 대한 미세한 배경 변화. · 배경색 변화 또는 스케일을 통한 즉각적인 시각적 피드백.
08
컴포넌트
button메인 CTA에는 단색 주요 파란색(#1B55F5)을 사용하고, 보조 작업에는 아웃라인/고스트 스타일을 사용하며, 둥근 모서리를 적용합니다.
card미세한 테두리와 8px border-radius가 적용된 흰색 배경을 사용하며, 최소한의 그림자를 적용합니다.
chip미세한 테두리가 있는 알약 모양의 요소로, 일반적으로 텍스트 레이블을 포함합니다.
inputfocus 시 미세한 배경 전환이 적용된 깔끔한 테두리 필드입니다.
hero다채로운 그라데이션 배경 위에 크게 배치된 중심 제목과 AI 검색 입력 바를 특징으로 합니다.
09
보이스와 금지 목록
톤전문적이고 직접적이며 기술적으로 권위 있는 어조.
헤드라인간결하고 이점 중심적이며 대담하며, 종종 능동 동사를 사용합니다.
CTA명확하고 행동 지향적이며 사용 용이성을 강조합니다 (예: '무료로 시작하기').
과도한 드롭 그림자를 사용하지 마세요 — 스크린샷은 매우 미세하고 거의 존재하지 않는 그림자를 보여줍니다.
장식적이거나 필기체 폰트를 사용하지 마세요 — 스크린샷은 기하학적 및 휴머니스트 산세리프에 엄격히 의존합니다.
무거운 배경 텍스처를 사용하지 마세요 — 스크린샷은 깔끔한 단색과 부드러운 그라데이션을 사용합니다.
복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 충분한 여백과 명확한 시각적 계층을 보여줍니다.
공격적이고 맥박이 뛰는 애니메이션을 사용하지 마세요 — 스크린샷은 부드러운 표준 CSS 전환에 의존합니다.
저대비 텍스트를 사용하지 마세요 — 스크린샷은 흰색 배경에 검은색 또는 파란색 배경에 흰색으로 높은 가독성을 유지합니다.
Grafana Labs' 홈페이지는 깔끔하고 개발자 중심적인 SaaS 디자인의 교과서입니다. 레이아웃은 중심에 맞춰져 있고 통풍이 잘 되며, 흰색(#FFFFFF) 베이스와 부드러운 회색(#F4F4F6) 배경을 기반으로 합니다. 주요 강조색은 핵심 CTA에 사용되는 선명한 파란색(#1B55F5)이며, 히어로에는 modern하고 AI 지향적인 느낌을 더하는 다채로운 그라데이션(따뜻한 오렌지에서 차가운 청록색)이 적용됩니다. 타이포그래피는 기하학적 및 휴머니스트 산세리프(Poppins用于显示, Inter用于正文)를 혼합하여 높은 가독성을 유지합니다. 핵심 디자인 제약 조건: 무거운 그림자를 피하고, 절대로 장식적인 폰트를 사용하지 않으며, 시각적 혼란을 방지하기 위해 충분한 여백을 확보합니다. 선명한 파란색은 주요 작업에 최대한의 효과를 위해 절제하여 사용하고, 모든 카피에 걸쳐 전문적이고 기술적인 어조를 유지합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
