Skip to content
Browse
Library

High Protein. Neon cereal arcade.

  • Commerce
  • Light theme
  • 8 colors
  • 4 typefaces

Magic Spoon builds a candy-colored grocery shelf around saturated violet, lavender, aqua, and high-key product photography. Oversized Poppins headlines use blunt 700-weight forms and tight line-height, while white outlined controls, scalloped nutrition seals, and chunky pill buttons turn functional shopping into collectible packaging language. Pages flow through broad pastel color fields, contained product cutouts, and white merchandise cards; vivid purple is reserved for the strongest type, borders, and conversion controls.

Visit magicspoon.com
Screenshot of Magic Spoon
Captured from magicspoon.com on October 11, 2026

High Protein design system

High Protein

Brand2

  • Hero and promotional-field backgrounds, decorative graphic fills, and gradient endpoints — the saturated violet makes product packaging and white headline copy appear switched on; Use for high-energy promotional banners and featured product graphics

  • Primary headings, navigation accents, 2px outlines, filled conversion buttons, product-link text, and icon linework — this dark violet anchors the otherwise sugary pastel palette

Accent2

  • Magenta endpoint for promotional violet gradients and occasional decorative graphic energy

  • Pale blue promotional bands, cool-text accents, and gradient washes behind product content; Use for broad section transitions behind subscription and shopping content

Neutrals4

  • Footer ground, dark utility surfaces, and monochrome icon fills

  • Muted lavender category-control fills and secondary surface transitions

  • Dominant page canvas, product-navigation strip, and quiet lavender section backgrounds

  • Card surfaces, hero controls, reversed text, borders, and product-image grounds

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Marshmallow on Deep Concord

12.72 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.