# Adaptive-clinical Design System

> High-contrast clinical blue and safety orange anchored by light-weight Montserrat headlines on a stark white canvas.

**Source:** https://adaptive-clinical.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Adaptive-clinical utilizes a high-contrast palette of deep clinical blue (`#0c71c3`) and energetic primary orange (`#ef6b23`). The system is typographically driven by **Montserrat** for display and headings, almost exclusively used at a light weight (300) to maintain a modern, technical feel. Interactive elements are strictly defined: primary actions use the orange fill with a 5px radius, while secondary surfaces and cards often utilize light gray backgrounds (`#ededed` or `#f7f7f7`) to create section depth. The layout is structured around generous vertical spacing (80px to 100px) and a clean, white foundation that emphasizes data-driven clarity.

## Signature DNA
1. **Lightweight Display Typography** (Montserrat at weight 300 is used for nearly all major headings, creating a technical, precise aesthetic that avoids the "heavy" look of traditional medical software. Observed on Homepage and About pages.)
2. **The "Safety Orange" Action** (Primary CTAs and key borders use `#ef6b23` as a high-visibility signal against the dominant clinical blue and white, specifically paired with a 5px border radius. Observed on all primary buttons.)
3. **Clinical Blue Anchoring** (Deep blue `#0c71c3` is used for subheadings and icon plates, providing the "trust" foundation of the brand. Observed in feature grids and leadership headers.)

## Family Map
Not captured in source (no sub-brands identified).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 69 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary body text, footer text | 15 | 1.0 | Computed Style |
| `{color.gray.dark}` | `#353535` | Secondary text, navigation text | 133 | 0.8 | Computed Style |
| `{color.gray.medium}` | `#494949` | Muted body text | 55 | 0.8 | Computed Style |
| `{color.gray.light}` | `#ededed` | Section backgrounds, card surfaces | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#ef6b23` | Primary buttons, active borders, accents | 14 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#0c71c3` | Headings, icon backgrounds, text emphasis | 42 | 0.8 | Computed Style |
| `{color.accent.light-blue}` | `#cde3f2` | Deemphasized text, secondary accents | 13 | 0.8 | Computed Style |
| `{color.decorative.blue}` | `#007aff` | Swiper theme color, inline links | 2 | 1.0 | `--swiper-theme-color` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 300, 500, 700 | Display, Headings | Montserrat (Google Fonts) | OFL |
| Poppins | 300, 400 | Subheadings, Hero text | Poppins (Google Fonts) | OFL |
| Open Sans | 400, 500 | Form inputs, Body | Open Sans (Google Fonts) | OFL |
| Roboto Condensed | 500, 600 | Navigation, UI Labels | Roboto Condensed (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 72px | 50.4px | -2px | 400 | Hero text animation | `b.dnxt-text-animation` |
| `{type.display.lg}` | 60px | 72px | -1px | 300 | Primary Page Title | `h1` |
| `{type.display.md}` | 48px | 57.6px | -1px | 300 | Section Hero Headings | `h3.vce-google-fonts-heading-inner` |
| `{type.heading.md}` | 24px | 28.8px | -1px | 300 | Card Titles | `h4.title` |
| `{type.heading.sm}` | 20px | 24px | -1px | 300 | Blog/Entry Titles | `h2.entry-title` |
| `{type.subheading}` | 18px | 21.6px | 2px | 700 | Uppercase Section Labels | `h3` |
| `{type.body.md}` | 16px | 19.2px | -1px | 400 | Feature descriptions | `h3.gs_logo_title` |
| `{type.nav}` | 14px | 14px | normal | 600 | Main Navigation Items | `li#menu-item-9398` |
| `{type.button}` | 14px | 23.8px | normal | 500 | Primary CTA text | `a.et_pb_button` |
| `{type.caption}` | 12px | 20.4px | normal | 500 | Metadata, Footer links | `article#post-9302` |

### Principles
1. **Lightweight Headings:** Use Montserrat at weight 300 for all display sizes above 24px to maintain brand elegance.
2. **Negative Tracking on Display:** Apply -1px to -2px letter spacing for all headings above 20px to tighten the visual footprint.
3. **Condensed Navigation:** UI labels and navigation must use Roboto Condensed to maximize horizontal space.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 12 |
| `{space.sm}` | 10px | 92 |
| `{space.md}` | 16px | 22 |
| `{space.lg}` | 20px | 56 |
| `{space.xl}` | 24px | 34 |
| `{space.section}` | 80px | 6 |
| `{space.hero}` | 100px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, sharp cards | 257 occurrences |
| `{radius.sm}` | 3px | Form inputs | `input` |
| `{radius.md}` | 5px | Primary buttons, feature cards | `a.et_pb_button` |
| `{radius.lg}` | 8px | Leadership cards | `Card` (About page) |
| `{radius.full}` | 50% | Icon circles, avatars | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state for all cards and buttons | 257 occurrences |
| `{shadow.nav}` | `rgba(0, 0, 0, 0.1) 0px 1px 0px 0px` | Sticky navigation bottom border | `Navigation` component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary call to action
**Pages observed:** Homepage, About
**Spec:** Background: `#ef6b23` | Text: `#ffffff` | Border: `#d6d6d6` (2px) | Radius: `5px` | Padding: `4.2px 14px` | Typography: `{type.button}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Navigation
**Role:** Main site header
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#353535` | Border: none | Radius: `0px` | Shadow: `{shadow.nav}` | Typography: `{type.nav}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Leadership Card
**Role:** Team member profiles
**Pages observed:** About
**Spec:** Background: `#ededed` | Text: `#353535` | Border: none | Radius: `8px` | Padding: `20px` | Typography: `{type.heading.md}`
**States observed:** Default

#### Feature Grid Item
**Role:** Service or benefit highlight
**Pages observed:** Homepage
**Spec:** Background: `rgba(0, 0, 0, 0)` | Text: `#353535` | Border: `#ef6b23` (2px) | Radius: `25px` | Padding: `10px`
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Global site closure
**Pages observed:** Homepage, About
**Spec:** Background: `#222222` | Text: `#353535` | Border: none | Radius: `0px` | Typography: `{type.caption}`
**States observed:** Default

#### Blog Resource Card
**Role:** Content feed item
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Text: `#353535` | Border: `#d6d6d6` | Radius: `3px` | Padding: `19px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1080px |
| Section Vertical Padding | 80px - 100px |
| Grid Gap (Cards) | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Standard 3-up or 4-up grids |
| Mobile | 390px | Grids stack 1-up; Typography scales down (e.g., 72px display becomes 41px) |

## Imagery & decoration
- **Iconography:** Uses clinical blue (`#0c71c3`) line-art icons inside light gray or white containers.
- **Photography:** High-key, professional office and clinical settings.
- **Avoidance:** Avoids heavy drop shadows or complex gradients; relies on solid fills and hairlines.

## Do's
- Use **Montserrat 300** for all headings to maintain the technical "Adaptive" look.
- Apply the **5px border radius** to all primary interactive elements (`#ef6b23`).
- Use **#ededed** for background sections to separate content without using borders.
- Keep letter spacing at **-1px** for any text larger than 20px.
- Ensure primary buttons have a **2px solid border** in `#d6d6d6`.

## Don'ts
- **Wrong:** Using `#0c71c3` (Clinical Blue) for primary action buttons.
- **Right:** Use `#ef6b23` (Safety Orange) for primary CTAs.
- **Reason:** Blue is an anchoring/heading color; Orange is the reserved action signal.
- Do not use bold weights (700+) for display headings; stick to weight 300.
- Do not apply shadows to cards unless they are part of a specific hover interaction (not captured).

## Similar brands
- Veeva Systems
- Medidata Solutions
- IQVIA
- Oracle Life Sciences

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #ef6b23;
  --color-clinical-blue: #0c71c3;
  --color-surface-gray: #ededed;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-action: 5px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Adaptive-clinical spec: background #ef6b23, 5px radius, 2px border #d6d6d6, and Montserrat 500 text at 14px."
- "Design a section header using Montserrat 300 at 48px with -1px letter spacing in clinical blue #0c71c3."
- "Generate a content card with a #ffffff background, 3px radius, and a 19px internal padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile menu transition behavior is not documented.
- Success/Error semantic colors were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://adaptive-clinical.com | 1440x900 | 2026-06-06 |
| About | https://adaptive-clinical.com/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://adaptive-clinical.com | 390x844 | 2026-06-06 |