# maggie-app.com — Design System Reference

## 1. Visual Theme & Atmosphere

Maximalist playfulness with handcrafted joy. Maggie is a confetti explosion of colour — mint green, fuchsia, aqua, lemon, peach, violet, coral — deployed without hierarchy constraints. The double typeface pairing of BN Dime Display Regular (a chunky display face, uppercase-only) against Homemade Apple (a script) creates tension between bold product confidence and personal warmth. Built in Framer, every element can be an animation stage.

---

## 2. Color Palette & Roles

- **background**: rgb(130, 237, 166) — mint green base
- **text**: rgb(0, 0, 0) — pure black
- **linkDefault**: rgb(0, 0, 238) — browser-default blue (intentional retro nod)
- **darkGreen**: rgb(3, 89, 77) — deep teal for contrast blocks
- **fuchsia**: rgb(246, 187, 253)
- **pink**: rgb(252, 205, 220)
- **aqua**: rgb(174, 251, 255)
- **lemon**: rgb(255, 255, 148)
- **peach**: rgb(253, 192, 104)
- **violet**: rgb(200, 140, 253)
- **coral**: rgb(252, 86, 129)
- **sky**: rgb(88, 154, 240)
- **orange**: rgb(255, 145, 36)

*Notably absent:* Neutral palette

---

## 3. Typography Rules

**Typeface(s):** BN Dime Display Regular (display), Homemade Apple (script), Helvetica Neue (body)

**Tech stack fonts hint:** Framer, Framer Motion

- **h1**: 80px, uppercase, BN Dime, 68px line-height (tight)
- **h2**: 30px uppercase BN Dime
- **h3**: 16px Homemade Apple (handwritten accent)
- **body**: 9–12px Helvetica Neue — deliberately tiny for a zine feel

**Philosophy:** Each size level reinforces hierarchy without relying on colour.

---

## 4. Component Stylings

**Border Radius:** Likely organic blobs/pill shapes from Framer

**Shadows:** None — flat colour celebration

**Gradients:** None — pure flat pastels

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 **Framer + Framer Motion**. 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 Neutral palette
- Add single-font discipline

---

## 8. Responsive Behavior

Framer breakpoints; colour-dense mobile layouts retain energy

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:

**"Framer joyful app landing: mint-green bg, BN Dime Display uppercase headers (80px), Homemade Apple script accents, 10+ flat pastel colour spots, pure black text, tiny body copy (9–12px), zero gradients/shadows"**

---

*Generated by Sparkbites — extracted from live CSS analysis*