[Design systems](/design-systems/) / Tanium

# Tanium design system

tanium.com

Read from Tanium's public website by Clinical Terminal. Not reviewed by Tanium. Copy it and paste it into Claude as inspiration.

Corrections or removal: <agent@clinicalterminal.com>

![Tanium homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923907.jpg?alt=media)

## Palette

- Ground

  \#000000

  \--color-alpha-black-2

- Ink

  \#FFFFFF

- Accent on the ground

  \#E42036

- Primary

  \#E01A33

  \--color-tanium-red-500

- On primary

  \#FFFFFF

  \--color-alpha-white-2

- Dark

  \#101842

  \--color-navy-600

- Site background

  \#000000

  \--color-alpha-black-2

## Color ramps

Color Tanium Red

50

\#F9C8CE

100

\#F6B5BE

200

\#F49DA8

300

\#F07C8B

400

\#FF2742

500

\#E01A33

600

\#D4122A

700

\#A21326

800

\#8A1020

900

\#751323

Color Navy

50

\#3A4A92

100

\#324183

200

\#2A3874

300

\#222F66

400

\#1B2658

500

\#151E4C

600

\#101842

700

\#0D1337

800

\#0A0F2B

900

\#070A20

Color Sky

50

\#EDF5FD

100

\#D4E9F9

200

\#A2CFF3

300

\#72B8EE

400

\#5AACE0

500

\#4A9FE8

600

\#2E88D4

700

\#1E6BAD

800

\#144E82

900

\#0C3358

Color Gold

50

\#F8F5EC

100

\#F2EAD4

200

\#E9D6A1

300

\#DDC186

400

\#DFC272

500

\#E1B648

600

\#DDA12A

700

\#D99222

800

\#D2851A

900

\#CB6F0C

Color Green

50

\#EAFCD9

100

\#DDFAC2

200

\#CDF8A5

300

\#BDF688

400

\#AEF36D

500

\#9BF04C

600

\#82C940

700

\#6A9343

800

\#4E7727

900

\#35511A

Color Purple

50

\#F2E3FC

100

\#E8CCFA

200

\#DEB4F8

300

\#D298F6

400

\#C781F3

500

\#BB65F1

600

\#9C54C9

700

\#7C4D99

800

\#5F3479

900

\#3D224F

Color Pink

50

\#FFF5F0

100

\#FFEEE6

200

\#FFE8DB

300

\#FFE1D1

400

\#FFDBC7

500

\#FFD1B8

600

\#D4AF9B

700

\#AA8D7D

800

\#7B6A60

900

\#56463E

Color Neutral

50

\#FBFAF9

100

\#F4F4F0

200

\#EFEEEB

300

\#DDDDDD

400

\#C6C5C5

500

\#A7A6A6

600

\#7E7D7D

700

\#696868

800

\#4A4949

900

\#282727

950

\#1A1919

Color Error

50

\#FEF3F2

100

\#FEE4E2

200

\#FECDCA

300

\#FDA29B

400

\#F97066

500

\#F04438

600

\#D92D20

700

\#B42318

800

\#912018

900

\#7A271A

Color Warning

50

\#FFFAEB

100

\#FEF0C7

200

\#FEDF89

300

\#FEC84B

400

\#FDB022

500

\#F79009

600

\#DC6803

700

\#B54708

800

\#93370D

900

\#7A2E0E

Color Success

50

\#ECFDF3

100

\#D1FADF

200

\#A6F4C5

300

\#6CE9A6

400

\#32D583

500

\#12B76A

600

\#039855

700

\#12744B

800

\#214B39

900

\#1C391C

Color Alpha Neutral

5

\#EFEEEB

10

\#EFEEEB

20

\#EFEEEB

30

\#EFEEEB

40

\#EFEEEB

50

\#EFEEEB

60

\#EFEEEB

70

\#EFEEEB

80

\#EFEEEB

90

\#EFEEEB

## Other named colors

- \--color-white #FFFFFF
- \--color-black #000000
- \--color-cream #FFFCF5
- \--color-green-1000 #1E2F0F
- \--color-purple-1000 #261632
- \--color-pink-1000 #322924
- \--color-alpha-navy #0E1C43
- \--color-alpha-mint #0EF19A
- \--color-alpha-error #D92D20
- \--color-alpha-warning #F79708
- \--color-alpha-success #039665
- \--token-bg-pagination-dot-active #E01A33
- \--token-bg-pagination-dot-default #DDDDDD
- \--color-alpha-error-30 #D92C20

## Type

Headings

Inter

Tanium at a glance

Body

Inter

Clear, readable paragraphs for clinicians, buyers and patients alike.

- 30pxTanium
- .875rem · 14pxTanium
- .8125rem · 13pxTanium
- .75rem · 12pxTanium
- 10pxTanium

## Shape & depth

Cards and panels: 0px corners · buttons and chips: 4px.

### Corner radii

- 2px

  used in 2 rules

- 4px

  used in 2 rules

- .25rem

  used in 1 rule

- 2147483647px

  used in 1 rule

### Shadows

- none!important

  used in 1 rule

### Gradients

- linear-gradient(90deg,#0000,#000 10% 90%,#0000)

  used in 2 rules

- linear-gradient(90deg,#000 75%,#0000)

  used in 2 rules

- linear-gradient(#000 75%,#0000)

  used in 2 rules

- linear-gradient(#000 70%,#0000)

  used in 2 rules

- linear-gradient(in lab, red, red)

  used in 1 rule

- radial-gradient(circle at 1px 1px,#ffffff59 1px,#0000 0)

  used in 1 rule

Breakpoints: 375px

## Voice

Tone: professional. Energy: high. Written for enterprises.

## DESIGN.md

The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100923907.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Tanium"
domain: "tanium.com"
colors:
  primary: "#E01A33"
  onPrimary: "#FFFFFF"
  dark: "#101842"
  background: "#000000"
ground:
  mode: dark
  hex: "#000000"
  ink: "#FFFFFF"
  accent: "#E42036"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "0px"
  button: "4px"
---

# Design System — Tanium

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

## Ground
- **Dark ground** (#000000), from Tanium's site background #000000. Pages and panels sit on it.
- Main text: #FFFFFF (21:1 on the ground).
- Secondary text is white at 88% / 76% / 60%; hairlines and plate borders white at 16%.

## Color
- **Accent on the ground: #E42036** (4.56:1), adjusted from Tanium's primary #E01A33 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #E01A33** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.81:1).
- Quote every hex exactly as written above.

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

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

## Voice
- Tone: professional. Energy: high. Written for enterprises.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Color Tanium Red** (`--color-tanium-red-N`): 50 `#F9C8CE` · 100 `#F6B5BE` · 200 `#F49DA8` · 300 `#F07C8B` · 400 `#FF2742` · 500 `#E01A33` · 600 `#D4122A` · 700 `#A21326` · 800 `#8A1020` · 900 `#751323`
- **Color Navy** (`--color-navy-N`): 50 `#3A4A92` · 100 `#324183` · 200 `#2A3874` · 300 `#222F66` · 400 `#1B2658` · 500 `#151E4C` · 600 `#101842` · 700 `#0D1337` · 800 `#0A0F2B` · 900 `#070A20`
- **Color Sky** (`--color-sky-N`): 50 `#EDF5FD` · 100 `#D4E9F9` · 200 `#A2CFF3` · 300 `#72B8EE` · 400 `#5AACE0` · 500 `#4A9FE8` · 600 `#2E88D4` · 700 `#1E6BAD` · 800 `#144E82` · 900 `#0C3358`
- **Color Gold** (`--color-gold-N`): 50 `#F8F5EC` · 100 `#F2EAD4` · 200 `#E9D6A1` · 300 `#DDC186` · 400 `#DFC272` · 500 `#E1B648` · 600 `#DDA12A` · 700 `#D99222` · 800 `#D2851A` · 900 `#CB6F0C`
- **Color Green** (`--color-green-N`): 50 `#EAFCD9` · 100 `#DDFAC2` · 200 `#CDF8A5` · 300 `#BDF688` · 400 `#AEF36D` · 500 `#9BF04C` · 600 `#82C940` · 700 `#6A9343` · 800 `#4E7727` · 900 `#35511A`
- **Color Purple** (`--color-purple-N`): 50 `#F2E3FC` · 100 `#E8CCFA` · 200 `#DEB4F8` · 300 `#D298F6` · 400 `#C781F3` · 500 `#BB65F1` · 600 `#9C54C9` · 700 `#7C4D99` · 800 `#5F3479` · 900 `#3D224F`
- **Color Pink** (`--color-pink-N`): 50 `#FFF5F0` · 100 `#FFEEE6` · 200 `#FFE8DB` · 300 `#FFE1D1` · 400 `#FFDBC7` · 500 `#FFD1B8` · 600 `#D4AF9B` · 700 `#AA8D7D` · 800 `#7B6A60` · 900 `#56463E`
- **Color Neutral** (`--color-neutral-N`): 50 `#FBFAF9` · 100 `#F4F4F0` · 200 `#EFEEEB` · 300 `#DDDDDD` · 400 `#C6C5C5` · 500 `#A7A6A6` · 600 `#7E7D7D` · 700 `#696868` · 800 `#4A4949` · 900 `#282727` · 950 `#1A1919`
- **Color Error** (`--color-error-N`): 50 `#FEF3F2` · 100 `#FEE4E2` · 200 `#FECDCA` · 300 `#FDA29B` · 400 `#F97066` · 500 `#F04438` · 600 `#D92D20` · 700 `#B42318` · 800 `#912018` · 900 `#7A271A`
- **Color Warning** (`--color-warning-N`): 50 `#FFFAEB` · 100 `#FEF0C7` · 200 `#FEDF89` · 300 `#FEC84B` · 400 `#FDB022` · 500 `#F79009` · 600 `#DC6803` · 700 `#B54708` · 800 `#93370D` · 900 `#7A2E0E`
- **Color Success** (`--color-success-N`): 50 `#ECFDF3` · 100 `#D1FADF` · 200 `#A6F4C5` · 300 `#6CE9A6` · 400 `#32D583` · 500 `#12B76A` · 600 `#039855` · 700 `#12744B` · 800 `#214B39` · 900 `#1C391C`
- **Color Alpha Neutral** (`--color-alpha-neutral-N`): 5 `#EFEEEB` · 10 `#EFEEEB` · 20 `#EFEEEB` · 30 `#EFEEEB` · 40 `#EFEEEB` · 50 `#EFEEEB` · 60 `#EFEEEB` · 70 `#EFEEEB` · 80 `#EFEEEB` · 90 `#EFEEEB`
- **Color Alpha Navy** (`--color-alpha-navy-N`): 5 `#101842` · 10 `#101842` · 20 `#101842` · 30 `#101842` · 40 `#101842` · 50 `#101842` · 60 `#101842` · 70 `#101842` · 80 `#101842` · 90 `#101842`
- **Color Alpha Black** (`--color-alpha-black-N`): 2 `#000000` · 5 `#000000` · 10 `#000000` · 30 `#000000` · 50 `#000000` · 70 `#000000` · 90 `#000000`
- **Color Alpha White** (`--color-alpha-white-N`): 2 `#FFFFFF` · 5 `#FFFFFF` · 10 `#FFFFFF` · 15 `#FFFFFF` · 30 `#FFFFFF` · 50 `#FFFFFF` · 70 `#FFFFFF` · 90 `#FFFFFF`

### Other named colors

- `--color-white`: `#FFFFFF`
- `--color-black`: `#000000`
- `--color-cream`: `#FFFCF5`
- `--color-green-1000`: `#1E2F0F`
- `--color-purple-1000`: `#261632`
- `--color-pink-1000`: `#322924`
- `--color-alpha-navy`: `#0E1C43`
- `--color-alpha-mint`: `#0EF19A`
- `--color-alpha-error`: `#D92D20`
- `--color-alpha-warning`: `#F79708`
- `--color-alpha-success`: `#039665`
- `--token-bg-pagination-dot-active`: `#E01A33`
- `--token-bg-pagination-dot-default`: `#DDDDDD`
- `--color-alpha-error-30`: `#D92C20`

### Typefaces

- Inter (`--font-inter`) — on Google Fonts
- Inconsolata (`--font-inconsolata`)
- inherit!important

### Type scale (most-used sizes)

`30px` · `.875rem` · `.8125rem` · `.75rem` · `10px`

### Letter-spacing

`-.02em` (10) · `-.01em` (8) · `-.015em` (2) · `-.022em` (2) · `-.025em` (1) · `-.03em` (1)

### Corner radii (most-used)

`2px` · `4px` · `.25rem` · `2147483647px`

### Shadows

- `none!important`

### Gradients

- `linear-gradient(90deg,#0000,#000 10% 90%,#0000)`
- `linear-gradient(90deg,#000 75%,#0000)`
- `linear-gradient(#000 75%,#0000)`
- `linear-gradient(#000 70%,#0000)`
- `linear-gradient(in lab, red, red)`
- `radial-gradient(circle at 1px 1px,#ffffff59 1px,#0000 0)`

### Breakpoints

375px
```