デザイントークン

                /* Gn8 Design Tokens — Web (Gn8 Dark default) */
:root {
  --gn8-color-background: oklch(16% 0.032 248);
  --gn8-color-surface: oklch(24% 0.032 248);
  --gn8-color-surface-raised: oklch(32% 0.032 248);
  --gn8-color-foreground: oklch(96% 0.008 248);
  --gn8-color-prose: oklch(96% 0.008 248);
  --gn8-color-muted: oklch(72% 0.008 248);
  --gn8-color-faint: oklch(56% 0.008 248);
  --gn8-color-border: oklch(40% 0.016 248);
  --gn8-color-border-strong: oklch(64% 0.008 248);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(72% 0.008 248);
  color-scheme: dark;
}

html[data-theme='light'] {
  --gn8-color-background: oklch(96% 0.008 88);
  --gn8-color-surface: oklch(96% 0.008 80);
  --gn8-color-surface-raised: oklch(96% 0.024 80);
  --gn8-color-foreground: oklch(40% 0.024 48);
  --gn8-color-prose: oklch(40% 0.024 48);
  --gn8-color-muted: oklch(48% 0.008 56);
  --gn8-color-faint: oklch(64% 0.008 56);
  --gn8-color-border: oklch(88% 0.04 88);
  --gn8-color-border-strong: oklch(48% 0.016 72);
  --gn8-color-focus: oklch(48% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(40% 0.16 320);
  --gn8-color-info-foreground: oklch(40% 0.08 200);
  --gn8-color-status-attention: oklch(48% 0.008 56);
  color-scheme: light;
}

html[data-theme='dark'] {
  --gn8-color-background: oklch(16% 0.032 248);
  --gn8-color-surface: oklch(24% 0.032 248);
  --gn8-color-surface-raised: oklch(32% 0.032 248);
  --gn8-color-foreground: oklch(96% 0.008 248);
  --gn8-color-prose: oklch(96% 0.008 248);
  --gn8-color-muted: oklch(72% 0.008 248);
  --gn8-color-faint: oklch(56% 0.008 248);
  --gn8-color-border: oklch(40% 0.016 248);
  --gn8-color-border-strong: oklch(64% 0.008 248);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(72% 0.008 248);
  color-scheme: dark;
}

html[data-theme='classic-light'] {
  --gn8-color-background: oklch(96% 0 0);
  --gn8-color-surface: oklch(96% 0 0);
  --gn8-color-surface-raised: oklch(88% 0 0);
  --gn8-color-foreground: oklch(24% 0 0);
  --gn8-color-prose: oklch(24% 0 0);
  --gn8-color-muted: oklch(40% 0 0);
  --gn8-color-faint: oklch(64% 0 0);
  --gn8-color-border: oklch(72% 0 0);
  --gn8-color-border-strong: oklch(48% 0 0);
  --gn8-color-focus: oklch(48% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(40% 0.16 320);
  --gn8-color-info-foreground: oklch(40% 0.08 200);
  --gn8-color-status-attention: oklch(40% 0 0);
  color-scheme: light;
}

html[data-theme='classic-dark'] {
  --gn8-color-background: oklch(24% 0 0);
  --gn8-color-surface: oklch(32% 0 0);
  --gn8-color-surface-raised: oklch(40% 0 0);
  --gn8-color-foreground: oklch(96% 0 0);
  --gn8-color-prose: oklch(96% 0 0);
  --gn8-color-muted: oklch(80% 0 0);
  --gn8-color-faint: oklch(64% 0 0);
  --gn8-color-border: oklch(48% 0 0);
  --gn8-color-border-strong: oklch(72% 0 0);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(80% 0 0);
  color-scheme: dark;
}

:root {
  --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 Design Tokens — shadcn / Tailwind CSS v4 */
:root {
  --gn8-color-background: oklch(16% 0.032 248);
  --gn8-color-surface: oklch(24% 0.032 248);
  --gn8-color-surface-raised: oklch(32% 0.032 248);
  --gn8-color-foreground: oklch(96% 0.008 248);
  --gn8-color-prose: oklch(96% 0.008 248);
  --gn8-color-muted: oklch(72% 0.008 248);
  --gn8-color-faint: oklch(56% 0.008 248);
  --gn8-color-border: oklch(40% 0.016 248);
  --gn8-color-border-strong: oklch(64% 0.008 248);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(72% 0.008 248);
  --background: oklch(16% 0.032 248);
  --foreground: oklch(96% 0.008 248);
  --card: oklch(24% 0.032 248);
  --card-foreground: oklch(96% 0.008 248);
  --popover: oklch(24% 0.032 248);
  --popover-foreground: oklch(96% 0.008 248);
  --primary: oklch(56% 0.16 320);
  --primary-foreground: oklch(96% 0 0);
  --secondary: oklch(32% 0.032 248);
  --secondary-foreground: oklch(96% 0.008 248);
  --muted: oklch(32% 0.032 248);
  --muted-foreground: oklch(72% 0.008 248);
  --accent: oklch(32% 0.032 248);
  --accent-foreground: oklch(80% 0.16 320);
  --border: oklch(40% 0.016 248);
  --input: oklch(64% 0.008 248);
  --ring: oklch(80% 0.16 320);
  --info-foreground: oklch(80% 0.08 200);
  --radius: 0rem;
  color-scheme: dark;
}

.dark {
  --gn8-color-background: oklch(24% 0 0);
  --gn8-color-surface: oklch(32% 0 0);
  --gn8-color-surface-raised: oklch(40% 0 0);
  --gn8-color-foreground: oklch(96% 0 0);
  --gn8-color-prose: oklch(96% 0 0);
  --gn8-color-muted: oklch(80% 0 0);
  --gn8-color-faint: oklch(64% 0 0);
  --gn8-color-border: oklch(48% 0 0);
  --gn8-color-border-strong: oklch(72% 0 0);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(80% 0 0);
  --background: oklch(24% 0 0);
  --foreground: oklch(96% 0 0);
  --card: oklch(32% 0 0);
  --card-foreground: oklch(96% 0 0);
  --popover: oklch(32% 0 0);
  --popover-foreground: oklch(96% 0 0);
  --primary: oklch(56% 0.16 320);
  --primary-foreground: oklch(96% 0 0);
  --secondary: oklch(40% 0 0);
  --secondary-foreground: oklch(96% 0 0);
  --muted: oklch(40% 0 0);
  --muted-foreground: oklch(80% 0 0);
  --accent: oklch(40% 0 0);
  --accent-foreground: oklch(80% 0.16 320);
  --border: oklch(48% 0 0);
  --input: oklch(72% 0 0);
  --ring: oklch(80% 0.16 320);
  --info-foreground: oklch(80% 0.08 200);
  --radius: 0rem;
  color-scheme: dark;
}

[data-theme='light'] {
  --gn8-color-background: oklch(96% 0.008 88);
  --gn8-color-surface: oklch(96% 0.008 80);
  --gn8-color-surface-raised: oklch(96% 0.024 80);
  --gn8-color-foreground: oklch(40% 0.024 48);
  --gn8-color-prose: oklch(40% 0.024 48);
  --gn8-color-muted: oklch(48% 0.008 56);
  --gn8-color-faint: oklch(64% 0.008 56);
  --gn8-color-border: oklch(88% 0.04 88);
  --gn8-color-border-strong: oklch(48% 0.016 72);
  --gn8-color-focus: oklch(48% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(40% 0.16 320);
  --gn8-color-info-foreground: oklch(40% 0.08 200);
  --gn8-color-status-attention: oklch(48% 0.008 56);
  --background: oklch(96% 0.008 88);
  --foreground: oklch(40% 0.024 48);
  --card: oklch(96% 0.008 80);
  --card-foreground: oklch(40% 0.024 48);
  --popover: oklch(96% 0.008 80);
  --popover-foreground: oklch(40% 0.024 48);
  --primary: oklch(56% 0.16 320);
  --primary-foreground: oklch(96% 0 0);
  --secondary: oklch(96% 0.024 80);
  --secondary-foreground: oklch(40% 0.024 48);
  --muted: oklch(96% 0.024 80);
  --muted-foreground: oklch(48% 0.008 56);
  --accent: oklch(96% 0.024 80);
  --accent-foreground: oklch(40% 0.16 320);
  --border: oklch(88% 0.04 88);
  --input: oklch(48% 0.016 72);
  --ring: oklch(48% 0.16 320);
  --info-foreground: oklch(40% 0.08 200);
  --radius: 0rem;
  color-scheme: light;
}

[data-theme='dark'] {
  --gn8-color-background: oklch(16% 0.032 248);
  --gn8-color-surface: oklch(24% 0.032 248);
  --gn8-color-surface-raised: oklch(32% 0.032 248);
  --gn8-color-foreground: oklch(96% 0.008 248);
  --gn8-color-prose: oklch(96% 0.008 248);
  --gn8-color-muted: oklch(72% 0.008 248);
  --gn8-color-faint: oklch(56% 0.008 248);
  --gn8-color-border: oklch(40% 0.016 248);
  --gn8-color-border-strong: oklch(64% 0.008 248);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(72% 0.008 248);
  --background: oklch(16% 0.032 248);
  --foreground: oklch(96% 0.008 248);
  --card: oklch(24% 0.032 248);
  --card-foreground: oklch(96% 0.008 248);
  --popover: oklch(24% 0.032 248);
  --popover-foreground: oklch(96% 0.008 248);
  --primary: oklch(56% 0.16 320);
  --primary-foreground: oklch(96% 0 0);
  --secondary: oklch(32% 0.032 248);
  --secondary-foreground: oklch(96% 0.008 248);
  --muted: oklch(32% 0.032 248);
  --muted-foreground: oklch(72% 0.008 248);
  --accent: oklch(32% 0.032 248);
  --accent-foreground: oklch(80% 0.16 320);
  --border: oklch(40% 0.016 248);
  --input: oklch(64% 0.008 248);
  --ring: oklch(80% 0.16 320);
  --info-foreground: oklch(80% 0.08 200);
  --radius: 0rem;
  color-scheme: dark;
}

[data-theme='classic-light'] {
  --gn8-color-background: oklch(96% 0 0);
  --gn8-color-surface: oklch(96% 0 0);
  --gn8-color-surface-raised: oklch(88% 0 0);
  --gn8-color-foreground: oklch(24% 0 0);
  --gn8-color-prose: oklch(24% 0 0);
  --gn8-color-muted: oklch(40% 0 0);
  --gn8-color-faint: oklch(64% 0 0);
  --gn8-color-border: oklch(72% 0 0);
  --gn8-color-border-strong: oklch(48% 0 0);
  --gn8-color-focus: oklch(48% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(40% 0.16 320);
  --gn8-color-info-foreground: oklch(40% 0.08 200);
  --gn8-color-status-attention: oklch(40% 0 0);
  --background: oklch(96% 0 0);
  --foreground: oklch(24% 0 0);
  --card: oklch(96% 0 0);
  --card-foreground: oklch(24% 0 0);
  --popover: oklch(96% 0 0);
  --popover-foreground: oklch(24% 0 0);
  --primary: oklch(56% 0.16 320);
  --primary-foreground: oklch(96% 0 0);
  --secondary: oklch(88% 0 0);
  --secondary-foreground: oklch(24% 0 0);
  --muted: oklch(88% 0 0);
  --muted-foreground: oklch(40% 0 0);
  --accent: oklch(88% 0 0);
  --accent-foreground: oklch(40% 0.16 320);
  --border: oklch(72% 0 0);
  --input: oklch(48% 0 0);
  --ring: oklch(48% 0.16 320);
  --info-foreground: oklch(40% 0.08 200);
  --radius: 0rem;
  color-scheme: light;
}

[data-theme='classic-dark'] {
  --gn8-color-background: oklch(24% 0 0);
  --gn8-color-surface: oklch(32% 0 0);
  --gn8-color-surface-raised: oklch(40% 0 0);
  --gn8-color-foreground: oklch(96% 0 0);
  --gn8-color-prose: oklch(96% 0 0);
  --gn8-color-muted: oklch(80% 0 0);
  --gn8-color-faint: oklch(64% 0 0);
  --gn8-color-border: oklch(48% 0 0);
  --gn8-color-border-strong: oklch(72% 0 0);
  --gn8-color-focus: oklch(80% 0.16 320);
  --gn8-color-primary: oklch(64% 0.16 320);
  --gn8-color-secondary: oklch(80% 0.24 96);
  --gn8-color-tertiary: oklch(72% 0.16 200);
  --gn8-color-on-color: oklch(24% 0 0);
  --gn8-color-button-background: oklch(56% 0.16 320);
  --gn8-color-button-foreground: oklch(96% 0 0);
  --gn8-color-accent: oklch(80% 0.16 320);
  --gn8-color-info-foreground: oklch(80% 0.08 200);
  --gn8-color-status-attention: oklch(80% 0 0);
  --background: oklch(24% 0 0);
  --foreground: oklch(96% 0 0);
  --card: oklch(32% 0 0);
  --card-foreground: oklch(96% 0 0);
  --popover: oklch(32% 0 0);
  --popover-foreground: oklch(96% 0 0);
  --primary: oklch(56% 0.16 320);
  --primary-foreground: oklch(96% 0 0);
  --secondary: oklch(40% 0 0);
  --secondary-foreground: oklch(96% 0 0);
  --muted: oklch(40% 0 0);
  --muted-foreground: oklch(80% 0 0);
  --accent: oklch(40% 0 0);
  --accent-foreground: oklch(80% 0.16 320);
  --border: oklch(48% 0 0);
  --input: oklch(72% 0 0);
  --ring: oklch(80% 0.16 320);
  --info-foreground: oklch(80% 0.08 200);
  --radius: 0rem;
  color-scheme: dark;
}

@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);
  --color-info-foreground: var(--info-foreground);
  --radius: 0rem;
}

              

                {
  "color": {
    "background": {
      "light": {
        "hex": "#f4f2ec",
        "oklch": "oklch(96% 0.008 88)"
      },
      "dark": {
        "hex": "#030e1a",
        "oklch": "oklch(16% 0.032 248)"
      },
      "classic-dark": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      },
      "classic-light": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      }
    },
    "surface": {
      "light": {
        "hex": "#f5f1ec",
        "oklch": "oklch(96% 0.008 80)"
      },
      "dark": {
        "hex": "#13212e",
        "oklch": "oklch(24% 0.032 248)"
      },
      "classic-dark": {
        "hex": "#333333",
        "oklch": "oklch(32% 0 0)"
      },
      "classic-light": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      }
    },
    "surface-raised": {
      "light": {
        "hex": "#faf0e0",
        "oklch": "oklch(96% 0.024 80)"
      },
      "dark": {
        "hex": "#263443",
        "oklch": "oklch(32% 0.032 248)"
      },
      "classic-dark": {
        "hex": "#484848",
        "oklch": "oklch(40% 0 0)"
      },
      "classic-light": {
        "hex": "#d7d7d7",
        "oklch": "oklch(88% 0 0)"
      }
    },
    "foreground": {
      "light": {
        "hex": "#53443d",
        "oklch": "oklch(40% 0.024 48)"
      },
      "dark": {
        "hex": "#eef2f7",
        "oklch": "oklch(96% 0.008 248)"
      },
      "classic-dark": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      },
      "classic-light": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      }
    },
    "prose": {
      "light": {
        "hex": "#53443d",
        "oklch": "oklch(40% 0.024 48)"
      },
      "dark": {
        "hex": "#eef2f7",
        "oklch": "oklch(96% 0.008 248)"
      },
      "classic-dark": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      },
      "classic-light": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      }
    },
    "muted": {
      "light": {
        "hex": "#615c59",
        "oklch": "oklch(48% 0.008 56)"
      },
      "dark": {
        "hex": "#a1a5a9",
        "oklch": "oklch(72% 0.008 248)"
      },
      "classic-dark": {
        "hex": "#bebebe",
        "oklch": "oklch(80% 0 0)"
      },
      "classic-light": {
        "hex": "#484848",
        "oklch": "oklch(40% 0 0)"
      }
    },
    "faint": {
      "light": {
        "hex": "#908b88",
        "oklch": "oklch(64% 0.008 56)"
      },
      "dark": {
        "hex": "#717579",
        "oklch": "oklch(56% 0.008 248)"
      },
      "classic-dark": {
        "hex": "#8c8c8c",
        "oklch": "oklch(64% 0 0)"
      },
      "classic-light": {
        "hex": "#8c8c8c",
        "oklch": "oklch(64% 0 0)"
      }
    },
    "border": {
      "light": {
        "hex": "#e2d7ba",
        "oklch": "oklch(88% 0.04 88)"
      },
      "dark": {
        "hex": "#414950",
        "oklch": "oklch(40% 0.016 248)"
      },
      "classic-dark": {
        "hex": "#5d5d5d",
        "oklch": "oklch(48% 0 0)"
      },
      "classic-light": {
        "hex": "#a4a4a4",
        "oklch": "oklch(72% 0 0)"
      }
    },
    "border-strong": {
      "light": {
        "hex": "#635c54",
        "oklch": "oklch(48% 0.016 72)"
      },
      "dark": {
        "hex": "#888d91",
        "oklch": "oklch(64% 0.008 248)"
      },
      "classic-dark": {
        "hex": "#a4a4a4",
        "oklch": "oklch(72% 0 0)"
      },
      "classic-light": {
        "hex": "#5d5d5d",
        "oklch": "oklch(48% 0 0)"
      }
    },
    "focus": {
      "light": {
        "hex": "#833794",
        "oklch": "oklch(48% 0.16 320)"
      },
      "dark": {
        "hex": "#eb9afd",
        "oklch": "oklch(80% 0.16 320)"
      },
      "classic-dark": {
        "hex": "#eb9afd",
        "oklch": "oklch(80% 0.16 320)"
      },
      "classic-light": {
        "hex": "#833794",
        "oklch": "oklch(48% 0.16 320)"
      }
    },
    "primary": {
      "light": {
        "hex": "#b668c8",
        "oklch": "oklch(64% 0.16 320)"
      },
      "dark": {
        "hex": "#b668c8",
        "oklch": "oklch(64% 0.16 320)"
      },
      "classic-light": {
        "hex": "#b668c8",
        "oklch": "oklch(64% 0.16 320)"
      },
      "classic-dark": {
        "hex": "#b668c8",
        "oklch": "oklch(64% 0.16 320)"
      }
    },
    "secondary": {
      "light": {
        "hex": "#edb800",
        "oklch": "oklch(80% 0.24 96)"
      },
      "dark": {
        "hex": "#edb800",
        "oklch": "oklch(80% 0.24 96)"
      },
      "classic-light": {
        "hex": "#edb800",
        "oklch": "oklch(80% 0.24 96)"
      },
      "classic-dark": {
        "hex": "#edb800",
        "oklch": "oklch(80% 0.24 96)"
      }
    },
    "tertiary": {
      "light": {
        "hex": "#00c1cc",
        "oklch": "oklch(72% 0.16 200)"
      },
      "dark": {
        "hex": "#00c1cc",
        "oklch": "oklch(72% 0.16 200)"
      },
      "classic-light": {
        "hex": "#00c1cc",
        "oklch": "oklch(72% 0.16 200)"
      },
      "classic-dark": {
        "hex": "#00c1cc",
        "oklch": "oklch(72% 0.16 200)"
      }
    },
    "on-color": {
      "light": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      },
      "dark": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      },
      "classic-light": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      },
      "classic-dark": {
        "hex": "#1f1f1f",
        "oklch": "oklch(24% 0 0)"
      }
    },
    "button-background": {
      "light": {
        "hex": "#9c4fae",
        "oklch": "oklch(56% 0.16 320)"
      },
      "dark": {
        "hex": "#9c4fae",
        "oklch": "oklch(56% 0.16 320)"
      },
      "classic-light": {
        "hex": "#9c4fae",
        "oklch": "oklch(56% 0.16 320)"
      },
      "classic-dark": {
        "hex": "#9c4fae",
        "oklch": "oklch(56% 0.16 320)"
      }
    },
    "button-foreground": {
      "light": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      },
      "dark": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      },
      "classic-light": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      },
      "classic-dark": {
        "hex": "#f2f2f2",
        "oklch": "oklch(96% 0 0)"
      }
    },
    "accent": {
      "light": {
        "hex": "#6b1d7b",
        "oklch": "oklch(40% 0.16 320)"
      },
      "dark": {
        "hex": "#eb9afd",
        "oklch": "oklch(80% 0.16 320)"
      },
      "classic-dark": {
        "hex": "#eb9afd",
        "oklch": "oklch(80% 0.16 320)"
      },
      "classic-light": {
        "hex": "#6b1d7b",
        "oklch": "oklch(40% 0.16 320)"
      }
    },
    "info-foreground": {
      "light": {
        "hex": "#005459",
        "oklch": "oklch(40% 0.08 200)"
      },
      "dark": {
        "hex": "#7cced2",
        "oklch": "oklch(80% 0.08 200)"
      },
      "classic-dark": {
        "hex": "#7cced2",
        "oklch": "oklch(80% 0.08 200)"
      },
      "classic-light": {
        "hex": "#005459",
        "oklch": "oklch(40% 0.08 200)"
      }
    },
    "status-attention": {
      "light": {
        "hex": "#615c59",
        "oklch": "oklch(48% 0.008 56)"
      },
      "dark": {
        "hex": "#a1a5a9",
        "oklch": "oklch(72% 0.008 248)"
      },
      "classic-dark": {
        "hex": "#bebebe",
        "oklch": "oklch(80% 0 0)"
      },
      "classic-light": {
        "hex": "#484848",
        "oklch": "oklch(40% 0 0)"
      }
    }
  },
  "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"
  },
  "themes": [
    {
      "id": "light",
      "label": "Gn8 Light",
      "appearance": "light",
      "rationale": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。"
    },
    {
      "id": "dark",
      "label": "Gn8 Dark",
      "appearance": "dark",
      "rationale": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。"
    },
    {
      "id": "classic-light",
      "label": "Gn8 Classic Light",
      "appearance": "light",
      "rationale": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。"
    },
    {
      "id": "classic-dark",
      "label": "Gn8 Classic Dark",
      "appearance": "dark",
      "rationale": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。"
    }
  ],
  "colorRationale": {
    "background": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 ページ全体の下地に使い、カードの外側やセクション間の余白を同じ色でつなぐ。ダッシュボードでは指標カードや表を載せる土台になる。カード面との色差が小さいテーマでは、余白や区切り線も使って内容をまとめる。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 ページ全体の下地に使い、カードの外側やセクション間の余白を同じ色でつなぐ。ダッシュボードでは指標カードや表を載せる土台になる。カード面との色差が小さいテーマでは、余白や区切り線も使って内容をまとめる。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 ページ全体の下地に使い、カードの外側やセクション間の余白を同じ色でつなぐ。ダッシュボードでは指標カードや表を載せる土台になる。カード面との色差が小さいテーマでは、余白や区切り線も使って内容をまとめる。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 ページ全体の下地に使い、カードの外側やセクション間の余白を同じ色でつなぐ。ダッシュボードでは指標カードや表を載せる土台になる。カード面との色差が小さいテーマでは、余白や区切り線も使って内容をまとめる。"
    },
    "surface": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 表、指標、図表をひとまとまりにする面の色。ダッシュボードの指標カードやグラフの背景に使い、ページの下地と役割を分ける。Classic Lightではbackgroundと同じ色になるため、カードのまとまりを色だけで伝えない。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 表、指標、図表をひとまとまりにする面の色。ダッシュボードの指標カードやグラフの背景に使い、ページの下地と役割を分ける。Classic Lightではbackgroundと同じ色になるため、カードのまとまりを色だけで伝えない。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 表、指標、図表をひとまとまりにする面の色。ダッシュボードの指標カードやグラフの背景に使い、ページの下地と役割を分ける。Classic Lightではbackgroundと同じ色になるため、カードのまとまりを色だけで伝えない。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 表、指標、図表をひとまとまりにする面の色。ダッシュボードの指標カードやグラフの背景に使い、ページの下地と役割を分ける。Classic Lightではbackgroundと同じ色になるため、カードのまとまりを色だけで伝えない。"
    },
    "surface-raised": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 カードの中で、入力する場所や補足情報のまとまりを示す面に使う。検索欄や注意帯など、周囲と区別したい小さな領域が対象になる。入力欄の境界はこの塗りだけに頼らず、border-strongの輪郭でも示す。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 カードの中で、入力する場所や補足情報のまとまりを示す面に使う。検索欄や注意帯など、周囲と区別したい小さな領域が対象になる。入力欄の境界はこの塗りだけに頼らず、border-strongの輪郭でも示す。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 カードの中で、入力する場所や補足情報のまとまりを示す面に使う。検索欄や注意帯など、周囲と区別したい小さな領域が対象になる。入力欄の境界はこの塗りだけに頼らず、border-strongの輪郭でも示す。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 カードの中で、入力する場所や補足情報のまとまりを示す面に使う。検索欄や注意帯など、周囲と区別したい小さな領域が対象になる。入力欄の境界はこの塗りだけに頼らず、border-strongの輪郭でも示す。"
    },
    "foreground": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 見出し、操作名、主要な数値など、画面を読むために必要な情報の基本色。指標カードの数値や表の主要な項目に使い、補助情報より先に読めるようにする。明るいブランド色の面や主操作ボタンでは、それぞれ専用の文字色を選ぶ。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 見出し、操作名、主要な数値など、画面を読むために必要な情報の基本色。指標カードの数値や表の主要な項目に使い、補助情報より先に読めるようにする。明るいブランド色の面や主操作ボタンでは、それぞれ専用の文字色を選ぶ。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 見出し、操作名、主要な数値など、画面を読むために必要な情報の基本色。指標カードの数値や表の主要な項目に使い、補助情報より先に読めるようにする。明るいブランド色の面や主操作ボタンでは、それぞれ専用の文字色を選ぶ。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 見出し、操作名、主要な数値など、画面を読むために必要な情報の基本色。指標カードの数値や表の主要な項目に使い、補助情報より先に読めるようにする。明るいブランド色の面や主操作ボタンでは、それぞれ専用の文字色を選ぶ。"
    },
    "prose": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 段落で読む説明や注意内容に使う本文の色。指標の意味を説明する文章や詳細画面の説明文に使い、長い文章でも文字を薄くしすぎない。現在はforegroundと同じ値だが、文章として読む部分の役割を明示している。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 段落で読む説明や注意内容に使う本文の色。指標の意味を説明する文章や詳細画面の説明文に使い、長い文章でも文字を薄くしすぎない。現在はforegroundと同じ値だが、文章として読む部分の役割を明示している。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 段落で読む説明や注意内容に使う本文の色。指標の意味を説明する文章や詳細画面の説明文に使い、長い文章でも文字を薄くしすぎない。現在はforegroundと同じ値だが、文章として読む部分の役割を明示している。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 段落で読む説明や注意内容に使う本文の色。指標の意味を説明する文章や詳細画面の説明文に使い、長い文章でも文字を薄くしすぎない。現在はforegroundと同じ値だが、文章として読む部分の役割を明示している。"
    },
    "muted": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 主な情報を補う、意味のある文字に使う。更新日、インシデントID、表の列名、グラフの軸ラベルなど、目立ちすぎずに読める必要がある箇所が対象になる。文字をさらに控えめに見せたくても、情報を読むために必要ならfaintへ置き換えない。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 主な情報を補う、意味のある文字に使う。更新日、インシデントID、表の列名、グラフの軸ラベルなど、目立ちすぎずに読める必要がある箇所が対象になる。文字をさらに控えめに見せたくても、情報を読むために必要ならfaintへ置き換えない。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 主な情報を補う、意味のある文字に使う。更新日、インシデントID、表の列名、グラフの軸ラベルなど、目立ちすぎずに読める必要がある箇所が対象になる。文字をさらに控えめに見せたくても、情報を読むために必要ならfaintへ置き換えない。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 主な情報を補う、意味のある文字に使う。更新日、インシデントID、表の列名、グラフの軸ラベルなど、目立ちすぎずに読める必要がある箇所が対象になる。文字をさらに控えめに見せたくても、情報を読むために必要ならfaintへ置き換えない。"
    },
    "faint": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 消えても内容の理解や操作に支障がない装飾に使う。背景の模様や意味を持たない補助線など、情報を担わない部分だけが対象になる。日付やプレースホルダー、操作を示すアイコンには使わず、必要な情報はmutedやforegroundで表示する。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 消えても内容の理解や操作に支障がない装飾に使う。背景の模様や意味を持たない補助線など、情報を担わない部分だけが対象になる。日付やプレースホルダー、操作を示すアイコンには使わず、必要な情報はmutedやforegroundで表示する。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 消えても内容の理解や操作に支障がない装飾に使う。背景の模様や意味を持たない補助線など、情報を担わない部分だけが対象になる。日付やプレースホルダー、操作を示すアイコンには使わず、必要な情報はmutedやforegroundで表示する。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 消えても内容の理解や操作に支障がない装飾に使う。背景の模様や意味を持たない補助線など、情報を担わない部分だけが対象になる。日付やプレースホルダー、操作を示すアイコンには使わず、必要な情報はmutedやforegroundで表示する。"
    },
    "border": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 隣り合う内容を静かに区切る線の色。表の行間やカードの区切りなど、文章と余白だけでもまとまりを理解できる場所に使う。入力欄や選択欄のように輪郭が操作箇所を示す場合は、border-strongを選ぶ。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 隣り合う内容を静かに区切る線の色。表の行間やカードの区切りなど、文章と余白だけでもまとまりを理解できる場所に使う。入力欄や選択欄のように輪郭が操作箇所を示す場合は、border-strongを選ぶ。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 隣り合う内容を静かに区切る線の色。表の行間やカードの区切りなど、文章と余白だけでもまとまりを理解できる場所に使う。入力欄や選択欄のように輪郭が操作箇所を示す場合は、border-strongを選ぶ。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 隣り合う内容を静かに区切る線の色。表の行間やカードの区切りなど、文章と余白だけでもまとまりを理解できる場所に使う。入力欄や選択欄のように輪郭が操作箇所を示す場合は、border-strongを選ぶ。"
    },
    "border-strong": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 入力や選択ができる場所の輪郭に使う。検索欄、期間の選択欄、枠線付きボタンなど、操作面の境界を周囲から見分けられるようにする。通常の区切り線にはborderを使い、キーボードで選ばれた操作箇所にはfocusを重ねて示す。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 入力や選択ができる場所の輪郭に使う。検索欄、期間の選択欄、枠線付きボタンなど、操作面の境界を周囲から見分けられるようにする。通常の区切り線にはborderを使い、キーボードで選ばれた操作箇所にはfocusを重ねて示す。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 入力や選択ができる場所の輪郭に使う。検索欄、期間の選択欄、枠線付きボタンなど、操作面の境界を周囲から見分けられるようにする。通常の区切り線にはborderを使い、キーボードで選ばれた操作箇所にはfocusを重ねて示す。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 入力や選択ができる場所の輪郭に使う。検索欄、期間の選択欄、枠線付きボタンなど、操作面の境界を周囲から見分けられるようにする。通常の区切り線にはborderを使い、キーボードで選ばれた操作箇所にはfocusを重ねて示す。"
    },
    "focus": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 キーボード操作で現在どの部品を選んでいるかを示す輪郭の色。Tabキーで移動した検索欄やボタンに表示し、次の入力や決定がどこへ届くかを伝える。通常の枠線やホバー表示とは別に、フォーカス中の輪郭を見える状態に保つ。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 キーボード操作で現在どの部品を選んでいるかを示す輪郭の色。Tabキーで移動した検索欄やボタンに表示し、次の入力や決定がどこへ届くかを伝える。通常の枠線やホバー表示とは別に、フォーカス中の輪郭を見える状態に保つ。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 キーボード操作で現在どの部品を選んでいるかを示す輪郭の色。Tabキーで移動した検索欄やボタンに表示し、次の入力や決定がどこへ届くかを伝える。通常の枠線やホバー表示とは別に、フォーカス中の輪郭を見える状態に保つ。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 キーボード操作で現在どの部品を選んでいるかを示す輪郭の色。Tabキーで移動した検索欄やボタンに表示し、次の入力や決定がどこへ届くかを伝える。通常の枠線やホバー表示とは別に、フォーカス中の輪郭を見える状態に保つ。"
    },
    "primary": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 4テーマで共通する、Gn8の基準となる紫。ブランドの色見本や図表の下塗りなど、ブランド色を面で見せる箇所に使う。主操作ボタンには文字との組み合わせを定めたbutton-backgroundを、リンクや系列線にはテーマに応じたaccentを使う。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 4テーマで共通する、Gn8の基準となる紫。ブランドの色見本や図表の下塗りなど、ブランド色を面で見せる箇所に使う。主操作ボタンには文字との組み合わせを定めたbutton-backgroundを、リンクや系列線にはテーマに応じたaccentを使う。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 4テーマで共通する、Gn8の基準となる紫。ブランドの色見本や図表の下塗りなど、ブランド色を面で見せる箇所に使う。主操作ボタンには文字との組み合わせを定めたbutton-backgroundを、リンクや系列線にはテーマに応じたaccentを使う。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 4テーマで共通する、Gn8の基準となる紫。ブランドの色見本や図表の下塗りなど、ブランド色を面で見せる箇所に使う。主操作ボタンには文字との組み合わせを定めたbutton-backgroundを、リンクや系列線にはテーマに応じたaccentを使う。"
    },
    "secondary": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 発見してほしい箇所を強調する、4テーマ共通の黄色。色見本や注目箇所のハイライトなどに使い、文字を載せる面には暗いon-colorを組み合わせる。警告や障害の重大度を示す意味は持たせず、注意内容は状態名と説明で伝える。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 発見してほしい箇所を強調する、4テーマ共通の黄色。色見本や注目箇所のハイライトなどに使い、文字を載せる面には暗いon-colorを組み合わせる。警告や障害の重大度を示す意味は持たせず、注意内容は状態名と説明で伝える。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 発見してほしい箇所を強調する、4テーマ共通の黄色。色見本や注目箇所のハイライトなどに使い、文字を載せる面には暗いon-colorを組み合わせる。警告や障害の重大度を示す意味は持たせず、注意内容は状態名と説明で伝える。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 発見してほしい箇所を強調する、4テーマ共通の黄色。色見本や注目箇所のハイライトなどに使い、文字を載せる面には暗いon-colorを組み合わせる。警告や障害の重大度を示す意味は持たせず、注意内容は状態名と説明で伝える。"
    },
    "tertiary": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 情報を示す面や補助図形に使う、4テーマ共通の青緑。パレットの色見本など、まとまった面積で色を見せる場合に使い、文字を載せるならon-colorを組み合わせる。小さな状態文字や細い進捗の線には、テーマに応じて明度を変えるinfo-foregroundを使う。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 情報を示す面や補助図形に使う、4テーマ共通の青緑。パレットの色見本など、まとまった面積で色を見せる場合に使い、文字を載せるならon-colorを組み合わせる。小さな状態文字や細い進捗の線には、テーマに応じて明度を変えるinfo-foregroundを使う。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 情報を示す面や補助図形に使う、4テーマ共通の青緑。パレットの色見本など、まとまった面積で色を見せる場合に使い、文字を載せるならon-colorを組み合わせる。小さな状態文字や細い進捗の線には、テーマに応じて明度を変えるinfo-foregroundを使う。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 情報を示す面や補助図形に使う、4テーマ共通の青緑。パレットの色見本など、まとまった面積で色を見せる場合に使い、文字を載せるならon-colorを組み合わせる。小さな状態文字や細い進捗の線には、テーマに応じて明度を変えるinfo-foregroundを使う。"
    },
    "on-color": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 明るいブランド色の面に載せる、共通の暗い文字色。primary、secondary、tertiaryの色見本に名前や値を表示するときに使い、サイトの明暗テーマが変わっても色面との組み合わせを保つ。主操作ボタンは背景が別の紫なので、button-foregroundを使う。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 明るいブランド色の面に載せる、共通の暗い文字色。primary、secondary、tertiaryの色見本に名前や値を表示するときに使い、サイトの明暗テーマが変わっても色面との組み合わせを保つ。主操作ボタンは背景が別の紫なので、button-foregroundを使う。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 明るいブランド色の面に載せる、共通の暗い文字色。primary、secondary、tertiaryの色見本に名前や値を表示するときに使い、サイトの明暗テーマが変わっても色面との組み合わせを保つ。主操作ボタンは背景が別の紫なので、button-foregroundを使う。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 明るいブランド色の面に載せる、共通の暗い文字色。primary、secondary、tertiaryの色見本に名前や値を表示するときに使い、サイトの明暗テーマが変わっても色面との組み合わせを保つ。主操作ボタンは背景が別の紫なので、button-foregroundを使う。"
    },
    "button-background": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 レポート作成など、その画面で主に実行してほしい操作の塗りに使う。primaryより暗いL=56%の紫にbutton-foregroundを組み合わせ、登録されたHEX近似値では約4.53:1のコントラストになる。文字色を変えたり半透明にしたりする場合は、この組み合わせの比率をそのまま当てはめない。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 レポート作成など、その画面で主に実行してほしい操作の塗りに使う。primaryより暗いL=56%の紫にbutton-foregroundを組み合わせ、登録されたHEX近似値では約4.53:1のコントラストになる。文字色を変えたり半透明にしたりする場合は、この組み合わせの比率をそのまま当てはめない。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 レポート作成など、その画面で主に実行してほしい操作の塗りに使う。primaryより暗いL=56%の紫にbutton-foregroundを組み合わせ、登録されたHEX近似値では約4.53:1のコントラストになる。文字色を変えたり半透明にしたりする場合は、この組み合わせの比率をそのまま当てはめない。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 レポート作成など、その画面で主に実行してほしい操作の塗りに使う。primaryより暗いL=56%の紫にbutton-foregroundを組み合わせ、登録されたHEX近似値では約4.53:1のコントラストになる。文字色を変えたり半透明にしたりする場合は、この組み合わせの比率をそのまま当てはめない。"
    },
    "button-foreground": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 button-backgroundの上に載せる、L=96%の白に近い中立色。レポート作成ボタンのラベルや、その操作を表すアイコンに使う。明るいprimaryやsecondaryの色面にも同じように使えるとは限らないため、ブランド色の面にはon-colorを選ぶ。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 button-backgroundの上に載せる、L=96%の白に近い中立色。レポート作成ボタンのラベルや、その操作を表すアイコンに使う。明るいprimaryやsecondaryの色面にも同じように使えるとは限らないため、ブランド色の面にはon-colorを選ぶ。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 button-backgroundの上に載せる、L=96%の白に近い中立色。レポート作成ボタンのラベルや、その操作を表すアイコンに使う。明るいprimaryやsecondaryの色面にも同じように使えるとは限らないため、ブランド色の面にはon-colorを選ぶ。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 button-backgroundの上に載せる、L=96%の白に近い中立色。レポート作成ボタンのラベルや、その操作を表すアイコンに使う。明るいprimaryやsecondaryの色面にも同じように使えるとは限らないため、ブランド色の面にはon-colorを選ぶ。"
    },
    "accent": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 リンク文字やグラフの系列線など、細い部分で使う紫。詳細を開くリンクやグラフの凡例に使い、明るいテーマでは暗く、暗いテーマでは明るくして周囲から見分けやすくする。広い面の塗りはprimary、主操作ボタンはbutton-backgroundに役割を分ける。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 リンク文字やグラフの系列線など、細い部分で使う紫。詳細を開くリンクやグラフの凡例に使い、明るいテーマでは暗く、暗いテーマでは明るくして周囲から見分けやすくする。広い面の塗りはprimary、主操作ボタンはbutton-backgroundに役割を分ける。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 リンク文字やグラフの系列線など、細い部分で使う紫。詳細を開くリンクやグラフの凡例に使い、明るいテーマでは暗く、暗いテーマでは明るくして周囲から見分けやすくする。広い面の塗りはprimary、主操作ボタンはbutton-backgroundに役割を分ける。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 リンク文字やグラフの系列線など、細い部分で使う紫。詳細を開くリンクやグラフの凡例に使い、明るいテーマでは暗く、暗いテーマでは明るくして周囲から見分けやすくする。広い面の塗りはprimary、主操作ボタンはbutton-backgroundに役割を分ける。"
    },
    "info-foreground": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 情報状態を示す文字や、達成率を示す細い線に使う青緑。ダッシュボードの状態ラベルや進捗の表示に使い、小さな部分でも周囲から見分けやすいようテーマごとに明度を変える。広い面を塗るtertiaryとは分け、状態の意味は色だけでなくラベルでも伝える。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 情報状態を示す文字や、達成率を示す細い線に使う青緑。ダッシュボードの状態ラベルや進捗の表示に使い、小さな部分でも周囲から見分けやすいようテーマごとに明度を変える。広い面を塗るtertiaryとは分け、状態の意味は色だけでなくラベルでも伝える。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 情報状態を示す文字や、達成率を示す細い線に使う青緑。ダッシュボードの状態ラベルや進捗の表示に使い、小さな部分でも周囲から見分けやすいようテーマごとに明度を変える。広い面を塗るtertiaryとは分け、状態の意味は色だけでなくラベルでも伝える。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 情報状態を示す文字や、達成率を示す細い線に使う青緑。ダッシュボードの状態ラベルや進捗の表示に使い、小さな部分でも周囲から見分けやすいようテーマごとに明度を変える。広い面を塗るtertiaryとは分け、状態の意味は色だけでなくラベルでも伝える。"
    },
    "status-attention": {
      "light": "背景はL=96%・C=0.008・H=88°、カードは同じL/CのH=80°でわずかに分ける。操作面はL=96%・C=0.024・H=80°。本文はL=40%・C=0.024・H=48°の暖かな墨色、補助文字はL=48%、リンクと系列線はL=40%の紫にする。 注意内容や調査中の状態を示す、mutedと同じ値の中立色。ダッシュボードの注意帯やインシデントの状態表示で使い、状態名と説明を読んで状況を判断できるようにする。ブランドの黄色には警告の意味を持たせず、この色だけで重大度を区別しない。",
      "dark": "背景16%・カード24%・操作面32%をH=248°・C=0.032の青い面でそろえる。本文はL=96%・C=0.008・H=248°、補助文字は72%、リンクと系列線はL=80%の紫にする。 注意内容や調査中の状態を示す、mutedと同じ値の中立色。ダッシュボードの注意帯やインシデントの状態表示で使い、状態名と説明を読んで状況を判断できるようにする。ブランドの黄色には警告の意味を持たせず、この色だけで重大度を区別しない。",
      "classic-light": "背景とカードはC=0の96%で白寄りにそろえ、操作面だけ88%の中立色にする。補助文字は40%、リンクと系列線はL=40%の紫にする。 注意内容や調査中の状態を示す、mutedと同じ値の中立色。ダッシュボードの注意帯やインシデントの状態表示で使い、状態名と説明を読んで状況を判断できるようにする。ブランドの黄色には警告の意味を持たせず、この色だけで重大度を区別しない。",
      "classic-dark": "C=0の24%・32%・40%のチャコール面を維持する。補助文字はL=80%の中立色、リンクと系列線は必要な場所だけに置くL=80%の紫にする。 注意内容や調査中の状態を示す、mutedと同じ値の中立色。ダッシュボードの注意帯やインシデントの状態表示で使い、状態名と説明を読んで状況を判断できるようにする。ブランドの黄色には警告の意味を持たせず、この色だけで重大度を区別しない。"
    }
  }
}
              

                {
  "workbench.colorCustomizations": {
    "[Gn8 Light]": {
      "editor.background": "#f5f1ec",
      "editor.foreground": "#53443d",
      "editorLineNumber.foreground": "#615c59",
      "activityBar.background": "#f4f2ec",
      "sideBar.background": "#f4f2ec",
      "panel.background": "#f4f2ec",
      "statusBar.background": "#f4f2ec",
      "titleBar.activeBackground": "#faf0e0",
      "tab.activeBackground": "#e2d7ba",
      "terminal.background": "#f5f1ec",
      "terminal.foreground": "#53443d",
      "button.background": "#9c4fae",
      "button.foreground": "#f2f2f2",
      "focusBorder": "#833794"
    },
    "[Gn8 Dark]": {
      "editor.background": "#13212e",
      "editor.foreground": "#eef2f7",
      "editorLineNumber.foreground": "#a1a5a9",
      "activityBar.background": "#030e1a",
      "sideBar.background": "#030e1a",
      "panel.background": "#030e1a",
      "statusBar.background": "#030e1a",
      "titleBar.activeBackground": "#263443",
      "tab.activeBackground": "#414950",
      "terminal.background": "#13212e",
      "terminal.foreground": "#eef2f7",
      "button.background": "#9c4fae",
      "button.foreground": "#f2f2f2",
      "focusBorder": "#eb9afd"
    },
    "[Gn8 Classic Light]": {
      "editor.background": "#f2f2f2",
      "editor.foreground": "#1f1f1f",
      "editorLineNumber.foreground": "#484848",
      "activityBar.background": "#f2f2f2",
      "sideBar.background": "#f2f2f2",
      "panel.background": "#f2f2f2",
      "statusBar.background": "#f2f2f2",
      "titleBar.activeBackground": "#d7d7d7",
      "tab.activeBackground": "#a4a4a4",
      "terminal.background": "#f2f2f2",
      "terminal.foreground": "#1f1f1f",
      "button.background": "#9c4fae",
      "button.foreground": "#f2f2f2",
      "focusBorder": "#833794"
    },
    "[Gn8 Classic Dark]": {
      "editor.background": "#333333",
      "editor.foreground": "#f2f2f2",
      "editorLineNumber.foreground": "#bebebe",
      "activityBar.background": "#1f1f1f",
      "sideBar.background": "#1f1f1f",
      "panel.background": "#1f1f1f",
      "statusBar.background": "#1f1f1f",
      "titleBar.activeBackground": "#484848",
      "tab.activeBackground": "#5d5d5d",
      "terminal.background": "#333333",
      "terminal.foreground": "#f2f2f2",
      "button.background": "#9c4fae",
      "button.foreground": "#f2f2f2",
      "focusBorder": "#eb9afd"
    }
  }
}
              

VS Code のユーザー設定に貼り付けて使えます。

                {
  "name": "Gn8 Light",
  "type": "light",
  "colors": {
    "editor.background": "#f5f1ec",
    "editor.foreground": "#53443d",
    "editorLineNumber.foreground": "#615c59",
    "activityBar.background": "#f4f2ec",
    "sideBar.background": "#f4f2ec",
    "panel.background": "#f4f2ec",
    "statusBar.background": "#f4f2ec",
    "titleBar.activeBackground": "#faf0e0",
    "focusBorder": "#833794",
    "button.background": "#9c4fae",
    "button.foreground": "#f2f2f2"
  },
  "tokenColors": [
    {
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "foreground": "#615c59"
      }
    }
  ]
}
              

各テーマに合う JSON を VS Code のテーマ拡張機能に含めて使います。単体ではインストールできません。

                {
  "name": "Gn8 Dark",
  "type": "dark",
  "colors": {
    "editor.background": "#13212e",
    "editor.foreground": "#eef2f7",
    "editorLineNumber.foreground": "#a1a5a9",
    "activityBar.background": "#030e1a",
    "sideBar.background": "#030e1a",
    "panel.background": "#030e1a",
    "statusBar.background": "#030e1a",
    "titleBar.activeBackground": "#263443",
    "focusBorder": "#eb9afd",
    "button.background": "#9c4fae",
    "button.foreground": "#f2f2f2"
  },
  "tokenColors": [
    {
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "foreground": "#a1a5a9"
      }
    }
  ]
}
              

各テーマに合う JSON を VS Code のテーマ拡張機能に含めて使います。単体ではインストールできません。

                {
  "name": "Gn8 Classic Light",
  "type": "light",
  "colors": {
    "editor.background": "#f2f2f2",
    "editor.foreground": "#1f1f1f",
    "editorLineNumber.foreground": "#484848",
    "activityBar.background": "#f2f2f2",
    "sideBar.background": "#f2f2f2",
    "panel.background": "#f2f2f2",
    "statusBar.background": "#f2f2f2",
    "titleBar.activeBackground": "#d7d7d7",
    "focusBorder": "#833794",
    "button.background": "#9c4fae",
    "button.foreground": "#f2f2f2"
  },
  "tokenColors": [
    {
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "foreground": "#484848"
      }
    }
  ]
}
              

各テーマに合う JSON を VS Code のテーマ拡張機能に含めて使います。単体ではインストールできません。

                {
  "name": "Gn8 Classic Dark",
  "type": "dark",
  "colors": {
    "editor.background": "#333333",
    "editor.foreground": "#f2f2f2",
    "editorLineNumber.foreground": "#bebebe",
    "activityBar.background": "#1f1f1f",
    "sideBar.background": "#1f1f1f",
    "panel.background": "#1f1f1f",
    "statusBar.background": "#1f1f1f",
    "titleBar.activeBackground": "#484848",
    "focusBorder": "#eb9afd",
    "button.background": "#9c4fae",
    "button.foreground": "#f2f2f2"
  },
  "tokenColors": [
    {
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "foreground": "#bebebe"
      }
    }
  ]
}
              

各テーマに合う JSON を VS Code のテーマ拡張機能に含めて使います。単体ではインストールできません。