Supernatural

Overview

Supernatural is a playful, optimistic brand for creative bakers seeking clean-label, dye-free baking ingredients. The design system embraces "Joyful Minimalism with Hand-Drawn Warmth"—a movement that pairs bold, high-contrast typography with whimsical illustration, creating an approachable yet premium aesthetic. The brand evokes the feeling of childhood wonder meets adult sophistication: bright, energetic, and unapologetically fun. The UI celebrates color and personality while maintaining clarity and usability.

The voice is conversational, encouraging, and never condescending. Supernatural speaks to bakers of all skill levels with warmth and humor. Vocabulary leans into playful descriptors ("Yums without yucks," "Feel-good sprinkles") and emphasizes transparency ("Clean Label Project Certified," "No titanium dioxide"). Example sentence in brand voice: "Bake something beautiful—your ingredients deserve to be as good as your creations."

Colors

The color palette is built on a foundation of optimistic yellow (#ffd32f) paired with a bold black (#000000) for maximum contrast and legibility. Primary (#000000) is the workhorse color for text, buttons, and structural elements—it commands attention and ensures accessibility across all backgrounds. Secondary (#02dba8), a vibrant teal, is used sparingly for accent highlights, success states, and supporting CTAs to add energy without overwhelming. Tertiary (#ffd32f) reinforces the brand's signature yellow and appears in badges, highlights, and secondary UI elements.

The surface stack uses a warm, off-white base (#fdfde0) that evokes the natural, clean aesthetic of the brand. Surfaces range from surface-dim (#f5f5d0) for recessed areas to surface-bright (#fffef5) for elevated content. Erro

Typography

The type system pairs Chewy (a playful, rounded display font) for hero headlines with proxima-nova and Chivo for body and supporting text. Display (70px, Chewy, 400 weight) creates immediate visual impact and brand recognition on hero sections. Headline-lg (40px, Chivo, 900 weight) and headline-md (28px, Chivo, 900 weight) establish clear information hierarchy with bold, confident weight. Body-lg (18px, proxima-nova, 400) and body-md (16px, proxima-nova, 400) provide comfortable reading at standard line-height of 1.5 (28px and 24px respectively). Label-md (14px, neue-haas-grotesk-text, 600 weight) and label-sm (12px, neue-haas-grotesk-text, 400 weight) are reserved for UI labels, buttons, and form text. When small labels appear over busy product photography or colored backgrounds, apply te

Layout

The layout uses a 12-column grid with a max-width of 1280px, supporting both fixed and fluid breakpoints. The spacing scale is semantic: unit (8px) is the base increment; sm (12px) for tight grouping; md (24px) for standard section separation; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. Container padding uses gutter (24px) on desktop, reducing to sm (12px) on mobile. White-space is generous but purposeful—the brand avoids cramped layouts. Hero sections use full-width backgrounds with centered content at container-max-width. Product cards and content blocks are separated by lg spacing (40px) vertically and md spacing (24px) horizontally. The grid rhythm creates a breathing, approachable feel that matches the brand's optimistic personality.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow, using surface-container (#fdfde0) as the default. Level 2 (Standard Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and modals to lift them slightly from the background. Level 3 (Elevated Modals & Popovers): box-shadow: 6.5px 11.3px 19px 0 rgba(0, 0, 0, 0.11), creating a more pronounced depth for full-screen modals and critical overlays. Hover states on interactive elements transition to Level 3 shadows over 200ms (cu

Shapes

The shape philosophy is "Soft-Technical Playfulness"—combining geometric precision with subtle softness. Buttons use a 24px border-radius (rounded.lg) to feel approachable and modern without being overly rounded. Input fields use 12px border-radius (rounded.md) for a balanced, functional appearance. Cards and containers default to rounded.DEFAULT (8px) for clean, minimal edges. Badges and pills use rounded.full (9999px) for maximum softness and visual distinction. The rationale: larger radii (24px+) signal friendliness and approachability on primary CTAs; smaller radii (8px–12px) maintain clar

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor: {colors.primary} (#000000), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 44px, and borderRadius: 24px. On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#222222) over 150ms. Focus states add a 2px solid outline in {colors.primary} with a 4px outer ring in {colors.surface-container-highest}. button-secondary uses a transparent background with a 2px solid border in {colors.primary}, same padding and height. On hover, the background transitions to {colors.surface-container-high} (#f0f0d0) over 150ms. Both button variants use typography.label-md (14px, neue-haas-grotesk-text, 600 weight) for clear, scannable text.

Conta

Do's and Don'ts

**Do**

• Do use primary (#000000) for all primary CTAs, headlines, and critical UI elements—it's the brand's anchor color and ensures accessibility.
• Do apply generous white-space (lg spacing, 40px) between major sections to create breathing room and emphasize the playful, optimistic tone.
• Do pair Chewy (display font) with proxima-nova or Chivo for body text to create visual contrast and hierarchy without overwhelming.
• Do use secondary (#02dba8) as a supporting accent for success states, secondary CTAs, and highlights—never as the dominant color.
• Do apply the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and inputs to create subtle depth and lift them from the background.

**Don't**

• Don't use tertiary (#ffd32f) as a background for body text—it's too bright and reduces contrast. Reserve it for badges, highlights, and secondary UI.
• Don't apply border-radius larger than 24px on buttons or inputs; it breaks the soft-technical balance and feels too playful for functional elements.
• Don't use on-surface-variant (#666666) for primary text; it's reserved for secondary labels and disabled states. Always use on-surface (#222222) for body copy.
• Don't mix Chewy with proxima-nova in the same headline—use Chewy for display/hero only, and Chivo for all other headlines to maintain hierarchy.
• Don't apply shadows larger than Level 3 (6.5px 11.3px 19px) on any element; it creates visual clutter and contradicts the clean, minimalist aesthetic.