Fueld Logo
Get Started

Brand Guidelines

WHOOP guidance, translated into Fueld.

This first pass turns the supplied WHOOP PDF into a usable web page inside the Fueld system. It keeps our layout, typography, and component language, while preserving the partner rules that matter most: attribution, logo handling, metric naming, and data colour semantics.

Open Fueld brand guidelines v2Design system v2v1 reference

What this page covers

The highest-signal rules extracted from the WHOOP document and mapped to Fueld implementation patterns.

Logo usage and exclusion space
Attribution language for imported WHOOP data
Typography intent and metric emphasis
Colour semantics for recovery, sleep, and strain
Data usage dos, don'ts, and API-ready categories

Logo and attribution

Protect the mark, then clarify the source.

The WHOOP PDF is strict about visual integrity and equally strict about communicating when data comes from WHOOP. On Fueld surfaces, attribution should feel native, but never hidden.

Logo rules

Use official WHOOP assets only, and keep them visually separate from Fueld-owned graphics.

Do

Use the official WHOOP wordmark as the primary logo and the puck icon only in compact contexts.
Keep logos black or white only, with enough contrast against the background.
Maintain generous clear space so the mark never feels crowded.
Respect the minimum sizes from the supplied artwork before exporting or placing assets.

Do not

Do not distort, warp, rotate, recolour, outline, or restyle the WHOOP logo.
Do not place the logo over imagery or tones that reduce legibility.
Do not place the Fueld mark too close to WHOOP data visualisations.
Do not create your own lockups or substitute a typed word for the official asset.

Approved attribution language

Use these patterns near imported data, recommendation modules, and WHOOP-derived insights.

Data by WHOOP
Imported from WHOOP
Powered by WHOOP
Recommendations based on your WHOOP Recovery

Typography

Premium, open, and led by hierarchy.

WHOOP's typography guidance is less about exact font replication for Fueld and more about maintaining a clean, premium information hierarchy. The page should feel controlled, not decorative.

Typography translation for Fueld

Preserve the intent of the WHOOP system while staying inside our existing font stack and type scale.

Headlines

WHOOP uses bold, uppercase headline treatments. On Fueld pages, keep our Inter-based type scale, but preserve the premium, restrained feel with short headings and tight hierarchy.

Body copy

Keep copy clear, direct, and compact. The PDF emphasises clarity over decoration, which aligns with Fueld's evidence-led tone.

Numbers

Use the clearest possible number styling for metrics, percentages, and recovery ranges. Numerical emphasis matters more than ornament.

Example hierarchy

A simple reference block for how WHOOP-related content should feel on a Fueld page.

Data by WHOOP

Recovery should stay explicit.

Keep the score prominent, keep the wording precise, and let the surrounding Fueld insight explain what the number means in context.

Recovery

87%

High recovery

Colour semantics

Use WHOOP colours for WHOOP meaning, not decoration.

The biggest risk is borrowing the palette loosely. On Fueld, WHOOP colours should appear only when they preserve the original metric meaning. Fueld's own UI chrome should still rely on our semantic tokens.

Brand black

#000000

Primary WHOOP branding surfaces and high-contrast lockups.

Brand white

#FFFFFF

Reversed logo treatments on dark backgrounds.

CTA teal

#00F19F

Calls to action, highlights, positive evaluations, and Sleep Need.

Strain blue

#0093E7

Activities, strain, and exertion-related contexts.

Recovery high

#16EC06

Recovery between 67 and 100 percent.

Recovery medium

#FFDE00

Recovery between 34 and 66 percent.

Recovery low

#FF0026

Recovery between 0 and 33 percent.

Sleep

#7BA1BB

Sleep-related metrics and charts.

Recovery blue

#67AEE6

Recovery-related data without positive or negative valuation.

Implementation note

Continue using Fueld primitives such as `bg-primary`, `bg-secondary`, `text-foreground`, and `border-border` for layout, cards, navigation, and buttons. Bring WHOOP colours into charts, badges, and metric states only when the surface is explicitly representing WHOOP data.

Data usage

Add context, not confusion.

WHOOP allows the data to power recommendations and insights, but the product around it must stay faithful to the original metrics. Fueld should add intelligence around the score, not relabel it.

Do

Keep WHOOP data contextual and clearly attributed.

Use WHOOP data to add context and value rather than simply repeating a score.
Keep WHOOP metric names intact when referring to proprietary measures such as Recovery and Strain.
Show attribution near imported metrics, insights, and data-led recommendations.
Use the WHOOP recovery colours only when the underlying semantics match WHOOP ranges.

Do not

Avoid patterns that dilute or misrepresent the source metrics.

Do not contradict WHOOP coaching with advice that ignores recovery or strain state.
Do not rename WHOOP proprietary metrics or invent alternative labels for the same score.
Do not switch attention away from the score with vague titles that obscure the metric.
Do not reuse WHOOP's traffic-light colours for unrelated Fueld concepts.

Usable data

A practical subset of WHOOP data for Fueld surfaces.

The source PDF lists a usable subset of API-driven data categories. This section turns that into a browsing structure you can extend into charts, recovery modules, or professional-facing reports.

Recovery

Suitable for attribution-aware Fueld modules.

Recovery score
Resting heart rate
Heart rate variability
Skin temperature
Blood oxygen

Sleep

Suitable for attribution-aware Fueld modules.

Sleep performance
Sleep consistency
Sleep efficiency
Respiratory rate
Sleep stage duration

Workouts and strain

Suitable for attribution-aware Fueld modules.

Activity strain
Activity type
Average heart rate
Maximum heart rate
Heart rate zone duration
Energy burned
Day strain

Profile

Suitable for attribution-aware Fueld modules.

Name
Email
Body measurements
Max heart rate
Height
Weight

Next step for this page

This is intentionally the first version: a clean, readable translation of the PDF into the Fueld site. From here, the page can evolve into a fuller partner guidelines reference with live logo assets, downloadable snippets, and richer chart examples that demonstrate correct WHOOP data usage inside Fueld.