Do
Let the plan dominate. Attach concise information to a clear location.
Green Finger Paint design language
Your garden,
understood.
Turn a garden plan into a living guide to what is growing where, what needs attention, and what to do next.
The garden is the hero. The interface is an annotation layer.
NORTH BORDER BED 02
Review plantingSalvia nemorosaDoes this match the plan?
Cut back after floweringLavandula angustifoliaNorth border · September
01
Core principle
Quiet guidance over a real garden.
Source plans retain their contrast and authority. Green Finger Paint adds only the information needed to understand, review, or care for the garden.
Don’t
Cover the garden with generic cards or turn the plan into decoration.
02
Living Plan mark
A strong, open silhouette.
The original mark remains canonical. Its full upper-right leaf balances the open plan contour and stays recognizable at the smallest product sizes.
Six localized lockups share the same mark, spacing, and hierarchy.
03
Annotation grammar
What the product knows—without color alone.
Every state combines color with a symbol. Confidence never becomes confirmation; confirmation requires an explicit trusted action or source.
Detected
Found by the system and still presented as a detection.
Review needed
Unresolved or explicitly asking for human attention.
Confirmed
Verified by a trusted source or explicit user action.
User added
Human-authored placement or correction with provenance retained.
Care task
A maintenance action attached to a garden object.
Source-plan leader
Evidence in the uploaded drawing. Never restyled as product UI.
GFP annotation leader
A dashed interface callout joining our marker to our information.
04
Color architecture
Grounded foundations. Explicit semantics.
Foundation colors describe the world; semantic tokens describe their job.
Foundation
soil
#1C1A14moss
#2D4A2Afern
#4A7C45sage
#8BAF7Cmist
#D4E6C8parchment
#F5F0E8cream
#FAF7F2clay
#C4855Asky
#6B9EAFaction-primary
moss + chalktext-secondary
muted-inkstatus-review
clay + soilEditorial moment · DM Serif Display
Your garden tells a living story.
Routine interface · DM Sans
Review the plants in North border
Botanical name · italic
Geranium macrorrhizum
Plan data · monospace
BED 02 18.4 M² 12 PLANTS
05
Shape language
Architecture meets growth.
Interface structure stays precise. Garden-derived content earns the organic curves.
Structural UI
North border12 plantings · 8.4 m²
6–12px radii, clear alignment, restrained hierarchy.
Organic garden geometry
Bed contours, planting canopies, plan crops, and botanical illustration.
06
Imagery
Location. Garden. Detail. Action.
Three image modes create one recurring explanatory sequence.
Top-down and spatial. The source drawing stays readable.
Believable residential scale, never generic aspiration.
Foliage, flowers, pruning points, growth, and damage.
!
Cut backLavandula angustifoliaNorth border
The visual story ends in useful garden care.
07
Motion
Drawn and spatial, never bouncy.
Motion explains attachment, tracing, and state change. Reduced-motion users receive the final state immediately.
?Review this planting
Bed boundary traces in
?→✓Explicit review resolves
08
Implementation
Use the system, not a screenshot of it.
Production assets and machine-readable tokens remain the source for implementation.
Design tokens/brand/tokens.jsonPrimary markSVG · light surfaces
Reverse markSVG · dark surfacesEnglish lockupSVG · horizontal
Dutch lockupSVG · horizontalFaviconSVG · current active mark
Canvas action icons46 SVG masters · usage rules
- Keep the original Living Plan silhouette and its full upper-right leaf.
- Never recolor individual contour segments or add gradients, drips, glow, or shadows to the mark.
- Use annotation symbols as well as color:
• ? ✓ + !. - Keep source-plan evidence visually distinct from GFP annotation leaders.
- Prefer real product tokens and assets over manually sampled values.
ADR-072 · Material
Botanical Glass
The garden plan continues beneath floating tools. Warm cream by day, deep bark by night. Photography and annotations keep their full contrast.
Light
Warm parchment · 24px blur
Lavandula angustifolia
Dark
Deep bark · 24px blur
Lavandula angustifolia
20px toolbar corners; 24px inspectors. Opaque fallback for reduced transparency and unsupported browsers. Species names are upright; amber with a question mark remains reserved for plants needing a check.