A unified, performance-first design language for beautiful interfaces
A carefully crafted color system for consistent visual harmony
#6366f1
#8b5cf6
#ec4899
#10b981
#f59e0b
#ef4444
Clear, readable type scales for every use case
Large Text - 18px. Perfect for introductions and lead paragraphs.
Body Text - 16px. The standard text size for comfortable reading and optimal legibility.
Small Text - 14px. Ideal for captions, labels, and secondary information.
Tiny Text - 12px. For metadata and fine print.
Consistent spacing based on an 8px grid system
Reusable UI components for consistent experiences
Cards are versatile containers for grouping related content and actions.
This card has a subtle hover effect for interactive elements.
Highlighted cards draw attention to important content.
Smooth, performant animations using CSS transforms and GPU acceleration
Fade In
Slide Up
Scale
Rotate
Bounce
Pulse
All animations use CSS transforms and opacity for GPU acceleration. Animations respect
prefers-reduced-motion for accessibility.
Flexible progress indicators for loading states and task completion
Performant loading indicators using CSS animations
Small
Default
Large
Dual Ring
Success
Warning
Danger
Bouncing Dots
Ping
Audio Bars
Accessible modal dialogs with focus trapping and keyboard support
Themed scrollbars that adapt to light and dark mode automatically
This is a basic dialog with a header, body, and footer. It closes when you click the backdrop, the close button, or press Escape.
Dialogs automatically adapt to dark mode using the var(--color-surface) and
var(--color-border) design tokens.
Are you sure you want to delete this item? This action cannot be undone.
How to use this design system in your project
Link the stylesheet in your HTML <head>:
<link rel="stylesheet" href="https://theme.sardelka.cc/styles.css">Include the script for interactive features like dark mode:
<script src="https://theme.sardelka.cc/script.js"></script>Use pre-defined classes to style your content:
<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>