## Overview Kinetik components are designed to be easily customized. You can change colors, typography, spacing, and animations to match your brand perfectly. ## CSS Variables The foundation of Kinetik theming is CSS custom properties. Add these to your global stylesheet: ```css :root { /* Colors */ --accent: #4F46E5; --accent-dark: #4338CA; --accent-light: #EEF2FF; --accent-glow: rgba(79, 70, 229, 0.15); /* Typography */ --font-mono: 'IBM Plex Mono', monospace; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'DM Sans', sans-serif; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem; --space-8: 2rem; /* Animation */ --transition-fast: 150ms; --transition-base: 300ms; --transition-slow: 500ms; } ``` ## Changing the Accent Color To change the accent color throughout all components, update the CSS variables: Pick a primary color for your brand. We recommend a saturated color with good contrast. ```css :root { /* Example: Teal accent */ --accent: #0D9488; --accent-dark: #0F766E; --accent-light: #CCFBF1; --accent-glow: rgba(13, 148, 136, 0.15); } ``` Most Kinetik components use these variables directly. For components that use Tailwind classes, you can use the `theme()` function: ```tsx // Before className="bg-[#4F46E5]" // After - uses CSS variable className="bg-[var(--accent)]" ``` ## Popular Color Schemes Here are some pre-built color schemes you can use: ### Indigo (Default) ```css :root { --accent: #4F46E5; --accent-dark: #4338CA; --accent-light: #EEF2FF; } ``` ### Emerald ```css :root { --accent: #10B981; --accent-dark: #059669; --accent-light: #D1FAE5; } ``` ### Rose ```css :root { --accent: #F43F5E; --accent-dark: #E11D48; --accent-light: #FFE4E6; } ``` ### Orange ```css :root { --accent: #F97316; --accent-dark: #EA580C; --accent-light: #FFEDD5; } ``` Use a tool like [Tailwind Color Generator](https://uicolors.app) to create a complete color scale from your accent color. ## Typography Kinetik uses three font families: | Variable | Purpose | Default | |----------|---------|---------| | `--font-mono` | Code, technical text | IBM Plex Mono | | `--font-heading` | Headlines, buttons | Space Grotesk | | `--font-body` | Body text, paragraphs | DM Sans | ### Using Custom Fonts ```css /* Import your fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } ``` ## Tailwind Integration If you're using Tailwind, extend the theme to use CSS variables: ```js // tailwind.config.js module.exports = { theme: { extend: { colors: { accent: { DEFAULT: 'var(--accent)', dark: 'var(--accent-dark)', light: 'var(--accent-light)', }, }, fontFamily: { mono: ['var(--font-mono)'], heading: ['var(--font-heading)'], body: ['var(--font-body)'], }, }, }, } ``` Now you can use these throughout your project: ```tsx ``` ## Component-Level Customization Each component can also be customized directly via props and className: ```tsx // Override specific styles Custom Button // Different variants ``` ## Animation Customization Adjust animation timings and spring physics: ```tsx // Modify spring physics // Or use CSS variable for duration ``` ## Next Steps - Learn about [CSS Variables](/docs/customization/css-variables) in depth - Set up [Dark Mode](/docs/customization/dark-mode) support - Explore the [API Reference](/docs/api/hooks) for advanced customization

Theming

Theming