# Cloudphysician Design System

> Clinical terminal aesthetic meets high-fidelity medical AI, anchored by JetBrains Mono display type and a high-contrast electric blue on sterile white.

**Source:** https://cloudphysician.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cloudphysician utilizes a "clinical-tech" aesthetic that pairs the technical rigor of a developer environment with the cleanliness of a medical facility. The system is defined by **JetBrains Mono** at an ultra-light weight (100) for all major headlines, creating a distinct "terminal" feel. The palette is strictly monochrome foundation (#ffffff, #1e1e1e) punctuated by a high-voltage **Electric Blue** (#1b40ff) used for primary actions and clinical accents. Geometry is mixed, using sharp edges for layout containers and high-radius pills (1440px) for interactive elements.

## Signature DNA
1. **The Monospace Display** (JetBrains Mono at weight 100 used for display sizes up to 52px. This move signals "code-level" precision in a medical context, appearing on the homepage hero and section heads.)
2. **The Electric Blue Pulse** (#1b40ff used as a high-contrast signal against white surfaces. It serves as the primary button background and the "heading-accent" token.)
3. **Clinical Radii** (A specific hierarchy of 8px for cards, 16px for inputs, and 1440px for "Pill" buttons, creating a distinction between static content and interactive tools.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Primary page background and surface | 68 | 0.8 | computed_style |
| `{colors.ink}` | `#1e1e1e` | Primary text, secondary button borders | 51 | 1.0 | `--swatch--brand-text` |
| `{colors.slate}` | `#4d4e55` | Secondary body text | 10 | 0.6 | computed_style |
| `{colors.border}` | `#868686` | Input borders and dividers | 5 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#1b40ff` | Primary CTA background, active text | 42 | 1.0 | `--_theme---button-primary--background` |
| `{colors.surface-blue}` | `#ceeaff` | Soft blue card backgrounds | 8 | 1.0 | `--swatch--bg-blue` |
| `{colors.signal-red}` | `#ff0000` | Required form indicators (asterisks) | 3 | 0.6 | computed_style |
| `{colors.deep-blue}` | `#0023d9` | Decorative only | 2 | 1.0 | `--swatch--blue` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| JetBrains Mono | 100, 300, 400 | Display, Headings, UI | JetBrains Mono (OFL) | Open Source |
| Source Sans | 400 | Body, Navigation, Inputs | Source Sans 3 (OFL) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 52px | 56.9px | -1.55px | 100 | Hero headlines | `div.autonomous-head` |
| `{type.h2}` | 39px | 38.5px | -1.15px | 100 | Section titles | `h2.u-text-style-h2` |
| `{type.h3}` | 31px | 34.1px | -0.93px | 100 | Sub-section heads | `div.u-text-style-h3` |
| `{type.h4}` | 23px | 25.5px | -0.69px | 300 | Feature titles | `h2.u-text-style-h4` |
| `{type.nav}` | 20px | 25.3px | normal | 400 | Top navigation | `div.navbar` |
| `{type.body}` | 18px | 23.0px | normal | 400 | Running text | `p.u-text-style-body` |
| `{type.ui-small}` | 16px | 20.4px | normal | 400 | UI labels | `div.u-text-style-small` |
| `{type.button}` | 16px | 15.7px | -0.15px | 400 | CTA text | `div.button_main_text` |

### Principles
1. **Display Weight is 100.** All major headlines must use JetBrains Mono at its thinnest weight to maintain the "clinical terminal" look.
2. **Negative Tracking on Display.** As font size increases, letter spacing must tighten (from -0.69px at 23px to -1.55px at 52px).
3. **Sans for Utility.** Use Source Sans for all high-density information (body copy, forms, and navigation) to ensure legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 5 |
| `{space.sm}` | 8px | 6 |
| `{space.md}` | 12px | 7 |
| `{space.lg}` | 16px | 18 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers | 124 occurrences |
| `{radius.sm}` | 8px | Content cards | `Card` component |
| `{radius.md}` | 16px | Form inputs | `Text Input` component |
| `{radius.lg}` | 23px | Surface panels | `Surface` component |
| `{radius.pill}` | 1440px | Buttons and badges | `Pill Button` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed components | 0 shadow occurrences |

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary and Secondary actions
**Pages observed:** cloudphysician.ai
**Spec:** Background `{colors.primary}` (#1b40ff) / Text `{colors.canvas}` (#ffffff) / Radius `{radius.pill}` (1440px) / Padding 12px 16px / Typography `{type.button}`
**States observed:** Default | Hover: captured (text/border change to #1b40ff on secondary)

#### Text Input
**Role:** Lead generation forms
**Pages observed:** cloudphysician.ai
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink}` (#1e1e1e) / Border 1px `{colors.border}` (#868686) / Radius `{radius.md}` (16px) / Padding 16px 8px

### Tier 2: Patterns
#### Clinical Card
**Role:** Feature highlights
**Pages observed:** cloudphysician.ai
**Spec:** Background `{colors.surface-blue}` (#ceeaff) / Radius `{radius.sm}` (8px) / Padding 15.7px / Typography 19.5px (computed)

### Tier 3: Surface-specific
#### Surface Panel
**Role:** Large content sections
**Pages observed:** cloudphysician.ai
**Spec:** Background transparent / Border 0px / Radius `{radius.lg}` (23px) / Typography 19.5px (computed)

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1440px (sampled) |
| Form Layout | 2-column grid for Name/Email, 1-column for Message |
| Section Padding | 46.5px (observed on large cards) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text wraps; Form inputs stack 1-column. |
| Desktop | 1440px | Full horizontal nav; 2-column form layout. |

## Imagery & decoration
- **Technical Diagrams:** Uses simplified vector illustrations of medical data (blue/white/yellow palette).
- **Gradients:** Large radial blue-to-transparent glows used behind hero imagery to simulate "intelligence" pulses.
- **Avoids:** Photography of patients; soft/organic shapes; serif typefaces.

## Do's
- Use **JetBrains Mono 100** for all headlines.
- Use **#1b40ff** for the primary "Book a Demo" CTA.
- Apply **1440px radius** to all interactive buttons.
- Keep backgrounds primarily **#ffffff** for a sterile feel.
- Use **16px radius** for form inputs to distinguish them from cards.

## Don'ts
- **Wrong:** Using a bold weight for headlines. **Right:** Use weight 100. **Reason:** Bold weights break the "terminal" aesthetic.
- **Wrong:** Using #007aff (standard iOS blue) for buttons. **Right:** Use #1b40ff. **Reason:** #1b40ff is the brand-specific Electric Blue.
- **Wrong:** Mixing serifs into the typography. **Right:** Stick to JetBrains Mono and Source Sans.
- **Wrong:** Applying shadows to cards. **Right:** Use flat backgrounds or 1px borders.

## Similar brands
- Scale AI
- Forward Health
- Palantir
- Vanta

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #1b40ff;
  --color-ink: #1e1e1e;
  --color-canvas: #ffffff;
  --color-surface-blue: #ceeaff;
  --font-display: 'JetBrains Mono', monospace;
  --font-body: 'Source Sans', sans-serif;
  --radius-pill: 1440px;
  --radius-card: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #1b40ff;
  --color-ink: #1e1e1e;
  --font-display: "JetBrains Mono";
  --radius-pill: 1440px;
  --spacing-section: 46.5px;
}
```

## Agent prompt examples
- "Create a primary CTA button using #1b40ff background, white text, and a 1440px border radius with JetBrains Mono 16px text."
- "Design a feature card with a #ceeaff background, 8px border radius, and a headline in JetBrains Mono weight 100."
- "Generate a contact form with 16px rounded inputs and 1px borders using #868686."

## Known gaps
- Hover states for tertiary links were not fully captured in the automated run.
- Success/Error messaging colors (beyond the red asterisk) were not observed in the lead form.
- Dark mode variants were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://cloudphysician.ai | 1440px | 2026-06-06 |
| Mobile Home | https://cloudphysician.ai | 390px | 2026-06-06 |