---
generator: clinical-terminal-brand-kit
company: "Ambience Healthcare"
domain: "ambiencehealthcare.com"
colors:
  primary: "#6F63F7"
  onPrimary: "#000000"
  dark: "#171A2B"
  background: "#F6F4EF"
ground:
  mode: light
  hex: "#F6F4EF"
  ink: "#171A2B"
  accent: "#6759EC"
fonts:
  heading: "Newsreader"
  body: "Archivo"
radius:
  card: "6px"
  button: "8px"
---

# Design System — Ambience Healthcare

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

## Ground
- **Light ground** (#F6F4EF), from Ambience Healthcare's site background #F6F4EF. Pages and panels sit on it.
- Main text: #171A2B (15.67:1 on the ground).
- Secondary text is #171A2B at 88% / 76% / 60%; hairlines and plate borders #171A2B at 16%.

## Color
- **Accent on the ground: #6759EC** (4.53:1), adjusted from Ambience Healthcare's primary #6F63F7 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #6F63F7** for filled shapes (buttons, chips, bars), with #000000 text on it (4.8:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Newsreader**. Body: **Archivo**. Both on Google Fonts.
- Ambience Healthcare's site uses Rhetorik Serif / Geist; these are the closest free look-alikes.

## Shape
- Cards and panels: 6px corners. Buttons and chips: 8px.

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

## Tokens from the site's stylesheets

### Other named colors

- `--token-e5f625c3-7990-461c-8dfa-2b991af1701c`: `#6F63F7`
- `--token-d8e304f7-06f0-4cb3-a3d5-9ff767bba3c0`: `#F9F9FB`
- `--token-f87618bd-e9d7-4cb8-812a-a95f5e7ec196`: `#171A2B`
- `--token-f0ccf201-71f1-48cf-912b-189ac3e73194`: `#171A2B`
- `--token-d5a8876a-9489-4b91-aa3c-cbb40dd91f13`: `#EBECF0`
- `--token-fc95125e-2258-49ee-b82e-1198842c12f6`: `#F6F4EF`
- `--token-54af3604-cb6f-4d50-a446-ecd3109491e7`: `#000112`
- `--token-d68f507e-9574-4b77-8fae-8737638f58fe`: `#FFFFFF`
- `--token-ca409a84-1424-452e-8154-1caf17dee784`: `#FFFFFF`
- `--token-aec52640-3aee-4d93-9ecb-400561fc4c2b`: `#FFFFFF`
- `--token-81a80bbe-8ff5-4821-ba50-fdec1f6f40de`: `#FFFFFF`
- `--token-e5150d8a-076b-461d-837d-a1b815eddfd6`: `#1A0459`
- `--token-84472d40-5966-4c2d-b38f-1abfb5c491e4`: `#00B36E`
- `--token-aa40b49f-aab2-4abb-963b-1489641e4c0f`: `#000000`
- `--token-1a16731f-0cb6-44ed-af52-8145675ce1ec`: `#5454D6`
- `--token-7e9984b1-3560-4c72-bb3f-e8b547b03525`: `#6363F1`
- `--token-4d0a1427-159a-449d-b695-12d1e328f376`: `#171A2B`
- `--token-16c54638-fd7b-490a-a9a2-21c11a619e3d`: `#F6F4EF`
- `--token-4bff3ec0-4612-4263-bc54-cbe01335b901`: `#171A2B`
- `--token-b083fae6-f2ea-4651-87df-2c20b7659d2e`: `#FFFFFF`
- `--token-6ec7296d-2758-4428-8b2c-3e9920b4cece`: `#4036A7`
- `--token-a169aabe-ece4-4ef3-858e-2c769327d783`: `#1F1A51`
- `--token-d3bcf146-cdc3-4f1e-bd02-07ccdbb05b9b`: `#8F86F9`
- `--token-db165b72-a592-4956-a977-b8e61af6be2f`: `#BFC5FA`
- `--token-743f6946-8dff-443a-adc6-aa4dfaba6fb4`: `#E3E2EE`
- `--token-12a1d7ae-3af9-4cf2-8c0b-c7380c33c94f`: `#F2EFFA`
- `--token-c1ebd55f-1d25-4ab9-8f77-76d5130ed2c7`: `#E3DFD4`
- `--token-28d1af77-1631-46bc-bbfb-ee40d2670506`: `#EEEBE2`
- `--token-0fb5a15c-ba53-4052-96a7-a53c2dcf2567`: `#F6F4EF`
- `--token-988486ac-a37c-4a73-b8c4-cff41a8673ed`: `#FCFBF9`
- `--token-904ded8d-6e8a-4da0-ade1-845b1bec5139`: `#000000`
- `--token-c5c708c2-00f1-4fa1-a3ed-d30e29d0f71f`: `#171A2B`
- `--token-5782ebfc-04ce-474c-bceb-c81b2bf8bd79`: `#171A2B`
- `--token-e008a379-85a1-46e9-ab72-fc5956860c69`: `#5F6085`
- `--token-abb0310b-7441-47e1-af96-bb350b03fb37`: `#FFFFFF`
- `--token-5d891b1f-bddf-4fff-983f-1464cefc7242`: `#372E8F`
- `--border-color`: `#BFC5FA`

### Typefaces

- Inter Display
- Inter — on Google Fonts
- Geist
- Rhetorik Serif Regular
- Fragment Mono
- Lora — on Google Fonts
- Rhetorik Serif Trial Regular
- Rhetorik Serif Trial Light

### Type scale (most-used sizes)

`23px` · `20px` · `16px` · `14px` · `12px` · `11px`

### Letter-spacing

`-.03em` (5) · `.17em` (2) · `-.02em` (1)

### Corner radii (most-used)

`12px` · `8px` · `28px`

### Shadows

- `0 30px 40px -2.5px #c4bcdc14,0 4px 4px -1.25px #c4bcdc14,0 20px 28px -2px #c4bcdc14`

### Gradients

- `linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%)`
- `linear-gradient(#f9f7fd 0%,#fff 100%)`
- `linear-gradient(90deg,#e5ecff 20%,#f2effa 100%)`

### Breakpoints

768px · 1200px