---
version: alpha
name: freee
description: 統合型クラウドバックオフィスSaaSのブランド。ディープブルーの階層構造と暖かみのあるグレーニュートラルを組み合わせ、スモールビジネス向けの信頼感と親しみやすさを両立する。
sources:
  - https://www.freee.co.jp/
  - https://www.freee.co.jp/accounting/
  - https://www.freee.co.jp/www-freee-global.css
  - https://www.freee.co.jp/component---src-pages-index-tsx.d696be7195919ffb304b.css
  - https://www.freee.co.jp/static/1f4f72049d0c1690b533cb60cbe6468f/logo.svg
  - https://www.freee.co.jp/static/f0af28635d0f504115b86fedb0f5234a/logo_white.svg
  - https://brand.freee.co.jp/  (ページ保護のため一部取得不可)
notes:
  - colors.primary (#2864f0) はロゴSVGのfill値として直接確認（ダイレクトエビデンス）
  - 全カラー・タイポ・レイアウト値は公開CSS(www-freee-global.css, 2.6MB)を直接解析して抽出
  - brand.freee.co.jp はページ内容最小限のため詳細取得不可（インファレンスで補完した箇所あり）
  - museo-sans はグローバル向けヘッダ等で部分使用、日本語ページのメインはNoto Sans JP
  - orangeアクセント(#fa6414)は主にフォーム必須ラベルと一部CTA変種に使用
colors:
  # ブルー階層（プライマリブランドカラー）
  primary: "#2864f0"
  primary-dark-1: "#245ad6"
  primary-dark-2: "#1e46aa"
  primary-dark-3: "#23418c"
  primary-dark-4: "#143278"
  primary-mid: "#3264dc"
  primary-light-1: "#73a5ff"
  primary-light-2: "#aac8ff"
  primary-surface-1: "#dce8ff"
  primary-surface-2: "#ebf3ff"
  primary-surface-3: "#f2f6fe"
  # テキスト
  text-primary: "#323232"
  text-secondary: "#595959"
  text-muted: "#999999"
  text-darkest: "#1a1a1a"
  # ニュートラル（暖色系グレー）
  surface-white: "#ffffff"
  surface-near-white: "#fbfbfb"
  surface-off-white: "#fafafa"
  surface-light-1: "#f7f5f5"
  surface-light-2: "#f5f5f5"
  surface-light-3: "#f0eded"
  border-light: "#e9e7e7"
  border-base: "#e6e6e6"
  border-warm: "#e1dcdc"
  border-mid: "#d7d2d2"
  disabled: "#bdbdbd"
  muted-mid: "#a0a0a0"
  footer-dark: "#464343"
  # アクセントカラー
  orange: "#fa6414"
  orange-dark: "#be4b0f"
  orange-light: "#ffaa78"
  orange-surface: "#fff0d2"
  yellow: "#ffd278"
  yellow-dark: "#be8c14"
  yellow-light: "#cdf0f0"
  teal: "#00b9b9"
  red-error: "#dc1e32"
typography:
  display:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "44px"
    fontWeight: 500
    lineHeight: 1.5
  h1:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "40px"
    fontWeight: 700
    lineHeight: 1.5
  h2:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.5
  h3:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: 1.5
  body-large:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
  body:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
  body-small:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Noto Sans, Noto Sans JP, sans-serif"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.5
  mono:
    fontFamily: "Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.6
rounded:
  small: "4px"
  base: "5px"
  medium: "8px"
  large: "16px"
  xl: "20px"
  circle: "50%"
  pill: "99em"
spacing:
  unit: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  "2xl": "24px"
  "3xl": "32px"
  "4xl": "40px"
  "5xl": "56px"
  "6xl": "80px"
  "7xl": "120px"
  section-gap: "120px"
  section-gap-md: "80px"
  container-max-width: "1352px"
  container-padding: "32px"
components:
  button-primary:
    backgroundColor: "#2864f0"
    color: "#ffffff"
    borderRadius: "5px"
    fontSize: "16px"
    fontWeight: 700
    padding: "12px 32px"
    hover:
      backgroundColor: "#245ad6"
  button-secondary:
    backgroundColor: "#f2f6fe"
    color: "#245ad6"
    border: "1px solid #245ad6"
    borderRadius: "5px"
    fontSize: "16px"
    fontWeight: 700
    padding: "12px 32px"
    hover:
      backgroundColor: "#ebf3ff"
      borderColor: "#245ad6"
  button-outlined:
    backgroundColor: "#ffffff"
    color: "#2864f0"
    border: "2px solid #2864f0"
    borderRadius: "8px"
    fontSize: "16px"
    fontWeight: 700
    padding: "12px 16px"
  button-strong:
    backgroundColor: "#1e46aa"
    color: "#ffffff"
    borderRadius: "16px"
    fontWeight: 700
    hover:
      backgroundColor: "#143278"
  button-small:
    borderRadius: "4px"
    fontSize: "12px"
    padding: "5px 8px"
  button-tag:
    backgroundColor: "#2864f0"
    color: "#ffffff"
    borderRadius: "99em"
    fontSize: "12px"
    fontWeight: 500
    padding: "1px 8px"
  card:
    backgroundColor: "#ffffff"
    borderRadius: "8px"
    title:
      color: "#323232"
      fontSize: "16px"
      fontWeight: 500
      lineHeight: 1.5
    text:
      color: "#323232"
      fontSize: "14px"
      lineHeight: 1.5
    hover:
      titleColor: "#245ad6"
      textColor: "#245ad6"
  tag:
    default:
      backgroundColor: "#2864f0"
      color: "#ffffff"
      fontSize: "12px"
      fontWeight: 500
      borderRadius: "3px"
      padding: "1px 8px"
      minWidth: "80px"
    light:
      backgroundColor: "#f7f5f5"
      color: "#323232"
      padding: "4px 12px"
  header:
    backgroundColor: "#ffffff"
    borderBottom: "1px solid #e1dcdc"
    height: "86px"
    zIndex: 2
    position: "fixed"
  footer-dark:
    backgroundColor: "#464343"
    color: "#ffffff"
    paddingTop: "40px"
    paddingBottom: "72px"
  footer-light:
    backgroundColor: "#f7f5f5"
  hero:
    backgroundColor: "#f7f5f5"
    titleFontSize: "44px"
    titleFontWeight: 500
    leadFontSize: "20px"
    leadLineHeight: 1.5
  form-group:
    backgroundColor: "#ebf3ff"
    paddingY: "120px"
  form-required-label:
    color: "#fa6414"
  link:
    color: "#2864f0"
    textDecoration: "none"
    hover:
      textDecoration: "underline"
  section:
    marginTop: "120px"
    marginTop-md: "80px"
---

## 概要

freee（フリー株式会社）は「スモールビジネスを、世界の主役に。」をミッションとする統合型クラウドバックオフィスSaaSブランド。会計・人事労務・請求書・開業支援など複数製品を統合するため、ビジュアルアイデンティティはシステマチックな青色階層とウォームグレーの組み合わせで構成され、親しみやすさと専門的な信頼感を両立する。

ロゴはSVGのみ（テキスト要素なし）。フォントはNoto Sansで日本語（Noto Sans JP）を第一言語とするグローバル対応設計。

---

## カラー

### ブルー階層（プライマリ）

| 役割 | 値 | 用途 |
|------|-----|------|
| primary | `#2864f0` | ロゴ、プライマリボタン、リンク、タグ背景 |
| primary-dark-1 | `#245ad6` | ボーダー、インタラクティブ要素、ホバーbg |
| primary-dark-2 | `#1e46aa` | Strongボタン背景、ダークホバー |
| primary-dark-3 | `#23418c` | テキスト上のダークブルー |
| primary-dark-4 | `#143278` | 最深ホバー状態 |
| primary-surface-1 | `#dce8ff` | ライトサーフェス |
| primary-surface-2 | `#ebf3ff` | フォームグループ背景 |
| primary-surface-3 | `#f2f6fe` | デフォルトボタン背景 |

**禁止**: プライマリ青（`#2864f0`）をテキストカラーとして大段落に使用しない（リンクとコントラスト差が消える）。

### テキスト

| 役割 | 値 | 用途 |
|------|-----|------|
| text-primary | `#323232` | 本文・見出し・カードタイトル |
| text-secondary | `#595959` | サブテキスト・キャプション |
| text-muted | `#999999` | プレースホルダー・無効状態 |

### ニュートラル（暖色系グレー）

freeeのグレーは僅かにウォームトーン（赤みがかっている）。クールグレーではなく、わずかな暖かみが製品全体に親しみを加える。

| 役割 | 値 | 用途 |
|------|-----|------|
| surface-light-1 | `#f7f5f5` | ヒーロー背景・フッター下段 |
| border-warm | `#e1dcdc` | ヘッダーボーダー・分割線 |
| border-base | `#e6e6e6` | 一般ボーダー |
| footer-dark | `#464343` | フッタダーク背景 |

### アクセント

| 役割 | 値 | 用途 |
|------|-----|------|
| orange | `#fa6414` | 必須フォームラベル・一部CTAバリアント |
| red-error | `#dc1e32` | エラー・警告状態 |
| teal | `#00b9b9` | 特定製品アクセント・ステータス |
| yellow | `#ffd278` | ハイライト・バッジ |

**注**: オレンジ（`#fa6414`）は警告・注意喚起の役割。プライマリCTAにも変種として使用されるが、主な意味は「必須・注意」。

---

## タイポグラフィ

### フォントファミリー

```
Noto Sans, Noto Sans JP, sans-serif  ← メイン（日本語最優先）
Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace  ← コード
```

museo-sans はグローバルサイト・ヘッダー一部で使用されるが、国内製品ページはNoto Sansのみ。

### スケール

| 役割 | サイズ | ウェイト | 行高 |
|------|--------|---------|------|
| display / ヒーロータイトル | 44px | 500 | 1.5 |
| h1 | 40px | 700 | 1.5 |
| h2 | 32px | 700 | 1.5 |
| h3 / セクション見出し | 24px | 700 | 1.5 |
| body-large | 18px | 400 | 1.5 |
| body（基本） | 16px | 400 | 1.5 |
| body-small / カードテキスト | 14px | 400 | 1.5 |
| label / タグ | 12px | 500 | 1.5 |

- 行高は`1.5`が支配的（全210箇所）。長文は`1.6`〜`1.8`に緩める。
- ウェイトは400・500・700の3段階のみ。600以上は700に統一。

---

## レイアウト

- コンテナ最大幅: `1352px`、左右パディング: `32px`（モバイルも同値）
- ヘッダー固定高: `86px`
- ヒーローセクション: コンテンツ40% + 画像60%（デスクトップ）、モバイルは縦積み逆順
- セクション間隔: `120px`（デフォルト）、`80px`（コンパクト）
- ブレークポイント: `767px`（タブレット以下）、`519px`（スマホ）

---

## コンポーネント

### ボタン

```
プライマリ:    bg #2864f0 / text white / radius 5px / padding 12px 32px
セカンダリ:    bg #f2f6fe / text #245ad6 / border 1px #245ad6 / radius 5px
アウトライン:  bg white / text #2864f0 / border 2px #2864f0 / radius 8px
ストロング:    bg #1e46aa / text white / radius 16px (large CTA)
スモール:      radius 4px / font 12px / padding 5px 8px
タグ/ピル:     bg #2864f0 / text white / radius 99em / font 12px
```

**ホバー挙動**: ボタン全体が`transition: .4s`でスムーズに遷移。プライマリは`#245ad6`に暗転。

### カード

- 背景: white
- border-radius: `8px`
- タイトル: `#323232` / 16px / weight 500
- テキスト: `#323232` / 14px
- ホバー: タイトル・テキストが`#245ad6`に変色、画像は`opacity: 0.9`

### タグ

- デフォルト: bg `#2864f0` / white text / radius 3px / 12px / 最小幅80px
- ライト: bg `#f7f5f5` / `#323232` text / padding 4px 12px

### ヘッダー

- bg: white（`#fff`）
- 下ボーダー: `1px solid #e1dcdc`
- 高さ: `86px`
- 固定（fixed top）、z-index: 2
- ナビ: テキスト色 `#323232` / 14px

### フッター

- ダーク帯: bg `#464343` / white text / padding 40px 0 72px
- ライト帯: bg `#f7f5f5`（AppストアCTA等）
- コピーライト: white / 12px / text-align center / margin-top 40px

### フォーム

- フォームグループ背景: `#ebf3ff`
- 必須ラベル: `#fa6414`
- 入力フィールドボーダー: `#a0a0a0` / radius 8px

---

## イメージ・アイコン

- **イラスト**: ヒーローにPNG形式のKVイメージ（デスクトップ/モバイル別）。ユーザーセグメント（個人事業主・法人）ごとに差し替え。
- **アイコン**: SVGアイコンライブラリ（`/static/`パス配下）。`ic_chevron_right`, `ic_arrow_left_blue` などの命名規則。すべてSVG。
- **プロダクトロゴ**: 各製品（freee会計、freee人事労務等）に専用SVGロゴあり。
- **写真**: 導入事例ページで写真使用、16:9・4:3のアスペクト比を`object-fit: cover`で統一。

---

## ロゴと使用ルール

- **標準ロゴ**: SVG、120×46.348px、fill `#2864f0`（青）+ `#ffffff`（白抜き）
- **白抜きロゴ**: SVG、136×52.528px、全fill `#ffffff`（フッターダーク帯専用）
- ロゴはテキスト要素なし（純粋なパス/シェイプ）
- 公式ブランドサイト（brand.freee.co.jp）が存在するが、アクセス制限のため詳細ガイドライン取得不可

**推奨**:
- 白/明るい背景 → 標準ロゴ（青）
- ダーク/`#464343`背景 → 白抜きロゴ

---

## Do / Don't

### Do
- ブルー階層を5段階で厳密に使い分ける（`#2864f0` → `#245ad6` → `#1e46aa` → `#23418c` → `#143278`）
- グレーは必ずウォームトーンを選ぶ（`#f7f5f5`, `#e1dcdc`, `#e9e7e7`）
- 行高は`1.5`を基準に、長文のみ`1.6`〜`1.8`に緩める
- ボタンはtransitionを必ずつける（`transition: .4s`）
- 日本語テキストはNoto Sans JPを必ずフォールバックスタックに含める
- セクション間隔は8pxの倍数で管理する（`8 → 16 → 24 → 32 → 40 → 80 → 120px`）

### Don't
- クールグレー（純粋な `#eeeeee` や `#f0f0f0`）を使わない → freeeのグレーは暖かみがある
- プライマリ青をテキストに単独使用しない（リンクとの識別不可）
- 600以上のウェイトで700未満を使わない（freeeは400・500・700の3段階）
- border-radiusに奇数値や非スケール値を使わない（4/5/8/16/20/50%/99emから選ぶ）
- オレンジ（`#fa6414`）をプライマリCTAに安易に使わない（「必須・警告」の意味を持つ色）
- ヒーロー以外でフォントサイズ44pxを使わない

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "freee",
    "name": "freee (フリー)",
    "url": "https://www.freee.co.jp/",
    "description": "「スモールビジネスを、世界の主役に。」をミッションとする統合型クラウドバックオフィス SaaS ブランド。会計・人事労務・請求書・開業支援など複数製品を統合するため、ビジュアルアイデンティティは『5 段階のディープブルー階層 (#2864f0 → #143278)』とウォームグレー (#f7f5f5 / #e1dcdc 等) の組み合わせで構成され、親しみやすさと専門的な信頼感を両立。クールグレーを意図的に避ける独自の色温度設計が特徴。ロゴは SVG 純パスのみ (テキスト要素なし)、フォントは Noto Sans JP を第一言語とするグローバル対応設計。",
    "category": "saas",
    "tags": [
      "b2b",
      "japanese",
      "saas",
      "fintech",
      "accounting",
      "blue-hierarchy",
      "warm-gray",
      "noto-sans-jp"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.freee.co.jp/",
    "https://www.freee.co.jp/accounting/",
    "https://www.freee.co.jp/www-freee-global.css",
    "https://www.freee.co.jp/component---src-pages-index-tsx.d696be7195919ffb304b.css",
    "https://www.freee.co.jp/static/1f4f72049d0c1690b533cb60cbe6468f/logo.svg",
    "https://www.freee.co.jp/static/f0af28635d0f504115b86fedb0f5234a/logo_white.svg",
    "https://brand.freee.co.jp/ (ページ保護のため一部取得不可)"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: primary (#2864f0) はロゴ SVG の fill 値として直接確認 (ダイレクトエビデンス)。",
    "直接証拠: 全カラー・タイポ・レイアウト値は公開 CSS (www-freee-global.css、2.6MB) を直接解析して抽出。",
    "制限: brand.freee.co.jp はページ内容最小限のため詳細取得不可 (インファレンスで補完した箇所あり)。",
    "推論: museo-sans はグローバル向けヘッダー等で部分使用、日本語ページのメインは Noto Sans JP。",
    "推論: orange アクセント (#fa6414) は主にフォーム必須ラベルと一部 CTA 変種に使用。",
    "重要: クールグレー (#eeeeee や #f0f0f0) は使わない — freee のグレーは赤みがかったウォームトーン (#f7f5f5 / #e1dcdc) で親しみを演出。",
    "重要: ブルーは 5 段階階層で厳密に使い分け、テキスト色として大段落に primary (#2864f0) を使わない (リンクとコントラスト差が消える)。",
    "重要: ウェイトは 400 / 500 / 700 の 3 段階のみ、600 以上は 700 に統一。",
    "重要: orange (#fa6414) は『必須・警告』の意味を持つ色、安易に CTA に使わない。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Blue Hierarchy (5 Levels)",
        "tokens": [
          {
            "name": "Primary",
            "value": "#2864f0",
            "token": "--color-primary",
            "role": "ロゴ・プライマリボタン・リンク・タグ背景。テキスト色には大段落で使わない"
          },
          {
            "name": "Primary Dark 1",
            "value": "#245ad6",
            "token": "--color-primary-dark-1",
            "role": "ボーダー・インタラクティブ要素・ホバー bg"
          },
          {
            "name": "Primary Dark 2",
            "value": "#1e46aa",
            "token": "--color-primary-dark-2",
            "role": "Strong ボタン背景・ダークホバー"
          },
          {
            "name": "Primary Dark 3",
            "value": "#23418c",
            "token": "--color-primary-dark-3",
            "role": "テキスト上のダークブルー"
          },
          {
            "name": "Primary Dark 4",
            "value": "#143278",
            "token": "--color-primary-dark-4",
            "role": "最深ホバー状態"
          },
          {
            "name": "Primary Mid",
            "value": "#3264dc",
            "token": "--color-primary-mid",
            "role": "中間トーン"
          },
          {
            "name": "Primary Light 1",
            "value": "#73a5ff",
            "token": "--color-primary-light-1",
            "role": "明るいブルーアクセント"
          },
          {
            "name": "Primary Light 2",
            "value": "#aac8ff",
            "token": "--color-primary-light-2",
            "role": "淡いブルー"
          }
        ]
      },
      {
        "label": "Blue Surfaces",
        "tokens": [
          {
            "name": "Primary Surface 1",
            "value": "#dce8ff",
            "token": "--color-primary-surface-1",
            "role": "ライトサーフェス"
          },
          {
            "name": "Primary Surface 2",
            "value": "#ebf3ff",
            "token": "--color-primary-surface-2",
            "role": "フォームグループ背景"
          },
          {
            "name": "Primary Surface 3",
            "value": "#f2f6fe",
            "token": "--color-primary-surface-3",
            "role": "デフォルトボタン背景 (セカンダリ)"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Darkest",
            "value": "#1a1a1a",
            "token": "--color-text-darkest",
            "role": "最濃テキスト (限定使用)"
          },
          {
            "name": "Text Primary",
            "value": "#323232",
            "token": "--color-text-primary",
            "role": "本文・見出し・カードタイトル"
          },
          {
            "name": "Text Secondary",
            "value": "#595959",
            "token": "--color-text-secondary",
            "role": "サブテキスト・キャプション"
          },
          {
            "name": "Text Muted",
            "value": "#999999",
            "token": "--color-text-muted",
            "role": "プレースホルダー・無効状態"
          }
        ]
      },
      {
        "label": "Warm Neutrals (Surfaces & Borders)",
        "tokens": [
          {
            "name": "Surface White",
            "value": "#ffffff",
            "token": "--color-surface-white",
            "role": "メイン背景・カード"
          },
          {
            "name": "Surface Near White",
            "value": "#fbfbfb",
            "token": "--color-surface-near-white",
            "role": "ほぼ白"
          },
          {
            "name": "Surface Off White",
            "value": "#fafafa",
            "token": "--color-surface-off-white",
            "role": "オフホワイト"
          },
          {
            "name": "Surface Light 1",
            "value": "#f7f5f5",
            "token": "--color-surface-light-1",
            "role": "ヒーロー背景・フッター下段 (僅かにウォームトーン)"
          },
          {
            "name": "Surface Light 2",
            "value": "#f5f5f5",
            "token": "--color-surface-light-2",
            "role": "ライトサーフェス"
          },
          {
            "name": "Surface Light 3",
            "value": "#f0eded",
            "token": "--color-surface-light-3",
            "role": "区切り背景"
          },
          {
            "name": "Border Light",
            "value": "#e9e7e7",
            "token": "--color-border-light",
            "role": "繊細なボーダー"
          },
          {
            "name": "Border Base",
            "value": "#e6e6e6",
            "token": "--color-border-base",
            "role": "一般ボーダー"
          },
          {
            "name": "Border Warm",
            "value": "#e1dcdc",
            "token": "--color-border-warm",
            "role": "ヘッダーボーダー・分割線 (ウォームトーン)"
          },
          {
            "name": "Border Mid",
            "value": "#d7d2d2",
            "token": "--color-border-mid",
            "role": "強めのボーダー"
          },
          {
            "name": "Disabled",
            "value": "#bdbdbd",
            "token": "--color-disabled",
            "role": "無効状態"
          },
          {
            "name": "Muted Mid",
            "value": "#a0a0a0",
            "token": "--color-muted-mid",
            "role": "入力フィールドボーダー"
          },
          {
            "name": "Footer Dark",
            "value": "#464343",
            "token": "--color-footer-dark",
            "role": "フッタダーク背景 (純黒ではなく僅かに茶みがかった暗色)"
          }
        ]
      },
      {
        "label": "Accent Colors",
        "tokens": [
          {
            "name": "Orange",
            "value": "#fa6414",
            "token": "--color-orange",
            "role": "必須フォームラベル・一部 CTA 変種。『必須・警告』の意味専用"
          },
          {
            "name": "Orange Dark",
            "value": "#be4b0f",
            "token": "--color-orange-dark",
            "role": "オレンジホバー"
          },
          {
            "name": "Orange Light",
            "value": "#ffaa78",
            "token": "--color-orange-light",
            "role": "明るいオレンジアクセント"
          },
          {
            "name": "Orange Surface",
            "value": "#fff0d2",
            "token": "--color-orange-surface",
            "role": "オレンジ背景"
          },
          {
            "name": "Yellow",
            "value": "#ffd278",
            "token": "--color-yellow",
            "role": "ハイライト・バッジ"
          },
          {
            "name": "Yellow Dark",
            "value": "#be8c14",
            "token": "--color-yellow-dark",
            "role": "イエロー強調"
          },
          {
            "name": "Yellow Light",
            "value": "#cdf0f0",
            "token": "--color-yellow-light",
            "role": "明るいイエローアクセント (実態は薄シアン)"
          },
          {
            "name": "Teal",
            "value": "#00b9b9",
            "token": "--color-teal",
            "role": "特定製品アクセント・ステータス"
          },
          {
            "name": "Red Error",
            "value": "#dc1e32",
            "token": "--color-red-error",
            "role": "エラー・警告状態"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans / Noto Sans JP",
        "stack": "'Noto Sans', 'Noto Sans JP', sans-serif",
        "weights": [
          400,
          500,
          700
        ],
        "role": "本文・見出し・UI 全般。日本語第一言語のグローバル対応設計。ウェイトは 400/500/700 の 3 段階のみ"
      },
      {
        "family": "Monospace",
        "stack": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
        "weights": [
          400
        ],
        "role": "コードブロック・等幅表示用"
      },
      {
        "family": "Museo Sans (Global Only)",
        "stack": "museo-sans",
        "weights": [
          400,
          700
        ],
        "role": "グローバル向けヘッダーで部分使用、国内製品ページでは使わない"
      }
    ],
    "scale": [
      {
        "role": "display (Hero)",
        "size": "44px",
        "weight": 500,
        "lineHeight": 1.5,
        "note": "ヒーロータイトル専用、他セクションでは使わない"
      },
      {
        "role": "h1",
        "size": "40px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "ページタイトル"
      },
      {
        "role": "h2",
        "size": "32px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "メジャーセクション見出し"
      },
      {
        "role": "h3 (Section)",
        "size": "24px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "セクション見出し"
      },
      {
        "role": "body-large",
        "size": "18px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "強調本文・ヒーローリード"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "本文ベースライン"
      },
      {
        "role": "body-small / card",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "カードテキスト・補助テキスト"
      },
      {
        "role": "label / tag",
        "size": "12px",
        "weight": 500,
        "lineHeight": 1.5,
        "note": "ラベル・タグ・キャプション"
      },
      {
        "role": "mono",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.6,
        "note": "コードブロック"
      }
    ],
    "japanese": {
      "fontStack": "'Noto Sans', 'Noto Sans JP', sans-serif",
      "lineHeight": 1.5,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "Noto Sans + Noto Sans JP のシンプルなスタック、Hiragino 系は含めない",
        "ウェイトは 400 / 500 / 700 の 3 段階運用 (600 以上は 700 に統一)",
        "line-height: 1.5 が支配的 (CSS 中 210 箇所)、長文は 1.6-1.8 に緩める",
        "letter-spacing は 0、特別な字間調整は行わない"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "xs",
        "value": "4px",
        "role": "最小余白"
      },
      {
        "name": "sm",
        "value": "8px",
        "role": "ベースユニット"
      },
      {
        "name": "md",
        "value": "12px",
        "role": "コンポーネント内余白"
      },
      {
        "name": "lg",
        "value": "16px",
        "role": "標準余白"
      },
      {
        "name": "xl",
        "value": "20px",
        "role": "中余白"
      },
      {
        "name": "2xl",
        "value": "24px",
        "role": "やや大"
      },
      {
        "name": "3xl",
        "value": "32px",
        "role": "コンテナサイドパディング"
      },
      {
        "name": "4xl",
        "value": "40px",
        "role": "セクション内グループ間"
      },
      {
        "name": "5xl",
        "value": "56px",
        "role": "大セクション間"
      },
      {
        "name": "6xl",
        "value": "80px",
        "role": "コンパクトセクション間隔"
      },
      {
        "name": "7xl",
        "value": "120px",
        "role": "デフォルトセクション間隔"
      },
      {
        "name": "container-max",
        "value": "1352px",
        "role": "コンテナ最大幅"
      },
      {
        "name": "container-padding",
        "value": "32px",
        "role": "コンテナ左右パディング (モバイルも同値)"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 519px",
      "role": "スマホ"
    },
    "tablet": {
      "value": "520-767px",
      "role": "タブレット以下"
    },
    "desktop": {
      "value": "≥ 768px",
      "role": "デスクトップ"
    }
  },
  "radius": {
    "small": "4px",
    "base": "5px",
    "medium": "8px",
    "large": "16px",
    "xl": "20px",
    "circle": "50%",
    "pill": "99em"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "プライマリブルー背景の主要 CTA。radius 5px の控えめな角丸",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#2864f0",
            "color": "#ffffff",
            "borderRadius": "5px",
            "fontSize": "16px",
            "fontWeight": "700",
            "padding": "12px 32px",
            "transition": "0.4s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#245ad6",
            "color": "#ffffff",
            "borderRadius": "5px",
            "fontSize": "16px",
            "fontWeight": "700",
            "padding": "12px 32px",
            "transition": "0.4s"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button",
      "description": "薄ブルー背景 + ブルー枠のセカンダリボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f2f6fe",
            "color": "#245ad6",
            "border": "1px solid #245ad6",
            "borderRadius": "5px",
            "fontSize": "16px",
            "fontWeight": "700",
            "padding": "12px 32px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#ebf3ff",
            "color": "#245ad6",
            "border": "1px solid #245ad6",
            "borderRadius": "5px",
            "fontSize": "16px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Outlined Button",
      "description": "白背景 + 太い 2px ブルー枠のアウトラインボタン。radius 8px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#2864f0",
            "border": "2px solid #2864f0",
            "borderRadius": "8px",
            "fontSize": "16px",
            "fontWeight": "700",
            "padding": "12px 16px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Strong Button (Large CTA)",
      "description": "ダークブルー背景 + 大きな角丸 16px の大型 CTA",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1e46aa",
            "color": "#ffffff",
            "borderRadius": "16px",
            "fontWeight": "700",
            "padding": "16px 40px",
            "fontSize": "16px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#143278",
            "color": "#ffffff",
            "borderRadius": "16px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Small Button",
      "description": "小型ボタン。radius 4px、padding 5px 8px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#2864f0",
            "color": "#ffffff",
            "borderRadius": "4px",
            "fontSize": "12px",
            "fontWeight": "500",
            "padding": "5px 8px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Tag (Pill)",
      "description": "ブルー背景の小型ピル型タグ。最小幅 80px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#2864f0",
            "color": "#ffffff",
            "borderRadius": "99em",
            "fontSize": "12px",
            "fontWeight": "500",
            "padding": "1px 8px",
            "minWidth": "80px"
          }
        },
        {
          "label": "Light",
          "props": {
            "background": "#f7f5f5",
            "color": "#323232",
            "borderRadius": "99em",
            "fontSize": "12px",
            "fontWeight": "500",
            "padding": "4px 12px"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "description": "白背景のコンテンツカード。ホバーでタイトルとテキストがダークブルーに",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#323232",
            "borderRadius": "8px",
            "titleFontSize": "16px",
            "titleFontWeight": "500",
            "textFontSize": "14px",
            "lineHeight": "1.5"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#ffffff",
            "color": "#245ad6",
            "borderRadius": "8px",
            "titleColor": "#245ad6",
            "textColor": "#245ad6",
            "imageOpacity": "0.9"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Header",
      "description": "白背景の固定ヘッダー (高さ 86px)。ウォームグレーの下ボーダー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#323232",
            "borderBottom": "1px solid #e1dcdc",
            "height": "86px",
            "position": "fixed",
            "zIndex": "2",
            "navFontSize": "14px"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Hero Section",
      "description": "ウォームグレー背景のヒーロー。コンテンツ 40% + 画像 60% の比率 (デスクトップ)",
      "variants": [
        {
          "label": "Desktop",
          "props": {
            "background": "#f7f5f5",
            "titleFontSize": "44px",
            "titleFontWeight": "500",
            "leadFontSize": "20px",
            "leadLineHeight": "1.5",
            "contentRatio": "40% / 60%"
          }
        },
        {
          "label": "Mobile",
          "props": {
            "background": "#f7f5f5",
            "titleFontSize": "32px",
            "layout": "縦積み逆順 (画像→テキスト)"
          }
        }
      ]
    },
    {
      "type": "form",
      "name": "Form Group",
      "description": "薄ブルー背景のフォームセクション。必須ラベルはオレンジ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ebf3ff",
            "paddingY": "120px",
            "requiredLabelColor": "#fa6414",
            "inputBorder": "#a0a0a0",
            "inputBorderRadius": "8px"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Text Link",
      "description": "本文中のテキストリンク。ホバーで下線表示",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#2864f0",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#2864f0",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer (Dark + Light)",
      "description": "2 層構造のフッター。ダーク帯 (#464343) + ライト帯 (#f7f5f5)",
      "variants": [
        {
          "label": "Dark Band",
          "props": {
            "background": "#464343",
            "color": "#ffffff",
            "paddingTop": "40px",
            "paddingBottom": "72px",
            "copyrightFontSize": "12px",
            "copyrightTextAlign": "center"
          }
        },
        {
          "label": "Light Band (App CTA)",
          "props": {
            "background": "#f7f5f5",
            "color": "#323232",
            "padding": "40px 0"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "ブルー階層を 5 段階で厳密に使い分ける (#2864f0 → #245ad6 → #1e46aa → #23418c → #143278)",
      "グレーは必ずウォームトーンを選ぶ (#f7f5f5 / #e1dcdc / #e9e7e7) — クールグレーは禁止",
      "行高は 1.5 を基準に、長文のみ 1.6-1.8 に緩める",
      "ボタンは transition を必ずつける (transition: .4s)",
      "日本語テキストには Noto Sans JP を必ずフォールバックスタックに含める",
      "セクション間隔は 8px の倍数で管理する (8 → 16 → 24 → 32 → 40 → 80 → 120px)",
      "ロゴは白/明るい背景には標準ロゴ (青)、ダーク背景には白抜きロゴを使用",
      "オレンジ (#fa6414) は必須フォームラベル・警告メッセージ専用",
      "ウェイトは 400 / 500 / 700 の 3 段階のみ使う"
    ],
    "dont": [
      "クールグレー (純粋な #eeeeee や #f0f0f0) を使わない — freee のグレーは暖かみがある",
      "プライマリ青 (#2864f0) をテキストに単独使用しない (リンクとの識別不可)",
      "600 以上のウェイトで 700 未満を使わない (freee は 400・500・700 の 3 段階)",
      "border-radius に奇数値や非スケール値を使わない (4/5/8/16/20/50%/99em から選ぶ)",
      "オレンジ (#fa6414) をプライマリ CTA に安易に使わない (『必須・警告』の意味を持つ色)",
      "ヒーロー以外でフォントサイズ 44px を使わない",
      "ロゴをテキストや装飾と組み合わせない (純粋な SVG パスのみ)",
      "museo-sans を国内製品ページで使わない (グローバルヘッダー専用)"
    ]
  }
}