Style Guide
PIXELPAGE 디자인 시스템의 타이포그래피, 컬러, 컴포넌트를 정리한 가이드입니다.
Typography
Font Family
Pretendard
H1 — Hero Title · clamp(36px, 6vw, 72px) · Bold · tracking -0.03em
지식 마케팅의 새로운 기준
H2 — Section Title · clamp(32px, 4.5vw, 56px) · Bold · tracking -0.03em
짧은 기간, 또렷한 결과.
H3 — Card Title · 22-26px · Bold
온라인 교육 브랜드 A
Body Large — 19px · leading 1.9
유입부터 매출까지, 전 과정을 이해하고 만듭니다. 억지 후킹 없이도 팔 수 있는 이유입니다.
Body — 16-18px · leading 1.85 · text-white/50 (dark) or text-muted-foreground (light)
더 이상 광고비만 태우지 마세요. 픽셀페이지가 유입부터 매출까지 설계합니다.
Caption — 12-13px · tracking 0.1em · uppercase
온라인 교육Colors
Backgrounds
Accent & Text
Buttons
Cards & Components
Pain Point Card
광고는 돌아가는데, 상담 신청 늘질 않아요
Case Study Row
온라인 교육 브랜드 A
ROAS 180% → 420%메시지 프레임워크를 재설계하고 크리에이티브를 교체한 결과, 6개월간 업계 평균 2배 이상의 효율을 유지.
Lead Magnet Card
Video Carousel Card
Spacing & Layout
Section Spacing
py-28 (112px) / lg:py-36 (144px)max-w-[1240px]px-6 / lg:px-12mb-16 (64px)Background Alternation Pattern
Hero
Problem
Knowledge
Services
Cases
Philosophy
Lead
CTA
Border & Shadow
border-[#e5e7eb]rounded-2xl (16px)rounded-xl (12px) / rounded-lg (8px)shadow-sm