Design System Preview
CAMPFIRE (camp-fire.jp)

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Red
#ef4846
lorem ipsum dolor / lorem / lorem ipsum
CTA / Buttons
Search Button BG
#4d4a4a
lorem ipsum dolor
Secondary CTA BG
#ffffff
"lorem ipsum" lorem ipsum
Neutral
Text Primary
#4d4a4a
lorem / lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor / lorem ipsum
Text Muted
#999999
lorem ipsum / lorem
Border
#e4e4e4
lorem ipsum / lorem ipsum
Surface Alt
#f3f3f5
lorem ipsum dolor
Surface
#f6f8fa
lorem ipsum dolor
White
#ffffff
lorem ipsum / lorem ipsum
Accent
Gold
#ffb20e
lorem ipsum dolor sit
Orange
#de772d
lorem ipsum dolor sit
Navy
#4f6e98
lorem ipsum dolor sit
Footer
Footer BG
#393f48
lorem ipsum dolor
Semantic
Danger
#dc3545
lorem(lorem)
Success
#28a745
lorem(lorem)
Warning
#ffc107
lorem(lorem)
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit — Page Title (H1)
20px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — Section H3 (Bold)
18px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — Section H3 (Sub)
16px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit line-height 1.4 lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABCabc 123
14px / 400 / line-height: 1.4 / letter-spacing: normallorem ipsum
lorem ipsum dolor sit — Nav Link
13px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit amet consectetur — lorem ipsum dolor sit amet letter-spacing: 0.05em — Card Title (H2)
12px / 400 / line-height: 1.42 / letter-spacing: 0.05emlorem ipsum dolor sit
lorem ipsum / lorem ipsum dolor — Caption (10-11px)
10-11px / 400 / line-height: 1.4 / color: #999999lorem ipsum / lorem
03 / Article

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur

lorem ipsum dolor 400 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum 200 lorem ipsum dolor, lorem ipsum 30 lorem ipsum dolor. lorem, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. “lorem ipsum dolor sit”lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

3,456,000 lorem
lorem 172% lorem 234 lorem lorem 12 lorem
04 / Buttons

lorem ipsum dolor sit

Search Button
radius: 0 4px 4px 0
lorem ipsum
Secondary CTA
14px / 700 / radius: 4px
lorem
Category Pill (active)
lorem ipsum dolor
Category Pill
lorem ipsum
Category Pill
lorem
Category Pill
lorem
Category Pill
lorem ipsum
Category Pill
lorem ipsum
Footer Link
05 / Cards

lorem ipsum dolor sit

🎨
lorem / lorem
lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur / lorem / lorem ipsum
1,280,000 lorem 85%
lorem 156 lorem / lorem 18 lorem
🍻
lorem / lorem
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur
4,612,000 lorem 230%
lorem 389 lorem / lorem 5 lorem
💻
lorem ipsum dolor / lorem ipsum
lorem ipsum dolor sit amet consectetur. 20 lorem ipsum dolor sit, lorem ipsum dolor
840,000 lorem 42%
lorem 78 lorem / lorem 31 lorem
🎵
lorem
lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
1,800,000 lorem 120%
lorem 210 lorem / lorem 9 lorem
lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum dolor — lorem radius: 4px 0 0 4px / lorem radius: 0 4px 4px 0
lorem ipsum — bg: #f3f3f5 / border: #e4e4e4 / radius: 4px
lorem ipsum — border: #4d4a4a (text-primary)
lorem ipsum dolor sit amet consectetur
lorem — border: #dc3545 (danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none / border: #e4e4e4
lorem / lorem / lorem ipsum
Level 1: Hover
0 2px 4px rgba(0,0,0,0.08)
lorem ipsum dolor
Level 2: Dropdown
0 4px 12px rgba(0,0,0,0.10)
lorem ipsum dolor / lorem ipsum dolor
Level 3: Modal
0 8px 24px rgba(0,0,0,0.12)
lorem ipsum / lorem ipsum
Focus Ring
border: #4d4a4a
lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit box-shadow: none lorem ipsum dolor sit. lorem ipsum dolor #e4e4e4 lorem ipsum dolor sit #f6f8fa lorem.

08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale (4px / 8px grid)
4px
XS
8px
S
16px
M
24px
L
40px
XL
64px
XXL
Border Radius Scale
2px
Small
4px
Medium
34px
Pill
Content Widths
Container Max 1100-1200px
Card Grid (3-4 col) ~1100px
Gutter 16-24px
Grid Demo (3 columns)
Column 1
Column 2
Column 3