Layout
Responsive grid that degrades gracefully
Uses CSS Grid for structure, flexible gaps, and fluid sizing. Shrinks to a single column on smaller screens.
A modern, single‑file demo page that flexes CSS skills.
Glass panels, fluid type, responsive grids, accessible focus, tabs, modal, toast, and a theme toggle. Everything is in this one HTML file—great for proof‑of‑concept sites.
Fluid type via clamp()
Glass UI via backdrop-filter
Grid + responsive layout
Accessible components
Feature cards
Modern layout, modern polish—no frameworks.
Visual
Glassmorphism with accessible contrast
Backdrop blur + layered gradients + a restrained border system. Still readable in both light and dark themes.
UX
Accessible interactive states
Focus-visible rings, proper tab semantics, and reduced-motion support. Keyboard users shouldn’t feel like second-class citizens.
Components
Tabs + code block + a small form.
:root{
--bg: #0b0f17;
--card: color-mix(in oklab, #0f172a 80%, #000 20%);
--text: #e6edf6;
--accent: #7c3aed;
--radius-xl: 24px;
--h1: clamp(2.2rem, 3vw + 1.2rem, 4.1rem);
}.card{
border-radius: var(--radius-xl);
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card) 72%, transparent);
box-shadow: 0 10px 30px rgba(0,0,0,.12);
overflow: clip;
}Everything here is “real”: tabs have keyboard-friendly semantics, the modal uses <dialog>, and there’s a toast with a progress bar. The visual effects are CSS; the JS is just glue.
Pricing-style cards
Pure CSS: borders, gradients, hierarchy.
Starter
Simple
$0 / demo
A minimal POC layout to iterate quickly.
- Single HTML file
- Responsive grid
- Theme toggle
Pro
Recommended
$12 / month
Extra polish for a “modern SaaS feel”.
- Modal + toast components
- Accessible tabs
- Micro-interactions
Studio
Custom
$49 / month
For extended pages and additional sections.
- Design token system
- More page templates
- Component library