Design System Preview
ALBION

albion.co.jp lorem ipsum dolor sit amet consectetur. lorem ipsum weight 300, pill lorem CTA, lorem ipsum dolor sit. computed style lorem ipsum dolor.

DESIGN.md lorem lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Brand
Dark Navy
#1e1a34
CTA lorem / lorem ipsum dolor
Accent Pink
#db477e
lorem / lorem ipsum
Neutral
Background
#ffffff
lorem ipsum
Text Secondary
#606060
lorem ipsum dolor / lorem / lorem
Surface
#f3f6f8
lorem / lorem ipsum dolor
Surface Alt
#f2f2f2
lorem ipsum dolor
Border
#9a98a7
Secondary lorem ipsum(lorem ipsum dolor)
Footer Background
#999999
lorem ipsum dolor
Text Inverse
#ffffff
lorem ipsum dolor sit
Semantic
Danger
#db477e
Accent Pink lorem
Warning
lorem
lorem ipsum
Success
lorem
lorem ipsum
02 / Typography

lorem ipsum dolor sit

News — Display EN
36px / 300 / line-height: 1.2 / letter-spacing: 0.05em / Josefin Sans (lunchtype22 alt)c-heading__main
lorem ipsum dolor sit amet consectetur — Heading 2 (modal)
20px / 600 / line-height: 1.8 / letter-spacing: 0.04emmodal__title
lorem ipsum dolor sit — Heading 3
18px / 500 / line-height: 1.0c-subheading__main
lorem ipsum dolor — Heading 2 (announce)
16px / 500 / line-height: 2.0 / YakuHanJPsc-announcement__title
Seasonal — Nav Link
16px / 500 / line-height: 1.0l-header__navItemLink
lorem ipsum dolor — Body. ALBION lorem ipsum dolor 14px / weight 300 / line-height 1.8 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod, lorem ipsum dolor sit amet consectetur. letter-spacing lorem normal, palt lorem ipsum dolor.
14px / 300 / line-height: 1.8 (25.2/14) / letter-spacing: normal / palt: lorembody
lorem ipsum dolor — Button Small(lorem ipsum dolor / lorem ipsum dolor)
12px / 400 / line-height: 1.8 / letter-spacing: 0.04embuttonLink --middle

Web lorem ipsum dolor:Josefin Sans(Google Fonts, lunchtype22 lorem)+Noto Sans JP(Google Fonts, lorem ipsum dolor)lorem ipsum.
OS lorem ipsum dolor: Hiragino Sans / Yu Gothic / Meiryo. YakuHanJPs lorem CDN lorem ipsum dolor.

03 / Article & Product

lorem ipsum dolor sit amet

Skincare Column

lorem ipsum dolor, lorem ipsum.

2026.06.15 / Beauty Column / Reading time: 3 min

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

Milk First

lorem ipsum dolor“lorem ipsum”lorem ipsum dolor. lorem, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. 1974 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor lorem ipsum dolor, lorem ipsum dolor sit amet 3 lorem ipsum dolor.

Essential Skincare

lorem ipsum dolor sit“lorem ipsum / lorem / lorem”. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

MILK
BEST SELLER
Emulsion
lorem ipsum dolor sit lorem ipsum dolor lorem II
Exage White White Rise Milk II
¥5,500 (lorem／200g)
lorem ipsum dolor lorem ipsum dolor
LOTION
Skin Conditioner
lorem ipsum dolor sit amet consectetur lorem ipsum dolor N
Skin Conditioner Essential N
¥9,350 (lorem／330mL)
lorem ipsum dolor lorem ipsum dolor
FOUNDATION
Base Makeup
lorem ipsum dolor lorem ipsum dolor
Smart Skin White Rare
¥5,500 (lorem)
lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor sit
04 / Buttons

lorem ipsum dolor sit

ALBION lorem ipsumpill lorem（border-radius: 15〜20px)lorem. weight 300 lorem ipsum dolor sit letter-spacing0.04em lorem ipsum dolor. lorem ipsum dolor sit ametradius: 0px lorem.

lorem ipsum dolor
Primary (pill)
14px / 300 / r: 20px
lorem ipsum dolor
Primary Small
12px / 400 / r: 15px
lorem ipsum
Secondary (pill)
14px / 300 / r: 20px
lorem ipsum dolor
Secondary Small
12px / 400 / r: 15px
lorem ipsum
Section (rect)
14px / 500 / r: 0px
lorem ipsum
Disabled
bg: #f3f6f8
lorem ipsum dolor
Accent (lorem)
bg: #db477e
05 / Cards

lorem ipsum dolor sit

Skincare

lorem ipsum dolor sit amet

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

lorem ipsum
Counseling

lorem ipsum dolor sit amet

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

lorem ipsum
Brand Story

lorem ipsum dolor sit amet

1956 lorem ipsum dolor, lorem ipsum dolor“lorem ipsum dolor sit amet consectetur”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem ipsum
06 / Forms

lorem ipsum dolor(3 lorem)

lorem ipsumborder-radius: 10px lorem. lorem Surface lorem#f3f6f8. lorem ipsum dolor#1e1a34 lorem ipsum dolor, lorem ipsum Accent Pink lorem.

lorem ipsum — bg: #f3f6f8 / border: transparent / radius: 10px
lorem ipsum — border: 1px solid #1e1a34(Brand Navy)
lorem — border: 1px solid #db477e(Accent Pink)
lorem ipsum dolor — bg: #f3f6f8 / border: none / radius: 10px
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1
0 2px 8px rgba(30,26,52,0.06)
Level 2
0 4px 16px rgba(30,26,52,0.1)
Level 3
0 8px 32px rgba(30,26,52,0.15)

lorem ipsum dolorbox-shadow: none. ALBION lorem ipsum dolor. Level 1 lorem“lorem ipsum dolor sit”. lorem ipsum dolor sit ametrgba(30, 26, 52, 0.8)。

08 / Layout

lorem ipsum dolor sit amet

Spacing Scale(8px lorem)
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
80px
Container & Content Widths
Container Max 1280px
Main Content 940px
Article(lorem)680px
Breakpoints

Mobile: ≤ 767px / Tablet: 768 – 1024px / Desktop: > 1024px
lorem ipsum dolor sit 44px × 44px lorem(WCAG lorem).