⚡ cascade layers · flex · grid
CSS that breathes.
style with intent.
A modern landing for the language that paints the web.
From custom properties to container queries — write once, cascade everywhere.
🎨
Cascade layers
@layer resets, tokens, components — explicit order, zero drama.
📐
Subgrid & flex
Align to the pixel. Nested grids, flexible rhythm.
⚙️
Custom properties
Design tokens that update live — no preprocessor required.
📱
Container queries
Components respond to their own width, not just the viewport.
/* style with modern cascade */
@layer base, tokens, components;
@layer tokens {
:root {
--bg: #09090b;
--surface: #18181b;
--text: #fafafa;
--accent: #c084fc;
}
}
@layer components {
.card {
background: var(--surface);
border: 1px solid color-mix(in srgb, --accent, transparent 60%);
border-radius: 1rem;
padding: 1.5rem;
container-type: inline-size;
}
}
/* ✨ responsive, scoped, elegant */