Apply Guide

# Design Application Guide How to apply extracted design tokens to different frontend stacks. ## Tailwind CSS Projects ### 1. Update tailwind.config.js / tailwind.config.ts ```js // tailwind.config.js module.exports = { theme: { extend: { colors: { bg: { page: '#0a0a0f', surface: '#13131a', elevated:'#1a1a2e', }, brand: { DEFAULT: '#7c3aed', hover: '#6d28d9', }, border: 'rgba(255,255,255,0.08)', text: { primary: '#ffffff', secondary: '#a0a0b8', muted: '#606080', } }, fontFamily: { sans: ['Inter', 'sans-serif'], }, borderRadius: { 'sm': '6px', 'md': '12px', 'lg': '20px', 'xl': '28px', }, boxShadow: { 'card': '0 4px 24px rgba(0,0,0,0.4)', 'glow': '0 0 24px rgba(124,58,237,0.3)', }, } } } ``` ### 2. Update globals.css for non-Tailwind properties ```css /* globals.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --gradient-hero: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); --gradient-subtle: radial-gradient(ellipse at top, rgba(124,58,237,0.15), transparent); --blur-glass: blur(16px); --transition: all 0.2s ease; } body { background-color: #0a0a0f; color: #ffffff; font-family: 'Inter', sans-serif; } ``` ### 3. Update component classes Go through the user's main components and replace hardcoded color/spacing classes with the new ones. Focus on: - `bg-*` → new background tokens - `text-*` → new text tokens - `border-*` → new border tokens - `rounded-*` → new radius tokens --- ## Plain CSS / CSS Modules Projects ### 1. Create/update design tokens file ```css /* styles/tokens.css or styles/globals.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Colors */ --color-bg-page: #0a0a0f; --color-bg-surface: #13131a; --color-bg-elevated: #1a1a2e; --color-text: #ffffff; --color-text-muted: #a0a0b8; --color-brand: #7c3aed; --color-brand-hover: #6d28d9; --color-border: rgba(255, 255, 255, 0.08); /* Typography */ --font-sans: 'Inter', sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Borders */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 9999px; /* Shadows & Effects */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.3); --blur-glass: blur(16px); /* Gradients */ --gradient-hero: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); /* Animation */ --transition: all 0.2s ease; } body { background: var(--color-bg-page); color: var(--color-text); font-family: var(--font-sans); line-height: 1.5; } ``` ### 2. Update component styles Replace hardcoded values with variables throughout component CSS files. Use find+replace for common patterns. --- ## styled-components / Emotion Projects ### 1. Update the theme object ```ts // theme.ts export const theme = { colors: { bg: { page: '#0a0a0f', surface: '#13131a', elevated:'#1a1a2e', }, text: { primary: '#ffffff', muted: '#a0a0b8', }, brand: '#7c3aed', border:'rgba(255,255,255,0.08)', }, fonts: { sans: "'Inter', sans-serif", }, radii: { sm: '6px', md: '12px', lg: '20px', pill: '9999px', }, shadows: { card: '0 4px 24px rgba(0,0,0,0.4)', glow: '0 0 24px rgba(124,58,237,0.3)', }, gradients: { hero: 'linear-gradient(135deg, #7c3aed 0%, #2563eb 100%)', }, transitions: { default: 'all 0.2s ease', }, } ``` --- ## Next.js / Nuxt Projects These are usually Tailwind or CSS Modules under the hood — apply the appropriate guide above. For Next.js specifically: - Global styles: `app/globals.css` (App Router) or `styles/globals.css` (Pages Router) - Tailwind config: `tailwind.config.ts` at root --- ## Component Priority Order Apply the design in this order for maximum impact with minimum risk: 1. **Global background + text colors** — immediate transformation, zero breakage risk 2. **Font import + font-family** — single line change, huge visual impact 3. **Navigation/header** — most visible, sets the tone 4. **Cards & containers** — background, border, radius, shadow 5. **Buttons** — color, shape, hover state 6. **Form inputs** — background, border, focus ring 7. **Typography scale** — heading sizes and weights 8. **Special effects** — glass blur, gradients, glows (do these last, they're icing) --- ## Glassmorphism Effect (Common in Modern SaaS/AI Sites) If the target site uses glass cards (common in dark AI/SaaS sites): ```css .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; } ``` In Tailwind: ```html