PRODUCT DESIGN BY DRAFT

D-BROS DESIGN SYSTEM

D-BROS(d-bros.jp)lorem ipsum dolor sit amet consectetur adipiscing. Inter + Noto Sans JP(Yu Gothic lorem)lorem ipsum dolor sit amet, lorem ipsum weight 300, letter-spacing 0.025em lorem ipsum dolor, lorem ipsum dolor #fc00d5 lorem ipsum dolor, lorem ipsum dolor sit. computed style lorem ipsum dolor.

ONLINE STORE MAGAZINE
01 / COLORS
Color Palette
Monochrome + single accent magenta
Primary
Brand Black
#1a1a1a
lorem ipsum dolor / lorem
Vivid Magenta
#fc00d5
MORE lorem / lorem ipsum dolor
Text & Neutral
Text Primary
#1a1a1a
lorem ipsum dolor
Text Muted
#333333
lorem ipsum dolor(lorem ipsum)
Text Secondary
#666666
lorem ipsum dolor sit
Text on Dark
#ffffff
lorem ipsum / lorem ipsum dolor
Surface
Surface White
#ffffff
lorem ipsum
Surface Dark
#333333
CTA lorem / lorem ipsum dolor
Border / Divider
#e5e5e5
lorem ipsum / lorem ipsum
Hierarchy (Opacity)
opacity-60
rgba(26,26,26,0.6)
lorem ipsum dolor
opacity-40
rgba(26,26,26,0.4)
lorem / lorem ipsum dolor
02 / TYPOGRAPHY
Typography
Inter + Noto Sans JP / weight 300 / letter-spacing 0.025em global
MAGAZINE
Inter + Noto Sans JP / 28px / 300 / line-height: 1.5 / letter-spacing: 0.025emHeading 1 (hero)
FLOWER VASE
Inter + Noto Sans JP / 22px / 300 / line-height: 1.5 / letter-spacing: 0.025emHeading 2 (section)
lorem ipsum dolor“HOPE FOREVER BLOSSOMING”
Inter + Noto Sans JP / 14px / 300 / line-height: 1.625 / letter-spacing: 0.025emHeading 3 (card)
D-BROS lorem DRAFT lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem, lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
Inter + Noto Sans JP / 16px / 300 / line-height: 1.75 / letter-spacing: 0.025emBody
NEWS
Inter + Noto Sans JP / 12px / 300 / line-height: 1.625 / letter-spacing: 0.025em / opacity: 0.6Section Label
2026.05.01
Inter + Noto Sans JP / 12px / 300 / line-height: 1.625 / letter-spacing: 0.025em / opacity: 0.4Date / Caption
ONLINE STORE
Inter + Noto Sans JP / 16px / 400 / line-height: 1.75 / letter-spacing: 0.05emNav
MORE →
Inter + Noto Sans JP / 16px / 300 / letter-spacing: 0.025em / color: #fc00d5MORE Link (accent)
03 / PRODUCT
Product
Product Page Sample
FLOWER VASE

HOPE FOREVER BLOSSOMING

lorem ipsum dolor sit“HOPE FOREVER BLOSSOMING”. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed do, D-BROS lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor
CONCEPT

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

CART lorem ipsum MORE
04 / BUTTONS
Buttons
Primary #333333 / radius 5px / weight 300 / MORE links in magenta #fc00d5
CART lorem ipsum
Primary / #333333 / radius 5px / 300
lorem ipsum
Ghost / transparent / underline hover / 300
MORE
MORE Link / #fc00d5 / 300
Button States
Default
lorem
Hover
lorem(opacity 0.7)
Disabled
lorem(opacity 0.5)
05 / CARDS
Cards
Completely flat / no shadow / no border-radius / image + text
Product Image
FLOWER VASE

HOPE FOREVER BLOSSOMING

¥1,100
Product Image
STATIONERY

lorem ipsum 2026

¥2,200
Product Image
TABLEWARE

lorem ipsum lorem

¥3,300
Product Image
MAGAZINE
2026.04.15

lorem ipsum dolor sit amet consectetur

MORE
06 / FORMS
Forms
Border #e5e5e5 / focus: border #1a1a1a / radius 5px
Default
lorem ipsum dolor sit amet consectetur
Focus
07 / ELEVATION
Depth & Elevation
Completely flat -- no shadows, no gradients
Level 0 -- Flat
lorem ipsum. lorem
Surface White
#ffffff / lorem ipsum
Surface Dark
#333333 / lorem ipsum
Border
#e5e5e5 / lorem ipsum dolor
08 / LAYOUT
Layout
Tailwind spacing scale / max-width 1280px
4px
8px
16px
24px
32px
48px
64px
WHITE #fff
LIGHT #fafafa
DARK #333