EU向け配送の一時停止について | Temporary Suspension of Shipping to the EU
Design System Preview

2026 AUTUMN / WINTER

kolor(kolor.jp)から抽出したデザイントークンのカタログ。ディープネイビー #283249 を基調に、白と無彩色グレーで組む建築的なモノトーン。差し色はイエロー #fbc02d の一点のみ。computed style 実測値に基づく。

View Collection Newsletter

01 / colors

Color Palette

Brand
kolor Navy
#283249
支配色。見出し・リンク・価格・CTA
Limited Yellow
#fbc02d
唯一の差し色。Limited バッジ専用
Neutral
Text Body
#666666
本文テキスト
Text Input
#222222
入力文字
Product Gray
#e5e5e5
商品タイル面(一覧は #e7e7e7)
Chip Gray
#f3f3f6
言語・通貨チップ面
Field Gray
#f1f1f1
入力欄の面
Border
#e0e0e0
入力欄の細罫線
Surface / Text on Dark
Page White
#ffffff
ページ背景・商品グリッド
Hero Navy
#283249
ヒーロー・お知らせ・フッター面
Overlay
rgba(18,17,39,.72)
翻訳切替オーバーレイ

02 / typography — 実測値

Typography

kolor official online store
LTUnivers → Inter / 32px / 400 / line-height 1.0 / palt / #666666h1 Store Title
2026 AUTUMN/WINTER
LTUnivers → Inter / 24px / 700 / line-height 1.0 / 白・ネイビー地h2 Hero
kolor BEACON
LTUnivers → Inter / 24px / 700 / line-height 1.4 (33.6px) / #283249h2 Section
Accessories
LTUnivers → Inter / 22px / 400 / line-height 1.4 (30.8px) / #283249h2 Collection Label
MEN — WOMEN — COLLECTION
LTUnivers → Inter / 16px / 700 / line-height 1.4 / #283249a Nav Label
kolor は、素材の意外な組み合わせと構築的なテーラリングで知られる、デザイナー・阿部潤一による前衛的なブランドです。異なる生地・パターン・カラーを一着のなかに緻密に同居させ、既視感のあるワードローブに新しい解釈を与えます。
LTUnivers → Inter+Noto Sans JP / 16px / 400 / line-height 1.4 (22.4px) / palt / #666666Body
すべての検索結果を見る
LTUnivers → Inter / 13px / 400 / line-height 1.5 / letter-spacing 1.04px (0.08em) / #283249a View All
26SBM-T14237S-08 Tailored Jacket
LTUnivers → Inter / 12px / 700 / line-height 1.3 (15.6px) / #283249h2 Product Title
¥26,400
LTUnivers → Inter / 12px / 400 / line-height 1.5 (18px) / #283249p Price
News Letter
LTUnivers → Inter / 10px / 400 / line-height 1.4 (14px)h5 Footer Heading

03 / collection

Collection

26AW / 01Limited
kolor

Nylon Twill Layered Blouson

¥85,800
26AW / 02
kolor

Wool Mohair Docking Knit

¥46,200
26AW / 03New
kolor

Cupra Twill Tailored Trousers

¥39,600
26AW / 04
kolor

26SBM-T14237S-08 Hybrid Coat

¥132,000
kolor BEACON — Collection Note

異素材のドッキングが生む、緊張感のあるシルエット

2026 Autumn/Winter コレクションは、ナイロンツイルとウールモヘアという相反する素材を一着のなかで衝突させることから始まりました。滑らかな面とざらついた面、光を弾く生地と吸い込む生地。その境界に生まれる緊張感こそが kolor の核心です。

テーラリングは徹底して構築的でありながら、袖や裾のディテールで意図的にリズムを崩します。ネイビーを基調としたパレットは、素材同士のコントラストを際立たせるための静かな器として機能します。

Posted 2026.07.21 — kolor BEACON

04 / buttons & badges

Buttons

カートに入れる
Filled Navy / padding 16×30 / radius 0
お気に入りに追加
Outlined Navy / 1px solid #283249
MORE VIEW
Text Bold / 16px / 700
Limited New Arrival JA JPY
Limited バッジ(#fbc02d・唯一の差し色)/ Navy バッジ / 言語・通貨チップ(radius 3px)

05 / cards

Cards

CARD / 01Limited
kolor

Padded Nylon Vest

¥58,300
CARD / 02
kolor BEACON

Cotton Gabardine Shirt

¥29,700
CARD / 03
kolor

Leather Combi Sneakers

¥71,500
商品カード: 面色 #e5e5e5/#e7e7e7 の画像プレースホルダ、影なし・radius 0、下にブランド名 / 品番 12px/700 / 価格の 3 段組

06 / forms

Forms

Default — bg #f1f1f1 / border 1px solid #e0e0e0 / radius 4px
Focus — border-color #283249
Error — 郵便番号の形式が正しくありません(border #c0392b ※実サイトに明示のエラー色はなく近縁色で補完)

07 / elevation

Depth & Elevation

Level 0 — Flat
box-shadow: none
Level 1 — Subtle
0 1px 2px rgba(40,50,73,0.08)
kolor は原則フラット。奥行きは影ではなく「ネイビー面 / 白面」のコントラストと直線で表現する

08 / layout

Spacing & Width

Spacing Scale

6px
12px
18px
30px
60px
120px

Content Widths

Full Bleed Hero 100vw
Section Container 1120px
Article Body 720px