FlowPack
FlowPack/
컴포넌트 라이브러리
디자인 라이브러리NEW
v1.0 · DESIGN.md 기반

Foundation

DESIGN.md 기반 FlowPack 디자인 시스템의 기초 토큰입니다.

Color Palette

Brand 500 (Primary)

var(--brand-500)

Brand 600 (Hover)

var(--brand-600)

Brand Subtle

var(--fp-primary-subtle)

Brand Border

var(--fp-primary-border)

Lime Green (UV)

#80b918

Forest Green

#2b9348

Gray 900 (Heading)

#111827

Gray 700 (Body)

#374151

Gray 500 (Secondary)

#6B7280

Gray 400 (Muted)

#9CA3AF

Gray 200 (Border)

#E5E7EB

Gray 100 (Border Soft)

#F3F4F6

White

#FFFFFF

Section BG

#FEFCE8

Success

#2b9348

Warning

#f97316

Error

#ef4444

Info

#0284c7
Gradient

Primary CTA

--brand-gradient

CTA Banner

--brand-gradient

Persona BG

--fp-gradient-persona

Stat BG

--fp-gradient-stat-bg
Typography Scale
RoleSizeWeightSample
Display Hero48px800AI가 만들어드립니다
Display36px700홍보 콘텐츠 자동화
Heading 130px700카드뉴스 생성
Heading 224px600멀티채널 배포
Heading 320px600브랜드 스타일 학습
Body Large18px400주제만 입력하면 AI가 콘텐츠를 만들어드립니다.
Body16px400카드뉴스, 블로그, 텍스트 콘텐츠를 지원합니다.
Body Small14px400매월 10개 크레딧 무료 제공
Caption13px500PAIN POINTS · FEATURES
Micro12px400© 2026 FlowPack. All rights reserved.
Spacing Scale
4px
space-1
8px
space-2
12px
space-3
16px
space-4
20px
space-5
24px
space-6
32px
space-8
40px
space-10
48px
space-12
64px
space-16
80px
space-20
96px
space-24
Border Radius

4px

8px

10px (Button)

12px

16px (Card)

20px (Feature)

24px (Banner)

9999px (Pill)

Shadow System

Level 1 · Subtle

Level 2 · Standard

Level 3 · Elevated

Level 4 · Floating

CTA Glow