A visual guide to the latest UI improvements, featuring glassmorphism, refined typography, and interactive elements.
A modern, frosted-glass effect used on navigation and cards to create depth and context.
Notice how the background blurs behind this element, creating a sense of hierarchy.
Refined font choices and gradient text for key emphasis points.
Used for headings and accents to add elegance.
Adds vibrancy to primary actions and keywords.
Subtle animations and hover states that make the interface feel alive.
This card lifts up and casts a colored shadow when hovered, inviting interaction.
Transitions are smooth (300ms) to ensure the UI feels responsive but not jarring.
A fresh OKLCH palette optimized for both light and dark modes.
Primary
var(--primary)
Secondary
var(--secondary)
Accent
var(--accent)
Background
var(--background)
Card
var(--card)