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', }, }, },};Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper.
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.
An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page.
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.