A REAL — UN REAL — AGE

lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.
DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem ipsum dolor.

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

01 / Colors

Color Palette

Brand
Pure Black
#000000
Brand / Text
Pure White
#ffffff
Background
Surface
Light Gray
#f0f0f0
Section BG
Silver
#dcdcdc
Close Button
Dot Default
#c8c8c8
Carousel Dot
Dot Active
#969696
Carousel Active
Mid Gray
#808080
Gray Mid
Text
Primary
#000000
Body / Product
Secondary
#999999
Sub Nav
On Dark
#ffffff
Footer Text
Footer / Dark
Footer BG
#333333
Footer / TOP
Semantic
Danger
#8b0000
Error
Warning
#8b7355
Caution
Success
#3d5e3d
Complete
02 / Typography

Type Hierarchy

PATCHWORK BLOUSON — Product Name (16px)
16px / 400 / line-height: 1.25 / letter-spacing: 1px (0.063em)item-name
Women — Nav Category (15px)
15px / 700 / letter-spacing: 0.15px (0.01em)nav
¥88,000 — Price (14px)
14px / 400 / line-height: 1.5price
lorem ipsum dolor — Shop Info (14px)
14px / 400 / line-height: 1.71 (24px / 14px)shop info
Jacket / Coat — Sub Nav (12px)
12px / 700 / letter-spacing: 0.15px / color: #999999sub-nav
Body text — base font-size (10px). ANREALAGE. HTML.
10px / 400 / line-height: 1.5 / letter-spacing: -0.01px (≈0)body
Cart (2) — Cart Count (10px bold)
10px / 700cart badge
Top — Footer Link (9px)
9px / 400 / pagetop linkfooter
ANREALAGE 2025 S/S COLLECTION
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABCabc 123
Product Name (16px) + Description (14px) / Helvetica stack / font-feature-settings: normal (palt/kern off)
03 / Products

Product Grid

Photo
PATCHWORK BLOUSON
¥176,000
Photo
PHOTOCHROMIC COAT
¥242,000
Photo
PRISM KNIT SWEATER
¥88,000
Photo
BONE STRUCTURE DRESS
¥198,000
Photo
SIZE CHANGE T-SHIRT
¥33,000
Photo
REFLECT HOODIE
¥66,000
Photo
SPHERE TROUSERS
¥77,000
Photo
WIRED JACKET
¥132,000
04 / Buttons

Button Variants

ANREALAGE has no traditional CTA buttons. Products ARE the CTAs. Buttons are limited to UI controls.

TOP
Footer "TOP" / bg #333 / 9px
View All
Outline / border #000 / 10px
Close / bg #dcdcdc / 50%
Carousel Dots / 20px radius
05 / Cards

Product Cards

Photo
Women / Outerwear
PHOTOCHROMIC LONG COAT
¥308,000
Photo
Men / Tops
PRISM PRINT SHIRT
¥55,000
Photo
Women / Accessories
BONE STRUCTURE BAG
¥99,000
06 / Forms

Form Elements

Default — border: #c8c8c8, radius: 0
Focus — border: #000000
Error — border: #8b0000 (danger)
07 / Elevation

Depth & Elevation

ANREALAGE is completely flat. No shadows. Depth comes from photography and white space alone.

Level 0: Flat
All elements. box-shadow: none
Level 1
Hover (recommended)
Level 2
Modal (recommended)
08 / Layout

Spacing & Grid

Spacing Scale
4px
XS
10px
S
16px
M
30px
L
48px
XL
80px
XXL
Border Radius
0
Sharp
20px
Dot
×
50%
Circle
Grid Demo — 4 Column
Content Width
Max Container 1200–1400px
Content 940px
Mobile Padding 16px
Desktop Padding 24–40px