01 · Color System
Palette
Every hue is lifted directly from the photograph — forsythia bloom, hedgerow shadow, river rock, weathered bark, and overcast sky.
Forsythia · Warm Yellows
Hedgerow · Evergreen Greens
Earth & Stone · Neutral Grounds
Sky · Surface Neutrals
02 · Typography
Type Scale
Playfair Display brings an organic, botanical editorial character to headings. DM Sans keeps body copy warm and legible. DM Mono anchors labels and data.
The Garden Wakes
Early Forsythia
River Stone & Weathered Wood
Evergreen Hedgerow
Lawn at First Light
The forsythia blooms before any other shrub, a riot of yellow against the bare branches and overcast sky — a signal that the ground has thawed.
River rocks line the terraced beds, mossy and smoothed by decades of water. The wooden composter stands weathered at the garden's edge, its horizontal slats silvered with age and rain.
Updated 2 hours ago · Overcast skies throughout the afternoon.
Plant species · Location data · Garden log
03 · Spacing & Radius
Space & Shape
A nine-step spacing scale built on a 4px base. Border radii range from a subtle 4px trim to a full pill.
4px
8px
16px
24px
999px
04 · Buttons
Actions
Four button variants cover all interaction weights, from primary calls-to-action to ghost navigation items.
05 · Badges & Tags
Labels
Compact status indicators using palette-matched tints.
06 · Cards
Content Cards
Cards surface content with consistent structure. Accent bars signal category by color.
Forsythia
One of the earliest spring shrubs to bloom, prized for its vivid chrome-yellow flowers appearing before leaves.
Arborvitae Hedge
Dense columnar hedge providing year-round privacy and a rich dark backdrop that makes spring color pop.
River Rock Border
Smooth glacial river rocks define the terraced bed edges, adding natural drainage and permanent structure.
07 · Forms
Input Elements
Warm-bordered inputs with a forsythia focus ring keep forms inviting.
Garden Log Entry
08 · Alerts
Callouts
Status messages use palette-appropriate tints so they never feel out of place.
09 · Metrics
Stat Cards
Clean numeric readouts styled for dashboards and summary panels.
Plants in Bloom
3
↑ 2 since last week
Bed Coverage
84%
On target
Soil Temp
48°F
Adequate for planting
Days to Frost
21
Last frost est. Apr 26
10 · Progress
Progress Bars
Bar lengths visualise progress against targets, using the palette's three main accent hues.
11 · Navigation
Nav Bar
A minimal top-navigation bar for application shells and marketing pages.
12 · Tables
Data Table
| Plant | Type | Status | Last Noted |
|---|---|---|---|
| Forsythia | Deciduous Shrub | ● Blooming | Today |
| Arborvitae | Evergreen Tree | Healthy | 3 days ago |
| Creeping Phlox | Ground Cover | Dormant | 1 week ago |
| Daffodils | Spring Bulb | ● Budding | Yesterday |
13 · Avatars
User Avatars
14 · Tokens
CSS Custom Properties
Copy these tokens into your :root block to apply the system.