Collection

ATON design token catalog, extracted from aton-tokyo.com computed styles (2026-05-19). Two typeface systems: AkkuratLLWeb (Inter substitute) for body and Gotham (Montserrat substitute) for labels. Monochrome palette with warm beige #cfc6be footer. 12px text everywhere, 0px radius, no shadows.

Subscribe
01 / Colors
Color Palette
Pure monochrome + warm beige
Primary
Black
#000000
CTA / text / logo / border
White
#ffffff
Page background / CTA text
Warm Beige
#cfc6be
Footer bg / accent
Text
Text Primary
#000000
Body / heading / link
Text Secondary
#343434
Gotham labels / section headers
Text on Beige
#cfc6be
Footer text (low contrast)
Surface
Surface White
#ffffff
Standard background
Surface Near-White
#fafafa
Section differentiation
Semi-Transparent
rgba(255,255,255,0.5)
Header overlay
Surface Dark
#1d1d1d
Dark section
Surface Beige
#cfc6be
Footer
02 / Typography
Typography
Two typeface systems: Inter (AkkuratLLWeb substitute) + Montserrat (Gotham substitute) / palt global / 12px everywhere
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
Inter + Yu Gothic / 18px / 400 / line-height: 1.8Body (reading text)
ATON
Inter + Yu Gothic / 12px / 400H1 (logo as text)
Collection
Montserrat / 12px / 500 / letter-spacing: 0.05em / color: #343434H2 Section Header (Gotham)
Newsletter
Inter + Yu Gothic / 12px / 400 / color: #cfc6be on beige bgH2 Footer
Suvin Cotton 60/2
Montserrat / 12px / 400 / letter-spacing: 0.05em / color: #343434P Label (Gotham)
lorem ipsum dolor / lorem ipsum dolor / lorem ipsum
Inter + Yu Gothic / 12px / 400Link (nav/label)
lorem ipsum dolor sit amet
Inter + Yu Gothic / 18px / 400 / color: #000000Link (body)
Copyright 2024 ATON Co., Ltd.
Inter + Yu Gothic / 10px / 400P Small (footer / notes)
03 / Article
Article Sample
Lookbook composition: sparse text, generous whitespace
Suvin Cotton
OVERSIZED T-SHIRT
lorem ipsum dolor / lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. ATON lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur T lorem ipsum dolor sit.
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem ATON lorem ipsum dolor sit amet consectetur.
Suvin Cotton 60/2 -- Made in Japan
04 / Buttons
Buttons
Filled black / radius 0px / weight 400 / padding 10px 40px
Subscribe
Primary / filled #000 / radius 0
View Collection
Secondary / outline / radius 0
Dark background
Shop Now
White fill / #000 text / radius 0
Beige background
Newsletter
Outline / beige text / radius 0
05 / Cards
Product Cards
No shadow / radius 0 / flat / photo-dominant
Product Image
Suvin Cotton

OVERSIZED T-SHIRT

¥16,500
Product Image
Suvin Cotton

ROUND HEM T-SHIRT

¥14,300
Product Image
Wool

OVERSIZED COAT

¥132,000
Product Image
Nylon

HOODED COAT

¥88,000
06 / Forms
Forms
Radius 0px / border #000 / focus: browser default
Default
Please enter a valid phone number
Focus
07 / Elevation
Depth
No shadows -- surface color changes only
Level 1 -- White
Standard content. #ffffff
Level 2 -- Near-White
Section differentiation. #fafafa
Level 3 -- Dark
Dark section. #1d1d1d
Level 4 -- Beige
Footer. #cfc6be
08 / Layout
Layout
Spacing scale & surface grid
10px
16px
40px
64px
120px
#ffffff
#fafafa
#1d1d1d
#cfc6be