Design system · v0.1 · June 2026

Grove.

A warm operating system for the Braden family. Nourishing your people, grounded in real life. One CSS link — and any HTML on the web inherits the system.

AudienceRich, Cher, Juniper & Sequoia
ReplacesCosmic · Hearth · newcosmic
Hosted atgrove.thebradenfamily.com

Use it in any HTML — one line.

<!-- Tokens + components, single import -->
<link rel="stylesheet" href="https://grove.thebradenfamily.com/css/main.css">

<!-- Or load tokens only -->
<link rel="stylesheet" href="https://grove.thebradenfamily.com/css/tokens.css">

Both --grove-* and shorter --bg / --fg / --accent aliases are exposed. Pick whichever names fit your project.

The palette, on paper.

Forest
#4A5E48
Juniper
#6E8A5E
Sequoia
#A6432F
Bark
#594332
Plum
#5C384A
Terracotta
#B65637
Butter
#DCB762
Rose
#C29390
Mist
#C9D6D2
Paper
#F2EBDD

Components.

Buttons
done tonight tomorrow
Family avatars
R
C
J
S
Tonight · Grill night
Coffee-rubbed flank steak.
+ char-grilled corn, herb yogurt, peaches.

Custom layout — just consume the variables.

<body class="grove">
  <div style="background: var(--surface); border: 1px solid var(--border); padding: var(--grove-s-5);">
    <h1 class="grove-display grove-display--lg">Six things, no shame.</h1>
    <span class="grove-eyebrow grove-eyebrow--accent">Today · Wednesday</span>
  </div>
</body>