Design Tokens
All design tokens are generated from a single BrandIdentity source. Download in your preferred format or copy individual values.
Download
Spacing
Base unit: 4px. Values follow a geometric progression.
--spacing-0 0px --spacing-1 4px --spacing-2 8px --spacing-3 12px --spacing-4 16px --spacing-5 20px --spacing-6 24px --spacing-8 32px --spacing-10 40px --spacing-12 48px --spacing-16 64px --spacing-20 80px --spacing-24 96px Shadows
none none sm 1px 1px 2px 0px rgba(47, 36, 66, 0.05) md 2px 2px 4px -1px rgba(47, 36, 66, 0.08) lg 4px 4px 8px -2px rgba(47, 36, 66, 0.1) xl 8px 8px 16px -4px rgba(47, 36, 66, 0.12) 2xl 16px 16px 32px -8px rgba(47, 36, 66, 0.15) Border Radii
none 0px sm 2px md 4px lg 8px xl 12px full 9999px circle 9999px Motion
Durations
instant 0ms fast 80ms normal 150ms slow 250ms slower 350ms Easings
ease-in cubic-bezier(0.55, 0, 1, 1) ease-out cubic-bezier(0, 0, 0.1, 1) ease-in-out cubic-bezier(0.55, 0, 0.1, 1) spring cubic-bezier(0.2, 1.6, 0.4, 1) bounce cubic-bezier(0.2, 1.4, 0.4, 1) Gradients
hero linear 315° button linear 315° card linear 315° text linear 315° background linear 315° All CSS Tokens
:root {
--color-primary: #7c3aed;
--color-secondary: #5c6ee6;
--color-accent: #e12bfd;
--color-neutral-100: #f2f2f3;
--color-neutral-200: #e5e4e7;
--color-neutral-300: #cbc9cf;
--color-neutral-400: #98949e;
--color-neutral-500: #65616b;
--color-neutral-600: #323036;
--color-neutral-700: #19181b;
--color-neutral-800: #0d0c0d;
--color-success: #22c35d;
--color-warning: #f59f0a;
--color-error: #ef4343;
--color-info: #368fe7;
--font-heading: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 10.24px;
--leading-xs: 1.6;
--text-sm: 12.8px;
--leading-sm: 1.6;
--text-base: 16px;
--leading-base: 1.6;
--text-lg: 20px;
--leading-lg: 1.5;
--text-xl: 25px;
--leading-xl: 1.3;
--text-2xl: 31.25px;
--leading-2xl: 1.3;
--text-3xl: 39.06px;
--leading-3xl: 1.2;
--text-4xl: 48.83px;
--leading-4xl: 1.2;
--text-5xl: 61.04px;
--leading-5xl: 1.2;
--spacing-0: 0px;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;
--spacing-16: 64px;
--spacing-20: 80px;
--spacing-24: 96px;
--spacing-0.5: 2px;
--spacing-1.5: 6px;
--spacing-2.5: 10px;
--shadow-none: none;
--shadow-sm: 1px 1px 2px 0px rgba(47, 36, 66, 0.05);
--shadow-md: 2px 2px 4px -1px rgba(47, 36, 66, 0.08);
--shadow-lg: 4px 4px 8px -2px rgba(47, 36, 66, 0.1);
--shadow-xl: 8px 8px 16px -4px rgba(47, 36, 66, 0.12);
--shadow-2xl: 16px 16px 32px -8px rgba(47, 36, 66, 0.15);
--radius-none: 0px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
--radius-circle: 9999px;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--duration-instant: 0ms;
--duration-fast: 80ms;
--duration-normal: 150ms;
--duration-slow: 250ms;
--duration-slower: 350ms;
--ease-ease-in: cubic-bezier(0.55, 0, 1, 1);
--ease-ease-out: cubic-bezier(0, 0, 0.1, 1);
--ease-ease-in-out: cubic-bezier(0.55, 0, 0.1, 1);
--ease-spring: cubic-bezier(0.2, 1.6, 0.4, 1);
--ease-bounce: cubic-bezier(0.2, 1.4, 0.4, 1);
--transition-fade: opacity 150ms cubic-bezier(0, 0, 0.1, 1);
--transition-slide: transform 150ms cubic-bezier(0, 0, 0.1, 1);
--transition-scale: transform 80ms cubic-bezier(0, 0, 0.1, 1);
--transition-color: color 250ms cubic-bezier(0, 0, 0.1, 1), background-color 250ms cubic-bezier(0, 0, 0.1, 1);
--transition-all: all 150ms cubic-bezier(0, 0, 0.1, 1);
--gradient-hero: linear-gradient(315deg, #7c3bed 0%, #5c6ee6 100%);
--gradient-button: linear-gradient(315deg, #e12bfd 0%, #7c3bed 100%);
--gradient-card: linear-gradient(315deg, #f2f2f3 0%, #cacace 100%);
--gradient-text: linear-gradient(315deg, #7c3bed 0%, #e12bfd 100%);
--gradient-background: linear-gradient(315deg, #f2f2f3 0%, #0d0c0d 100%);
}