Design tokens

All values are generated from src/pages/design/_services/design-token.ts. This page reads the same object directly.

SEC.1 — COLOR ROLES

Dark and light pairs

The same manifest defines all 12 color roles for light and dark themes. The values are available in OKLCH.

background: DARK
oklch(0.24895 0.04721 268.846)

LIGHT
oklch(0.97913 0 0)
surface: DARK
oklch(0.28666 0.05973 271.590)

LIGHT
oklch(0.97913 0 0)
surface-raised: DARK
oklch(0.31800 0.05832 272.076)

LIGHT
oklch(0.90903 0.01080 286.183)
foreground: DARK
oklch(0.97913 0 0)

LIGHT
oklch(0.17707 0.01643 284.599)
prose: DARK
oklch(0.97913 0 0)

LIGHT
oklch(0.31241 0.01420 285.549)
muted: DARK
oklch(0.75595 0.02463 264.417)

LIGHT
oklch(0.46633 0.02572 285.360)
faint: DARK
oklch(0.57154 0.02647 264.341)

LIGHT
oklch(0.62934 0.01186 286.054)
border: DARK
oklch(0.34875 0.05705 272.451)

LIGHT
oklch(0.90903 0.01080 286.183)
border-strong: DARK
oklch(0.40458 0.04187 270.170)

LIGHT
oklch(0.81020 0.01112 286.149)
primary: DARK
oklch(0.54775 0.23552 294.711)

LIGHT
oklch(0.47753 0.21646 293.084)
primary-strong: DARK
oklch(0.47753 0.21646 293.084)

LIGHT
oklch(0.47753 0.21646 293.084)
accent: DARK
oklch(0.67233 0.17536 300.200)

LIGHT
oklch(0.54775 0.23552 294.711)

SEC.2 — TYPOGRAPHY

Type specimens

This page renders the manifest values directly for sans, mono, and semantic type roles.

SANS: Less is More
system-ui, sans-serif
MONO: EVERY VALUE ÷ 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

SEC.3 — SPACING SCALE

Measured rhythm

Each sample uses its matching manifest spacing value.

SPACE 0px
SPACE 8px
SPACE 16px
SPACE 24px
SPACE 32px
SPACE 48px
SPACE 64px
SPACE 96px
SPACE 128px
SPACE 144px

SEC.4 — PRIMITIVES

Shared constraints

RADIUS: 0px — sharp geometry
MOTION / COLOR: 160ms
MOTION / ENTER: 240ms
MOTION / THEME: 480ms

SEC.5 — GENERATED OUTPUTS

Downloads and code

All outputs are generated from design-token.ts. Copy the code or download the format you need.

GENERATED FORMAT

Web CSS

Download 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;
}

GENERATED FORMAT

shadcn / Tailwind v4

Download 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;
}

GENERATED FORMAT

Structured JSON

Download 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"
  }
}

GENERATED FORMAT

VS Code settings.json

Download 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"
  }
}

Paste directly into User Settings.

GENERATED FORMAT

VS Code Color Theme

Download 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"
      }
    }
  ]
}

Reference from an extension package. Direct standalone installation is not supported.

These tokens, CSS, JSON, and VS Code theme files are available under the MIT License . Logo files are excluded; see the Logo page .