DESIGN SYSTEM PREVIEW

niko and... lorem ipsum dolor sit amet consectetur. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

DESIGN.md ONLINE SHOP
01 / Colors

COLOR PALETTE

Brand / Seasonal
Hilight 1
#5ec6c5
lorem ipsum dolor sit
Hilight 2
#dc5c5b
lorem ipsum / lorem ipsum dolor
Niko Blog
#4b77d0
lorem ipsum dolor
Marumaru
#ffa0c8
lorem ipsum dolor
Music 1
#183870
lorem ipsum dolor
Music 2
#d65731
lorem ipsum dolor
Section Backgrounds
Warm Beige
#eee9e2
lorem ipsum dolor
Soft Pink
#e9ccd8
lorem ipsum dolor
Warm Yellow
#ffd570
lorem ipsum dolor
Neutral
Black
#000000
lorem ipsum / lorem ipsum
Near White
#fefefe
lorem ipsum
White
#ffffff
lorem ipsum
Semantic (recommended)
Danger
#dc2626
lorem / lorem
Success
#16a34a
lorem / lorem
Warning
#d97706
lorem / lorem
02 / Typography

TYPOGRAPHIC HIERARCHY

INFORMATION
Helvetica Neue / 24px / 400 / line-height: 1.15 / palt: offEN section title
lorem ipsum dolor sit amet consectetur
ryo-gothic-plusn / 16px / 700 / line-height: 1.5 / palt: onJP bold headline
FEATURE TITLE
Helvetica Neue Bold / 14px / 700 / line-height: 1.15 / palt: offEN feature title
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.
ryo-gothic-plusn / 14px / 400 / line-height: 1.71 / palt: onJP article title
Section Label Text
default / 14px / 400 / line-height: 1.15head
lorem ipsum dolor sit amet consectetur. niko and... lorem 12px lorem ipsum dolor sit amet consectetur adipiscing elit. line-height 1.75 lorem ipsum dolor sit amet consectetur.
ryo-gothic-plusn / 12px / 400 / line-height: 1.75 / palt: onJP article h2
Navigation Item
default / 12px / 500 / line-height: 1.15nav link
Base body text / default size — 10px
default / 10px / 400 / line-height: 1.15body default
03 / Article

EDITORIAL SAMPLE

LIFESTYLE
2026.05.29
lorem ipsum dolor sit amet consectetur

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem, lorem ipsum dolor, lorem ipsum dolor sit amet. niko and... lorem ryo-gothic-plusn lorem ipsum dolor sit, palt lorem ipsum dolor sit amet consectetur adipiscing.

font-family lorem ipsum dolor sit amet consectetur Helvetica Neue lorem ipsum dolor, lorem ipsum dolor sit amet, .jp lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123

READ MORE
04 / Buttons

BUTTON VARIATIONS

ONLINE SHOP
Navigation Pill
clothes
Emoji Pill
FEATURE
Pill (hover state)
READ MORE
Text Link
SHOP NOW
Pill on Coral
DISCOVER
Pill on Teal
LISTEN
Pill on Navy
05 / Cards

CARD COMPONENTS

lorem ipsum dolor sit amet

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

2026.05.29

niko and... COFFEE lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing elit sed.

2026.05.25

lorem ipsum dolor sit

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

2026.05.20
06 / Forms

FORM ELEMENTS

default -- border: 1px solid #000, radius: 0
focus -- border: 2px solid #000
lorem ipsum dolor sit amet consectetur adipiscing
error -- border: 1px solid #dc2626
07 / Elevation

DEPTH & ELEVATION

Level 0: Flat
shadow: none, border: 1px solid #000
Level 1: Hover
0 2px 8px rgba(0,0,0,0.06)
Level 2: Modal
0 8px 24px rgba(0,0,0,0.10)
Surface: Beige
#eee9e2 -- section bg
08 / Layout

SPACING & WIDTHS

Spacing Scale (8px grid)
4px
8px
16px
24px
48px
80px
Content Widths
Max Container 1200px
Content Area 940px
Article 560px
Border Radius Scale
0px (card)
12.5px (sm pill)
15px (pill)