🎨 Cross-Platform: Terminals, Design Tokens & Web Frameworks

Beyond the IDE, ZeroToSaaS ships pre-generated design tokens and terminal color schemes for every one of the 20 theme variants — so your terminal, web app, and design tools share the same WCAG AAA-validated, CVD-safe palettes as your editor.

All artifacts are generated by scripts/export-tokens.js (run automatically as part of pnpm run build) and live in the tokens/ and terminals/ directories.

---

Design Tokens

File	Format	Usage
tokens/zerotosaas.css	CSS Custom Properties	:root = default light theme; 19 per-variant override blocks under [data-z2s-theme="<slug>"]
tokens/tailwind.preset.js	Tailwind CSS v3 preset	colors.z2s.* palette + darkMode selector hook
tokens/tailwind.v4.css	Tailwind CSS v4 @theme	--color-z2s-* custom properties for v4’s native CSS engine
tokens/zerotosaas.json	Style Dictionary / Figma Tokens Studio	Nested { color: { canvas: { value, type } } } structure, top-level keyed by theme label

CSS Custom Properties (any web project)

<!-- 1. Link the stylesheet -->
<link rel="stylesheet" href="tokens/zerotosaas.css" />

<!-- 2. Use the tokens anywhere -->
<style>
  body {
    background: var(--z2s-canvas);
    color: var(--z2s-fg);
  }
  .error-banner {
    color: var(--z2s-panic-fg);
    border-color: var(--z2s-panic-fg);
  }
  /* Switch to the Deuteranopia night variant: */
  html[data-z2s-theme="deuteranopia-night"] body {
    /* --z2s-canvas, --z2s-fg, etc. are automatically overridden */
  }
</style>

Available variant slugs: light, high-contrast, deuteranopia, protanopia, tritanopia, brown, green, purple, yellow, orange, and their -night counterparts.

Tailwind CSS v3

// tailwind.config.js
module.exports = {
  presets: [require("./tokens/tailwind.preset.js")],
  // Your other config...
};

<div class="bg-z2s-canvas text-z2s-fg">
  <button class="bg-z2s-info-fg text-z2s-canvas">Primary</button>
  <span class="text-z2s-panic-fg">Error</span>
</div>

Dark/night variants activate automatically when a parent element matches [data-z2s-theme*="night"]:

<html data-z2s-theme="light-night">
  <!-- bg-z2s-canvas, text-z2s-fg now resolve to the night palette -->
</html>

Tailwind CSS v4

/* app.css */
@import "tailwindcss";
@import "./tokens/tailwind.v4.css";

The @theme block registers --color-z2s-* custom properties, auto-generating bg-z2s-*, text-z2s-*, border-z2s-* utilities. Per-variant overrides use the same [data-z2s-theme="<slug>"] selector pattern as the CSS token file.

Figma Tokens Studio / Style Dictionary

Import tokens/zerotosaas.json directly:

• Figma Tokens Studio: Plugins → Tokens → Import → select tokens/zerotosaas.json. All 20 themes appear as token sets (ZeroToSaaS Light (Default), ZeroToSaaS Deuteranopia, etc.).
• Style Dictionary: point your config.json source at tokens/zerotosaas.json and use color/{key} references in your templates.

---

Terminal Color Schemes

Pre-generated schemes for 7 terminal emulators × 20 themes = 140 files under terminals/<terminal>/<slug>.<ext>. Each scheme maps the theme’s ANSI 0–15 colors, background, foreground, cursor, and selection — sourced directly from the theme’s own terminal.ansi* keys.

iTerm2 (macOS)

# 1. Double-click the .itermcolors file to import, or:
open terminals/iterm2/light.itermcolors

# 2. Then select it: iTerm2 → Settings → Profiles → Colors → Color Presets → ZeroToSaaS Light (Default)

macOS Terminal.app

# 1. Double-click the .terminal file — Terminal.app imports it automatically:
open terminals/macos-terminal/light.terminal

# 2. Or import via: Terminal → Settings → Profiles → ⚙️ → Import... → select the .terminal file
# 3. Set as default: right-click the profile → "Use as Default"

Note: .terminal files contain binary NSKeyedArchiver color blobs (NSColorSpace=2, null-terminated NSRGB) and require macOS plutil to generate. They are validated with plutil -lint during the build.

Windows Terminal

// 1. Open settings.json (Ctrl+, → "Open JSON file" in bottom-left)
// 2. Add the scheme to the "schemes" array:
{
  "schemes": [
    // ... your existing schemes ...
    // Paste the contents of terminals/windows-terminal/light.json here
  ],
  // 3. Reference it in a profile:
  "profiles": {
    "defaults": {
      "colorScheme": "ZeroToSaaS Light (Default)",
    },
  },
}

Alacritty

# ~/.config/alacritty/alacritty.toml
# Option A: import the generated file
import = ["/path/to/vsx-theme-zerotosaas/terminals/alacritty/light.toml"]

# Option B: copy the [colors.*] blocks directly into your config

Kitty

# 1. Copy the .conf file to Kitty's themes directory:
mkdir -p ~/.config/kitty/themes
cp terminals/kitty/light.conf ~/.config/kitty/themes/zerotosaas-light.conf

# 2. Load it in kitty.conf:
echo "include themes/zerotosaas-light.conf" >> ~/.config/kitty/kitty.conf

# 3. Reload: Ctrl+Shift+F5

Ghostty

# 1. Copy the .conf file to Ghostty's themes directory:
mkdir -p ~/.config/ghostty/themes
cp terminals/ghostty/light.conf ~/.config/ghostty/themes/zerotosaas-light.conf

# 2. Reference it in your Ghostty config:
echo "theme = zerotosaas-light" >> ~/.config/ghostty/config

Warp

# 1. Copy the .yaml file to Warp's themes directory:
mkdir -p ~/.warp/themes
cp terminals/warp/light.yaml ~/.warp/themes/zerotosaas_light.yaml
# 2. Restart Warp, then select: Settings → Appearance → Themes → zerotosaas_light

---

Regenerating Tokens & Terminal Schemes

# Regenerate only tokens + terminals (without rebuilding themes):
pnpm run tokens

# Or regenerate everything (themes + IDE configs + gallery + tokens + terminals):
pnpm run build

All artifacts are excluded from the published .vsix (see .vscodeignore) — they are build outputs for downstream consumers, not needed by the extension at runtime.

---

📖 See also: The 20 Theme Variants for the full palette reference of all 20 variants.