Healthcare & Wellness design systems
DESIGN.md files for 7 Healthcare & Wellness brands, Calm and Drunk Elephant among them: colors, typography and components for React, Next.js and AI tools.
7 DESIGN.md files
Oura Ring, Calm, Headspace and 4 more: each brand's colors, typography and components in one file your AI agent builds from. Free to download.
Other categories
28 more industries, largest first. Each lists every one of its systems.
- E-commerce & Retail87 systems
- Developer Tools & IDEs71 systems
- AI & LLM Platforms65 systems
- Productivity & SaaS54 systems
- Banking & Payments51 systems
- Automotive44 systems
- Fintech & Crypto42 systems
- Backend, Database & DevOps37 systems
- News & Publishing29 systems
- Music, Video & Streaming28 systems
- Consumer Electronics27 systems
- Design & Creative Tools27 systems
- Travel & Hospitality20 systems
- Web Infrastructure & Hosting19 systems
- Social & Community18 systems
- Food & Delivery16 systems
- Communication & Messaging15 systems
- Gaming & Entertainment15 systems
- Marketplaces14 systems
- Analytics & Data12 systems
- Marketing & CRM10 systems
- Documentation & Knowledge9 systems
- Project Management9 systems
- Workflow & No-code8 systems
- Hardware & Robotics5 systems
- Education & Learning4 systems
- Mobile Platforms3 systems
- Real Estate & Property1 system
Found your style? With Pro, your AI agent builds it from blocks, templates and icons, from a prompt.
Get ProBuild it with Pro
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
- One design and one theme on all four: the components, blocks and effects are built for each framework.
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
- Debounce, local storage, media queries and more: each hook is one typed file you own.
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
- One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
- Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
Healthcare & Wellness design systems FAQ
The 7 Healthcare & Wellness systems: their brands, colors, fonts and components, and how to use the files.
7 DESIGN.md files for Healthcare & Wellness brands, among them Calm, Drunk Elephant, Fitbit, Headspace, Oura Ring and Peloton. Each holds one brand's colors, typography, corner radii, spacing and components as tokens.
Healthcare & Wellness is one of 29 categories. A brand can sit in more than one: the category page lists every system tagged Healthcare & Wellness, and each links to its own page with the full file.
Oura Ring has the most components of the Healthcare & Wellness files, 22. Oura Ring has the widest palette, with 22 color tokens.
No. Each DESIGN.md describes the look of a brand's public website. It is not official, and the brands have not endorsed it; their names and logos belong to them.
Open the brand's page for its full palette. A few primaries in Healthcare & Wellness: Calm #2477aa, Drunk Elephant #000000, Fitbit #1967d2 and Headspace #0061ef.
Every file lists its colors as quoted hex values with names such as `primary`, `canvas` and `ink`. The finder on /design also searches by color word, so you can look for the Healthcare & Wellness systems that use a given hue.
Copy a brand's `primary`, background and ink tokens into your CSS variables (`--primary`, `--background`, `--foreground`). Calm is a good place to start: its page shows its palette next to its components.
Set the family under `--font-sans` (or `--font-heading`) in your `@theme` block, then reuse the DESIGN.md's sizes, weights and line heights. Load the font with `next/font` or a stylesheet, as you would any other.
Figtree (1 system), BrownRegular (1 system) and BrownBold (1 system). Counts are the Healthcare & Wellness files that use the family in a type token.
Oura Ring has the most type tokens of the Healthcare & Wellness files, 15: a full scale from display sizes to captions.
Keep the sizes, weights and spacing from the DESIGN.md and set the family to an open font. Some brands use proprietary families that need their own license.
Pick the brand on this page, then give its DESIGN.md to your agent with the component you want, such as a pricing table or a navbar. The agent builds it from the brand's component tokens, so a Healthcare & Wellness look carries into your own code.
By the shape of their components, the Healthcare & Wellness files split 3 soft, 3 mixed and 1 sharp. A brand's page shows its corner radii and a live mockup in use.
Oura Ring defines 22 components, the most in Healthcare & Wellness. Each lists properties such as its background, text color, type and corner radius as references to the other tokens, so an agent can build it directly.
Copy the radius token into `--radius` and the colors into your CSS variables. The shadcn/ui components read them, so a Button and a Card take on the Healthcare & Wellness brand's look.
Open a brand in Healthcare & Wellness, download its DESIGN.md or copy it as Markdown, and give it to Claude Code, Cursor or another agent with a prompt such as "build this page in the style of the DESIGN.md". The agent reads the tokens and writes matching components.
Yes. The 7 Healthcare & Wellness files are free to download or copy, with no account.
Yes: the files are plain Markdown, so take the tokens you like from two of them. Treat them as starting points for your own brand, not as the brands' assets.
The main directory has 29 categories, such as E-commerce & Retail, Developer Tools & IDEs and AI & LLM Platforms. See /design/category/healthcare-and-wellness for this one; the other category pages are linked at the bottom of this page.
4.9 out of 5 from 150+ developers
Your system, built for you
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.
Get Pro
- Cancel anytime
- Keep what you've shipped