---
title: "Magic Spoon design system"
variant: extended
source: https://magicspoon.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/magicspoon-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Magic Spoon · Design System

> Bright gradients, bold type, and playful cereal imagery

**Theme:** light · **Industry:** food-beverage · **Source:** https://magicspoon.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Magic Spoon pairs a vivid, candy-coloured palette with confident purple typography and playful cereal product imagery. The homepage alternates immersive promotional bands with compact product shopping, reviews, and benefit-led sections.

## North star

Let bold purple typography and immersive colour fields frame appetizing product imagery, while keeping shopping actions obvious.

## Overview

The page uses vivid gradients and product colour to create an energetic cereal-shop identity, anchored by deep purple #3f0791 text and crisp white surfaces. The measured palette includes several gradient stops, while the screenshots show the gradients as broad, full-width section treatments rather than a restrained accent. Poppins supplies a consistent geometric sans-serif voice: heavy, large headings contrast with compact uppercase navigation and smaller supporting copy. The hero pairs oversized product-and-ingredient imagery with a clear text-and-CTA column; later sections alternate product grids, reviews, benefit panels, and split layouts. Spacious section breaks give promotional stories room, while denser card rows make browsing and shopping direct. Rounded pill CTAs and image cards soften the strong colour blocks. Product photography, creator videos, packaging, and cereal cutouts provide most of the visual character; the decorative palette within those assets should not be mistaken for core interface colours. The black footer provides a firm close.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, product-card interiors, and high-contrast CTA or navigation text. |
| Magic Purple | `#3f0791` | `--color-magic-purple` | brand | Primary headings, body text, links, and purple-filled bundle CTA. |
| Cereal Blue | `#2491c4` | `--color-cereal-blue` | accent | Blue Shop Cereal buttons and their matching outlines. |
| Electric Violet | `#5b00ed` | `--color-electric-violet` | accent | Vivid promotional section and button accent; also appears in gradient treatments. |
| Lilac Button | `#cac4f4` | `--color-lilac-button` | surface | Soft lavender background on Granola category controls. |
| Cereal Sky | `#bfefff` | `--color-cereal-sky` | accent | Pale blue gradient stop and light text on saturated section treatments. |
| Periwinkle Wash | `#dad9ff` | `--color-periwinkle-wash` | surface | Lavender-blue section surface and gradient stop. |
| Footer Black | `#000000` | `--color-footer-black` | neutral | Solid footer background, contrasting with white footer text and controls. |
| Soft Iris | `#d4beff` | `--color-soft-iris` | surface | Pale violet gradient stop in decorative section backgrounds. |
| Cereal Cream | `#f3eeca` | `--color-cereal-cream` | surface | Warm gradient stop behind the breakfast-options content. |
| Berry Magenta | `#c231a9` | `--color-berry-magenta` | accent | Gradient stop for strong promotional bands; decorative section colour. |
| Violet Depth | `#5d23dd` | `--color-violet-depth` | accent | Deep violet gradient stop in saturated promotional treatments. |
| Royal Ink | `#4a00c4` | `--color-royal-ink` | brand | Occasional darker purple text accent; secondary to the primary purple. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Footer Black) · `--color-surface-2` → `#dad9ff` (Periwinkle Wash) · `--color-text` → `#3f0791` (Magic Purple) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#bfefff` (Cereal Sky) · `--color-border` → `#2491c4` (Cereal Blue) · `--color-accent` → `#3f0791` (Magic Purple) · `--color-accent-2` → `#5b00ed` (Electric Violet) · `--color-accent-3` → `#2491c4` (Cereal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3f0791` | `#ffffff` | 12.72:1 | AAA |
| `#3f0791` | `#000000` | 1.65:1 | fail |
| `#3f0791` | `#dad9ff` | 9.3:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#dad9ff` | 1.37:1 | fail |
| `#bfefff` | `#ffffff` | 1.23:1 | fail |
| `#bfefff` | `#000000` | 17.01:1 | AAA |
| `#bfefff` | `#dad9ff` | 1.11:1 | fail |
| `#3f0791` | `#ffffff` | 12.72:1 | AAA |
| `#3f0791` | `#000000` | 1.65:1 | fail |

### Gradients

- `linear-gradient(rgb(243, 238, 202) 0%, rgb(191, 239, 255) 100%)`
- `linear-gradient(rgb(194, 49, 169) 0%, rgb(93, 35, 221) 100%)`
- `linear-gradient(rgb(191, 238, 254), rgb(213, 189, 255) 50.5%, rgb(212, 190, 255))`
- `linear-gradient(0deg, rgb(212, 190, 255) 50%, rgb(191, 237, 254))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 400, 700, 500, 900 | All measured display, heading, body, navigation, button, and caption text. | Outfit |

- **Poppins:** Use bold, large title styles; navigation is bold uppercase. Keep body clear and compact, with minimal tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 1 | 0 | — | Poppins | Oversized promotional display headlines. |
| h1 | 64px | 700 | 1 | 0 | — | Poppins | Primary hero headline and major page titles. |
| h2 | 60px | 700 | 1.05 | 0 | — | Poppins | Large section headings, especially product and review areas. |
| h3 | 48px | 700 | 1 | 0 | — | Poppins | Product names and prominent feature headings. |
| h4 | 32px | 700 | 1.25 | 0 | uppercase | Poppins | Uppercase product and category titles. |
| body | 16px | 400 | 1 | 0 | — | Poppins | Standard product, feature, and supporting copy. |
| caption | 14px | 400 | 1 | 0 | — | Poppins | Review counts and small product details. |
| button | 16px | 400 | 1.4 | 0 | — | Poppins | CTA labels and shopping actions. |
| nav | 16px | 700 | 1 | 0 | uppercase | Poppins | Bold uppercase primary navigation labels. |
| eyebrow | 18px | 700 | 3.28 | 0.04em | uppercase | Poppins | Small uppercase introductory labels above headings. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 8, 9, 10, 15, 16, 18, 20, 22, 25, 30, 32, 40, 50 px.
- Section rhythm 100px · element gap 5px · card padding 50px · max content width 1408px.

The measured page max width is 1408px, with a spacious section rhythm and a two-column hero pairing full-bleed product imagery with copy and actions. The remaining blocks move between split feature layouts, multi-column product cards, and horizontally dense review or category rows. Most content is centered or aligned to a clear column edge. The screenshot shows strong full-width colour bands, with white and pastel sections alternating against saturated gradients. Preserve generous separation between major stories while keeping product grids compact and scannable.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `13px` · media `10px` · nav `9999px` · xs `5px` · sm `10px` · md `13px` · lg `15px` · xl `25px` · pill `9999px`
- Shadow `inset` (footer, input, button): `rgb(255, 255, 255) 0px 0px 0px 2px inset`
- Shadow `xl` (other): `rgba(0, 0, 0, 0.08) 0px 15px 50px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.1) 0px 20px 60px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most section bands are flat colour or gradient fields. Product and review cards sit on light surfaces with rounded corners; testimonial cards use a noticeable soft shadow. Use borders sparingly, including the blue CTA outline and fine contrast edges around selected media. Rounded pill controls create emphasis without requiring heavy shadows.

## Imagery

Use bright, cutout-style packaging and cereal imagery as the hero focal point, supported by ingredients and playful floating product details. Product cards use clear pack shots on light grounds; customer-review sections use portrait-format creator videos. Keep imagery colourful and crisp, with layered or collage-like compositions in promotional areas. Palette variation inside packaging, food, and photography is illustrative, not a replacement for the measured interface colours.

## Components

### Primary shopping CTA

Use the measured blue #2491c4 Shop Cereal button with white Poppins text and a thin matching outline; bundle actions may use purple or white pill treatments.

### Product card

Present a clear product image, price, uppercase product title, rating or review count, and a direct Shop Now link on a light card.

### Category strip

Show a row of compact product cutouts with short labels; distinguish a category control with lavender treatment.

### Review video tiles

Use portrait creator videos in rounded light frames, with a play affordance and concise product and review metadata.

### Benefit panel

Pair a large product or food composition with short benefit statements and simple icon markers; use contrasting gradient or pastel fields.

### Newsletter footer

Close on black with white brand and legal links, an email input, and a concise subscription action.

### Measured component styles

- **Primary button** (“Shop Cereal”): background #2491c4 · text #ffffff · border 2px solid #2491c4 · radius 5px · padding 10px 15px · 400 16px Poppins
- **Secondary button** (“Granola”): background #cac4f4 · text #3f0791 · radius 15px · padding 0px · 400 13.3333px Arial
- **Link** (“Current price $39 CEREAL VARIETY 4-PACK ”): transparent background · text #3f0791 · radius 0px · padding 0px · 400 16px Poppins
- **Input**: transparent background · text #ffffff · radius 30px · padding 0px 20px · 500 20px Poppins · shadow rgb(255, 255, 255) 0px 0px 0px 2px inset
- **Card** (“"This was like a box of good news coming”): transparent background · text #3f0791 · radius 25px · padding 50px · 400 16px Poppins · shadow rgba(0, 0, 0, 0.1) 0px 20px 60px 0px
- **Navigation item** (“CEREAL OATMEAL TREATS GRANOLA PASTRIES A”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Poppins

## Do

- Use Magic Purple #3f0791 for primary headings and links.
- Reserve full-width gradients for promotional story sections.
- Keep shopping actions visually distinct and easy to scan.
- Use Poppins consistently across interface text.
- Pair product pack shots with clear names and prices.
- Keep major sections spacious and product rows compact.

## Don't

- Do not use every palette colour as a competing text colour.
- Do not mistake package or food colours for interface tokens.
- Do not crowd the hero with multiple competing messages.
- Do not make product cards feel heavy or overly bordered.
- Do not use generic monochrome imagery in place of cereal assets.
- Do not let decorative gradients reduce CTA contrast.

## Agent prompt

Build a new Magic Spoon-style ecommerce page with Poppins or a close geometric sans-serif. Anchor text and links in Magic Purple #3f0791, with white canvas areas and bold, full-width gradient story bands using measured palette colours such as Electric Violet #5b00ed, Cereal Sky #bfefff, and Berry Magenta #c231a9. Give the hero a clear split between oversized, colourful cereal packaging imagery and a concise headline with prominent shopping actions. Use rounded product cards, pack-shot photography, compact ratings, and scannable product grids. Mix in creator-video reviews and benefit-led split panels. Keep the layout spacious across major sections but information-dense within browsing rows. Use white text on saturated bands and preserve clear contrast for every CTA. Finish with a black footer and white links, controls, and subscription form.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-column hero with floating product imagery and copy. | primary purchase CTA, bundle CTA | gradient backdrop, large bold heading, pill buttons, product collage |
| 2 | category-nav | A single horizontal row of compact product tiles. | quick category browsing, direct product links | small pack shots, short labels, pastel background |
| 3 | feature-split | Two columns: benefit copy and list beside a large branded image. | subscription benefits, bundle CTA | large heading, benefit list, product photography, purple button |
| 4 | product-grid | Centered heading above a four-column product card grid. | product discovery, price and rating scan, shop links | light cards, pack shots, purple actions |
| 5 | reviews | Centered headline above a horizontal row of portrait review videos. | social proof, play video | gradient band, video tiles, review metadata |
| 6 | feature-grid | Centered heading and category tabs above a multi-column product feature area. | category switching, benefit discovery | pastel gradient, product collage, icon-led benefits |
| 7 | testimonials | Split review headline and quote card, with retailer logos along the lower row. | testimonial carousel, retailer reassurance | soft gradient, rounded quote card, logo row |
| 8 | feature-split | Two-column band with stacked claims beside a large product image. | benefit scanning, product reassurance | purple claim panel, product photography, floating cereal details |
| 9 | cta | Compact centered promise and action in a saturated horizontal band. | reassurance, try-now CTA | magenta-violet gradient, bold headline, small button |
| 10 | footer | Black two-column footer with brand and links beside the newsletter form. | newsletter signup, support and policy links | black background, white text, outlined input and button |

## Source CSS custom properties (selected)

```css
--rc-title-font: 'Poppins', 'Helvetica', sans-serif;
--rc-body-font: 'Poppins', 'Helvetica', sans-serif;
--rc-font-color: #3f0791;
--rc-button-bg-color: #3f0791;
--rc-button-font-color: #ffffff;
--rc-border-radius: 30px;
--oke-widget-spaceAbove: 40px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0;
--oke-starRating-spaceBelow: 0;
--oke-button-backgroundColor: #3f0791;
--oke-button-backgroundColorHover: #3f0791;
--oke-button-backgroundColorActive: #3f0791;
--oke-button-textColor: #fff;
--oke-button-textColorHover: #fff;
--oke-button-textColorActive: #fff;
--oke-button-borderColor: #3f0791;
--oke-button-borderColorHover: #3f0791;
--oke-button-borderColorActive: #3f0791;
--oke-button-borderRadius: 100px;
--oke-button-borderWidth: 0;
--oke-button-fontWeight: 700;
--oke-button-fontSize: 14px;
--oke-button-fontFamily: inherit;
--oke-border-color: #3f0791;
--oke-border-width: 1px;
--oke-text-primaryColor: #3f0791;
--oke-text-secondaryColor: #3f0791;
--oke-text-small: 12px;
--oke-text-regular: 14px;
--oke-text-large: 1.625em;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: undefined;
--oke-avatar-placeholderTextColor: undefined;
--oke-highlightColor: #3f0791;
--oke-shadingColor: #fff;
--oke-attributeBar-shadingColor: #9a9db1;
--oke-attributeBar-borderColor: undefined;
--oke-attributeBar-backgroundColor: #d3d4dd;
--oke-attributeBar-markerColor: #3f0791;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/magicspoon-com