---
generator: clinical-terminal-brand-kit
company: "Oracle Health"
domain: "oracle.com"
colors:
  primary: "#C74634"
  onPrimary: "#FFFFFF"
  dark: "#161513"
  accent: "#006B8F"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#161513"
  accent: "#C74634"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "4px"
---

# Design System — Oracle Health

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

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

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

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

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

## 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

- `--form-focusonlgt`: `#227E9E`
- `--form-focusondrk`: `#227E9E`
- `--form-error`: `#D63B25`
- `--form-txtinput`: `#D63B25`
- `--txtcolor`: `#FFFFFF`
- `--linkcolor`: `#F0CC71`
- `--obttn1brdr`: `#000000`
- `--obttn1bg`: `#312D2A`
- `--obttn1clr`: `#FFFFFF`
- `--obttn1clrhvr`: `#FFFFFF`
- `--obttn1bghvr`: `#3A3632`
- `--obttn1bgact`: `#47423E`
- `--obttn2brdr`: `#161513`
- `--obttn2clr`: `#161513`
- `--obttn2clrhvr`: `#161513`
- `--obttn2bghvr`: `#161513`
- `--obttn2bgact`: `#161513`
- `--obttn3brdr`: `#000000`
- `--obttn3bg`: `#161513`
- `--obttn3clr`: `#161513`
- `--obttn3bghvr`: `#161513`
- `--obttn3clrhvr`: `#161513`
- `--obttn3bgact`: `#161513`
- `--obttn1brdr-inv`: `#000000`
- `--obttn1bg-inv`: `#FFFFFF`
- `--obttn1clr-inv`: `#161513`
- `--obttn1clrhvr-inv`: `#FFFFFF`
- `--obttn1bghvr-inv`: `#161513`
- `--obttn1bgact-inv`: `#161513`
- `--obttn2brdr-inv`: `#FFFFFF`
- `--obttn2clr-inv`: `#FFFFFF`
- `--obttn2clrhvr-inv`: `#161513`
- `--obttn2bghvr-inv`: `#FFFFFF`
- `--obttn2bgact-inv`: `#FFFFFF`
- `--obttn3brdr-inv`: `#000000`
- `--obttn3bg-inv`: `#F5F4F2`
- `--obttn3clr-inv`: `#FFFFFF`
- `--obttn3bghvr-inv`: `#FFFFFF`
- `--obttn3clrhvr-inv`: `#161513`
- `--obttn3bgact-inv`: `#FFFFFF`
- `--obttnbgdis`: `#FBF9F8`
- `--obttnbrdrdis`: `#E4E1DD`
- `--obttnclrdis`: `#AEA8A2`
- `--thm-base`: `#F1EFED`
- `--thm-accent`: `#C2D4D4`
- `--thm-primary`: `#2A2F2F`
- `--thm-secondary`: `#464F4F`
- `--thm-medium`: `#697778`
- `--thm-accent-alt`: `#8B9D9E`
- `--mode-tint`: `#F1EFED`
- `--txtinvert`: `#FFFFFF`
- `--linkinvert`: `#F0CC71`
- `--modebg`: `#FFFFFF`
- `--modebg-darker`: `#442616`
- `--clr-accent`: `#DEB068`
- `--bc-color`: `#6F6964`
- `--bc-bg`: `#161513`
- `--gradtop`: `#FFFFFF`
- `--lbx-closeclr`: `#FFFFFF`
- `--lbx-scrim`: `#000000`
- `--otbl-hl-bg`: `#F1EFED`
- `--otbl-bdr`: `#D4CFCA`
- `--playlist-active`: `#D4CFCA`
- `--u38-bg`: `#FFFFFF`
- `--u38-bg-l1`: `#F1EFED`
- `--u38-text`: `#161513`
- `--u38-text-secondary`: `#5C5651`
- `--u38-border`: `#161513`
- `--u38-hover-bg`: `#161513`
- `--u38-active-bg`: `#161513`
- `--u38-overlay-bg`: `#000000`
- `--u38-active-accent`: `#C2D4D4`
- `--u38-active-accent-bg`: `#C2D4D4`

### Typefaces

- OracleSansVF (`--oraclesans`)
- OracleSansFB
- NotoSansArabicLF
- NotoSansArabicWF
- NotoSansHebrewLF
- NotoSansHebrewWF
- OracleSansVFCyGr

### Type scale (most-used sizes)

`4rem` · `3.2rem` · `3rem` · `2.4rem` · `2.2rem` · `2rem` · `1.8rem` · `1.6rem` · `1.4rem` · `1.375rem` · `1.2rem` · `14px`

### Letter-spacing

`-0.5px` (1) · `.05em` (1)

### Corner radii (most-used)

`.4rem` · `4px` · `50%` · `6px` · `8px` · `12px` · `3px` · `20px` · `.6rem` · `.8rem`

### Shadows

- `0px 0px 16px 0px rgba(0,0,0,.3)`
- `0 .4rem 2rem rgba(0,0,0,.15)`
- `0 .8rem 1.6rem rgba(0,0,0,.24)`
- `0px 5px 20px rgba(0,0,0,.2)`

### Breakpoints

392px · 403px · 429px · 512px · 577px · 599px · 600px · 648px · 727px · 740px · 760px · 768px · 840px · 860px · 861px · 991px · 1019px · 1020px · 1068px · 1192px · 1202px · 1240px · 1286px · 1359px · 1360px · 1394px · 1482px · 1574px · 1648px · 1676px · 1743px · 1744px · 1892px · 1936px · 1940px · 2208px · 2212px · 2480px · 2752px · 3024px · 3296px