Design System Preview
Aoyama Flower Market

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 DESIGN.md lorem
01 / Colors

Color Palette

Brand
Brand Red
#c8391c
lorem CTA / lorem / PAGE TOP
Brand Gold
#b39b56
lorem ipsum / lorem ipsum dolor
Banner Red
#c91435
lorem ipsum dolor
Online Shop Yellow
#f2b300
ONLINE SHOP lorem
Accent
Brown
#a27769
lorem ipsum dolor sit
Text
Text Primary
#222222
lorem ipsum dolor / lorem
Text Secondary
#555555
lorem ipsum dolor / lorem
Border
#969696
lorem ipsum / lorem ipsum
Slider Inactive
#b1b1ac
lorem ipsum dolor sit amet consectetur
Surface & Background
Background
#ffffff
lorem ipsum
Section Cream
#fafbf3
lorem ipsum dolor sit
Section Gray
#f9f9f9
lorem ipsum dolor
Info BG
#efefef
lorem ipsum / lorem ipsum
02 / Typography

Typography Hierarchy

Seasonal Bouquet Collection
Frank Ruhl Libre / 40px / 400 / line-height: 1.3 / letter-spacing: 2pxDisplay
Fresh Flowers Daily
Frank Ruhl Libre / 32px / 400 / line-height: 1.3 / letter-spacing: 2pxSection Title
lorem ipsum dolor sit — lorem ipsum dolor sit
lorem ipsum dolor / 16px / 700 (bold) / line-height: 1.5lorem(H3)
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.
lorem ipsum dolor / 13px / 400 / line-height: 1.5 / color: Text Secondarylorem ipsum(H4)
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit, lorem ipsum dolor sit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor / 16px / 400 / line-height: 1.5lorem(Body)
¥3,850lorem
lorem ipsum dolor / 18px (price) + 12px (tax) / color: #c8391clorem
BOUQUET ARRANGEMENT PLANT SEASON WEDDING GIFT
lorem ipsum dolor / 10px / 400 / line-height: 1.2 / letter-spacing: -0.8pxlorem ipsum dolor
03 / Article & Product

Content Sample

Living with Flowers

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

Seasonal Selection

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet. 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 amet consectetur adipiscing elit sed.

Product Cards

🌹

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

¥5,500 lorem
🌻

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing

¥3,850 lorem
🌸

lorem ipsum dolor sit

lorem ipsum dolor sit 10 lorem ipsum dolor

¥2,750 lorem
🌺

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

¥4,400 lorem
04 / Buttons

Button Variations

lorem ipsum dolor
Primary CTA(lorem)
lorem ipsum
Secondary(lorem 8px)
ONLINE SHOP
Online Shop(lorem ipsum)
PAGE TOP
Page Top

Slider Dots

Active: #222222 / Inactive: #b1b1ac + inset shadow / border-radius: 20px (pill)
05 / Cards

Card Components

lorem ipsum dolor sit amet

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

lorem ipsum →

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →

lorem ipsum dolor sit amet

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

lorem ipsum →
06 / Forms

Form Elements

lorem ipsum — border: #969696, radius: 4px
lorem ipsum — border: #c8391c (Brand Red)
lorem ipsum dolor sit amet consectetur
lorem — border: #c91435 (Banner Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor. lorem ipsum dolor sit
Elevation 1
0 2px 4px rgba(0,0,0,0.08) — lorem ipsum dolor
Elevation 2
0 4px 12px rgba(0,0,0,0.12) — lorem ipsum dolor
Elevation 3
0 8px 24px rgba(0,0,0,0.15) — lorem ipsum dolor
Inset Shadow
inset 0 0 2px rgba(0,0,0,0.3) — lorem ipsum dolor sit amet consectetur
08 / Layout

Spacing & Layout

Spacing Scale

4px
8px
16px
24px
40px
64px

Content Widths

Main Content 960px
Article (Narrow) 620px
Product Grid (4 col) 1200px