Design System Preview
nano universe

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 lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand
Black
#000000
lorem ipsum dolor sit
Neon Accent
#f3ff34
lorem ipsum dolor / lorem ipsum
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor / lorem
Text Tertiary
#333333
lorem ipsum dolor
Text on Dark
#ffffff
lorem ipsum dolor sit
Semantic
Error / Sale
#ea3e0a
lorem / lorem / lorem ipsum
Error BG
#f3e7e4
lorem ipsum
Success
#2e9e7b
lorem / lorem
Success BG
#cce3dc
lorem ipsum
Star Rating
#f6a429
lorem ipsum dolor
Label
Label Blue
#405de6
lorem ipsum dolor
Label Blue 2
#1763c2
lorem ipsum dolor 2
Surface & Border
Background
#f4f4f4
lorem ipsum
BG Secondary
#f5f5f5
lorem ipsum dolor
Surface
#ffffff
lorem / lorem ipsum
Border
#cfcfcf
lorem ipsum dolor
Border Dark
#929292
lorem ipsum dolor
Divider
#dddddd
lorem ipsum
02 / Typography

lorem ipsum dolor sit

Section Title Display
40px / 500 / line-height: 1.05 / letter-spacing: 0.04em / uppercaselorem ipsum dolor sit
lorem ipsum dolor — Heading 2
24px / 500 / line-height: 1.75 / letter-spacing: normallorem ipsum
Navigation Subtitle
13px / 600 / line-height: 1.23 / letter-spacing: 0.077emlorem ipsum dolor
lorem ipsum dolor — lorem / lorem ipsum dolor sit amet consectetur 12px. Gill Sans Nova lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem 1.73 lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. ABCabc 123 lorem ipsum
12px / 400 / line-height: 1.73 / letter-spacing: normallorem
lorem ipsum dolor — Body Emphasis (13px / 600)
13px / 600 / line-height: 1.85 / letter-spacing: normallorem
lorem ipsum dolor — News (12px / 500)
12px / 500 / line-height: 1.67 / letter-spacing: normallorem ipsum
lorem ipsum dolor sit — Small (11px)
11px / 500 / line-height: 1.0 / color: #666666lorem / lorem
lorem ipsum dolor — Caption (11px / 400)
11px / 400 / line-height: 1.82 / color: #666666lorem
03 / Product — lorem ipsum

lorem ipsum dolor sit

IMAGE
nano universe
lorem ipsum dolor sit amet consectetur adipiscing
¥9,900
IMAGE
nano universe
lorem ipsum dolor sit amet consectetur
¥6,930 ¥9,900
30%OFF
IMAGE
nano universe
lorem ipsum dolor CPO lorem ipsum
¥14,300
WEB lorem
IMAGE
nano universe
lorem ipsum dolor sit amet consectetur adipiscing
¥8,800
NEW
lorem ipsum
04 / Article — lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor

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. JAPAN quality lorem.

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit, EC lorem ipsum dolor sit amet consectetur. ABC abc 123

05 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary (Black)
lorem ipsum dolor
Accent (Neon)
lorem ipsum dolor
Ghost (White)
lorem ipsum
Tertiary (Gray)
lorem ipsum
Primary Small
lorem ipsum
Error / Danger
BUTTON SPEC
border-radius: 0px (square, no rounding)
height: 52px (default) / 44px (small)
font-weight: 500
letter-spacing: 0.04em
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cfcfcf, radius: 0px
lorem ipsum — border: #000000
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #ea3e0a
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor(lorem ipsum)
Elevation 1
lorem ipsum dolor
Elevation 2
lorem ipsum dolor
Focus Border
#000000 (2px solid)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4
8
16
24
32
48
64
Content Widths
Full Width lorem ipsum
Content Area 960px
Article 620px
Product Grid (4-col) 100% / gap 16px