Slackwater
A small CSS design system built on one idea: the calm moment when the tide turns. One stylesheet, no framework, light and dark themes included.
<link rel="stylesheet" href="slackwater.css">
Color
Six named tokens do the work. Everything else is derived with color-mix or the theme variables (--bg, --surface, --ink, --muted, --accent).
Fog#E4EBE8
Foam#F5F8F6
Channel#12353F
Kelp#2C6B58
Tide#4F8A9B
Beacon#EDB82E
Type
Bricolage Grotesque for headings, Figtree for reading. Headings run tight; body text keeps a 62 character measure.
Heading one
Heading two
Heading three
Body text sits at 1.0625rem with a 1.6 line height. Links keep a thin underline that thickens on hover.
Buttons and tags
Default
Live
Forms
We only use this to reply to you.
Callout and tide table
Heads up. Use a callout for one thing the reader shouldn't miss.
| Component | Class | Status |
|---|---|---|
| Button | .btn | Stable |
| Panel | .panel | Stable |
| Waves | .waves | Experimental |