Atelier：ラグジュアリーファッションデザインシステム

Web · ライト · 高級感 · セリフ体 · ミニマル · EC

Atelier

アイボリー、インク、洗練されたセリフ体。ファッションブランドのルックブックのように。

Atelier は、ファッションブランドのルックブックを手本にしています。温かみのあるアイボリーのページ、黒いインク、コントラストの強い Cormorant の見出し、大きく扱う写真。色はほとんど使わず、ブロンズはフォーカス状態と細部のためだけに残し、商品そのものがページを支えます。

プレビュー

下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。

2026 年の新機能計画も、リリースも、計測も、ひとつの場所で

小さなチームのための、落ち着いたワークスペース。必要な数字はすべて、不要なものは何もなく。

無料で始めるデモを予約

アクティブユーザー12,480

売上$48.2k

継続率86%

チームを招待仕事用メールアドレスyou@company.comロール編集者 ▾招待を送信

最近の注文顧客ステータス金額Ada Park支払い済み$1,240Lukas Weber保留中$380Mei Chen返金済み$96

プロジェクトで使う

これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。

このプロジェクトでは Atelier デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/atelier.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。

トークン

カラー

ライトテーマ

background#F7F5F2oklch(0.971 0.005 78.298)
foreground#161412oklch(0.193 0.005 67.517)
card#FFFFFFoklch(1 0 0)
card-foreground#161412oklch(0.193 0.005 67.517)
popover#FFFFFFoklch(1 0 0)
popover-foreground#161412oklch(0.193 0.005 67.517)
primary#161412oklch(0.193 0.005 67.517)
primary-foreground#F7F5F2oklch(0.971 0.005 78.298)
secondary#ECE7E1oklch(0.93 0.01 72.658)
secondary-foreground#161412oklch(0.193 0.005 67.517)
muted#EEEAE4oklch(0.938 0.009 78.28)
muted-foreground#6B635Boklch(0.505 0.016 67.45)
accent#E9E3DCoklch(0.919 0.011 71.893)
accent-foreground#161412oklch(0.193 0.005 67.517)
destructive#9E2A2Boklch(0.468 0.152 24.87)
border#DCD5CCoklch(0.876 0.014 74.412)
input#CFC6BBoklch(0.831 0.018 73.045)
ring#7A5F4Boklch(0.507 0.046 57.989)
chart-1#7A5F4Boklch(0.507 0.046 57.989)
chart-2#161412oklch(0.193 0.005 67.517)
chart-3#B79E84oklch(0.715 0.047 68.066)
chart-4#5E6B5Coklch(0.512 0.028 141.437)
chart-5#9E2A2Boklch(0.468 0.152 24.87)

ダークテーマ

background#121110oklch(0.178 0.003 67.659)
foreground#EFEAE3oklch(0.939 0.011 76.597)
card#1A1817oklch(0.211 0.004 48.54)
card-foreground#EFEAE3oklch(0.939 0.011 76.597)
popover#1A1817oklch(0.211 0.004 48.54)
popover-foreground#EFEAE3oklch(0.939 0.011 76.597)
primary#EFEAE3oklch(0.939 0.011 76.597)
primary-foreground#121110oklch(0.178 0.003 67.659)
secondary#24211Foklch(0.25 0.006 56.109)
secondary-foreground#EFEAE3oklch(0.939 0.011 76.597)
muted#1F1D1Boklch(0.232 0.005 67.584)
muted-foreground#A39A90oklch(0.691 0.018 70.442)
accent#2A2725oklch(0.275 0.006 56.145)
accent-foreground#EFEAE3oklch(0.939 0.011 76.597)
destructive#E07A6Eoklch(0.691 0.129 27.874)
border#33302Doklch(0.311 0.007 67.574)
input#3D3935oklch(0.347 0.009 67.531)
ring#C4A68Aoklch(0.745 0.052 64.916)
chart-1#C4A68Aoklch(0.745 0.052 64.916)
chart-2#EFEAE3oklch(0.939 0.011 76.597)
chart-3#8C7A69oklch(0.591 0.034 65.479)
chart-4#9DAA9Aoklch(0.723 0.027 139.828)
chart-5#E07A6Eoklch(0.691 0.129 27.874)

フォント

見出し: Cormorant Garamond · 500
本文: Jost · 400
等幅: JetBrains Mono

タイプスケール

display · 96/0.95 · -0.02emデザインで、画面はもっと使いやすくなる
h1 · 60/1 · -0.015emデザインで、画面はもっと使いやすくなる
h2 · 36/1.1デザインで、画面はもっと使いやすくなる
h3 · 22/1.3 · 0.02emデザインで、画面はもっと使いやすくなる
body · 16/1.65 · 0.01emデザインで、画面はもっと使いやすくなる
small · 12/1.5 · 0.12emデザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 0pxmd 0pxlg 0pxxl 4px

余白xs 8pxsm 16pxmd 32pxlg 48pxxl 96px

影なし：奥行きは枠線と色で表現します。

レイアウト

最大幅: 1440px
本文の幅: 60ch
カラム: 12
ガター: 24px

向いている用途

ファッションとラグジュアリーブランド
ジュエリー、ビューティー、フレグランス
ブティックホテルとレストラン
ルックブックとキャンペーンページ

やること・やらないこと

写真にページの大部分を任せる。
ラベルとナビゲーションは、字間を広げた小さな大文字で組む。
鮮やかな色を加えない。ブロンズが最も目立つ色。
商品をバッジ、評価、セールのバナーで埋めつくさない。