Implementation

The system is designed to be implemented in Vue, Vite, Tailwind, and ordinary CSS variables. The same token model also works in React, Nuxt, and static docs.

CSS Variable Baseline

Start with tokens/payd-labs.css or copy this core into the app's global CSS:

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Nunito:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --color-primary: #10263E;
  --color-primary-light: #1a3a5c;
  --color-primary-dark: #0a1829;
  --color-accent: #18D26E;
  --color-accent-light: #4ae08e;
  --color-accent-dark: #12a557;
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;
  --color-surface-tertiary: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-medium: #cbd5e1;
  --color-text: #10263E;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Nunito", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --shadow-soft: 0 2px 8px -2px rgba(16, 38, 62, 0.08);
  --shadow-medium: 0 4px 16px -4px rgba(16, 38, 62, 0.12);
}

Tailwind Mapping

Tailwind v4 apps can define tokens in @theme. Tailwind v3 apps can map CSS variables in tailwind.config.js.

colors: {
  surface: {
    DEFAULT: 'var(--color-surface)',
    secondary: 'var(--color-surface-secondary)',
    tertiary: 'var(--color-surface-tertiary)'
  },
  border: {
    DEFAULT: 'var(--color-border)',
    medium: 'var(--color-border-medium)'
  },
  text: {
    DEFAULT: 'var(--color-text)',
    secondary: 'var(--color-text-secondary)',
    tertiary: 'var(--color-text-tertiary)'
  },
  accent: {
    DEFAULT: '#18D26E',
    light: '#4ae08e',
    dark: '#12a557'
  },
  kPrimary: {
    DEFAULT: '#10263E',
    light: '#1a3a5c',
    dark: '#0a1829'
  }
}

Base Styles

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

code, pre, .mono {
  font-family: var(--font-mono);
}

Theme Store Pattern

const isDark = ref(document.documentElement.classList.contains('dark'))

function initializeTheme(key: string) {
  const saved = localStorage.getItem(key)
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const next = saved ? saved === 'dark' : prefersDark
  document.documentElement.classList.toggle('dark', next)
  isDark.value = next
}

function toggleTheme(key: string) {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem(key, isDark.value ? 'dark' : 'light')
}

Adoption Checklist

• Use shared Payd logo URLs and switch by theme.
• Add the token CSS before writing app-specific components.
• Implement the authenticated shell before page-specific UI.
• Build cards, tables, badges, forms, and buttons from tokens.
• Keep internal implementation status out of user-facing UI.
• Verify desktop and mobile layout in a browser.
• Run a secret-pattern review when touching auth, env, deploy, or payment surfaces.