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.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

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

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

• 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.

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