Clinical Terminal
AboutSign in

Forescout Technologies Inc. design system

forescout.com

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

Corrections or removal: agent@clinicalterminal.com

Forescout Technologies Inc. homepage

Palette

Color ramps

Color Primary
100
#F2FAFE
300
#99D8F7
400
#009DEA
500
#3F66AF
900
#002F70
Color Gray
2
#27323C
3
#D9DDE0
4
#ECEEF0
100
#F6F6F7
200
#D9DDE0
300
#999999
400
#415464
900
#111111
Color Lblue
2
#CCEBFB
3
#E6F5FD
4
#F2FAFE
Color Dblue
2
#00214E
3
#CCD5E2
4
#E6EAF1
Color Blue
2
#112242
3
#D4DDED
4
#EAEEF6
Color Red
2
#660315
3
#EECDD3
4
#F7E6E9
Color Orange
2
#823102
3
#F7DCCD
4
#FBEEE6
Color Yellow
2
#B37E00
3
#FFF0CC
4
#FFF8E6
Color Green
2
#445728
3
#E7EFDC
4
#F3F7ED
Color Forescout Blue
10
#1AA7EC
20
#33B1EE
40
#66C4F2
60
#99D8F7
80
#CCEBFB
95
#F2FAFE
Color Forescout Black
10
#1A1A1A
20
#333333
40
#666666
60
#999999
80
#CCCCCC
95
#F2F2F2
Color Fs Dark Blue
10
#1A447E
20
#33598D
40
#6682A9
60
#99ACC6
80
#CCD5E2
95
#F2F5F8

Other named colors

Type

Headings
Montserrat

Forescout Technologies Inc. at a glance

Body
Open Sans

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 576px · 768px · 1600px

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