Fueld Design System
Built with intention.
Designed to last.
A living guide to how Fueld looks, moves, and communicates. For designers, developers, and brand partners.
01 — Brand Identity
The Fueld Mark
Our logo system is the cornerstone of our identity. Use it consistently and handle it with care.
Standard Logo
Use on light or white backgrounds
Reversed Logo
Use on dark or coloured backgrounds
Brand Icon
Orange Pie
Do
Maintain clear space equal to the logo height around all sides
Use on high-contrast backgrounds only
Scale proportionally — never stretch or skew
Use approved logo versions exclusively
Don't
Rotate, angle, or flip the logo
Apply drop shadows, outlines, or visual effects
Place on busy or low-contrast backgrounds
Recolour without brand team approval
02 — Colour
Colour Palette
Two palette layers: brand identity colours and a semantically-fixed six-hue health dimension palette used across data visualisation, investor materials, and in-app health scores. Click any swatch to copy the hex value.
Primary — Fueld Green
Primary CTAs, progress indicators, focus rings, badges
Green 50
#ECFFBE
Green 100
#DCFF8B
Green 200
#CDF157
Green 300
#BEF124
Green 500
#97D700
bg-primary
Green 600
#85BE00
Green 700
#61B000
Green 800
#3D5900
Green 900
#243300
Accessibility note: Fueld Green (#97D700) on white fails WCAG AA for small text. Always pair with Gunmetal (#0A2E36) text on green backgrounds.
Secondary — Midnight Green
Secondary buttons, headers, footer background, dark surfaces
Midnight 50
#F0F9FA
Midnight 100
#CCE7EA
Midnight 200
#99CFD5
Midnight 300
#66B7C0
Midnight 500
#124C5A
bg-secondary
Midnight 600
#0F3E48
Midnight 700
#0C3036
Midnight 800
#092224
Midnight 900
#061412
Tertiary — Fueld Orange
Accent CTAs, promotional highlights, energy indicators
Orange 100
#FECBAE
Orange 200
#FDAB7C
Orange 300
#FD8B4A
Orange 400
#FC6B17
Orange 500
#F75C03
Orange 600
#DE5303
Orange 700
#AB4002
Orange 800
#792D01
Orange 900
#471A01
Functional Colours
Semantic UI colours that adapt to dark/light mode via CSS variables
Gunmetal
#0A2E36
text-foreground
Light Grey
#F7F7F7
bg-background
Medium Grey
#979897
text-muted
Border Grey
#D9D9D9
border-border
Warning
#FFC324
Destructive
#FF0000
bg-destructive
Health Dimension Palette
Six semantically-fixed hues — one per health domain. Used in radar charts, investor decks, in-app data dashboards, and health score screens. The colour is the category; never swap them.
Option A — Neutral
Use when content is the focus. Lists, sidebars, data tables.
Nutrition
Hydration, macros, meal logs
Activity
Movement, steps, VO₂ max, HRV
Sleep
Recovery, REM cycles, sleep score
Stress
Cortisol, HRV dips, recovery load
Blood
Biomarkers, glucose, haemoglobin
Genetics
SNPs, trait predispositions, risk
Option B — Colour-tinted
Use for emphasis. Hero sections, investor materials, onboarding.
Nutrition
Hydration, macros, meal logs
Activity
Movement, steps, VO₂ max, HRV
Sleep
Recovery, REM cycles, sleep score
Stress
Cortisol, HRV dips, recovery load
Blood
Biomarkers, glucose, haemoglobin
Genetics
SNPs, trait predispositions, risk
NUTRITION
ACTIVITY
SLEEP
STRESS
BLOOD
GENETICS
Nutrition
#0097D7
Activity
#00D7AC
Sleep
#D7AC00
Stress
#F75C03
Blood
#D70097
Genetics
#7C3AED
Semantic rule: Nutrition is always blue. Activity is always teal. Sleep is always gold. These associations are visible to users across every screen — breaking them creates cognitive dissonance. See 08 — Brand in Colour for the full palette in action.
Anti-pattern — never do this: Do not use a coloured left-border as the sole accent on a card or pill. It reads as a generic AI-generated design shortcut with no visual hierarchy value. Use filled dots, coloured top bars, background tints, or icon accents to carry colour identity instead.
Meal & Nutrition Charts
Meal-category breakdown colours used in nutrition pie charts and meal logs
Breakfast / Carbs
#0097D7
Lunch / Protein
#00D7AC
Dinner / Fats
#D7AC00
Snacks / Fibre
#D70097
03 — Typography
Type System
Inter is our single typeface. It's precise, legible, and professional across all weights and sizes. On dark surfaces, hierarchy is built through transparency — not separate colours.
Display
text-6xl / bold
100% — full
Fueld
H1
text-5xl / bold
100% — full
Health intelligence
H2
text-2xl / semibold
white/80 — 80%
Section heading
H3
text-xl / medium
white/70 — 70%
Subsection heading
Body Large
text-lg / normal
white/60 — 60%
Large body text for emphasis and readability in key moments.
Body
text-base / normal
white/55 — 55%
Standard body copy across all interfaces and marketing surfaces.
Body Small
text-sm / normal
white/50 — 50%
Smaller body text for secondary information and labels.
Caption
text-xs / normal
white/40 — 40%
Caption text for fine print, metadata, and timestamps.
The Transparency Stack
On dark and atmospheric surfaces, visual hierarchy is built through white at different opacities, not different hues. The background colour bleeds through, giving each level its own perceived depth. The effect is most pronounced on atmospheric gradients where the teal undertones modulate the grey.
Atmospheric Surface
One platform.
Three compounding markets.
AI health data, professional care, and preventive medicine — three of the fastest-growing categories in tech.
Fragmented data, unified into a single AI-ready record — creating compounding value for every stakeholder.
The infrastructure layer is the opportunity.
Token Reference
Primary heading
text-whiteDisplay, H1 — never dimmed
Strong secondary
text-white/80H2 — paired headings, bold supporting lines
Section heading
text-white/70H3 — subsection titles in dense layouts
Body emphasis
text-white/60Body Large — hero subtitles, pull quotes
Body standard
text-white/55Body — general paragraph copy
Secondary body
text-white/50Body Small — supporting detail
Metadata
text-white/40Caption — timestamps, fine print, labels
Why transparency? The background shows through — on atmospheric gradients this creates perceived depth and warmth. On flat surfaces it reads as clean grey. Same tokens, two distinct feelings.
Font Family
Inter (Google Fonts)
Loaded via
next/font/google
Weights
400 / 500 / 600 / 700
04 — Components
UI Components
Core interactive components rendered live — brand controls and the full health dimension palette applied to real product patterns.
Health Metric Cards
Core in-app data component — six domains, six colours
Variant A — Neutral
Default. Use in data-dense app screens.
Hydration & macros on track
+4 this week
Steps & VO₂ max monitored
+12% vs last week
REM cycles & recovery optimal
Best 30-day avg
Cortisol elevated — rest advised
−8 from yesterday
Glucose & biomarkers reviewed
3 markers flagged
SNP trait risk profile active
2 new insights
Variant B — Colour-tinted
Emphasis. Hero sections, onboarding, investor materials.
Hydration & macros on track
+4 this week
Steps & VO₂ max monitored
+12% vs last week
REM cycles & recovery optimal
Best 30-day avg
Cortisol elevated — rest advised
−8 from yesterday
Glucose & biomarkers reviewed
3 markers flagged
SNP trait risk profile active
2 new insights
Category & Status Badges
Variant A — Neutral
Lists, tables, inline labels
Variant B — Colour-tinted
Filter chips, active states, onboarding
Brand & UI states
Button Variants
Size variants
Default
Card Title
Standard card state with subtle border
Selected
Card Title
Active or selected state with brand border
Hover
Card Title
Hover state — scale 1.02, deeper shadow
Input Fields
05 — Motion
Animation Philosophy
Animation on Fueld is a quality signal, not decoration. Every animated element must earn its place by clarifying or reinforcing the message.
Purposeful over playful
Motion communicates state change, causality, progress, or sequence. If removing the animation loses no meaning, cut it.
Restraint signals class
Prefer one well-crafted animation per section over many competing movements. Dead space and stillness are intentional.
Performance first
CSS transforms and opacity only. Never animate layout properties. Use will-change sparingly. Always respect prefers-reduced-motion.
Animation Vocabulary
Section entrance
Fade up (y: 20→0, opacity: 0→1)
500ms, ease-out
Staggered list
Each child delays 80–100ms
Same fade-up
Data / metric reveal
Count-up or bar fill
600–900ms, ease-out
Subtle ambient loop
Float (y: 0→−8→0) or slow pulse
4–6s, ease-in-out
Hover state
Scale 1 → 1.03, shadow deepens
200ms
Page transition
Fade (opacity 0 → 1)
300ms
Signature Animations
Two animation patterns used throughout Fueld products. Both combine the health dimension palette with motion to create data that feels alive — not decorative.
Health Web
SVG pathLength draw + vertex glow + pulsing rings
strokeDashoffset 0→1 over 1.6s ease-out
vertex opacity pulse 2.4s loop · stagger 0.38s
feGaussianBlur glow filter on paths + dots
Spectrum Pulse
Sequential wave across health dimensions — shows system activity, data sync, live connection
scale 1→1.9→1 + ring opacity 0.4→0→0.4 · duration 2s · delay i × 0.28s · repeat Infinity
Ambient Orbs
blur-3xl orbs · scale 1→1.3→1 · opacity 14→24% · 5–8s loop · health palette
framer-motion v12
Primary animation tool
motion.* components with initial, animate, whileInView, exit. viewport={{ once: true }} for scroll-triggered reveals.
tailwindcss-animate
shadcn/ui transitions
Used exclusively for dialog, accordion, and select transitions. Not for marketing or content animations.
CSS keyframes
Lightweight loops
For non-interactive floats and pulses where framer-motion would be overkill.
Live Demo
Select a demo above to see it in action
06 — Spacing & Layout
Space & Structure
A standard Tailwind spacing scale. Consistent use of space creates rhythm and hierarchy.
Spacing Scale
2
8px
0.5rem
4
16px
1rem
6
24px
1.5rem
8
32px
2rem
12
48px
3rem
16
64px
4rem
Border Radius
sm
calc(0.75rem − 4px)
md
calc(0.75rem − 2px)
lg
0.75rem (default)
xl
0.875rem
2xl
1rem
full
9999px — pills
Container max-width
1400px at 2xl breakpoint
Container padding
2rem (32px) horizontal
Nav breakpoint
lg: 1024px (hamburger → full)
07 — Backgrounds & Depth
Surface Philosophy
Two intentional background treatments. Flat surfaces maximise content clarity; atmospheric depth signals brand impact. Use them deliberately — never by default.
Flat surface
Clean. Focused.
Content first.
bg-[#0A2E36]
Use for
- → App inner pages and dashboards
- → Data-dense tables and charts
- → Long-form reading contexts
- → Admin and management interfaces
Flat keeps cognitive load low. Every element competes on its own merit, not against background movement.
Atmospheric surface
Dynamic. Dimensional.
Brand forward.
radial-gradient + grid + orbs
Use for
- → Hero sections and landing pages
- → Investor decks and presentations
- → Onboarding and feature reveals
- → Full-bleed brand moments
Atmospheric surfaces make the platform feel alive. Reserve for moments where brand impression matters most.
The Atmosphere Stack
Atmospheric surfaces are built from four layers applied in sequence. Each layer is subtle alone; together they create depth without visual noise.
Base gradient
radial-gradient( circle at top right, #1B5B6E 0%, #0A3E4E 54%, #061C28 100% )
A single light source — top-right corner — lifts the surface from flat to dimensional.
Top fade
gradient-to-b from-[#1B5B6E]/40 to-transparent h-[30%]
A top-edge vignette echoes the light source and softens the gradient's upper boundary.
Grid texture
bg-[size:72px_72px] opacity-[0.06]
A fine white crosshatch at 6% opacity adds micro-texture and spatial scale without competing with content.
Ambient orbs
blur-3xl opacity 8–15% health palette
Soft-blurred circles in health dimension colours pull the data palette into the environment.
Card Depth
Cards on atmospheric surfaces can pick up a directional tint from the health palette, creating a sense of the environment bleeding into the component.
Flat card
Health Score Overview
Data tables, settings, admin
bg-[#0C3036] border-white/10Tinted card
Health Score Overview
Feature highlights, health category cards
linear-gradient(145deg, #071e28, color/12)Glowing card
Health Score Overview
Primary CTA, hero feature, brand centrepiece
shadow: 0 0 48px color/22When to go atmospheric
- ✓ The view is the brand's first impression
- ✓ You want spatial depth, not just colour
- ✓ Content density is low — the background can breathe
- ✓ Dark mode is the primary or only surface
When to stay flat
- ✗ The screen is data-heavy or interactive
- ✗ You need maximum text contrast and legibility
- ✗ Light mode is active (gradients lose power on white)
- ✗ You are nesting sections — only the outermost surface should be atmospheric
08 — Brand in Colour
The palette in action
Six health data dimensions, six distinct colours — each semantically matched to its domain. Together they create depth, clarity, and unmistakable brand character in dark contexts.
Data Sources
Semantic Colour Map
Nutrition
Hydration, macro tracking, meal logs
Activity
Movement, steps, VO₂ max, HRV
Sleep
Recovery, REM cycles, sleep score
Stress
Cortisol, HRV dips, recovery load
Blood
Biomarkers, glucose, haemoglobin
Genetics
SNPs, trait predispositions, risk
Colour Spectrum
NUTRITION
ACTIVITY
SLEEP
STRESS
BLOOD
GENETICS
Dark mode amplifies these colours. Against Gunmetal (#0A2E36) backgrounds, each hue becomes vivid and distinct — impossible to confuse at a glance. In light mode the same palette reads as clean and clinical. The design system supports both without any colour changes — only the surface beneath shifts.
In the Product Environment
The health palette comes fully alive on the atmospheric background. Flat surfaces keep it clinical and precise; the atmospheric stack makes it dynamic and dimensional.
Atmospheric Surface
Radial gradient + grid texture + ambient orbs
Flat Surface
Solid bg-[#0A2E36] — data-dense, clinical, precise
Get in touch
Working with the Fueld brand?
Reach out to our team for brand assets, partner guidelines, or questions about the design system.