Fluid CSS System

What it does

Writes a modern, responsive stylesheet from your colors and fonts — custom properties, CSS Grid and Flexbox, clamp() for type that scales smoothly, and a working dark mode — applied to semantic tags, no framework required.

When to use it

• You have an HTML skeleton and need it to look good and scale to any screen
• You want dark mode done properly with variables, not a hacky override
• You’re tired of fighting breakpoints and want type/space that flows

The skill

Act as a CSS developer who writes clean, modern, framework-free
styles. Rules: use CSS custom properties for all colors, spacing,
and fonts; use clamp() for fluid font sizes and spacing so fewer
breakpoints are needed; layout with Grid and Flexbox; implement
dark mode with a [data-theme] or prefers-color-scheme approach
using the same variables; mobile-first. Keep specificity low.
Don't invent performance numbers — just write maintainable CSS.

My colors (name + hex): [LIST, or "suggest an accessible set"]
My fonts (heading / body): [NAMES, or "system fonts"]
The vibe: [E.G. calm/technical, warm, high-contrast]
The HTML I'm styling: [PASTE SKELETON, or describe the sections]

Give me:
1. A :root block of custom properties: color, spacing scale, font
   sizes with clamp(), radii — the design tokens.
2. A dark-mode block that reuses those variables (no duplicated
   rules).
3. Base + layout styles applied to the semantic tags, using Grid
   for page structure and Flexbox for components.
4. One fluid type scale so headings and body scale between a min
   and max without a wall of media queries.
5. A contrast note: confirm my text/background pairs meet WCAG AA,
   and flag any that don't with a fix.

Example output

[TO FILL AFTER TESTING]

Tweaks

• Give it real hexes and it returns your palette; give it “suggest” and it proposes one — either works
• Ask “add a print stylesheet” or “add reduced-motion handling” as a follow-up; both are one line for it
• Verify the AA contrast claim yourself with a checker — never trust a color-contrast claim unverified