---
generator: clinical-terminal-brand-kit
company: "Forescout Technologies Inc."
domain: "forescout.com"
colors:
  primary: "#FFB400"
  onPrimary: "#27323C"
  dark: "#111111"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#111111"
  accent: "#AC6500"
fonts:
  heading: "Montserrat"
  body: "Open Sans"
radius:
  card: "0px"
  button: "7px"
---

# Design System — Forescout Technologies Inc.

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

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

## Color
- **Accent on the ground: #AC6500** (4.55:1), adjusted from Forescout Technologies Inc.'s primary #FFB400 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FFB400** for filled shapes (buttons, chips, bars), with #27323C text on it (7.33:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Montserrat**. Body: **Open Sans**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Primary** (`--color-primary-N`): 100 `#F2FAFE` · 300 `#99D8F7` · 400 `#009DEA` · 500 `#3F66AF` · 900 `#002F70`
- **Color Gray** (`--color-gray-N`): 2 `#27323C` · 3 `#D9DDE0` · 4 `#ECEEF0` · 100 `#F6F6F7` · 200 `#D9DDE0` · 300 `#999999` · 400 `#415464` · 900 `#111111`
- **Color Lblue** (`--color-lblue-N`): 2 `#CCEBFB` · 3 `#E6F5FD` · 4 `#F2FAFE`
- **Color Dblue** (`--color-dblue-N`): 2 `#00214E` · 3 `#CCD5E2` · 4 `#E6EAF1`
- **Color Blue** (`--color-blue-N`): 2 `#112242` · 3 `#D4DDED` · 4 `#EAEEF6`
- **Color Red** (`--color-red-N`): 2 `#660315` · 3 `#EECDD3` · 4 `#F7E6E9`
- **Color Orange** (`--color-orange-N`): 2 `#823102` · 3 `#F7DCCD` · 4 `#FBEEE6`
- **Color Yellow** (`--color-yellow-N`): 2 `#B37E00` · 3 `#FFF0CC` · 4 `#FFF8E6`
- **Color Green** (`--color-green-N`): 2 `#445728` · 3 `#E7EFDC` · 4 `#F3F7ED`
- **Color Forescout Blue** (`--color-forescout-blue-N`): 10 `#1AA7EC` · 20 `#33B1EE` · 40 `#66C4F2` · 60 `#99D8F7` · 80 `#CCEBFB` · 95 `#F2FAFE`
- **Color Forescout Black** (`--color-forescout-black-N`): 10 `#1A1A1A` · 20 `#333333` · 40 `#666666` · 60 `#999999` · 80 `#CCCCCC` · 95 `#F2F2F2`
- **Color Fs Dark Blue** (`--color-fs-dark-blue-N`): 10 `#1A447E` · 20 `#33598D` · 40 `#6682A9` · 60 `#99ACC6` · 80 `#CCD5E2` · 95 `#F2F5F8`
- **Color Fs Slate** (`--color-fs-slate-N`): 10 `#546574` · 20 `#677683` · 40 `#8D98A2` · 60 `#B3BBC1` · 80 `#D9DDE0` · 95 `#F6F6F7`
- **Color Fs Burned Orange** (`--color-fs-burned-orange-N`): 10 `#DC631D` · 20 `#E07536` · 40 `#E89768` · 60 `#EFBA9B` · 80 `#F7DCCD` · 95 `#FDF6F2`
- **Color Fs Mid Blue** (`--color-fs-mid-blue-N`): 10 `#4B7AD1` · 20 `#5F89D6` · 40 `#87A6E0` · 60 `#AFC4EB` · 80 `#D7E1F5` · 95 `#F5F8FC`
- **Color Fs Just Blue** (`--color-fs-just-blue-N`): 10 `#3F66AF` · 20 `#5577B8` · 40 `#7F99CA` · 60 `#AABBDB` · 80 `#D4DDED` · 95 `#F4F7FB`
- **Color Fs Yellow** (`--color-fs-yellow-N`): 20 `#FDCD40` · 40 `#FED970` · 60 `#FEE69F` · 80 `#FFF2CF` · 90 `#FFF9E7`
- **Color Fs Orange** (`--color-fs-orange-N`): 20 `#F9A34B` · 40 `#FABA78` · 60 `#FCD1A5` · 80 `#FDE8D2` · 90 `#FEF4E9`
- **Color Fs Light Green** (`--color-fs-light-green-N`): 20 `#A9D365` · 40 `#BEDE8B` · 60 `#D4E9B2` · 80 `#E9F4D8` · 90 `#F4FAEC`
- **Color Fs Green** (`--color-fs-green-N`): 20 `#40B959` · 40 `#70CB83` · 60 `#9FDCAC` · 80 `#CFEED6` · 90 `#E7F6EA`

### Other named colors

- `--ep-c-white`: `#FFFFFF`
- `--ep-c-medium-white`: `#EEEEEE`
- `--ep-c-white-gray`: `#CCCCCC`
- `--ep-c-white-red`: `#FFE8ED`
- `--ep-c-white-yellow`: `#FDEECA`
- `--ep-c-medium-gray`: `#626262`
- `--ep-c-light-gray`: `#999999`
- `--ep-c-black`: `#000000`
- `--ep-c-medium-red`: `#D73C38`
- `--ep-c-dark-red`: `#B93431`
- `--ep-c-medium-dark-blue`: `#0073AA`
- `--ep-status-ok`: `#6AA000`
- `--ep-status-warning`: `#E3E600`
- `--ep-default-icon-color`: `#82878C`
- `--color-white`: `#FFFFFF`
- `--color-black`: `#000000`
- `--color-error`: `#CC0000`
- `--color-success`: `#00B300`
- `--color-lblue`: `#009DEA`
- `--color-dblue`: `#002F70`
- `--color-blue`: `#2A55A6`
- `--color-gray`: `#415464`
- `--color-red`: `#AA0523`
- `--color-orange`: `#D85204`
- `--color-yellow`: `#FFB400`
- `--color-green`: `#88AD4F`
- `--color-forescout-blue`: `#009DEA`
- `--color-forescout-black`: `#000000`
- `--color-fs-dark-blue`: `#002F70`
- `--color-fs-slate`: `#415464`
- `--color-fs-burned-orange`: `#D85204`
- `--color-fs-mid-blue`: `#2A55A6`
- `--color-fs-just-blue`: `#2A55A6`
- `--color-fs-gold`: `#FFB400`
- `--color-fs-yellow`: `#FFB400`
- `--color-fs-orange`: `#D85204`
- `--color-fs-light-green`: `#88AD4F`
- `--color-fs-green`: `#88AD4F`
- `--list-marker-color`: `#009DEA`
- `--layout-divider-color`: `#009DEA`
- `--btn-var-color`: `#FFFFFF`
- `--btn-var-background`: `#009DEA`
- `--btn-var-border`: `#009DEA`
- `--hero-background-color`: `#002F70`
- `--hero-cta-background-color`: `#000000`
- `--background-style-background_color`: `#415464`
- `--modal-underlay-background_color`: `#415464`
- `--course-item-bg`: `#F2FAFE`
- `--partners-box-color`: `#009DEA`
- `--notification-banner-background-color`: `#FFB400`
- `--notification-banner-text-color`: `#00214E`
- `--color-secondary-100`: `#F8761F`
- `--color-secondary-400`: `#FFB400`
- `--color-black-2`: `#CCCCCC`
- `--color-black-3`: `#F2F2F2`
- `--color-white-3`: `#CCCCCC`
- `--color-white-2`: `#F2F2F2`

### Typefaces

- Montserrat — on Google Fonts
- Open Sans — on Google Fonts

### Type scale (most-used sizes)

`3rem` · `2rem` · `1.875rem` · `1.625rem` · `1.3125rem` · `1.25rem` · `1.125rem` · `1rem` · `.9375rem` · `.875rem` · `14px` · `.75rem`

### Letter-spacing

`.02em` (7)

### Corner radii (most-used)

`.75rem` · `100%` · `50%` · `3px` · `10px` · `2px` · `33.3333333333%` · `1rem` · `9999px`

### Shadows

- `none !important`
- `0px 2px 4px rgba(0,0,0,.1)`
- `0 0 0 transparent`
- `inset 0 0 6px rgba(0,0,0,.3)`
- `0 0 3px 0 #000`

### Gradients

- `linear-gradient(black,black 2px,transparent 3px,transparent calc(100% - 3px),black calc(100% - 2px),black 100%)`
- `linear-gradient(90deg,black,black 2px,transparent 3px,transparent calc(100% - 3px),black calc(100% - 2px),black 100%)`
- `linear-gradient(to bottom,#000 25%,transparent)`
- `linear-gradient(rgba(255,255,255,0),#fff)`
- `linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0))`
- `linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)`

### Breakpoints

576px · 768px · 1600px