本文へ移動

言語

08.3 — トークン

デザイントークン

すべての値は src/pages/design/_services/design-token.ts から生成されます。このページも同じオブジェクトを直接参照します。

セクション 1 — 色の役割

ダークとライトの組み合わせ

同じマニフェストから、ダークとライトの両方で 12 の色役割を提供します。値は OKLCH のまま利用できます。

background

ダーク

oklch(0.24895 0.04721 268.846)

ライト

oklch(0.97913 0 0)
surface

ダーク

oklch(0.28666 0.05973 271.590)

ライト

oklch(0.97913 0 0)
surface-raised

ダーク

oklch(0.31800 0.05832 272.076)

ライト

oklch(0.90903 0.01080 286.183)
foreground

ダーク

oklch(0.97913 0 0)

ライト

oklch(0.17707 0.01643 284.599)
prose

ダーク

oklch(0.97913 0 0)

ライト

oklch(0.31241 0.01420 285.549)
muted

ダーク

oklch(0.75595 0.02463 264.417)

ライト

oklch(0.46633 0.02572 285.360)
faint

ダーク

oklch(0.57154 0.02647 264.341)

ライト

oklch(0.62934 0.01186 286.054)
border

ダーク

oklch(0.34875 0.05705 272.451)

ライト

oklch(0.90903 0.01080 286.183)
border-strong

ダーク

oklch(0.40458 0.04187 270.170)

ライト

oklch(0.81020 0.01112 286.149)
primary

ダーク

oklch(0.54775 0.23552 294.711)

ライト

oklch(0.47753 0.21646 293.084)
primary-strong

ダーク

oklch(0.47753 0.21646 293.084)

ライト

oklch(0.47753 0.21646 293.084)
accent

ダーク

oklch(0.67233 0.17536 300.200)

ライト

oklch(0.54775 0.23552 294.711)

セクション 2 — 書体

書体見本

サンセリフ、モノスペース、意味ごとの書体役割を、マニフェストの値でそのまま表示します。

SANS

少ないほどよい

system-ui, sans-serif
MONO

すべての値 ÷ 8 → 4 → 2

'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
display

Gn8

88px / 96px · 700 · MOBILE 48px / 56px · 700
h1

Gn8

32px / 40px · 600
h2

Gn8

24px / 32px · 600
body

Gn8

16px / 24px · 500
bodyStrong

Gn8

16px / 24px · 500
utility

Gn8

12px / 16px · 500
code

Gn8

12px / 16px · 400

セクション 3 — 余白スケール

測られたリズム

各サンプルはマニフェストの spacing 値をそのまま使います。

  1. SPACE 0px
  2. SPACE 8px
  3. SPACE 16px
  4. SPACE 24px
  5. SPACE 32px
  6. SPACE 48px
  7. SPACE 64px
  8. SPACE 96px
  9. SPACE 128px
  10. SPACE 144px

セクション 4 — プリミティブ

共有する制約

RADIUS
0px — シャープな形状
MOTION / COLOR
160ms
MOTION / ENTER
240ms
MOTION / THEME
480ms

セクション 5 — 生成出力

ダウンロードとコード

すべての出力は design-token.ts から生成します。コードをコピーするか、必要な形式をダウンロードできます。

生成形式

Web CSS

ダウンロード gn8-tokens.css 
                /* Gn8 Design Tokens — Web (dark default) */
:root {
  --gn8-color-background: #182038;
  --gn8-color-surface: #202848;
  --gn8-color-surface-raised: #283050;
  --gn8-color-foreground: #f8f8f8;
  --gn8-color-prose: #f8f8f8;
  --gn8-color-muted: #a8b0c0;
  --gn8-color-faint: #707888;
  --gn8-color-border: #303858;
  --gn8-color-border-strong: #404860;
  --gn8-color-primary: #8040e8;
  --gn8-color-primary-strong: #6830c8;
  --gn8-color-accent: #a878f0;
  --gn8-font-family-sans: system-ui, sans-serif;
  --gn8-font-family-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --gn8-font-size-display: 88px;
  --gn8-line-height-display: 96px;
  --gn8-font-size-display-mobile: 48px;
  --gn8-line-height-display-mobile: 56px;
  --gn8-font-weight-display: 700;
  --gn8-font-size-h1: 32px;
  --gn8-line-height-h1: 40px;
  --gn8-font-weight-h1: 600;
  --gn8-font-size-h2: 24px;
  --gn8-line-height-h2: 32px;
  --gn8-font-weight-h2: 600;
  --gn8-font-size-body: 16px;
  --gn8-line-height-body: 24px;
  --gn8-font-weight-body: 500;
  --gn8-font-weight-body-strong: 500;
  --gn8-font-size-utility: 12px;
  --gn8-line-height-utility: 16px;
  --gn8-font-weight-utility: 500;
  --gn8-font-size-code: 12px;
  --gn8-line-height-code: 16px;
  --gn8-font-weight-code: 400;
  --gn8-radius: 0px;
  --gn8-motion-color: 160ms;
  --gn8-motion-enter: 240ms;
  --gn8-motion-theme: 480ms;
  color-scheme: dark;
}

html[data-theme='light'] {
  --gn8-color-background: #f8f8f8;
  --gn8-color-surface: #f8f8f8;
  --gn8-color-surface-raised: #e0e0e8;
  --gn8-color-foreground: #101018;
  --gn8-color-prose: #303038;
  --gn8-color-muted: #585868;
  --gn8-color-faint: #888890;
  --gn8-color-border: #e0e0e8;
  --gn8-color-border-strong: #c0c0c8;
  --gn8-color-primary: #6830c8;
  --gn8-color-primary-strong: #6830c8;
  --gn8-color-accent: #8040e8;
  color-scheme: light;
}

生成形式

shadcn / Tailwind v4

ダウンロード gn8-shadcn.css 
                /* Gn8 Design Tokens — shadcn / Tailwind CSS v4 */
:root {
  --background: oklch(0.97913 0 0);
  --foreground: oklch(0.17707 0.01643 284.599);
  --card: oklch(0.97913 0 0);
  --card-foreground: oklch(0.17707 0.01643 284.599);
  --popover: oklch(0.97913 0 0);
  --popover-foreground: oklch(0.17707 0.01643 284.599);
  --primary: oklch(0.47753 0.21646 293.084);
  --primary-foreground: oklch(0.17707 0.01643 284.599);
  --secondary: oklch(0.97913 0 0);
  --secondary-foreground: oklch(0.17707 0.01643 284.599);
  --muted: oklch(0.90903 0.01080 286.183);
  --muted-foreground: oklch(0.46633 0.02572 285.360);
  --accent: oklch(0.90903 0.01080 286.183);
  --accent-foreground: oklch(0.54775 0.23552 294.711);
  --border: oklch(0.90903 0.01080 286.183);
  --input: oklch(0.90903 0.01080 286.183);
  --ring: oklch(0.54775 0.23552 294.711);
  --radius: 0rem;
}

.dark {
  --background: oklch(0.24895 0.04721 268.846);
  --foreground: oklch(0.97913 0 0);
  --card: oklch(0.28666 0.05973 271.590);
  --card-foreground: oklch(0.97913 0 0);
  --popover: oklch(0.28666 0.05973 271.590);
  --popover-foreground: oklch(0.97913 0 0);
  --primary: oklch(0.54775 0.23552 294.711);
  --primary-foreground: oklch(0.97913 0 0);
  --secondary: oklch(0.28666 0.05973 271.590);
  --secondary-foreground: oklch(0.97913 0 0);
  --muted: oklch(0.31800 0.05832 272.076);
  --muted-foreground: oklch(0.75595 0.02463 264.417);
  --accent: oklch(0.31800 0.05832 272.076);
  --accent-foreground: oklch(0.67233 0.17536 300.200);
  --border: oklch(0.34875 0.05705 272.451);
  --input: oklch(0.34875 0.05705 272.451);
  --ring: oklch(0.67233 0.17536 300.200);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius: 0rem;
}

生成形式

構造化 JSON

ダウンロード gn8-tokens.json 
                {
  "color": {
    "background": {
      "dark": {
        "hex": "#182038",
        "oklch": "oklch(0.24895 0.04721 268.846)"
      },
      "light": {
        "hex": "#f8f8f8",
        "oklch": "oklch(0.97913 0 0)"
      }
    },
    "surface": {
      "dark": {
        "hex": "#202848",
        "oklch": "oklch(0.28666 0.05973 271.590)"
      },
      "light": {
        "hex": "#f8f8f8",
        "oklch": "oklch(0.97913 0 0)"
      }
    },
    "surface-raised": {
      "dark": {
        "hex": "#283050",
        "oklch": "oklch(0.31800 0.05832 272.076)"
      },
      "light": {
        "hex": "#e0e0e8",
        "oklch": "oklch(0.90903 0.01080 286.183)"
      }
    },
    "foreground": {
      "dark": {
        "hex": "#f8f8f8",
        "oklch": "oklch(0.97913 0 0)"
      },
      "light": {
        "hex": "#101018",
        "oklch": "oklch(0.17707 0.01643 284.599)"
      }
    },
    "prose": {
      "dark": {
        "hex": "#f8f8f8",
        "oklch": "oklch(0.97913 0 0)"
      },
      "light": {
        "hex": "#303038",
        "oklch": "oklch(0.31241 0.01420 285.549)"
      }
    },
    "muted": {
      "dark": {
        "hex": "#a8b0c0",
        "oklch": "oklch(0.75595 0.02463 264.417)"
      },
      "light": {
        "hex": "#585868",
        "oklch": "oklch(0.46633 0.02572 285.360)"
      }
    },
    "faint": {
      "dark": {
        "hex": "#707888",
        "oklch": "oklch(0.57154 0.02647 264.341)"
      },
      "light": {
        "hex": "#888890",
        "oklch": "oklch(0.62934 0.01186 286.054)"
      }
    },
    "border": {
      "dark": {
        "hex": "#303858",
        "oklch": "oklch(0.34875 0.05705 272.451)"
      },
      "light": {
        "hex": "#e0e0e8",
        "oklch": "oklch(0.90903 0.01080 286.183)"
      }
    },
    "border-strong": {
      "dark": {
        "hex": "#404860",
        "oklch": "oklch(0.40458 0.04187 270.170)"
      },
      "light": {
        "hex": "#c0c0c8",
        "oklch": "oklch(0.81020 0.01112 286.149)"
      }
    },
    "primary": {
      "dark": {
        "hex": "#8040e8",
        "oklch": "oklch(0.54775 0.23552 294.711)"
      },
      "light": {
        "hex": "#6830c8",
        "oklch": "oklch(0.47753 0.21646 293.084)"
      }
    },
    "primary-strong": {
      "dark": {
        "hex": "#6830c8",
        "oklch": "oklch(0.47753 0.21646 293.084)"
      },
      "light": {
        "hex": "#6830c8",
        "oklch": "oklch(0.47753 0.21646 293.084)"
      }
    },
    "accent": {
      "dark": {
        "hex": "#a878f0",
        "oklch": "oklch(0.67233 0.17536 300.200)"
      },
      "light": {
        "hex": "#8040e8",
        "oklch": "oklch(0.54775 0.23552 294.711)"
      }
    }
  },
  "spacing": [
    0,
    8,
    16,
    24,
    32,
    48,
    64,
    96,
    128,
    144
  ],
  "typography": {
    "sans": "system-ui, sans-serif",
    "mono": "'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
    "role": {
      "display": {
        "fontSize": "88px",
        "lineHeight": "96px",
        "fontWeight": 700,
        "mobileFontSize": "48px",
        "mobileLineHeight": "56px"
      },
      "h1": {
        "fontSize": "32px",
        "lineHeight": "40px",
        "fontWeight": 600
      },
      "h2": {
        "fontSize": "24px",
        "lineHeight": "32px",
        "fontWeight": 600
      },
      "body": {
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 500
      },
      "bodyStrong": {
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 500
      },
      "utility": {
        "fontSize": "12px",
        "lineHeight": "16px",
        "fontWeight": 500
      },
      "code": {
        "fontSize": "12px",
        "lineHeight": "16px",
        "fontWeight": 400
      }
    }
  },
  "radius": 0,
  "motion": {
    "color": "160ms",
    "enter": "240ms",
    "theme": "480ms"
  }
}

生成形式

VS Code settings.json

ダウンロード gn8-vscode-settings.json 
                {
  "workbench.colorCustomizations": {
    "editor.background": "#202848",
    "editor.foreground": "#f8f8f8",
    "editorLineNumber.foreground": "#707888",
    "activityBar.background": "#182038",
    "sideBar.background": "#182038",
    "panel.background": "#182038",
    "statusBar.background": "#182038",
    "titleBar.activeBackground": "#283050",
    "tab.activeBackground": "#303858",
    "terminal.background": "#202848",
    "terminal.foreground": "#f8f8f8",
    "button.background": "#8040e8",
    "button.foreground": "#f8f8f8",
    "focusBorder": "#a878f0"
  }
}

ユーザー設定に直接貼り付けられます。

生成形式

VS Code カラーテーマ

ダウンロード gn8-vscode-color-theme.json 
                {
  "name": "gn8",
  "type": "dark",
  "colors": {
    "editor.background": "#202848",
    "editor.foreground": "#f8f8f8",
    "editorLineNumber.foreground": "#707888",
    "activityBar.background": "#182038",
    "sideBar.background": "#182038",
    "panel.background": "#182038",
    "statusBar.background": "#182038",
    "titleBar.activeBackground": "#283050",
    "focusBorder": "#a878f0",
    "button.background": "#8040e8",
    "button.foreground": "#f8f8f8"
  },
  "tokenColors": [
    {
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "foreground": "#707888"
      }
    }
  ]
}

拡張機能パッケージから参照してください。単独での直接インストールはサポートしていません。

これらのトークン、CSS、JSON、VS Code テーマファイルは MIT License の対象です。ロゴファイルは対象外です。詳細は ロゴページ .