Getting Started
From download to first component in 5 minutes. Here's how.
1
Unpack Your Kit
After purchase, download and unzip your kit. Here's what you'll find:
kit-name/ ├── UIKit.html ← Open in browser (interactive components) ├── Dashboard-Mockup.svg ← Visual layout reference ├── DesignSystem.md ← Complete specs (tokens, accessibility) ├── DesignBrief.md ← 1-page philosophy + key features ├── BrandGuideline.md ← Color, typography, voice, usage ├── tokens.css ← CSS custom properties (copy-paste ready) ├── tokens.json ← Design tokens (Style Dictionary format) ├── components/ ← Individual HTML component snippets │ ├── buttons.html │ ├── cards.html │ ├── forms.html │ └── ... ├── README.md └── LICENSE.md
2
Explore the UIKit
Open UIKit.html in your browser. You'll see all components rendered with real styles:
- Hover over buttons and cards to see interaction states
- Tab through forms to test focus states
- Resize your browser to check responsive behavior
- View source to copy CSS from the style block
3
Use the Design Tokens
Copy tokens.css into your project and reference the variables:
/* In your CSS */ @import './tokens.css'; .my-button { background: var(--color-primary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-family: var(--font-display); }
4
Ship It
That's it. Copy components, use the tokens, reference the brand guide for consistency. Each kit is framework-agnostic — use with React, Vue, Svelte, Astro, or plain HTML/CSS. Purrfect spacing included.