Build interfaces that feel alive.

Prism is a proof-of-concept showcase of modern CSS — container queries, scroll animations, color-mix, :has, and more. No frameworks, no build step, just one file.

Get started Learn more
Features

Everything modern, nothing legacy

Hover a card to see :has() dim the others, and resize the window to watch container queries shift the layout.

✦

Container queries

Components adapt to their container, not just the viewport.

◐

Color-mix()

Blend colors in oklch for perceptually uniform palettes.

⟳

Scroll-driven

Reveal animations powered by animation-timeline.

◈

:has() selector

Parent-aware styling without a single line of JavaScript.

☾

Dark mode

Token-driven theming via a single data-attribute swap.

▲

Backdrop blur

Frosted-glass surfaces that stay performant.

0 kb
JS frameworks
1
HTML file
100%
Responsive
∞
Possibilities
Pricing

Simple, honest plans

Starter

$0/mo
  • Core features
  • Community support
  • 1 project
Choose

Pro

$19/mo
  • Everything in Starter
  • Unlimited projects
  • Priority support
  • Advanced analytics
Choose Pro

Team

$49/mo
  • Everything in Pro
  • Team collaboration
  • SSO & audit logs
Choose
FAQ

Questions, answered

Is this really one file?

Yes — HTML, CSS, and the tiny theme toggle all live in this document.

Does it work in older browsers?

Graceful degradation is built in. Scroll-driven animations and :has() fall back cleanly where unsupported.

Can I use this as a starter?

Absolutely. Fork it, strip what you don't need, and extend from the design tokens at the top.