# magicpath.ai — Design System Reference

## 1. Visual Theme & Atmosphere

Lush botanical darkness meets SaaS functionality. The flagship oklch(0.37 0.026 110.6) — a muted olive-green — anchors the primary brand in a territory that feels natural and sustainable rather than techy. Against a near-white oklch surface, it reads as eco-conscious and grounded. Inter handles all typographic needs, maintaining readability across a dense feature-focused layout built on Next.js/Tailwind.

---

## 2. Color Palette & Roles

- **background**: oklch(0.9197 0.004 286.32) ≈ warm light gray
- **text**: rgb(0, 0, 0)
- **white**: rgb(255, 255, 255)
- **primaryGreen**: oklch(0.3694 0.0262 110.574) — muted olive brand colour
- **toastInfo**: #3498db
- **toastSuccess**: oklch(0.3694 0.0262 110.574) — consistent olive

*Notably absent:* Custom typeface

---

## 3. Typography Rules

**Typeface(s):** Inter

**Tech stack fonts hint:** Next.js, Tailwind CSS

- **note**: Inter across all weights, standard Tailwind scale
- **body**: 16px/24px

---

## 4. Component Stylings

**Border Radius:** Tailwind standard (rounded-md / rounded-lg)

**Shadows:** None recorded — flat card approach

**Gradients:** None

Components lean on spacing and typography for distinction rather than decorative chrome. Buttons likely use filled + ghost variants in the primary colour.

---

## 5. Layout Principles

Built on **Next.js + Tailwind CSS**. Layouts follow a content-first grid — wide gutters, deliberate whitespace rhythm. Section breaks use background-colour contrast rather than divider lines.

---

## 6. Depth & Elevation

Elevation is communicated through colour contrast and spacing alone — no box-shadow stack exists. This creates a completely flat, layered paper feel.

---

## 7. Do's and Don'ts

**Do:**
- Use the exact colour roles as defined — each serves a specific semantic purpose
- Respect the typeface role boundaries (each font has one job)
- Preserve generous whitespace — crowding breaks the design language
- Keep interactions restrained: hover opacity or colour-shift, not complex transforms

**Don't:**
- Introduce colours outside the defined palette
- Mix typefaces beyond the established pairing
- Add drop shadows where the design is intentionally flat
- Use gradients unless the site already employs them
- Add Custom typeface
- Add heavy gradients

---

## 8. Responsive Behavior

Next.js with Tailwind; collapses through standard breakpoints

On mobile, the core design language holds — the reduction is spatial (tighter gutters, stacked columns) not stylistic. Colour, typography, and component styles remain unchanged.

---

## 9. Agent Prompt Guide

> Use this as a one-paragraph brief when prompting an AI to build in this design language:

**"Eco-SaaS landing: warm light-gray bg, oklch olive-green primary, Inter only, flat cards, no gradients, Tailwind border-radius scale, clean functional layout"**

---

*Generated by Sparkbites — extracted from live CSS analysis*