Design System Preview: READYFOR

01 / Colors

lorem ipsum dolor

Brand

Brand Red

#e73650

lorem CTA / lorem ipsum dolor

Brand Gold

#fcb92c

NEXT GOAL lorem

Brand Blue

#3c82eb

lorem CTA

Text

Text Primary

#383d43

lorem / lorem ipsum dolor

Text Secondary

#787f87

lorem ipsum dolor / lorem

Black

#000000

body lorem ipsum(lorem)

Tag Teal

#308e85

lorem ipsum dolor

Semantic / Status

Progress Orange

#ffa45a

lorem ipsum

Achieved

#f88629

lorem ipsum

Success Green

#06c755

100%lorem ipsum dolor

Nav Active

#2969c9

lorem ipsum dolor sit

Surface & Border

Background

#ffffff

lorem ipsum

Surface

#f2f5f8

lorem ipsum dolor / lorem ipsum

Surface Light

#f8f9f9

lorem ipsum dolor sit

Donation Surface

#edf4ff

lorem ipsum dolor

Border

#d8dce1

lorem ipsum / lorem ipsum dolor sit

Footer BG

#383d43

lorem ipsum dolor

02 / Typography — lorem

lorem ipsum dolor sit

READYFOR — H1 Brand

32px / 700 / line-height: normal / letter-spacing: normallorem ipsum dolor

lorem ipsum dolor, lorem ipsum dolor sit.

48px / 400 / line-height: 1.46 / color: #787f87lorem ipsum dolor Display

lorem ipsum dolor sit amet consectetur? — Feature H2

28px / 700 / line-height: 1.5 / color: #383d43lorem ipsum dolor

lorem ipsum dolor sit — Section H2

20px / 700 / line-height: 1.2 / color: #383d43lorem ipsum dolor

９lorem ipsum dolor sit amet consectetur — H3

18px / 700 / line-height: 1.5 / color: #383d43lorem ipsum dolor

lorem ipsum dolor｜lorem lorem / lorem lorem, lorem ipsum dolor sit amet — H4 Project Title

14px / 700 / line-height: 1.5 / color: #383d43lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur(crowd)lorem ipsum(funding)lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. ABCabc 123

14px / 400 / line-height: 1.5 / color: #383d43lorem

#lorem ipsum #lorem / lorem #lorem

12px / 700 / line-height: 1.5 / color: #308e85lorem ipsum dolor

lorem 1,234,567 lorem — lorem ipsum dolor(Caption 12px)

12px / 400 / line-height: 1.5 / color: #787f87lorem / lorem

145%

Roboto 14px / 600 / color: #787f87lorem ipsum dolor

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit amet

Primary CTA

lorem ipsum dolor sit

Secondary

lorem ipsum dolor sit

Donation CTA

lorem ipsum dolor

Tertiary

Badges

NEXT GOAL lorem

Gold Badge

NEW

New Badge

lorem

Achieved Badge

#lorem ipsum

Hashtag

05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

lorem(crowd)lorem ipsum(funding)lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor sit

180 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur READYFOR lorem.

lorem ipsum dolor

lorem ipsum dolor, lorem ipsum, lorem / lorem, lorem / lorem, lorem, lorem ipsum, lorem ipsum dolor

06 / Forms

lorem ipsum dolor

lorem ipsum — border: #d8dce1, radius: 4px

lorem ipsum dolor

lorem ipsum — border: #3c82eb (Brand Blue)

lorem ipsum dolor

lorem — border: #e73650 (Brand Red)

07 / Elevation — lorem

Depth & Elevation

Level 0: Flat

lorem ipsum dolor sit / lorem ipsum dolor(lorem)

Level 1: CTA Shadow

rgba(33,35,37,0.12) 0 4px 8px

Level 2: Dropdown

0 8px 24px rgba(0,0,0,0.08)

Level 3: Modal

0 16px 40px rgba(0,0,0,0.10)

Focus Ring

#3c82eb (Brand Blue)

08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale (8px grid)

4px

8px

16px

24px

48px

80px

Border Radius

4px (Action)

Content Widths

Max Container 1120px

Article Content 620px