# Grove — design system A warm operating system for the Braden family. Nourishing your people. Grounded in real life. Grove replaces the prior **Cosmic / Hearth / newcosmic** directions. It keeps the Apple-inspired softness and family-edition warmth, but commits to a printed-page canvas, a single decisive terracotta accent, and a small tree-derived palette tied to the kids' names. --- ## Tokens ``` --bg #F2EBDD warm cream paper canvas --surface #FAF6EC lighter card surface --surface-2 #EAE0CC recessed / inset --fg #2A1F18 deep coffee ink --muted #7B6A5A warm gray-brown --border #E0D4BD hairline taupe --accent #B65637 terracotta (signature) --accent-soft #DC8A66 peach ``` Both `--grove-*` and shorter `--bg / --fg / --accent` aliases are exported by `tokens.css`. Pick whichever fits your project. ### Family palette (tree-derived per kid name) ``` --forest #4A5E48 deep forest, headlines on light cards --juniper #6E8A5E Juniper's color — sage juniper --sage #A7B597 light sage, supporting --sequoia #A6432F Sequoia's color — sequoia bark red --bark #594332 Rich's color — warm bark --butter #DCB762 butter yellow, signals warmth / meals --plum #5C384A Cher's color — plum --rose #C29390 dusty rose, secondary signal --mist #C9D6D2 misty blue-green, supporting ``` ### Per-family-member contract Keep these stable across every Grove surface so a family member is recognizable by their dot anywhere in the system. | Person | Token | Value | |----------|--------------|-----------| | Rich | `--grove-rich` | `#594332` (bark) | | Cher | `--grove-cher` | `#5C384A` (plum) | | Juniper | `--grove-juniper-kid` | `#6E8A5E` (juniper) | | Sequoia | `--grove-sequoia-kid` | `#A6432F` (sequoia) | --- ## Typography - **Display**: Iowan Old Style → Charter → Bookman Old Style → Georgia, serif. Warm slab-ish serif. Used for headlines, wordmark, big section labels. - **Body**: SF Pro Text → system-ui sans. Quiet, readable. Used for everything that isn't a headline. - **Mono**: SF Mono → IBM Plex Mono. Used only for metadata, counts, dates, table headers. Display scale: `56 / 40 / 32 / 24` px (1.15 line-height) Body scale: `18 / 16 / 14 / 12` px (1.5 line-height) Letter-spacing: `-0.01em` on display, `0` on body, `0.18em` on mono labels. Convenience classes: - `.grove-display--xl` clamp(56px, 8vw, 120px) — hero - `.grove-display--lg` clamp(40px, 5vw, 64px) — section headline - `.grove-display--md` clamp(28px, 3.5vw, 40px) — card title - `.grove-display--sm` 22px — block title - `.grove-eyebrow` 10px mono uppercase — kicker --- ## Posture - Radii: `12px` default, `18px` large cards, `8px` controls, `999px` pills - Borders: 1px hairline `--border`; never colored borders except `--accent` - Shadows: none on cards; subtle only on modals/dropdowns - One decisive accent (terracotta) used at most twice per surface - Nature photography as the singular flourish — forest, food, hands - Family avatars are colored circles with initials, never illustrations - Generous whitespace; treat surfaces like a printed magazine page - Numbers use `font-variant-numeric: tabular-nums` --- ## Component primitives Once `main.css` is linked, these classes resolve: - `.grove-wordmark` — Grove wordmark with terracotta dot - `.grove-nav` — frosted sticky nav - `.grove-btn` + `--primary` / `--ghost` / `--soft` / `--forest` - `.grove-pill` + `--dot` + `--done` / `--now` / `--soon` / `--warn` - `.grove-avatar` + `--rich` / `--cher` / `--juniper` / `--sequoia` - `.grove-card`, `.grove-card--inset`, `.grove-card--warm`, `.grove-card--forest` - `.grove-input` - `.grove-list-row` + `.grove-list-row__name` (with `.done` state on the row) - `.grove-chk` + `.done` (the round green checkbox) - `.grove-eyebrow` + `--accent` — section kicker - `.grove-display` + `--xl` / `--lg` / `--md` / `--sm` - `.grove-dot` + `--rich` / `--cher` / `--juniper` / `--sequoia` - `.grove` / `.grove-app` — apply on `` to inherit foundations --- ## Brand voice Family-forward, plainspoken, never cute. Sentences read like a note left on the counter. Lowercase or title-case "Grove" — never all caps. Avoid corporate speak, emoji, exclamation points. Examples: - "Tonight is grill night. Juniper is on salad." (good) - "Engage your meal-planning workflow." (bad) - "Three chores left this week." (good) - "You are 60% complete with weekly tasks." (bad)