> ## Documentation Index
> Fetch the complete documentation index at: https://foreverbetter.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design systems

> Curated design-token sets for health & wellness UIs, so you can style your product in minutes.

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)**.

```bash theme={null}
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`:

```json theme={null}
{
  "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

| id                | inspired by  | scheme | best for                                   |
| ----------------- | ------------ | ------ | ------------------------------------------ |
| `ring-data`       | Oura         | dark   | sleep & readiness scores, ring data viz    |
| `performance`     | WHOOP        | dark   | strain & recovery, training load           |
| `clinical-modern` | Superpower   | light  | biomarker panels, lab memberships          |
| `metabolic`       | Levels       | light  | CGM & glucose graphs, time-in-range        |
| `system-cards`    | Apple Health | light  | multi-metric summaries, native iOS feel    |
| `serene`          | Calm         | dark   | mindfulness, 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.