design.md
Back to directory
healthcare · clinical · minimal · premium · saas

Clinic Pearl.

Clinical software that doesn't feel clinical. Cool pearl off-white surfaces with hairline-only chrome, Manrope for prose, IBM Plex Mono with tabular numerals for vital signs and dosages, a single deep teal accent reserved for the active patient pane. Built for healthcare platforms, clinical SaaS, and any product where calm authority matters more than personality.

01 · Preview

The kitchen sink.

Clinic.app
ProductPricingDocsAbout
Sign inGet started
healthcare · clinical · minimal

Build with Clinic Pearl.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#0E1F2A
secondary
#5A6770
tertiary
#0E1F2A
neutral
#EAEEF1
surface
#F5F7F9
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
4px
md
8px
lg
12px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypeTerminal

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Clinic Pearl"
3description: "Clinical software that doesn't feel clinical. Cool pearl off-white surfaces with hairline-only chrome, Manrope for prose, IBM Plex Mono with tabular numerals for vital signs and dosages, a single deep teal accent reserved for the active patient pane. Built for healthcare platforms, clinical SaaS, and any product where calm authority matters more than personality."
4tags: [healthcare, clinical, minimal, premium, saas]
5colors:
6  primary:   "#0e1f2a"
7  secondary: "#5a6770"
8  tertiary:  "#0e1f2a"
9  neutral:   "#eaeef1"
10  surface:   "#f5f7f9"
11typography:
12  display: Manrope
13  body:    Manrope
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "3.25rem / 1.06 / 700 / -0.03em"
17    h1:   "2.125rem / 1.16 / 700 / -0.022em"
18    h2:   "1.4375rem / 1.3 / 600 / -0.012em"
19    body: "0.9375rem / 1.6 / 400 / -0.005em"
20radius:
21  sm: 4px
22  md: 8px
23  lg: 12px
24  pill: 9999px
25shadows:
26  card:   "rgba(14,31,42,0.04) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(14,31,42,0.08)"
30  divider: rgba(14,31,42,0.08)
31buttons:
32  primary:
33    background: #0e1f2a
34    color: #f5f7f9
35    border: none
36    shape: rounded
37    padding: 10px 20px
38    font: 600 / 0.8125rem
39  secondary:
40    background: #ffffff
41    color: #0e1f2a
42    border: 1px solid rgba(14,31,42,0.12)
43    shape: rounded
44    padding: 10px 20px
45    font: 600 / 0.8125rem
46  outline:
47    background: transparent
48    color: #0e1f2a
49    border: 1px solid rgba(14,31,42,0.18)
50    shape: rounded
51    padding: 10px 20px
52    font: 600 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #5a6770
56    border: none
57    shape: rounded
58    padding: 10px 16px
59    font: 600 / 0.8125rem
60charts:
61  variant: line
62  stroke_width: 1.5
63  fill_opacity: 0.06
64  gridlines: true
65  bar_gap: 10px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Clinic Pearl
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Clinic Pearl** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#0e1f2a`, text `#f5f7f9`, padding `10px 20px`, weight `600`.
110- **Secondary** — rounded shape, bg `#ffffff`, text `#0e1f2a`, border `1px solid rgba(14,31,42,0.12)`, padding `10px 20px`, weight `600`.
111- **Outline** — rounded shape, text `#0e1f2a`, border `1px solid rgba(14,31,42,0.18)`, padding `10px 20px`, weight `600`.
112- **Ghost** — rounded shape, text `#5a6770`, padding `10px 16px`, weight `600`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#f5f7f9`
121- Border: `1px solid rgba(14,31,42,0.08)`
122- Shadow: `rgba(14,31,42,0.04) 0 1px 2px`
123- Radius: `radius.lg` (`12px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `line`
133- Highlight strategy: `single` — emphasize a single bar/point per chart.
134 
135#### Typography pairings
136 
137- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.
140 
141### 4 · Hard constraints
142 
143Never do any of the following without explicit instruction from the user:
144 
145- Introduce a new color, font, radius, or shadow that isn't declared above.
146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
150 
151### 5 · Before you finish — verify
152 
153Run through this checklist for every screen you produce:
154 
155- [ ] Every color used appears in the Colors table above.
156- [ ] Headlines use the display font; body copy uses the body font.
157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
159- [ ] Cards and dividers use the declared border + shadow tokens.
160- [ ] No values were invented; if you needed something missing, you stopped and asked.
161 
162---
163 
164## 1. Atmosphere
165 
166Clinic Pearl is clinical software that refuses to feel clinical. The page surface is cool pearl off-white `#f5f7f9` with cards lifted to pure white — every surface differing by 1-2% lightness. Manrope handles prose with its calm geometric soft-cornered glyphs. IBM Plex Mono with tabular numerals carries every vital sign, dosage, and timestamp so columns of figures align to the pixel. Chrome is hairlines at 8% ink. The single accent is deep teal `#0a6970` — never bright, never aqua — used only on the active patient pane border, the chart line for the active vital, and the focus ring.
167 
168The discipline is in the calm authority: cool surfaces, soft Manrope, mono numerals, and one teal accent that reads as "current focus" without ever shouting.
169 
170**Signature moves**
171- IBM Plex Mono with `font-variant-numeric: tabular-nums` on every vital, dose, timestamp
172- Deep teal `#0a6970` only on the active patient pane border + active vital line + focus ring
173- Pearl off-white `#f5f7f9` page → pure white card — tonal-shift, not shadow-driven
174- Hairline-only chrome at 8% ink — no shadows beyond the 1px lift
175- Manrope at 600/700 for headings — soft authority, never bold-stamped
176 
177## 2. Palette
178 
179### Surfaces
180- **Pearl** `#f5f7f9` — page background (cool fine off-white)
181- **Card** `#ffffff` — elevated surface
182- **Bone** `#eaeef1` — table headers, secondary surfaces
183 
184### Ink
185- **Ink** `#0e1f2a` — text, headings, primary CTA fill (warm-cool near-black, slight blue undertone)
186- **Ink 50** `#5a6770` — secondary text, mono labels
187- **Hairline** `rgba(14,31,42,0.08)` — every divider
188 
189### Accent
190- **Teal** `#0a6970` — active patient pane border, active vital line, focus ring
191- **Teal Soft** `rgba(10,105,112,0.10)` — hovered pane background, focus ring background
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Hero | Manrope | 52px | 700 | 1.06 | -0.03em |
198| H1 | Manrope | 34px | 700 | 1.16 | -0.022em |
199| H2 | Manrope | 23px | 600 | 1.3 | -0.012em |
200| Body | Manrope | 15px | 400 | 1.6 | -0.005em |
201| UI / Button | Manrope | 13px | 600 | 1.4 | 0 |
202| Vital / KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums |
203| Dosage | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums |
204| Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |
205 
206Plex Mono everywhere a number lives — vitals, dosages, lab values, timestamps. The tabular-nums variant is what makes the system read as serious clinical software vs. consumer health.
207 
208## 4. Buttons
209 
210### Primary (Ink)
211```css
212background: #0e1f2a;
213color: #f5f7f9;
214padding: 10px 20px;
215border-radius: 8px;
216font-weight: 600;
217```
218 
219### Secondary (Card White)
220- Pure white, 1px hairline at 12% ink, ink text — same shape, same padding
221 
222### Outline & Ghost
223- Outline: transparent, 1px hairline at 18% ink
224- Ghost: no border, ink-50, hover lifts to ink
225 
226## 5. Cards
227 
228```css
229background: #ffffff;
230border: 1px solid rgba(14,31,42,0.08);
231border-radius: 12px;
232box-shadow: rgba(14,31,42,0.04) 0 1px 2px;
233```
234 
235The single 1px shadow is the maximum lift. The active patient pane adds a 1px teal top border — that is the only place teal appears as a card edge.
236 
237## 6. Charts
238 
239Line charts at 1.5px ink with a 6% teal fill, ending in a teal dot marker. The line variant is primary — used for vital trends. Dashed gridlines at 6% ink. Y-axis labels in IBM Plex Mono uppercase 11px showing units (mmHg, bpm, mg/dL).
240 
241## 7. Tabs
242 
243Underline 1.5px in teal for the active state. Inactive tabs are ink-50 in Manrope 600. Hover = teal-soft background wash. Tabs sit on a 1px hairline baseline.
244 
245## 8. Spacing
246 
247- Base 4px (chart-row aware)
248- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80`
249- Section padding: 80px desktop, 32px mobile
250 
251## 9. Do's & don'ts
252 
253✅ **Do**
254- Use IBM Plex Mono with tabular-nums on every vital, dose, lab value
255- Reserve teal for the active patient pane + active vital line + focus ring only
256- Hold the pearl page → white card tonal step — no decorative depth
257- Keep all card chrome to 1px hairline + 1px shadow
258 
259❌ **Don't**
260- Use bright aqua / cyan — teal at `#0a6970` is muted on purpose, not "clinical bright"
261- Use red/yellow/green for status without consideration — clinical color carries diagnostic weight
262- Use a second accent — teal alone, on three specific surfaces
263- Use proportional figures for clinical data — tabular-nums always
264 
265---
266 
267## Tokens
268 
269> Generated from the same source the live preview renders from.
270> Treat the values below as the contract — never substitute approximations.
271 
272### Colors
273 
274| Role      | Value |
275|-----------|-------|
276| primary   | `#0e1f2a` |
277| secondary | `#5a6770` |
278| tertiary  | `#0e1f2a` |
279| neutral   | `#eaeef1` |
280| surface   | `#f5f7f9` |
281 
282### Typography
283 
284- **Display:** Manrope
285- **Body:** Manrope
286- **Mono:** IBM Plex Mono
287 
288| Role | size / leading / weight / tracking |
289|------|------------------------------------|
290| Hero | 3.25rem / 1.06 / 700 / -0.03em |
291| H1   | 2.125rem / 1.16 / 700 / -0.022em |
292| H2   | 1.4375rem / 1.3 / 600 / -0.012em |
293| Body | 0.9375rem / 1.6 / 400 / -0.005em |
294 
295### Radius
296 
297- sm: `4px`
298- md: `8px`
299- lg: `12px`
300- pill: `9999px`
301 
302### Shadows
303 
304- **card:** `rgba(14,31,42,0.04) 0 1px 2px`
305- **button:** `none`
306 
307### Borders
308 
309- **card:** `1px solid rgba(14,31,42,0.08)`
310- **divider:** `rgba(14,31,42,0.08)`
311 
312### Buttons
313 
314Four variants, each fully tokenized. The preview renders from these exact values.
315 
316#### Primary
317 
318| Property | Value |
319|----------|-------|
320| shape | `rounded` |
321| background | `#0e1f2a` |
322| color | `#f5f7f9` |
323| border | `none` |
324| padding | `10px 20px` |
325| fontWeight | `600` |
326| fontSize | `0.8125rem` |
327 
328#### Secondary
329 
330| Property | Value |
331|----------|-------|
332| shape | `rounded` |
333| background | `#ffffff` |
334| color | `#0e1f2a` |
335| border | `1px solid rgba(14,31,42,0.12)` |
336| padding | `10px 20px` |
337| fontWeight | `600` |
338| fontSize | `0.8125rem` |
339 
340#### Outline
341 
342| Property | Value |
343|----------|-------|
344| shape | `rounded` |
345| background | `transparent` |
346| color | `#0e1f2a` |
347| border | `1px solid rgba(14,31,42,0.18)` |
348| padding | `10px 20px` |
349| fontWeight | `600` |
350| fontSize | `0.8125rem` |
351 
352#### Ghost
353 
354| Property | Value |
355|----------|-------|
356| shape | `rounded` |
357| background | `transparent` |
358| color | `#5a6770` |
359| border | `none` |
360| padding | `10px 16px` |
361| fontWeight | `600` |
362| fontSize | `0.8125rem` |
363 
364### Charts
365 
366| Property | Value |
367|----------|-------|
368| variant | `line` |
369| strokeWidth | `1.5` |
370| fillOpacity | `0.06` |
371| gridlines | `true` |
372| barGap | `10px` |
373| highlight | `single` |
374| dotMarker | `true` |
375 
376---
377 
378## Pro tokens
379 
380> Production-fidelity tokens. States, density, motion, elevation,
381> content rules and a measured WCAG contract — derived from the
382> resting tokens unless explicitly authored.
383 
384### States
385 
386#### Button
387 
388- **hover** — bg: `rgba(14, 31, 42, 0.15)`, color: `#0e1f2a`, border: `1px solid #0e1f2a`
389- **focus** — outline: `1px dashed #0e1f2a`, outline-offset: `2px`
390- **active** — bg: `#0e1f2a`, color: `#f5f7f9`
391- **disabled** — opacity: `0.35`
392- **loading** — opacity: `0.6`
393- **selected** — bg: `#0e1f2a`, color: `#f5f7f9`
394 
395#### Input
396 
397- **hover** — border: `1px solid rgba(14, 31, 42, 0.5)`
398- **focus** — bg: `rgba(14, 31, 42, 0.05)`, border: `1px solid #0e1f2a`
399- **disabled** — opacity: `0.35`
400- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`
401 
402#### Card
403 
404- **hover** — border: `1px solid #0e1f2a`
405- **selected** — bg: `rgba(14, 31, 42, 0.05)`, border: `1px solid #0e1f2a`
406- **dragging** — opacity: `0.7`
407 
408#### Tab
409 
410- **hover** — color: `#0e1f2a`
411- **focus** — outline: `1px dashed #0e1f2a`, outline-offset: `1px`
412- **selected** — bg: `rgba(14, 31, 42, 0.1)`, color: `#0e1f2a`
413 
414### Density
415 
416| Mode | padding × | row × | body | radius × | Use for |
417|------|-----------|-------|------|----------|---------|
418| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
419| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
420| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
421 
422### Motion
423 
424**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.
425 
426```css
427transition: all 120ms linear;
428```
429 
430| Token | Value |
431|-------|-------|
432| duration.instant | `0ms` |
433| duration.fast | `60ms` |
434| duration.base | `120ms` |
435| duration.slow | `200ms` |
436| easing.standard | `linear` |
437| easing.decelerate | `linear` |
438| easing.accelerate | `linear` |
439| easing.spring | `steps(2, end)` |
440 
441### Elevation
442 
443Five-level scale, system-specific recipe.
444 
445| Level | Shadow | Recipe |
446|-------|--------|--------|
447| level0 | `none` | Flat — the stroke carries the hierarchy. |
448| level1 | `none` | Border tone lifts the surface. |
449| level2 | `0 0 0 1px rgba(14, 31, 42, 0.5)` | Ring outline — popover. |
450| level3 | `0 0 0 1px #0e1f2a, 0 12px 32px -16px rgba(14, 31, 42, 0.4)` | Sheet with accent ring + glow. |
451| level4 | `0 0 0 1px #0e1f2a, 0 24px 64px -20px rgba(14, 31, 42, 0.5)` | Modal with accent ring + glow. |
452 
453### Content
454 
455- **measure:** `78ch` (max line length for body prose)
456- **paragraph spacing:** `1em`
457- **list indent:** `1.25em`
458- **list gap:** `0.35em`
459- **link:** color `#0e1f2a`, underline `always`
460- **blockquote:** border `1px solid rgba(14, 31, 42, 0.5)`, padding `0.7em 1em`
461- **code:** background `rgba(14, 31, 42, 0.12)`, color `#0e1f2a`
462 
463### Accessibility (WCAG 2.1)
464 
465**Overall:** AA
466 
467| Pair | Ratio | Required | Grade | Suggested fix |
468|------|-------|----------|-------|---------------|
469| Body text on surface | 15.67:1 | AA | AAA | — |
470| Body text on canvas | 14.42:1 | AA | AAA | — |
471| Muted text on surface | 5.42:1 | AA | AA | — |
472| Accent on surface | 15.67:1 | AA-Large | AAA | — |
473| Accent on canvas | 14.42:1 | AA-Large | AAA | — |
474
04 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Manrope"', 'serif'],
        sans:    ['"Manrope"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0e1f2a',
        secondary: '#5a6770',
        accent:    '#0e1f2a',
        neutral:   '#eaeef1',
        surface:   '#f5f7f9',
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '12px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Moss Material

tonal-surface with a moss-green seed — warm tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. Calm and grounded.

saasmaterialminimalmodernnaturallight
Moss.app
ProductPricingDocsAbout
Sign inGet started
saas · material · minimal

Build with Moss Material.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Soft Linen

Warm linen canvas with abundant whitespace, gently rounded corners, and a single sage accent. Calm, airy, considered. Nothing shouts.

minimalwarmlightpremium
Soft.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · light

Build with Soft Linen.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational