Cosmic Design System
Style.Guide.
100% custom code. Zero templates. Every pixel pushed.
Color System
Semantic color tokens that adapt between light and dark modes.
Backgrounds
--color-bg--color-surface--color-surface-elevatedText
--color-text--color-text-muted--color-text-dimAccents
--color-primaryblue → purple--color-borderTwo fonts. Infinite expression.
Fira Code for headings and code. Inter for body text.
Fira Code Ag
var(--font-mono)Inter Ag
var(--font-sans)Rhythm in whitespace.
An 8-pixel base grid creates consistent spatial relationships.
Spacing Scale
--space-1--space-2--space-3--space-4--space-5--space-6Component Anatomy
8px Grid
Soft corners.
Border radius tokens for consistent rounding across components.
--radius-none--radius-sm--radius-md--radius-lgScale with purpose.
Six heading levels create clear visual hierarchy.
Building blocks.
Buttons, cards, forms, and more. All styled for dark mode first.
Buttons
Form Elements
Card
Every element. Styled.
From blockquotes to tables, every HTML element receives thoughtful styling.
"The best way to predict the future is to invent it."
function hello() {
return "world";
}Press Ctrl + K to search
Structured data.
Clean table styling with subtle borders and clear hierarchy.
| Property | Value | Description |
|---|---|---|
--color-primary | #22d3ee | Main accent color |
--color-bg | #0a0a0f | Page background |
--radius-md | 8px | Medium border radius |
--font-mono | Fira Code | Monospace font family |
Interactive states.
Consistent hover feedback across cards, links, tags, and buttons.
Card Hover
Border turns primary, lifts up 2px
Tag Hover
Border and text turn primary
Button Hover
Primary brightens, secondary elevates
Gradient progress.
Reading progress bars use a smooth gradient from primary to purple.
Status signals.
Pulse dots and badges communicate live status at a glance.
Pulse Indicators
Status Badges
Visitor Badges
Neon glows.
Arcade games and interactive elements use glowing neon borders.
box-shadow: 0 0 20px rgba(34, 211, 238, 0.3)box-shadow: 0 0 20px rgba(168, 85, 247, 0.3)box-shadow: 0 0 20px rgba(34, 197, 94, 0.3)Blog post banners.
Interactive gradient hero with floating elements and subtle animations.
linear-gradient(135deg, #a855f7 → #3b82f6)radial-gradient with blur(60px)float 6s ease-in-out infiniteStart exploring.
Every component. Every color. Every detail.
Back to Blog