Customization
Swap this CTA color to your brand accent. Here's how to make each kit yours.
Change Brand Colors
Open tokens.css and update the color variables:
/* tokens.css — change these to your brand */ :root { --color-primary: #FF6B4A; /* ← your brand color */ --color-primary-light: #FFE8E3; --color-primary-dark: #C03D1F; --color-accent: #14B8A6; /* ← secondary accent */ }
Tip from Pixel: Use a contrast checker to verify your new colors meet WCAG AA (4.5:1 for text, 3:1 for UI).
Swap Fonts
Update the font-family variables to use your brand fonts:
:root { --font-display: 'Your Heading Font', system-ui, sans-serif; --font-body: 'Your Body Font', system-ui, sans-serif; --font-mono: 'Your Mono Font', monospace; }
Adjust Spacing
Every kit uses an 8pt spacing system. Modify the scale if needed:
:root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ }
Border Radius
Want sharper corners? Rounder? One variable change:
:root { --radius-sm: 6px; /* subtle rounding */ --radius-md: 10px; /* cards, inputs */ --radius-lg: 14px; /* panels, sections */ --radius-full: 9999px; /* pills, badges */ }
Using with Frameworks
UIKittiez kits are framework-agnostic. Import the tokens into any build system:
Tailwind CSS
Import tokens.json into your tailwind.config to extend your theme.
CSS-in-JS
Use tokens.json as your theme object in styled-components, Emotion, or Stitches.
Vanilla CSS
Import tokens.css at the top of your stylesheet. Done.