[Design systems](/design-systems/) / Forescout Technologies Inc.

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101760.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--ep-c-white

- Ink

  \#111111

- Accent on the ground

  \#AC6500

- Primary

  \#FFB400

  \--color-yellow

- On primary

  \#27323C

  \--color-gray-2

- Dark

  \#111111

  \--color-gray-900

- Site background

  \#FFFFFF

  \--ep-c-white

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

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

## Type

Headings

Montserrat

Forescout Technologies Inc. at a glance

Body

Open Sans

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

- 3rem · 48pxForescout Technologies Inc.
- 2rem · 32pxForescout Technologies Inc.
- 1.875rem · 30pxForescout Technologies Inc.
- 1.625rem · 26pxForescout Technologies Inc.
- 1.3125rem · 21pxForescout Technologies Inc.
- 1.25rem · 20pxForescout Technologies Inc.
- 1.125rem · 18pxForescout Technologies Inc.
- 1rem · 16pxForescout Technologies Inc.

## Shape & depth

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

### Corner radii

- .75rem

  used in 21 rules

- 100%

  used in 11 rules

- 50%

  used in 5 rules

- 3px

  used in 2 rules

- 10px

  used in 2 rules

- 2px

  used in 2 rules

- 33.3333333333%

  used in 2 rules

- 1rem

  used in 1 rule

- 9999px

  used in 1 rule

### Shadows

- none !important

  used in 5 rules

- 0px 2px 4px rgba(0,0,0,.1)

  used in 4 rules

- 0 0 0 transparent

  used in 2 rules

- inset 0 0 6px rgba(0,0,0,.3)

  used in 1 rule

- 0 0 3px 0 #000

  used in 1 rule

### Gradients

- linear-gradient(black,black 2px,transparent 3px,transparent calc(100% - 3px),black calc(100% - 2px),black 100%)

  used in 6 rules

- linear-gradient(90deg,black,black 2px,transparent 3px,transparent calc(100% - 3px),black calc(100% - 2px),black 100%)

  used in 6 rules

- linear-gradient(to bottom,#000 25%,transparent)

  used in 2 rules

- linear-gradient(rgba(255,255,255,0),#fff)

  used in 2 rules

- linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0))

  used in 2 rules

- linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)

  used in 2 rules

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F101760.md?alt=media).

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