Design System — v2
Fueld v2 takes its cues from premium dark-UI elevation, editorial typography, and the discipline of a single signal colour. Surfaces stay still so the data can move. The brand stays restrained so the insight feels earned.
Active canvas
Obsidian
Near-black canvas, hue-neutral, maximum contrast. Pick this for product surfaces where data is the hero.
01 — Foundations
Before a colour, a control, or an animation, the system asks: does this earn its place in the hierarchy, the signal economy, and the voice?
Surfaces gain hierarchy through translucent overlays — never shadow alone, never gradient flourish. Depth is structural.
Voltage green appears only when something is interactive, recommended, or affirmed. Everything else stays in the canvas.
A serif headline does the lifting; a tight humanist sans carries the body. Health intelligence should read like a longform essay, not a dashboard.
02 — Elevation
Adapted from the Material dark-elevation principle: as a surface gains importance, it adds a translucent white overlay on the canvas. Shadow alone is dishonest in dark UI — overlays preserve hue and read at every contrast level.
z00
Page canvas
z01
Quiet card
z02
Card / module
z04
Raised card
z08
Menu / popover
z16
Modal / sheet
z24
Floating tooltip
Practical mapping
Page canvas: z00. Standard cards and modules: z02. Hover or selected state: rise to z04. Menus, popovers and selects: z08. Modals and sheets: z16. Tooltips that float above everything else: z24. Never skip more than two steps in a single component or the hierarchy collapses visually.
03 — Signal palette
Voltage is the only saturated colour the user should encounter. Everything else either sits in the canvas or carries a specific semantic load. If a colour cannot answer 'what does this mean?' it does not appear.
Voltage
Primary signal — actions, success, focus rings. The only colour that earns full saturation.
Voltage 200
On-canvas tint for badges and progress fills
Ember
Accent only — promotional, single-CTA emphasis
Warning
Caution states, low-severity alerts
Alarm
Destructive, high-severity, blocking
Dimensional palette
Used in charts, modules, and badges to keep each axis of the health web instantly recognisable. Each colour has a single canonical use — do not borrow them for unrelated UI emphasis.
Nutrition
Activity
Sleep
Stress
Blood
Genetics
04 — Typography
Instrument Serif carries the editorial voice — italic where the language earns it. Inter Tight handles every functional surface, with JetBrains Mono reserved for data, codes, and metric units.
Instrument Serif
DisplayDisplay 1
Health, intelligently.
Display 2
A quieter signal.
Headline
Recovery, in context.
Subhead
Sleep is a function of the day before.
Inter Tight
BodyLede
Fueld treats your body as a system, not a scoreboard. Every metric is connected to a behaviour, and every behaviour to an outcome you can act on tomorrow morning.
Body
Tight humanist sans-serif keeps long passages readable on dense product surfaces. Width has been pulled in from Inter to Inter Tight to match the editorial pace of the serif headlines.
Caption
Used for metric labels, attribution, footnotes, and timestamps. Sentence case unless it represents a brand name or proper noun.
JetBrains Mono — data
HRV +12.4 ms
Display tracking
−0.02em
Pulls letters into a single editorial line
Body tracking
−0.005em
Inter Tight reads naturally at this width
Line height
1.05 / 1.65
Display tight; body generous
05 — Components
The system favours flat, tactile controls with a 1px structural border and a single hover lift. Voltage appears on focus, on primary actions, and on affirmation — never as background decoration.
Buttons
Inputs
Badges
Metric module
Recovery
78 %
+4 vs 7d
Sleep score
6.4 /10
−0.3 vs 7d
HRV
64 ms
+12 vs 7d
06 — Motion
Animation in v2 is purposeful and rare. Framer Motion is the only tool. If removing the animation loses no meaning, it should not be there. The vocabulary below is the entire grammar.
Insight earns a quiet entrance.
y: 24 → 0, opacity 0 → 1, 550ms, custom cubic-bezier
Section entry
fade up — y:24→0, opacity 0→1
550ms
Stagger list
children delay 80ms, fade up
per item 450ms
Path draw
pathLength 0 → 1
1.0–1.4s
Hover lift
translateY −2px
180ms ease-out
Signal pulse
ring scale 0.4 → 1.6, opacity 0.8 → 0
2.4s loop
Modal entry
scale 0.96 → 1, opacity 0 → 1
220ms
Next
The brand guidelines page applies the new system to logo, voice, photography, mascot, and the product surfaces a customer actually encounters.