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.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Manrope13 body: Manrope14 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: 4px22 md: 8px23 lg: 12px24 pill: 9999px25shadows:26 card: "rgba(14,31,42,0.04) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(14,31,42,0.08)"30 divider: rgba(14,31,42,0.08)31buttons:32 primary:33 background: #0e1f2a34 color: #f5f7f935 border: none36 shape: rounded37 padding: 10px 20px38 font: 600 / 0.8125rem39 secondary:40 background: #ffffff41 color: #0e1f2a42 border: 1px solid rgba(14,31,42,0.12)43 shape: rounded44 padding: 10px 20px45 font: 600 / 0.8125rem46 outline:47 background: transparent48 color: #0e1f2a49 border: 1px solid rgba(14,31,42,0.18)50 shape: rounded51 padding: 10px 20px52 font: 600 / 0.8125rem53 ghost:54 background: transparent55 color: #5a677056 border: none57 shape: rounded58 padding: 10px 16px59 font: 600 / 0.8125rem60charts:61 variant: line62 stroke_width: 1.563 fill_opacity: 0.0664 gridlines: true65 bar_gap: 10px66 highlight: single67 dot_marker: true68fonts_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 Pearl73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Clinic Pearl** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 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 recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 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 tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 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#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `line`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134 135#### Typography pairings136 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 constraints142 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 — verify152 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. Atmosphere165 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, timestamp172- Deep teal `#0a6970` only on the active patient pane border + active vital line + focus ring173- Pearl off-white `#f5f7f9` page → pure white card — tonal-shift, not shadow-driven174- Hairline-only chrome at 8% ink — no shadows beyond the 1px lift175- Manrope at 600/700 for headings — soft authority, never bold-stamped176 177## 2. Palette178 179### Surfaces180- **Pearl** `#f5f7f9` — page background (cool fine off-white)181- **Card** `#ffffff` — elevated surface182- **Bone** `#eaeef1` — table headers, secondary surfaces183 184### Ink185- **Ink** `#0e1f2a` — text, headings, primary CTA fill (warm-cool near-black, slight blue undertone)186- **Ink 50** `#5a6770` — secondary text, mono labels187- **Hairline** `rgba(14,31,42,0.08)` — every divider188 189### Accent190- **Teal** `#0a6970` — active patient pane border, active vital line, focus ring191- **Teal Soft** `rgba(10,105,112,0.10)` — hovered pane background, focus ring background192 193## 3. Typography194 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. Buttons209 210### Primary (Ink)211```css212background: #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 padding221 222### Outline & Ghost223- Outline: transparent, 1px hairline at 18% ink224- Ghost: no border, ink-50, hover lifts to ink225 226## 5. Cards227 228```css229background: #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. Charts238 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. Tabs242 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. Spacing246 247- Base 4px (chart-row aware)248- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80`249- Section padding: 80px desktop, 32px mobile250 251## 9. Do's & don'ts252 253✅ **Do**254- Use IBM Plex Mono with tabular-nums on every vital, dose, lab value255- Reserve teal for the active patient pane + active vital line + focus ring only256- Hold the pearl page → white card tonal step — no decorative depth257- Keep all card chrome to 1px hairline + 1px shadow258 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 weight262- Use a second accent — teal alone, on three specific surfaces263- Use proportional figures for clinical data — tabular-nums always264 265---266 267## Tokens268 269> Generated from the same source the live preview renders from.270> Treat the values below as the contract — never substitute approximations.271 272### Colors273 274| Role | Value |275|-----------|-------|276| primary | `#0e1f2a` |277| secondary | `#5a6770` |278| tertiary | `#0e1f2a` |279| neutral | `#eaeef1` |280| surface | `#f5f7f9` |281 282### Typography283 284- **Display:** Manrope285- **Body:** Manrope286- **Mono:** IBM Plex Mono287 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### Radius296 297- sm: `4px`298- md: `8px`299- lg: `12px`300- pill: `9999px`301 302### Shadows303 304- **card:** `rgba(14,31,42,0.04) 0 1px 2px`305- **button:** `none`306 307### Borders308 309- **card:** `1px solid rgba(14,31,42,0.08)`310- **divider:** `rgba(14,31,42,0.08)`311 312### Buttons313 314Four variants, each fully tokenized. The preview renders from these exact values.315 316#### Primary317 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#### Secondary329 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#### Outline341 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#### Ghost353 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### Charts365 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 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Radical two-color: deep terracotta and warm bone, nothing else. Humanist serif display at scale, soft 12px corners, generous body. Earthen and quiet — for artisan brands, ceramics, slow-food, hospitality.
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.
Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type.
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.