UI Skillbook
2

KUON DESIGN.md

Japan

KUON（https://kuon.tokyo/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。 Shopify（Dawn テーマ）ベース。カスタム Web フォントは未使用。

Raw DESIGN.md

At a glance

Group
Japan
Main color
#2a305cBlue design systems
Fonts
New YorkNew York システムセリフスタック

Colors in this file

  • #2a305c

    。ブランドアクセントは

  • #ffffff

    Brand Navy on White

  • #121212

    Text Primary

  • #f3f3f3

    Surface Gray

  • #000000

    Unnamed

KUON（https://kuon.tokyo/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。 Shopify（Dawn テーマ）ベース。カスタム Web フォントは未使用。

1. Visual Theme & Atmosphere

  • デザイン方針: 日本の伝統的な布工芸（boro、sashiko）をコンテンポラリーメンズウェアに昇華するラグジュアリー職人ブランド。Shopify Dawn テーマをベースにしながら、Apple システムセリフ（New York） を全面採用した、Eコマースとしては極めて稀なセリフ・ファースト構成。装飾を抑えながらも、フォント選択ひとつで素材への敬意と編集感を両立させている
  • 密度: ゆったりとしたプロダクトショーケース型。余白を広くとり、写真が主役となる構成。テキストは最小限で、製品の物語を語ることに徹する
  • キーワード: 職人、伝統布工芸、セリフ・ファースト、エディトリアル、ネイビーアクセント、シャープエッジ、Quiet Luxury
  • 特徴: New York（Apple セリフシステムフォント） のみを使用し、和文フォントを一切スタック内に持たない。これは日本のファッションEコマースとして極めて稀な設計。すべての font-weight は 400（レギュラー）のみで構成され、太字を使わずセリフの字形で視覚的階層を構築する。角丸は border-radius: 0px（完全なシャープエッジ）。ブランドアクセントは ネイビー #2a305c の1色のみ。palt（プロポーショナル字詰め）は非適用

2. Color Palette & Roles

Primary（ブランドカラー）

KUON のカラーパレットは白地に単一のネイビーを配した、極めて抑制的な構成。

  • Brand Navy (#2a305c): CTA 背景・プライマリボタン・フィルターボタン（rgb 42, 48, 92）。絞り染め・藍染に通じる深みのある紺
  • Brand Navy on White (#ffffff): ネイビー背景上の白テキスト

Text & Neutral

  • Text Primary (#121212): 本文・見出しテキスト（rgb 18, 18, 18）— 純黒を避けたソフトブラック
  • Text Secondary (rgba(18, 18, 18, 0.75)): 補足テキスト・価格等のセカンダリラベル（75% 透過）
  • Text on Dark (#ffffff): ネイビー背景上の白テキスト

Surface

  • Background (#ffffff): ページ背景
  • Surface Gray (#f3f3f3): フッター背景・サブ面（rgb 243, 243, 243）
  • Surface Dark (#2a305c): CTA・プライマリボタンの背景

Functional

  • Announcement Bar: ダーク背景（#2a305c 等）上に白テキスト。アナウンス・プロモーション用
  • Input Field BG (#ffffff): 入力欄背景

3. Typography Rules

3.1 和文フォント

KUON は和文フォントをフォールバックチェーンに持たない。日本語テキストは Apple システムセリフの和文グリフ（Hiragino Mincho 相当）でレンダリングされる。

  • 和文フォント指定なし: font-family スタックに和文ゴシック・和文明朝のいずれも含まない
  • 日本語テキストは OS フォールバックに委ねられ、macOS では游明朝 / ヒラギノ明朝系のセリフグリフで表示される

補足: これは意図的な設計と考えられる。「New York」は Apple の SF Pro に連なるシステムセリフで、日本語ページにあえて欧文セリフ系スタックだけを指定することで、英語・日本語問わず統一した editorial な印象を持たせている

3.2 欧文フォント

  • セリフ（プライマリ）: New York, Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif
  • サンセリフ・等幅: 使用なし（セリフ一本構成）

3.3 font-family 指定

css/* 全テキスト共通 — New York システムセリフスタック */
font-family: "New York", "Iowan Old Style", "Apple Garamond",
  Baskerville, "Times New Roman", "Droid Serif", Times,
  "Source Serif Pro", serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

フォールバックの考え方:

  • 先頭の "New York" は macOS / iOS で Apple のシステムセリフとして解決される
  • "Iowan Old Style" は iOS のフォールバック、"Apple Garamond" は旧 macOS、Baskerville はクロスプラットフォーム
  • "Times New Roman" 以降は Windows / Android / Web 用のフォールバック
  • 和文フォントは意図的に省略されており、OS デフォルトの明朝系グリフに委ねる設計
  • 絵文字フォントをチェーン末尾に配置（Shopify Dawn テーマの標準構成）

3.4 文字サイズ・ウェイト階層

以下は computed style 実測値（2026-05-09 取得）

RoleSizeWeightLine HeightLetter Spacing備考
H1（ページ見出し）36px400—0.54px (0.015em)ヒーロー・コレクション名
H2（バナー見出し）21.6px4001.30.54px (0.025em)セクション見出し
H3（カード見出し・大）18–20px4001.30.54px (0.027–0.03em)コレクションカード
H3（カード見出し・小）16.2px4001.3—サブカード見出し
H3（製品カード）11.7px4001.30.54px (0.046em)商品一覧の製品名
Body16px4001.8 (28.8px)0.6px (0.0375em)本文・説明文
Nav Link14px4001.80.6px (0.043em)ナビゲーションリンク
Announcement / Badge11.7px4001.31px (0.085em)アナウンスバー・バッジ

ウェイトの特徴:

  • 全テキストが weight: 400 — 太字ゼロの一本構成
  • セリフの字形の違い（セリフの有無、字幅）だけで視覚的な情報階層を作る設計

3.5 行間・字間

  • 本文の行間: line-height: 1.8（28.8px / 16px）— 英文セリフとしては広め。ゆったりとした読み心地
  • 見出しの行間: line-height: 1.3— コンパクトにまとめ、写真との対比を際立たせる
  • 本文の字間: letter-spacing: 0.6px（≈ 0.0375em @ 16px）— 全体に均一に適用
  • 見出しの字間: letter-spacing: 0.54px（0.015–0.046em。サイズにより変動）— 本文とほぼ同水準
  • アナウンス / バッジ: letter-spacing: 1px（0.085em）— 最も広い字間で視認性を上げる

ガイドライン:

  • letter-spacing は 0.54〜1px の範囲で全要素に一貫適用されており、 letter-spacing: normal（0）の要素は存在しない
  • 行間は本文 1.8 / 見出し 1.3 の 二段階構成 のみ
  • 見出しサイズが 11.7px まで小さくなるが、line-height 1.3 に letter-spacing 0.54px の組み合わせで読みやすさを確保

3.6 禁則処理・改行ルール

css/* 推奨設定 */
overflow-wrap: break-word; /* 長い英単語・製品コードの折り返し */
  • Dawn テーマのデフォルト設定に従う。日本語固有の禁則処理は特別な設定なし
  • 製品名・コレクション名は英語が主体のため、英単語の折り返し制御が重要

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt は非適用 */
  • palt（プロポーショナル字詰め）: 非適用。日本語テキストに palt を使わないことで、セリフグリフの固有の字間をそのまま表示
  • kern: ブラウザデフォルト（font-feature-settings: normal）に委ねる
  • システムセリフフォント（New York / Baskerville 等）はカーニングテーブルを内蔵しており、font-feature-settings 指定なしでも適切なカーニングが効く

3.8 縦書き

  • 該当なし。KUON は横書きのみ

4. Component Stylings

Buttons

Primary CTA（塗りつぶし）

KUON の CTA は ネイビー塗りつぶし + シャープエッジ が基本。

  • Background: #2a305c
  • Text: #ffffff
  • Border Radius: 0px（完全なシャープエッジ — pill も角丸も使わない）
  • Padding: 0 30px（縦は height で制御、横は30px）
  • Font Family: "New York" システムセリフスタック
  • Font Size: 15px
  • Font Weight: 400
  • Letter Spacing: 0.6px 程度

Secondary（ゴースト / アウトライン）

  • Background: transparent
  • Text: #2a305c（またはコンテキストに応じた前景色）
  • Border: 1px solid（ブランドカラーまたは前景色）
  • Border Radius: 0px
  • Padding: Primary に準拠

Filter / Apply ボタン

  • Background: #2a305c
  • Text: #ffffff
  • Border Radius: 0px
  • 絞り込みパネルの適用ボタン。Primary CTA と同一スタイル

ボタンの考え方:

  • すべてのボタンが border-radius: 0px — KUON のデザインにおいて丸みは存在しない
  • プライマリは ネイビー #2a305c 塗りつぶし + 白テキスト
  • font-weight は 400 固定（CTA テキストを太くしない）
  • シャープエッジはブランドの職人的な硬質感と手仕事の精度を暗示する

Inputs

  • Background: #ffffff
  • Border: 実測から推定 1px solid（コンテキストに依存）
  • Border Radius: 0px（ボタンと同一の直角スタイル）
  • Padding: 15px（上下・左右共通）
  • Font Size: 16px
  • Line Height: 24px（1.5）
  • Letter Spacing: 0.4px
  • Text Color: #121212

フォーカス時:

  • Dawn テーマのデフォルトフォーカスリングを使用（システム依存）

Cards（製品カード）

  • Background: #ffffff
  • Border Radius: 0px
  • Shadow: なし（フラット）
  • 構成: 製品写真（全面）+ 製品名（11.7px / 400 / ls 0.54px）+ 価格
  • ホバー時の視覚的フィードバックは写真のオーバーレイ等で実装（Dawn テーマ標準）

Navigation

  • Link Size: 14px
  • Weight: 400
  • Line Height: 1.8
  • Letter Spacing: 0.6px
  • Color: #121212
  • Header Padding: 4px 32px

Footer

  • Background: #f3f3f3
  • Padding: 36px 0 100px
  • Text Color: #121212

5. Layout Principles

Spacing Scale

Shopify Dawn テーマの CSS Custom Properties に基づく実測値:

TokenValue用途
XS4pxヘッダー上下 padding
S15px入力欄 padding
M30pxボタン横 padding
L32pxヘッダー横 padding
XL36pxフッター上部 padding
XXL100pxフッター下部 padding（モバイル考慮含む）

Container

  • Max Width: Dawn テーマのデフォルト（通常 1200〜1440px）
  • Padding (horizontal): 32px（ヘッダー実測値）

Grid

  • 製品グリッド: デスクトップで 3〜4カラム（Dawn 標準）
  • Gutter: Dawn テーマのデフォルト（推定 24〜32px）

6. Depth & Elevation

KUON はシャドウを使わない。ネイビー #2a305c とグレー #f3f3f3 と白のコントラストだけで面の階層を構成する。

LevelShadow / BG用途
0なし通常要素（製品カード、本文エリア）
1background: #f3f3f3フッター・サブ面
2background: #2a305cCTA・プライマリボタン・アナウンスバー
  • モーダル・ドロワー使用時は Dawn テーマのオーバーレイ（推定 rgba(0,0,0,0.5) 程度）
  • すべての境界はシャドウではなく 背景色の差 と ボーダー で表現する

7. Do's and Don'ts

Do（推奨）

  • フォントは "New York" システムセリフスタック全体 を指定する（先頭の "New York" だけでは Windows・Android で非表示になる）
  • すべてのテキストに font-weight: 400 を使う（KUON のデザイン言語に太字は存在しない）
  • ボタン・入力欄は border-radius: 0px の完全なシャープエッジにする
  • アクセントカラーは #2a305c（ネイビー）のみ に絞る
  • letter-spacing は 0.54〜0.6px を全要素に一貫適用する
  • 本文の line-height は 1.8 を使う（セリフフォントの読みやすさのために重要）
  • 見出しの line-height は 1.3 を使う
  • 背景色は #ffffff（白）と #f3f3f3（ライトグレー）と #2a305c（ネイビー）の3種に絞る
  • 余白を広くとり、製品写真が呼吸できるスペースを確保する

Don't（禁止）

  • ゴシック体・サンセリフ系フォントを追加しない（セリフ一本構成がブランドの核心）
  • font-weight: 700（bold）を使わない（太字ゼロの設計を守る）
  • border-radius に 1px 以上の値を与えない（pill も角丸も KUON にはない）
  • ネイビー #2a305c 以外のカラーをアクセントとして使わない
  • palt（font-feature-settings: "palt"）を適用しない（セリフシステムフォントの字形をそのまま活かす設計）
  • シャドウ（box-shadow）を使わない
  • letter-spacing を 0（normal）にしない（全要素に一定の字間が設定されている）
  • テキストを密集させない（職人ブランドの静謐さと余白は必須）
  • #000000（純黒）をテキスト色に使わない（#121212 が正値）

8. Responsive Behavior

Breakpoints

Shopify Dawn テーマの標準ブレークポイント:

NameWidth説明
Mobile≤ 749pxスマートフォン。ナビはハンバーガー化
Tablet750〜989pxタブレット
Desktop≥ 990pxデスクトップ

モバイル時の調整

  • H1（36px）→ 24〜28px 程度に縮小
  • ヘッダー横 padding（32px）→ 16px に縮小
  • 製品グリッドは 1〜2カラムに折り返し
  • シャープエッジ（radius: 0px）はモバイルでも維持
  • letter-spacing（0.54〜0.6px）はモバイルでも変更なし

タッチターゲット

  • CTA ボタンは padding 0 30px のため、高さは実装側でタッチターゲット（最低 44px）を確保する
  • 直角ボタンのため視覚的なタップ領域の明示が重要

9. Agent Prompt Guide

クイックリファレンス

Brand: KUON（クオン）
Origin: 日本伝統布工芸（boro / sashiko）ベースのラグジュアリーメンズウェア
Brand Navy: #2a305c
Text Primary: #121212
Text Secondary: rgba(18, 18, 18, 0.75)
Background: #ffffff
Surface Gray: #f3f3f3
Font: "New York", "Iowan Old Style", "Apple Garamond", Baskerville,
      "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Font Weight: 400 のみ（太字ゼロ）
palt: 非適用（font-feature-settings: normal）
Body: 16px / 400 / line-height 1.8 / letter-spacing 0.6px
H1: 36px / 400 / letter-spacing 0.54px
H2: 21.6px / 400 / line-height 1.3 / letter-spacing 0.54px
Product Title: 11.7px / 400 / line-height 1.3 / letter-spacing 0.54px
Nav: 14px / 400 / line-height 1.8 / letter-spacing 0.6px
CTA Style: bg #2a305c / text #fff / radius 0px / padding 0 30px / size 15px
Button Radius: 0px（すべて直角）
Shadow: 使用しない

プロンプト例

KUON のデザインシステムに従って、コレクションページを作成してください。
- フォント: "New York", "Iowan Old Style", "Apple Garamond", Baskerville,
    "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif
- font-weight は 400 のみ（太字は一切使わない）
- font-feature-settings: normal（palt は非適用）
- 本文: 16px / line-height: 1.8 / letter-spacing: 0.6px / color: #121212
- H1: 36px / letter-spacing: 0.54px
- H2: 21.6px / line-height: 1.3 / letter-spacing: 0.54px
- 製品タイトル: 11.7px / line-height: 1.3 / letter-spacing: 0.54px
- CTA「ADD TO CART」: bg #2a305c / text #fff / border-radius: 0 / padding: 0 30px
- border-radius はすべての要素で 0px（シャープエッジのみ）
- 背景: #ffffff。フッターのみ #f3f3f3
- シャドウは一切使わない
- 余白を広くとる（Letter Spacing と line-height 1.8 で呼吸のある組版に）

字詰め・組版の重要ポイント

  1. セリフ・ファースト: 日本のファッション EC で New York システムセリフのみを採用するのは極めて稀。スタック全体を正確に指定しないと、Windows や Android では Times New Roman 以前のセリフが適用されず意図したデザインにならない
  2. 太字ゼロの一本構成: font-weight: 400 のみ。セリフの字形の「ストロークの強弱」がウェイト変化の代わりをしており、bold を加えると字形の力学が崩れる
  3. シャープエッジ（radius: 0px）: ボタン・入力欄・カードすべてに一貫。boro や sashiko の直線的な縫い目、裂き織りの角を暗示するデザイン言語
  4. ネイビー #2a305c の単色アクセント: 藍染・縫い糸の色を想起させるネイビーが唯一のブランドアクセント。鮮やかな色は使わない
  5. letter-spacing の一貫性: 0.54〜0.6px を全要素に適用。small（11.7px）から large（36px）まで絶対値で一定に近い字間を保つことで、異なるサイズでも統一感のある組版を実現
  6. palt 非適用: システムセリフは palt（プロポーショナル字詰め）を使わない。和文グリフはデフォルト字間のまま表示することで、欧文セリフと和文明朝の字面が自然に並ぶ

取得日: 2026-05-09 出典: https://kuon.tokyo/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出（Shopify Dawn テーマ）

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/kuon.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "kuon" })

Related Design.md files

世田谷美術館（SETAGAYA ART MUSEUM）

Japan · YakuHanJP

世田谷美術館（SETAGAYA ART MUSEUM）のデザイン仕様書。

ROYCE'（ロイズ）

Japan · Noto Sans Japanese

ROYCE'（ロイズ）のデザイン仕様書。

アステラス製薬（Astellas Pharma）

Japan · Noto Sans JP

アステラス製薬（Astellas Pharma）のデザイン仕様書。

NEIGHBORHOOD（ネイバーフッド）

Japan · HelveticaLTWXX-BoldCond

NEIGHBORHOOD 公式サイト（https://www.neighborhood.jp/）のデザイン仕様書。 滝沢伸介が 1994 年に原宿で設立した日本のストリートウェアブランド。 モーターサイクルカルチャー、ミリタリー、アウトドアの影響を受け、緻密なクラフツマンシップで知られる。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

POPEYE Web

Japan · DM Sans

POPEYE Web（https://popeyemagazine.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

SAKE HUNDRED

Japan · 游明朝

SAKE HUNDRED（https://sake100.com/）のデザイン仕様書。 実サイトの CSS computed style に基づく。ラグジュアリー日本酒ブランドの EC サイト。

All Design.md filesBrowse by font