Mossy Spot Style Guide

1. Visual Identity

Colors

Use nature-inspired tones to echo the bonsai aesthetic:

• brand: Mint 500 – #1eb281 — for highlights and calls to action
• primary: Payne’s Gray 500 – #10617c — for primary text and links
• accent: Pale Dogwood 500 – #e1c0b1 — subtle detail accents
• muted: China Rose 500 – #ab6974 — for secondary info
• background: Pale Dogwood 900 – #f9f3f0 — page background
• foreground: Mint 100 – #06241a — body text, high contrast
• border: Brunswick Green 700 – #17dfd5 — thin separators
• error: China Rose 400 – #8d4f5a — warnings and alerts

Tip: Use muted and accent to give warmth. Avoid pure black/white.

2. Typography

• Headings: Playfair Display (serif)
• Body: Inter (sans-serif)

Sizing Guidelines

• h1: text-4xl — homepage title
• h2: text-2xl — section headers
• h3: text-xl — subheaders
• Body: text-base or text-sm depending on density
• Captions: text-xs italic

3. Spacing & Layout

• Generous padding/margin — like space in a bonsai tray
• Max content width: max-w-prose (~60ch)
• Responsive grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• gap-6 or gap-8 between elements

Like a bonsai branch — nothing crowded, everything intentional.

4. Imagery

• Use aspect-[4/3] or aspect-square
• Add rounded-xl shadow object-cover
• Apply hover:shadow-lg transition for subtle movement
• Avoid emoji

5. Component Guidelines

Buttons

<button class="bg-brand text-white hover:bg-brand-dark px-4 py-2 rounded uppercase tracking-wide text-sm">
  Click Me
</button>

Links

• text-primary hover:underline
• External links open in new tabs (implemented)
• hover:text-primary-light for subtle animation

Forms

• Tailwind plugin: @tailwindcss/forms
• Field style: rounded-md border-gray-300 focus:ring-brand

6. Content Style

• Use plain, respectful language. No fluff.
• Observational tone, not editorial.
• Species = reference + care guide.
• Tree = story + progression + current state.

7. Page Structure Guidelines

Tree Page

• Header: title, species (italic), tree ID
• Image: large and centered
• Sections: Provenance / Background / Details / Species Info / Care Log

Species Page

• Overview (summary), Leaf Traits, Seasonal Notes, Care Tips

CMS / Admin

• Neutral style — no brand theming
• Clear labels, hints, and default values

8. Accessibility & Readability

• Contrast must meet WCAG AA — foreground on background
• Semantic HTML: <main>, <section>, <article>
• Use labels for screen readers on all forms

9. Tone

• Respectful — this is living art
• Observational — logs should reflect care and patience
• Calm and precise — avoid visual noise

10. Bonus UX Delight

• Subtle seasonal touches (falling leaves, winter frost effects)
• Sticky header, back-to-top button on long pages
• Tree collection filters (implemented)