Fluid Framework

A modern, semantic CSS design system. Like water: adaptable, natural, powerful yet gentle.

No build step. No JavaScript required. Just CSS.

Explore Components

Choose Your Theme

Seven complete themes with motion, colors, fonts, and layout.

Examples

Foundation

Base HTML elements - typography, forms, tables, and more.

Components

Buttons, cards, navigation, form controls.

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

7 Complete Themes

Motion, colors, fonts, layout

View Transitions

Unique page transitions per theme

9 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>