Design System Preview
amadana.com

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.

Online Store DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
amadana Red
#E60012
CTA / lorem ipsum dolor sit
Text
Text Primary
#3F3F3F
lorem ipsum dolor
Text on Dark
#ffffff
lorem ipsum dolor sit
Muted Accent
#B5B5B0
lorem ipsum dolor / lorem
Surface
Background
#ffffff
lorem ipsum
Dark Section
#131313
lorem ipsum dolor sit
Product Card
#272727
lorem ipsum dolor
Header Overlay
rgba(63,63,63,0.4)
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — H2
43.2px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — H3 Promo
30.8px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — H3 Product
17.6px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet. amadana lorem ipsum dolor, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
15px / 400 / line-height: 1.7 / letter-spacing: normallorem
lorem ipsum dolor — Description (13.2px). lorem ipsum dolor sit amet consectetur.
13.2px / 400 / line-height: 1.7 / color: #3F3F3Florem / lorem / lorem
Note: amadana lorem ipsum dolor sit amet consectetur 400(Regular)lorem. Bold / Semibold lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. palt / letter-spacing lorem ipsum.
03 / Product Showcase

lorem ipsum dolor

▱
Boxy Speaker
lorem ipsum dolor sit amet consectetur adipiscing elit.
¥16,500
△
Smart Toaster
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
¥24,200
◯
Kettle
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
¥13,200
lorem ipsum dolor sit
04 / Buttons

lorem ipsum dolor sit

Online Store
Primary CTA
lorem ipsum
Outline (Light BG)
Log in
Primary on Dark
lorem ipsum
Outline on Dark
border-radius: 0px / padding: 9.6px 33.6px / font-size: 13.2px / font-weight: 400 / text-transform: uppercase
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit

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

Read more

lorem ipsum dolor

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

Read more

lorem ipsum dolor

2003 lorem ipsum dolor, “lorem ipsum”lorem ipsum dolor sit amet, lorem, lorem, lorem ipsum dolor sit amet consectetur amadana lorem ipsum dolor.

Read more
06 / Forms

lorem ipsum dolor

lorem ipsum — border-radius: 0, border: rgba(63,63,63,0.2)
lorem ipsum — border-color: #3F3F3F
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border-color: #E60012
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor
Dark Surface
#131313 — lorem ipsum dolor sit
Card Surface
#272727 — lorem ipsum dolor sit amet
Overlay
rgba(63,63,63,0.4) — lorem
amadana lorem ipsum dolor sit, lorem ipsum(#ffffff → #272727 → #131313)lorem ipsum dolor sit amet.
08 / Layout

lorem ipsum

Header Height 68px
Section Spacing 256px (16rem)
Spacing Scale
8px
16px
24px
32px
48px
80px
256px