Skip to main content
Building a health product’s UI is easier when you start from a coherent design system. GET /design/systems returns a curated library of design-token sets covering color, typography, spacing, radii, elevation, motion, and signature components, each inspired by the public aesthetic of a well-known wellness app. These are public reference data (no auth required). 
curl -s "$FB_API/design/systems" | jq .
curl -s "$FB_API/design/systems/ring-data" | jq .

​
What you get

GET /design/systems lists every system with a short vibe and what it’s best_for. GET /design/systems/{id} returns the full token set plus a ready-to-paste design_md: 
{
  "id": "ring-data",
  "inspired_by": "Oura",
  "color_scheme": "dark",
  "colors": { "background": "#0d0e12", "primary": "#d4b483", "data_viz": ["#d4b483", "#4ecdc4", "..."] },
  "typography": { "font_display": "\"Fraunces\", serif", "google_fonts": ["Fraunces:...", "Inter:..."], "scale": { "display": { "size": "56px", "weight": 500 } } },
  "spacing": { "base_px": 4, "scale_px": [4, 8, 12, 16, 24, 32, 48, 64] },
  "radii": { "md": "16px", "pill": "999px" },
  "components": { "score_ring": { "description": "…", "css": { "stroke-width": "10px" } } },
  "layout": { "hero": "score-ring", "score_word": "Readiness", "voice": "editorial", "sections": ["ring-hero", "balance-tiles", "gentle-plan"], "summary": "Circular readiness ring, three balance tiles, gentle next steps." },
  "design_md": "…"
}
The design_md field is a complete DESIGN.md you can drop into Cursor, Claude Code, or v0 to steer generated UI toward that look. Each system also carries a layout: systems differ in dashboard structure as well as palette. hero names the signature component (score-ring, dual-gauge, lab-table, zone-bar, card-grid, breathing-orb), and sections and voice give the order and tone. A client that renders a dashboard should switch layout by hero, so a WHOOP-style board looks different from an Oura-style one. The open-source analyze-longevity skill ships a reference renderer that does exactly this.

​
Available systems

idinspired byschemebest for
ring-dataOuradarksleep & readiness scores, ring data viz
performanceWHOOPdarkstrain & recovery, training load
clinical-modernSuperpowerlightbiomarker panels, lab memberships
metabolicLevelslightCGM & glucose graphs, time-in-range
system-cardsApple Healthlightmulti-metric summaries, native iOS feel
sereneCalmdarkmindfulness, sleep stories, mood check-ins

​
How these are sourced

The token values are our own encoding, built with open Google Fonts and system font stacks. No proprietary fonts, screenshots, or third-party design datasets are used. Each system credits the app that inspired its direction; it is not affiliated with or endorsed by that app. Treat them as a starting point and make them yours.