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
素材の質感と静寂を伝えるための、極限まで削ぎ落としたデザイン。
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)
ナビゲーション・フッターリンク・価格表示
Inter + Yu Gothic / 12px / 400Link (nav/label)
本文中のリンクテキスト
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
インドのタミル・ナードゥ州で栽培される最高級のスヴィンコットン。繊維長が極めて長く、シルクのような光沢としなやかさを持つ。ATONはこの希少な原綿を贅沢に使い、度詰めで編み立てることで、一枚で完結する存在感のあるTシャツに仕上げている。
素材そのものの力を信じるものづくり。過剰な装飾も、声高なブランディングも必要としない。袖を通した瞬間に伝わる上質さ。それがATONの考えるラグジュアリーの本質である。
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