| name | grove-ui-design |
| description | Create warm, nature-themed UI for Grove with glassmorphism, seasonal decorations, randomized forests, and accessible design patterns. Use when building pages, enhancing UI, or adding decorative elements. |
Grove UI Design Skill
When to Activate
Activate this skill when:
- Creating or enhancing pages for Grove sites
- Adding decorative nature elements (trees, clouds, weather effects)
- Implementing glassmorphism effects for readability
- Working with the seasonal theme system
- Building navigation patterns (navbar, mobile overflow menus)
- Creating "story" pages that guide users through content
- Ensuring mobile-friendly, accessible UI
- Choosing icons or visual elements
The Grove Aesthetic
Grove is a place. It's nature-themed, warm, and inviting—like a midnight tea shop with good documentation.
Core Principles
Warm, introspective, queer, unapologetically building something meaningful.
Write with the warmth of a midnight tea shop and the clarity of good documentation.
Every design choice should feel:
- Welcoming — like entering a cozy space
- Organic — natural, not rigid or corporate
- Readable — content-first, decorations enhance, never obstruct
- Alive — subtle animations, seasonal changes, randomization
Grove Mode & Terminology (GroveTerm V2)
Grove has a terminology system that automatically switches between Grove-themed terms and standard terms based on the user's Grove Mode setting. Always use GroveTerm components instead of hardcoding Grove terminology in UI.
By default, Grove Mode is OFF for new visitors. They see familiar terms: "Posts" instead of "Blooms", "Dashboard" instead of "Arbor", "Support" instead of "Porch". When users opt in via the footer toggle, they see the full nature-themed vocabulary with interactive definitions.
The Component Suite:
import {(GroveTerm, GroveSwap, GroveText, GroveSwapText, GroveIntro)} from '@autumnsgrove/lattice/ui';
import groveTermManifest from '$lib/data/grove-term-manifest.json';
| Component | Use Case | Behavior |
|---|
GroveTerm | Interactive terms with popup definitions | Colored underline when ON, click for popup. Shows standard term when OFF. |
GroveSwap | Silent text replacement | Reactively swaps text. No underline, no interaction. |
GroveText | Parse [[term]] syntax in data strings | Renders [[bloom|posts]] as interactive GroveTerm components. |
GroveSwapText | Parse [[term]] syntax silently | Same parsing, silent swaps (no popups). |
GroveIntro | "We call it X" page banners | Standardized intro below page titles. |
Usage:
<!-- Interactive term with popup -->
<GroveTerm term="bloom" manifest={groveTermManifest} />
<!-- Custom display text -->
<GroveTerm term="wanderer" manifest={groveTermManifest}>wanderers</GroveTerm>
<!-- Silent swap (no popup, no underline) -->
<GroveSwap term="arbor" manifest={groveTermManifest} />
<!-- Parse [[term]] syntax in data strings (ideal for FAQ items, pricing, etc.) -->
<GroveText
content="Your [[bloom|posts]] live in your [[garden|blog]]."
manifest={groveTermManifest}
/>
<!-- Silent text swap (non-interactive, default behavior) -->
<GroveTerm term="meadow" />
<!-- With leaf icon for Grove Mode hint -->
<GroveTerm term="meadow" icon />
Key Rules:
- Never hardcode Grove terms in user-facing UI. Always use GroveTerm components.
- Default is OFF for new visitors. Standard, familiar terminology first.
- URLs stay as Grove terms (
/porch, /garden) regardless of display mode.
- Brand terms (Grove) and subscription tiers (Seedling/Sapling/Oak/Evergreen) always show as-is.
- Use
[[term]] syntax for data-driven content (FAQ items, pricing fineprint, feature lists).
- Grove Mode store:
groveModeStore from @autumnsgrove/lattice/ui/stores. Toggle lives in the footer.
See docs/grove-user-identity.md for the full identity language documentation and libs/engine/src/lib/ui/components/ui/groveterm/ for component source.
Glassmorphism Pattern
Glass effects create readability while revealing hints of background decoration.
The Layering Formula
Background (gradients, vines, nature)
↓
Decorative Elements (trees, clouds, particles)
↓
Glass Surface (translucent + blur)
↓
Content (text, cards, UI)
Glass Components
import {(Glass, GlassCard, GlassButton, GlassOverlay)} from '@lattice/ui/ui';
<!-- Container with glass effect -->
<Glass variant="tint" class="p-6 rounded-xl">
<p>Readable text over busy backgrounds</p>
</Glass>
<!-- Card with glass styling -->
<GlassCard title="Settings" variant="default" hoverable>Content here</GlassCard>
<!-- Glass button -->
<GlassButton variant="accent">Subscribe</GlassButton>
Glass Variants
| Variant | Use Case | Light Mode | Dark Mode |
|---|
surface | Headers, navbars | 95% white | 95% slate |
tint | Text over backgrounds | 60% white | 50% slate |
card | Content cards | 80% white | 70% slate |
accent | Callouts, highlights | 30% accent | 20% accent |
overlay | Modal backdrops | 50% black | 60% black |
muted | Subtle backgrounds | 40% white | 30% slate |
CSS Utility Classes
<div class="glass rounded-xl p-4">Basic glass</div>
<div class="glass-tint p-6">Text container</div>
<div class="glass-accent p-4">Highlighted section</div>
<nav class="glass-surface sticky top-0">Navbar</nav>
Key Pattern: Sticky Navigation
<nav
class="sticky top-[73px] z-30 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-divider"
>
<!-- Navigation content -->
</nav>
Seasonal Theme System
Grove uses four seasons, each with distinct colors, weather effects, and moods.
Season Detection
import {season} from '$lib/stores/season'; const isSpring = $derived($season === 'spring'); const isAutumn
= $derived($season === 'autumn'); const isWinter = $derived($season === 'winter'); // Summer is the default
(no flag needed)
Color Palette System
Import from: @autumnsgrove/lattice/ui/nature or $lib/components/nature/palette
Core Palettes (Year-Round)
Accent colors: These palette hex values are for nature SVGs, illustrations, and brand use. For CSS accent-colored surfaces (buttons, links, highlights), use var(--grove-accent-*) tokens instead — the user's accent color may not be green. See the accent scale: var(--grove-accent) (solid), var(--grove-accent-dark) (hover), var(--grove-accent-N) (opacity tints, stops 5-80). Pre-commit hook enforces this.
import { greens, bark, earth, natural } from "@autumnsgrove/lattice/ui/nature";
greens.darkForest;
greens.deepGreen;
greens.grove;
greens.meadow;
greens.spring;
greens.mint;
greens.pale;
bark.darkBark;
bark.bark;
bark.warmBark;
bark.lightBark;
(earth.soil, earth.mud, earth.clay, earth.sand, earth.stone, earth.pebble, earth.slate);
(natural.cream, natural.aspenBark, natural.bone, natural.mushroom, natural.birchWhite);
Spring Palettes
import {
springFoliage,
springSky,
wildflowers,
cherryBlossoms,
cherryBlossomsPeak,
} from "@autumnsgrove/lattice/ui/nature";
springFoliage.sprout;
springFoliage.newLeaf;
springFoliage.freshGreen;
springFoliage.budding;
springFoliage.tender;
springSky.clear;
springSky.soft;
wildflowers.buttercup;
wildflowers.daffodil;
wildflowers.crocus;
wildflowers.violet;
wildflowers.purple;
wildflowers.lavender;
wildflowers.tulipPink;
wildflowers.tulipRed;
wildflowers.white;
cherryBlossoms.deep;
cherryBlossoms.standard;
cherryBlossoms.light;
cherryBlossoms.pale;
cherryBlossoms.falling;
cherryBlossomsPeak.deep;
cherryBlossomsPeak.standard;
cherryBlossomsPeak.light;
cherryBlossomsPeak.pale;
cherryBlossomsPeak.falling;
Unified Flowers Palette (NEW!)
The flowers namespace consolidates all flower colors into one organized structure:
import { flowers } from "@autumnsgrove/lattice/ui/nature";
flowers.wildflower.buttercup;
flowers.wildflower.daffodil;
flowers.wildflower.crocus;
flowers.wildflower.violet;
flowers.wildflower.purple;
flowers.wildflower.lavender;
flowers.wildflower.tulipPink;
flowers.wildflower.tulipRed;
flowers.wildflower.white;
flowers.cherry.deep;
flowers.cherry.standard;
flowers.cherry.light;
flowers.cherry.pale;
flowers.cherry.falling;
flowers.cherryPeak.deep;
flowers.cherryPeak.standard;
flowers.cherryPeak.light;
flowers.cherryPeak.pale;
flowers.cherryPeak.falling;
Use flowers.wildflower instead of accents.flower — the accents version is deprecated.
Autumn & Winter Palettes
import { autumn, autumnReds, winter } from "@autumnsgrove/lattice/ui/nature";
autumn.rust;
autumn.ember;
autumn.pumpkin;
autumn.amber;
autumn.gold;
autumn.honey;
autumn.straw;
autumnReds.crimson;
autumnReds.scarlet;
autumnReds.rose;
autumnReds.coral;
(winter.snow, winter.frost, winter.ice, winter.glacier);
