---
generator: clinical-terminal-brand-kit
company: "Medical Office Force"
domain: "medicalofficeforce.com"
colors:
  primary: "#1863DC"
  onPrimary: "#FFFFFF"
  dark: "#333333"
  accent: "#3058F6"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#333333"
  accent: "#1863DC"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "6px"
  button: "14px"
---

# Design System — Medical Office Force

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

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

## Color
- **Accent on the ground: #1863DC** (5.44:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #1863DC** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.44:1).
- Secondary accent #3058F6: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--mof-daisy-primary`: `#0023AD`
- `--mof-daisy-primary-hover`: `#001B87`
- `--mof-daisy-ink`: `#05081F`
- `--mof-daisy-body`: `#303A5C`
- `--mof-daisy-muted`: `#5A6484`
- `--mof-daisy-rule`: `#DFE5F5`
- `--mof-daisy-field`: `#C2CDEA`
- `--mof-daisy-paper`: `#FFFFFF`
- `--mof-daisy-tint`: `#EEF2FF`
- `--mof-daisy-live`: `#10B981`
- `--mof-daisy-danger`: `#B42318`
- `--mof-daisy-danger-hover`: `#912018`
- `--mof-daisy-focus`: `#0023AD`
- `--text-main`: `#0F172A`
- `--text-muted`: `#64748B`
- `--accent-teal`: `#0D9488`
- `--accent-indigo`: `#4F46E5`
- `--bg-light`: `#F8FAFC`
- `--accent-blue`: `#3058F6`
- `--glass-border`: `#FFFFFF`
- `--glass-bg`: `#FFFFFF`
- `--border-color`: `#3058F6`

### Typefaces

- Dela Gothic One
- Poppins — on Google Fonts
- Roboto — on Google Fonts
- awsm-jobs-icomoon
- Poppins!important
- Museo sans rounded
- Inter — on Google Fonts
- awsm-jobs-icomoon!important

### Type scale (most-used sizes)

`36px` · `30px` · `25px` · `24px` · `22px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`1px` (2) · `-.02em` (2) · `0.5px` (1) · `1.5px` (1) · `2px` (1)

### Corner radii (most-used)

`50%` · `999px` · `4px` · `3px` · `10px` · `2px` · `20px` · `24px` · `6px` · `15px`

### Shadows

- `0 1px 4px 0 rgb(0 0 0 / 5%)`
- `0 3px 15px -5px rgb(0 0 0 / 20%)`
- `0 4px 10px -2px rgba(0, 0, 0, 0.1)`
- `0 0 5px -6px rgba(0,0,0,.4)`
- `0 12px 30px rgba(0, 35, 173, 0.32)`
- `0 24px 70px rgba(5, 8, 31, 0.22)`

### Gradients

- `linear-gradient(135deg, #2457ff, #5b86f5)`
- `linear-gradient(135deg, #0023AD 0%, #39D346 100%)`
- `linear-gradient(180deg, #3058F6 0%,  #0C2AA4 99%)`
- `linear-gradient(135deg, #39D446, #2fbf3a)`
- `linear-gradient(90deg, #0C2AA4 0%, #3058F6 100%)`
- `linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%)`

### Breakpoints

480px · 520px · 600px · 648px · 767px · 768px · 769px · 900px · 991px · 992px · 1024px · 1536px