Design System Preview
nanamica.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.

Shop Now Design.md
01 / Colors

Color Palette

Brand
Navy
#001133
lorem ipsum / lorem ipsum / lorem ipsum
White
#ffffff
lorem / lorem ipsum
Text
Text Primary
#001133
lorem ipsum dolor(lorem ipsum dolor)
Text Secondary
#333333
lorem ipsum dolor
Text Invert
#ffffff
lorem ipsum dolor sit
Semantic
Alert / Danger
#b10f0c
lorem / lorem
Surface & Overlay
Background Alt
#f7f7f5
lorem ipsum dolor
Border Default
rgba(0,17,51,0.14)
lorem ipsum dolor
Border Strong
rgba(0,17,51,0.3)
lorem ipsum dolor
Overlay
rgba(0,17,51,0.6)
lorem ipsum / lorem ipsum dolor sit
02 / Typography

Typography Hierarchy

JOURNAL — Section Title (H2)
25px / 400 / line-height: 1.6 / letter-spacing: 0.01emsection heading
NEW ARRIVALS — Section Title (H2 Bold)
20px / 700 / line-height: 1.6 / letter-spacing: 0.01emsection heading
MEN ALL — Navigation Link
15px / 400 / line-height: 1.6 / letter-spacing: 0.024emheader nav
nanamica — Category Label
13px / 400 / line-height: 1.0 / letter-spacing: 0.028emcategory
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. Body text at 12px with 1.6 line-height creates a compact editorial feel.
12px / 400 / line-height: 1.6 / letter-spacing: 0.03embody
GORE-TEX Cruiser Jacket — Product Name
12px / 700 / line-height: 1.6 / letter-spacing: 0.01emproduct name
nanamica — Product Meta
11px / 400 / line-height: 1.6 / letter-spacing: 0.01em / color: secondaryproduct meta
View All — Link Label
11px / 400 / line-height: 1.0 / letter-spacing: 0.03em / uppercaselink
JP
10px / 700 / radius: 50% / bg: navy / color: whitelang badge
03 / Article

Editorial Sample

lorem ipsum dolor sit amet

2026.05.09  |  JOURNAL  |  nanamica

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing. GORE-TEX, PERTEX, Coolmax lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

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

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum, lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing elit sed do, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

04 / Buttons

Button Variations

Shop Now
Primary CTA
View All
Secondary
Add to Cart
Filled (navy)
JP
Lang Badge
EN
Lang Inactive
Sold Out
Disabled
Shop Now
Hover state
05 / Cards

Product Cards

Image
nanamica
GORE-TEX Cruiser Jacket
¥88,000
Image
nanamica
Deck Crew Neck L/S Tee
¥13,200
Image
nanamica
Wide Chino Pants
¥26,400
Image
nanamica
Insulation Jacket
¥59,400
06 / Forms

Form Elements

default — border: rgba(0,17,51,0.3), radius: 0
focus — border: #001133, box-shadow: 0 0 0 1px
Please enter a valid postal code
error — border: #b10f0c
07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none / border only
Level 1: Subtle
0 1px 3px rgba(0,17,51,0.08)
Navy Surface
bg: #001133 / cart badge, lang
Overlay
rgba(0,17,51,0.6) / modal
08 / Layout

Spacing & Content Widths

Spacing Scale
4
8
12
16
20
24
32
40
48
64
Content Widths
Main Container 1200px (estimated)
Content Area 960px
Article / Editorial 620px
Grid
1/4
2/4
3/4
4/4