SuperYou

Overview

SuperYou is a performance-nutrition brand that channels bold, high-contrast visual energy to celebrate functional snacking. The design system embraces a "Dynamic Maximalism" aesthetic—combining a vibrant primary red (#ef1400) with crisp white and deep charcoal (#151515) to create immediate visual impact and clarity. The brand speaks to health-conscious, energetic consumers who reject bland wellness messaging; every interface element radiates confidence and vitality. The UI employs sharp geometric forms, high-saturation color blocking, and assertive typography to convey authenticity and performance. Voice: direct, celebratory, unapologetic. Example sentence: "13g of protein, zero compromise—grab your power puff now."

Colors

The color system is built on extreme contrast and functional clarity. Primary (#ef1400) is the signature action color—used exclusively on CTAs (buttons, links, badges), focus states, and brand-critical moments. It commands attention without apology: background: rgb(239, 20, 0); color: rgb(255, 255, 255) on all primary buttons. Secondary (#0052cc, a deep cobalt) provides a cool counterpoint for secondary actions and informational elements, creating visual rhythm without competing for dominance. Tertiary (#ffcc00, a warm yellow) is reserved for highlights, promotional badges, and accent callouts—it energizes without overwhelming. The surface stack anchors the system: surface (#ffffff) is the default canvas, surface-container-highest (#c2c2c2) creates subtle depth for cards and containers, an

Typography

The type system pairs Helvetica Now Variable (headlines, display, UI labels) with Roboto (body copy, descriptions) to balance modern precision with approachable warmth. Display (60px, 800 weight, -0.04em tracking) is reserved for hero statements and major page titles; Headline-lg (44px, 800 weight) anchors section headers with aggressive presence. Headline-md (28px, 700 weight, Archivo) bridges to body content with measured emphasis. Body-lg (18px, 400 weight, Roboto) and Body-md (16px, 400 weight, Roboto) maintain consistent 0.06rem letter-spacing for legibility across product descriptions and instructional text. Label-md (14px, 700 weight, Helvetica Now Variable) is applied to all button text and form labels—the weight ensures clickability and scannability. On small labels over busy prod

Layout

The layout system uses a 12-column grid with a max-width of 1280px (--page-width: 160rem in root CSS). The grid employs 20px vertical and horizontal spacing on desktop (--grid-desktop-vertical-spacing: 20px; --grid-desktop-horizontal-spacing: 20px) and 10px on mobile, creating a rhythm that feels both spacious and energetic. Section separation uses lg spacing (40px) to create breathing room between hero, product showcase, and footer zones. Container padding follows the gutter token (24px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. The hero section spans full-width with a 0px margin (--spacing-sections-desktop: 0px) to maximize visual impact. Product cards use 1.8rem border-radius (--product-card-corner-radius: 1.8rem) and sit in a responsive grid that reflows from

Elevation & Depth

Depth is achieved through a restrained shadow and border system that avoids visual heaviness. Level 1 (Base): flat surfaces with no shadow; background: rgb(255, 255, 255); border: none. Level 2 (Cards & Containers): subtle drop shadow (box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)) paired with a 0.2rem solid border in outline-variant (#c2c2c2) to define edges without depth illusion. Level 3 (Modals, Overlays, Hover States): elevated shadow (box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15)) with the same border treatment. Buttons use no shadow by default (--buttons-shadow-visible: 0) to maintain flatness;

Shapes

The shape philosophy is "Architectural Sharpness with Functional Softness"—sharp corners on buttons and inputs (0px border-radius) signal action and urgency, while cards and containers use 1.8rem (28.8px) border-radius to feel approachable and modern. Buttons (--buttons-radius: 0px) are deliberately angular to emphasize CTAs; this sharpness contrasts with the rounded product cards, creating visual hierarchy. Inputs use 26px border-radius (--inputs-radius: 26px) to feel friendly and inviting—a pill shape that softens form interactions. Badges and pills use 40px border-radius (--variant-pills-ra

Components

Action Elements Buttons are the primary interaction surface. Button-primary uses background: rgb(239, 20, 0); color: rgb(255, 255, 255); border: 1px solid #ef1400; border-radius: 0px; padding: 10px 15px; height: 48px. On hover, shift to background: #c21400 (a 20% darker red) with no shadow—the color shift alone signals interactivity. On active/pressed, darken further to #a01000. All button text uses label-md typography (14px, 700 weight, Helvetica Now Variable, 0.01em tracking) for maximum scannability. Button-secondary uses a transparent background with a subtle border (1px solid rgba(0, 0, 0, 0.1)) and on-surface text; on hover, fill with surface-container-high (#dcdcdc) to indicate affordance. Transitions: all button state changes use a 150ms ease-out timing function (transition: ba

Do's and Don'ts

**Do**

• Do use primary red (#ef1400) exclusively on CTAs, focus states, and brand-critical moments—never dilute it with secondary colors in the same component.
• Do maintain 0px border-radius on all buttons to signal urgency and action; reserve rounded corners for secondary containers and decorative elements.
• Do apply 0.06rem letter-spacing to all body copy (Roboto) to ensure legibility at small sizes and maintain brand consistency across product descriptions.
• Do use box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) on cards and containers; never exceed 0.15 opacity to avoid visual heaviness.
• Do pair Helvetica Now Variable (headlines, labels) with Roboto (body) to balance modern precision with approachable warmth—never mix serif fonts or system fonts in headlines.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs; primary red is sacred and must remain the sole action color to avoid confusion.
• Don't apply border-radius > 1.8rem to product cards or containers; the 28.8px radius is the maximum before losing architectural sharpness.
• Don't use box-shadow values with blur-radius > 10px or spread-radius > 2px; keep shadows subtle and functional, never decorative.
• Don't mix Helvetica Now Variable with Roboto in the same headline or label; choose one per component to maintain visual coherence.
• Don't reduce padding below 12px (sm token) on mobile or below 24px (md token) on desktop; white-space is essential to prevent visual clutter and maintain brand energy.