Fluid Framework
A modern, semantic CSS design system. Like water: adaptable, natural, powerful yet gentle.
No build step. No JavaScript required. Just CSS.
Choose Your Theme
Ten complete themes with motion, colors, fonts, and layout.
Examples
Foundation
Base HTML elements - typography, forms, tables, and more.
Components
17 UI components — buttons, cards, modals, tooltips, and more.
Positioning
Layout system - center, split, stack layouts.
Heroes
Full-width hero sections with themes and overlays.
Hero Picker
Interactive builder - design heroes visually and copy the code.
Features
10 Complete Themes
Motion, colors, fonts, layout
View Transitions
Unique page transitions per theme
10 Color Palettes
OKLCH-based, perceptually uniform
Auto Dark Mode
Respects system preferences
No Build Step
Works directly in browsers
Accessible
Focus states, reduced motion
Quick Start
<!-- Just link the CSS -->
<link rel="stylesheet" href="src/fluid.css">
<!-- Use semantic HTML with data attributes -->
<section data-layout="center" data-padding="lg">
<h1>Hello Fluid</h1>
<p>A serene design system.</p>
<button>Get Started</button>
</section>