Design System Preview: Hanako Web(lorem)

COLORS

Theme Colors — 6 lorem ipsum(lorem ipsum dolor --theme-color lorem)

Pale Green

#e3e8d3

--theme-color-1

Pale Orange

#f8ecd9

--theme-color-2

Pale Red

#f2e5e2

--theme-color-3

Pale Blue

#dbe8e8

--theme-color-4(lorem ipsum dolor --theme-color)

Pale Yellow

#f8f8ed

--theme-color-5

Pale Purple

#f2edf5

--theme-color-6

--theme-color lorem 1 lorem ipsum dolor sit amet consectetur adipiscing elit.lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.

Neutral

Background

#ffffff

lorem ipsum(--theme-color-background)

Ink

#000000

lorem ipsum dolor sit. Hanako lorem ipsum dolor

Dark Gray

#333333

lorem / lorem ipsum dolor / lorem ipsum dolor

Gray

#707070

lorem ipsum dolor

Light Gray

#a3a3a3

lorem ipsum dolor sit

Silver

#adb8c3

lorem / lorem ipsum dolor, lorem, Community lorem

Blue Gray

#6f7f89

Videos lorem ipsum dolor sit

Pale Gray

#d7dce1

lorem ipsum / lorem ipsum

Accent Blue

#5889ac

lorem ipsum dolor sit amet. lorem ipsum dolor

TYPOGRAPHY

Hanako Magazine Official

Montserrat lorem 30px / 400 / lh 1.0–1.2 / ls 0.48px / palt loremlorem ipsum dolor sit amet consectetur

New Articles

Montserrat + lorem 26px / 400 / lh 1.2 (31.2px) / ls 0.48pxlorem ipsum dolor

【lorem】lorem ipsum dolor sit 43 lorem｜“lorem ipsum”lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur

18px / 700 / lh 1.75 (31.5px) / ls 0.04em (0.72px) / palt loremlorem ipsum dolor — lorem ipsum dolor 700. lorem ipsum dolor

Hanako Magazine

Montserrat + lorem 16px / 400 / lh 1.2 (19.2px) / ls 0.04em (0.64px) /palt loremlorem ipsum(h4)

lorem 16px / weight 400 / line-height 1.55 / letter-spacing 0.48px. lorem em lorem ipsumpx loremlorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur(10px lorem 0.048em). lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum palt lorem ipsum dolor.

16px / 400 / lh 1.55 (24.8px) / ls 0.03em (0.48px) / palt loremlorem(body lorem)

2026.08.16　FOOD | 2026.08.15

Montserrat lorem 14px / 400 / lh 1.6 / ls normal /lorem #adb8c3lorem / lorem — lorem ipsum dolor sit amet consectetur

15px / 300（Light） / lh 1.5 (22.5px) / ls normallorem — weight 300 lorem Hanako lorem ipsum dolor

Montserrat + lorem 12px / 600 / lh 1.0 /ls 0.083em (1px)lorem ipsum — lorem ipsum dolor sit amet

2021 lorem 4 lorem 1 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor.

11px / 300 / lh 1.6 (17.6px) / ls 0.044emlorem ipsum dolor

New Articles

100 lorem 1000 lorem ipsum dolor sit amet consectetur! lorem ipsum dolor sit amet 18 lorem

TRAVEL | 2026.08.15

lorem / lorem ipsum“lorem ipsum dolor. lorem, lorem ipsum dolor sit. ”

CULTURE | 2026.08.14

lorem ipsum dolor sit! lorem ipsum dolor“lorem ipsum dolor”lorem ipsum dolor 4 lorem

FOOD | 2026.08.14

POPULAR TAGS

#lorem #lorem ipsum dolor #lorem #lorem ipsum dolor #lorem

lorem ipsum(--theme-color)loremlorem ipsum dolorlorem ipsum. lorem ipsumborder-radius lorem ipsum.

Videos

Pick Up

lorem ipsum lorem ipsum dolor

2026.08.12

lorem ipsum dolor sit amet consectetur

2026.08.09

DAILY WEEKLY MONTHLY

← lorem ipsum dolor sit amet consectetur(radius 5px). lorem ipsum dolor sit amet consectetur

BUTTONS

Primary — 1px solid #333 / radius 43.5px / 15px weight 300

Secondary — Montserrat / ls 0.1em / radius 999px

Old Issue

Accent — 1px solid #5889ac / radius 99px

#lorem

Tag — lorem / radius 99px / padding 12px 16px

DAILY

Tab(lorem ipsum)— #000 / radius 5px

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

FORMS

lorem ipsum dolor

lorem ipsum — 1px solid #d7dce1 / radius 5px /weight 300

lorem ipsum dolor

lorem ipsum — border #333333

lorem ipsum dolor

lorem — border #cf2e2e(WordPress lorem ipsum dolor vivid-red)

lorem ipsum dolor

Textarea lorem radius 5px / weight 300

ELEVATION

Level 0

none
lorem / lorem / lorem ipsum

WP Preset

0 6px 9px rgba(0,0,0,.2)
lorem ipsum dolor sit amet consectetur

lorem ipsum

#6f7f89 / #adb8c3 / #333333
lorem ipsum dolor 3 lorem

lorem ipsumlorem × 6 lorem ipsum × lorem ipsum dolor #6f7f89 × lorem ipsum #adb8c3 × lorem ipsum dolor #333333 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit“lorem”lorem, lorem ipsum dolor sit.

Join our Community

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

LAYOUT

XS 8

S 16

M 24

block / grid 48

section 80

Section Max Width 74rem = 1184px（--theme-section-max-width）

lorem ipsum48rem = 768px（--theme-p-max-width）

WP content-size 800px / wide-size 1280px

lorem ipsum dolor 80px, lorem ipsum 48px, lorem ipsum dolor 48px.lorem ipsum dolor sit amet consecteturlorem, lorem ipsum dolor sit amet consectetur.

Generated from hanako.tokyo DESIGN.md — awesome-design-md-jp / computed style lorem(2026-08-16)
lorem ipsumWeb lorem ipsum dolor sit、lorem ipsum dolor, "Yu Gothic", YuGothic, "lorem ipsum dolor Pro", … lorem OS lorem ipsum dolor sit. lorem ipsumProN lorem ipsum Pro。
loremMontserrat lorem Google Fonts lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
lorem ipsum dolor sit amet(macOS lorem ipsum dolor, Windows lorem ipsum dolor / lorem ipsum).font-weight: 300 lorem Windows lorem ipsum dolor sit amet consectetur.