---
generator: clinical-terminal-brand-kit
company: "CareAtlas Inc"
domain: "careatlas.com"
colors:
  primary: "#E7E4D6"
  onPrimary: "#000000"
  dark: "#11275B"
  accent: "#3F5079"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#11275B"
  accent: "#777467"
fonts:
  heading: "Archivo"
  body: "Manrope"
radius:
  card: "0px"
  button: "40px"
---

# Design System — CareAtlas Inc

> Read from CareAtlas Inc's public website (careatlas.com) by Clinical Terminal. Not reviewed by CareAtlas Inc.
> Use it as inspiration: borrow the ideas, not CareAtlas Inc's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from CareAtlas Inc's site background #FFFFFF. Pages and panels sit on it.
- Main text: #11275B (14.33:1 on the ground).
- Secondary text is #11275B at 88% / 76% / 60%; hairlines and plate borders #11275B at 16%.

## Color
- **Accent on the ground: #777467** (4.69:1), adjusted from CareAtlas Inc's primary #E7E4D6 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #E7E4D6** for filled shapes (buttons, chips, bars), with #000000 text on it (16.47:1).
- Secondary accent #3F5079: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Manrope**. Both on Google Fonts.
- CareAtlas Inc's site uses Forrest / Manrope; these are the closest free look-alikes.

## Shape
- Cards and panels: 0px corners. Buttons and chips: 40px.

## Voice
- Tone: professional. Energy: low. Written for patients and healthcare professionals.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Blue** (`--blue-N`): 60 `#11275B` · 100 `#96A0B7` · 200 `#65769A` · 300 `#3F5079` · 400 `#11275B` · 500 `#04112E`

### Other named colors

- `--form--error-msg-color`: `#FF6F6F`
- `--white`: `#FFFFFF`
- `--grid-color`: `#000000`
- `--deep-charcoal`: `#0E0D14`
- `--bg-color`: `#000000`
- `--strokes--tertiary`: `#CACACA`
- `--green`: `#6FC1CB`
- `--yellow`: `#E6DB7D`
- `--off-white`: `#F8F8F8`
- `--black`: `#060609`
- `--soft-lilac`: `#E8DDF8`
- `--medium-purple`: `#8A56DC`
- `--dark-purple`: `#31273F`
- `--gray`: `#8A8A8A`
- `--color`: `#FFFFFF`
- `--border-color`: `#FFFFFF`
- `--white-30`: `#FFFFFF`
- `--black-5`: `#000000`
- `--black-10`: `#000000`
- `--light-100`: `#F7F6EF`
- `--light-200`: `#E7E4D6`
- `--purple-100`: `#ACC1EB`
- `--yellow-100`: `#EBDB6A`
- `--yellow-200`: `#423B06`
- `--green-100`: `#9ACBAF`
- `--green-200`: `#053012`
- `--gray-100`: `#E2E4E9`
- `--neutral-400`: `#E1E7E0`

### Typefaces

- Forrest (`--primary-font`)
- Manrope (`--secondary-font`) — on Google Fonts
- Geist (`--tertiary-font`)

### Type scale (most-used sizes)

`40px` · `38px` · `32px` · `24px` · `18px` · `1.125rem` · `1rem` · `15px` · `14px` · `.875rem` · `12px` · `10px`

### Letter-spacing

`-.12rem` (4) · `-.0625rem` (4) · `.125rem` (4) · `-.11rem` (4) · `.01em` (1) · `-0.0625rem` (1)

### Corner radii (most-used)

`3px` · `50%` · `100%` · `1rem` · `.5rem` · `.25rem` · `.125rem` · `.35rem`

### Shadows

- `0 5px 75px #cecece1a`
- `0 0 0 50px transparent inset`
- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 3px 1px #3898ec`

### Gradients

- `linear-gradient(90deg,#acc1eb,#ebdb6a)`
- `linear-gradient(90deg,#6fc1cb,#e6db7d)`
- `linear-gradient(90deg,#6fc1cb,#8fc8b6)`
- `linear-gradient(90deg,#8fc8b6,#8fc8b6)`
- `linear-gradient(90deg,#95c9b2,#a8cda6)`
- `linear-gradient(90deg,#abcea5,#c8d591)`

### Breakpoints

479px · 767px · 768px · 991px · 992px · 1440px