---
name: Magic Spoon
description: "Worth including for its successful blend of nostalgic 'cereal box' vibrancy with modern, clean, and highly legible digital typography."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#3F0791"
  secondary: "#5D23DD"
  tertiary: "#9100ED"
  neutral: "#DAD9FF"
  bg-soft: "#DAD9FF"
  bg-quiet: "#F5F3FF"
  muted-soft: "#E8E6FF"
  line: "rgba(63,7,145,0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0.72px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.7px"

rounded:
  sm: 4px
  md: 10px
  lg: 28px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, playful DTC cereal brand using deep purple tones and punchy typography to bridge nostalgia with modern health.

*A vibrant, nostalgic cereal brand reimagined for health-conscious adults.*

## Colors

High-contrast purple identity on clean white, accented by vibrant pastels from product photography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#3F0791`)** — uses `ink` token
- **Secondary text (`#5D23DD`)** — uses `ink-soft` token
- **Accent (`#9100ED`)** — uses `accent` token
- **Muted (`#DAD9FF`)** — uses `muted` token
- **Borders (`rgba(63,7,145,0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Typography primarily uses Poppins for display and body, with Mabry for brand logo elements.
- Text is heavily transformed to uppercase for headers and calls-to-action.
- Body text maintains a neutral 400 weight for readability against the vibrant palette.

## Layout

Standard e-commerce structure: announcement bar, sticky nav, full-width hero with split layout, followed by product grids.

*Rhythm:* Standard 4px base grid with tight spacing in navigation and generous padding in hero sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 20px 60px 0px
- rgba(0, 0, 0, 0.08) 0px 15px 50px 0px
- rgba(0, 0, 0, 0.25) 0px 5px 15px 0px
- Borders: 1px solid rgba(63,7,145,0.2)

## Shapes

- `sm`: 4px
- `md`: 10px
- `lg`: 28px
- `pill`: 50px

## Components

- **button:** Pill-shaped buttons with solid purple fills or transparent backgrounds with purple borders, utilizing uppercase bold typography.
- **card:** Product cards featuring soft rounded corners (28px) and subtle drop shadows, often containing floating product imagery.
- **chip:** Small, rounded pill badges used for labels like 'BESTSELLER' with solid background fills.
- **input:** Clean rectangular input fields with subtle borders, transitioning to a highlighted state on focus.
- **hero:** Full-width split layout featuring a massive typography headline on one side and floating, dynamically positioned product imagery on the other.

## Do's and Don'ts

**Don't:**
- Don't use delicate serif fonts — the screenshot shows bold geometric and humanist sans-serifs.
- Don't flatten the layout into a strict grid — the screenshot shows overlapping floating product imagery.
- Don't use a monochromatic or muted color scheme — the screenshot shows vibrant purples and colorful product photos.
- Don't rely on lowercase sentence-case for headers — the screenshot shows aggressive uppercase text transform.
- Don't use sharp, unrounded corners for interactive elements — the screenshot shows generous pill shapes.
- Don't avoid color in the primary navigation — the screenshot shows a dark background with vibrant text and accents.

---

## System Prompt (paste into AI agent)

```
Magic Spoon is a playful, premium DTC cereal brand for health-conscious adults. The visual identity is defined by a vibrant deep purple primary color (#3F0791) contrasted against clean white backgrounds, often accented by bright pastels from product photography. Key font categories include geometric and humanist sans-serifs, displayed in bold, uppercase transformations. Critical design constraints: avoid delicate serifs, maintain high contrast, and ensure generous, playful border radii. The layout frequently uses overlapping, floating imagery rather than rigid grids, creating a dynamic, retro-modern e-commerce experience.
```