Guide
Design Tokens: A Practical Workflow
How to structure a scalable token architecture for rapid theming.
Cards
Use .uk-card variants for elevated surfaces with hover lift and accent outlines. Combine with standard Bootstrap layout utilities.
Default Card
Simple card with gradient surface.
Glass Card
Frosted translucency with blur and glow.
Accent Card
Themed accent gradient & border.
Outline Card
Neutral outline border style.
Badges
Badges highlight status, tags or metrics. Combine .badge-uk with utility classes.
Default
Success
Danger
Warning
Info
Alerts
Neutral: System maintenance tonight.
Success: Profile updated.
Error: Something went wrong!
Warning: Storage nearing limit.
Carousel
Lightweight Bootstrap carousel with overlay captions and gradient fade edges.
Accordions
A portable design system built on Bootstrap for rapid development.
Yes. Copy individual components, sections, or utilities freely.
Dark/light theming uses CSS variables with a toggle in JS.
Tabs
Tabs use Bootstrap's tab plugin with custom pill styling.
<ul class="nav nav-tabs">...Add AOS attributes to each panel container for animated transitions.
Modals
Custom gradient backgrounds & shadow layer.
Toasts
Position container at top-right. Trigger via JS.
Progress & Counters
Progress 65%
0
Tables
| Plan | Users | Storage | Status |
|---|---|---|---|
| Starter | 3 | 1 GB | Active |
| Pro | 12 | 15 GB | Healthy |
| Enterprise | 120 | 250 GB | Scaling |
Timeline
v1.0 Release
Core components & theming established.
Core components & theming established.
v1.2 Utilities
Added gradient, glass, motion utilities.
Added gradient, glass, motion utilities.
v2.0 Expansion
Introduced pricing, timeline, steps.
Introduced pricing, timeline, steps.
Steps
Plan
Define project scope.
Define project scope.
Design
Create UI flows.
Create UI flows.
Build
Implement components.
Implement components.
Launch
Deploy & iterate.
Deploy & iterate.
Offcanvas
Useful for secondary navigation or settings.
Code Blocks
<div class="uk-card uk-card-glass">
<h5>Example</h5>
<p>Frosted utility with blur and accent glow.</p>
</div>
Tooltips
Use Bootstrap's tooltip plugin. We supply accent styling via .tooltip-uk.
Popovers
Accent themed popovers for additional context on focus/hover/click.
Spinners
Use for loading states. Accent variants available with .spinner-uk.
Range Slider
Custom styled range input with accent track fill.
File Upload
Styled file input wrapper with drag-hover state.
Pagination
Stats
0
Customers
0
Uptime %
0
Integrations
0
Countries
Testimonials
“This UI Kit let us assemble our MVP interface in a weekend.”
Alex Morgan
Product Lead
Product Lead
“Tokens & utilities are thoughtfully structured—super maintainable.”
Sara Lee
Engineering
Engineering
“Dark mode looks fantastic. The gradient accents pop.”
Michael Chen
Designer
Designer
Team
Jamie Fox
CEO
Aria Khan
CTO
Liam Stone
Design
Nina Vale
Growth
Gallery
CTA Banners
FAQ Mini
Can I use this commercially?
Yes, MIT licensed.
Supports light mode?
Toggle in the header.
Can I customize tokens?
Fully – adjust CSS variables.
Product Cards
Optimized for ecommerce / catalog layouts with image aspect ratio, rating and price.
NewIn stock
Wireless Headset Pro
$129 USD
HotShips 24h
Smart Home Hub Mini
$89 USD
FeaturedLow stock
4K Action Camera
$219 USD
Comparison Table
Highlight feature differences across plans; best value column emphasized.
| Feature | Starter | Pro Best | Scale |
|---|---|---|---|
| Projects | 3 | 25 | Unlimited |
| Team Members | 5 | 15 | Unlimited |
| Integrations | |||
| Analytics | |||
| Priority Support | |||
| SSO / SAML |
Blog Cards
Use for article listings and knowledge base summaries.
Update
Performance Tips for CSS Heavy UIs
Reduce layout thrash and leverage containment & will-change.
News
v2 Roadmap & Upcoming Patterns
Planned additions: lightbox, charts, advanced forms.
Floating Action Button (FAB)
Primary quick action. Use .uk-fab for fixed positioning; add data-fab for optional scroll show/hide.
Example:
<button class="uk-fab" data-fab>+</button>