Performance-led design system

Protein Routine, Reimagined

Monochrome authority, electric cyan CTAs, compact commerce cards, and black evidence panels make this feel like athlete retail, not soft wellness.

Flavor Profile

Sweetness
Intensity
Saltiness
Creamy texture
Cheesecake depth
Blueberry lift
Designer Whey 30g Protein
30 Flavours No Sugar Added
Flexpresso Dark Mocha
Coffee+Protein
4.5124k TP
80k+Reviews
60kTests yearly
1%Daily
24 ColorsAction + utility
13 Type LevelsCondensed + neutral
16 ComponentsCommerce-first
64 TokensCore system

01 / Colors

Action First Palette

Primary#4EC3E0Main CTA.
Accent#000000Dark authority.
Body#232323Reading tone.
Muted#6E7173Support copy.
Canvas#FFFFFFPage field.
Surface Alt#EDF1F2Utility fill.
Review Surface#F8F9FAProof blocks.
Border#DEDEDEQuiet shells.
Border Strong#B3B3B3Field edge.
Success#2DB463Valid state.
Error#D81A1AError state.
Warning#F0BB00Caution cue.
Designer#D74388Family accent.
Vegan#6CC24AFamily accent.
Pro Series#8D9093Sub-brand cue.
Sales Red#B70832Promo urgency.

02 / Typography

Compressed Headlines, Clean Utility

Built for progress
Hero — 80px / 600 / 1.10 / -0.02em / Oswald
Maximum taste, measured performance
Display — 64px / 600 / 1.13 / -0.02em / Oswald
Science-backed support for training and recovery.
Headline LG — 32px / 700 / 1.25 / 0em / Inter
Product detail stays dense, but never muddy.
Headline MD — 28px / 700 / 1.14 / 0em / Inter
Flavor profile module title
Title LG — 32px / 700 / 1.00 / -0.04rem / Inter
Compact product card title
Title MD — 24px / 700 / 1.00 / -0.03rem / Inter
Secondary navigation button
Button — 18px / 500 / 1.11 / 0.0125em / Inter
Add to cart
Button CTA — 20px / 700 / 1.10 / 0.0125em / Inter
Larger body copy adds persuasion without switching to all-caps display.
Body LG — 20px / 400 / 1.30 / 0em / Inter
Standard copy carries nutrition detail and trust language in a neutral premium tone.
Body — 16px / 400 / 1.375 / 0em / Inter
Category label
Label — 14px / 700 / 1.29 / 0em / Inter
Small notes handle shipping and disclaimers.
Caption — 12px / 400 / 1.33 / 0em / Inter
€42,90
Pricing Display — 20px / 700 / 1.30 / 0em / Inter

03 / Buttons

Rounded Commerce Controls

button-primary
button-primary-active
button-secondary
button-ghost
button-text
button-product-cta
button-icon

04 / Cards & Surfaces

Clean Retail Surfaces

Product Card

Designer Whey

Flavor count, price, and quick-add in one compact tile.

Review Surface

Community Proof

Pale proof blocks stay credible, not flashy.

Dark Module

Lab-tested quality

Black panels concentrate trust and testing.

Designer Family

Balanced flavor profiles

Product-family color works as a selective surface.

Vegan Family

Plant-based range

Green stays categorical, not global.

Utility Depth

Elevated Select

Shadow appears only when a control needs separation.

05 / Brand-Specific Product Patterns

Supplement Commerce Modules

Compact Product Tile72 x 72 imagery
Designer Whey ProteinNo. 1 whey · 30 Flavours
€42,90
30 Flavours No Sugar Added
Flavor ProfileBlack evidence panel
Sweetness
Intensity
Saltiness

Sweet cheesecake body with a blueberry edge.

Goal Chip RailShopping by intent
Build Muscle Endurance Weightloss Healthy Living

Neutral pills keep category switching light.

Sticky Add to CartPersistent purchase bar
Designer WheyVanilla Milk · 908g
Review Proof StackTrust repetition
Excellent · 4.5 / 5

“Great offers and always plenty of promotions.”

Lab-tested quality

Quality language sits close to purchase.

Quantity + PriceDecision block
€42,90€47,25 / kg · incl. VAT
-1+

06 / Forms

Utility Fields

07 / Spacing

Measured Rhythm

xs — 4px
sm — 8px
md — 16px
lg — 24px
xl — 40px
section — 64px

08 / Radius

Softened Functional Geometry

4pxInput top corners
8pxSticky bar shell
16pxProduct and review cards
27pxPrimary action pills
9999pxGoal chips and metadata pills

09 / Elevation

Mostly Flat, Selectively Raised

Flat Surfacenone

Border and spacing only.

Soft Lift0 0 10px rgba(0,0,0,.05)

Subtle separation.

Mid Lift0 0 10px rgba(0,0,0,.10)

Select and overlay use.

Sticky Bar0 -2px 8px rgba(0,0,0,.10)

Viewport-edge purchase rail.

10 / Extracted Component Tokens

Root Variables

:root {
--brand-primary:#4EC3E0;
--brand-accent:#000000;
--brand-ink:#000000;
--brand-body:#232323;
--brand-muted:#6E7173;
--brand-canvas:#FFFFFF;
--brand-surface:#FFFFFF;
--brand-surface-alt:#EDF1F2;
--brand-border:#DEDEDE;
--brand-success:#2DB463;
--brand-error:#D81A1A;
--font-display:'Oswald',Arial,sans-serif;
--font-ui:'Inter',Arial,sans-serif;
--hero-size:80px;
--display-size:64px;
--button-size:18px;
--button-cta-size:20px;
--radius-sm:4px;
--radius-md:8px;
--radius-lg:16px;
--radius-xl:27px;
--radius-pill:9999px;
--space-xs:4px;
--space-sm:8px;
--space-md:16px;
--space-lg:24px;
--space-xl:40px;
--space-section:64px;
}

Built for Progress. Powered by Trust.