---
generator: clinical-terminal-brand-kit
company: "Office Ally"
domain: "cms.officeally.com"
colors:
  primary: "#0029D6"
  onPrimary: "#FFFFFF"
  dark: "#00125F"
  background: "#F5F6F9"
ground:
  mode: light
  hex: "#F5F6F9"
  ink: "#00125F"
  accent: "#0029D6"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "10px"
  button: "5px"
---

# Design System — Office Ally

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

## Ground
- **Light ground** (#F5F6F9), from Office Ally's site background #F5F6F9. Pages and panels sit on it.
- Main text: #00125F (15.52:1 on the ground).
- Secondary text is #00125F at 88% / 76% / 60%; hairlines and plate borders #00125F at 16%.

## Color
- **Accent on the ground: #0029D6** (8.49:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0029D6** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (9.18:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Office Ally's site uses Modernera / Modernera; these are the closest free look-alikes.

## Shape
- Cards and panels: 10px corners. Buttons and chips: 5px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Neutral** (`--neutral-N`): 10 `#1A1B23` · 20 `#303038` · 30 `#46464E` · 40 `#5E5E67` · 50 `#747883` · 60 `#91949C` · 70 `#A7AAB2` · 80 `#DADDE5` · 90 `#EDEFF5` · 95 `#F5F6F9`
- **Primary** (`--primary-N`): 10 `#0C0459` · 20 `#00125F` · 30 `#0021AB` · 40 `#0029D6` · 50 `#4F66FF` · 60 `#7387FF` · 70 `#97A5FF` · 80 `#BBC3FF` · 90 `#DEE2FF` · 95 `#EFEFFF`
- **Alert** (`--alert-N`): 10 `#680003` · 20 `#930006` · 30 `#BA1B1B` · 40 `#DD3730` · 50 `#FF5449` · 60 `#FF897A` · 70 `#FFB4A9` · 80 `#FFDAD4` · 90 `#FFEDE9` · 95 `#FCF4F2`

### Other named colors

- `--maya`: `#24C1FF`
- `--container`: `#F5F6F9`
- `--sky`: `#C7F1FF`
- `--indigo`: `#0C0459`
- `--white`: `#FFFFFF`
- `--pure`: `#0029D6`
- `--lp-heading-blue`: `#00326D`

### Typefaces

- Modernera
- Modernera mono
- Inconsolata
- Lato — on Google Fonts

### Type scale (most-used sizes)

`42px` · `36px` · `32px` · `30px` · `28px` · `24px` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px`

### Letter-spacing

`-.034px` (12) · `-.522px` (9) · `-2.56px` (8) · `-.01em` (6) · `-1.7px` (6) · `-.6px` (6)

### Corner radii (most-used)

`20px` · `8px` · `5px` · `10px` · `3px` · `15px` · `30px` · `16px` · `12px` · `1px`

### Shadows

- `0 4px 54px #3e4c7e36`
- `0 25px 25px #00125f1a, 0 15px 25px #24c1ff26`
- `0 4px 44px #18253f59`
- `0 0 3px 1px #3898ec`
- `0 2px 5px #0000`
- `0 15px 25px #24c1ff26, 0 25px 25px #00125f1a`

### Gradients

- `linear-gradient(0deg, #000 85%, #0000 100%)`
- `linear-gradient(#fff0 100%, #fff)`
- `linear-gradient(0deg, #fff, #fff 0% 0%, #fff0)`
- `linear-gradient(#eeedf4, #eeedf5)`
- `linear-gradient(#999, #24c1ff)`
- `linear-gradient(#0029d600, #0029d600)`

### Breakpoints

479px · 767px · 768px · 991px · 1280px · 1440px · 1920px