Clinical Terminal
AboutSign in

Mimecast design system

mimecast.com

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

Corrections or removal: agent@clinicalterminal.com

Mimecast logo

Palette

Color ramps

Static Neutral
100
#F6F6F8
200
#E5E5E9
300
#CECED4
400
#B6B6BE
500
#9D9DA9
600
#71717E
700
#4E4F5F
800
#1A2130
900
#131521
Static Mimecast Blue
400
#2326A0
500
#1F1F74
700
#1A1B42
900
#000129
Static Accent
400
#DF4953
600
#DB333E
800
#BA212B
Static Spotlight
400
#217EE7
600
#1565C0
800
#104D92

Other named colors

Type

Headings
Archivo · closest free match for Neo-Sans

Mimecast at a glance

Body
Open Sans

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

Shape & depth

Cards and panels: 16px corners · buttons and chips: 30px.

Corner radii

Shadows

Gradients

Breakpoints: 360px · 576px · 768px · 992px · 1024px · 1090px

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: "Mimecast"
domain: "mimecast.com"
colors:
  primary: "#DB333E"
  onPrimary: "#FFFFFF"
  dark: "#000129"
  accent: "#FF0000"
  background: "#F9F9FA"
ground:
  mode: light
  hex: "#F9F9FA"
  ink: "#000129"
  accent: "#D72F3B"
fonts:
  heading: "Archivo"
  body: "Open Sans"
radius:
  card: "16px"
  button: "30px"
---

# Design System — Mimecast

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

## Ground
- **Light ground** (#F9F9FA), from Mimecast's site background #F9F9FA. Pages and panels sit on it.
- Main text: #000129 (19.26:1 on the ground).
- Secondary text is #000129 at 88% / 76% / 60%; hairlines and plate borders #000129 at 16%.

## Color
- **Accent on the ground: #D72F3B** (4.58:1), adjusted from Mimecast's primary #DB333E so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #DB333E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.61:1).
- Secondary accent #FF0000: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Open Sans**. Both on Google Fonts.
- Mimecast's site uses Neo-Sans / Open Sans; these are the closest free look-alikes.

## Shape
- Cards and panels: 16px corners. Buttons and chips: 30px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Static Neutral** (`--static-neutral-N`): 100 `#F6F6F8` · 200 `#E5E5E9` · 300 `#CECED4` · 400 `#B6B6BE` · 500 `#9D9DA9` · 600 `#71717E` · 700 `#4E4F5F` · 800 `#1A2130` · 900 `#131521`
- **Static Mimecast Blue** (`--static-mimecast-blue-N`): 400 `#2326A0` · 500 `#1F1F74` · 700 `#1A1B42` · 900 `#000129`
- **Static Accent** (`--static-accent-N`): 400 `#DF4953` · 600 `#DB333E` · 800 `#BA212B`
- **Static Spotlight** (`--static-spotlight-N`): 400 `#217EE7` · 600 `#1565C0` · 800 `#104D92`

### Other named colors

- `--static-neutral-white`: `#FFFFFF`
- `--static-neutral-black`: `#000000`
- `--ss-primary-color`: `#5897FB`
- `--ss-bg-color`: `#FFFFFF`
- `--ss-font-color`: `#4D4D4D`
- `--ss-font-placeholder-color`: `#8D8D8D`
- `--ss-disabled-color`: `#DCDEE2`
- `--ss-border-color`: `#DCDEE2`
- `--ss-highlight-color`: `#FFFB8C`
- `--ss-success-color`: `#00B755`
- `--ss-error-color`: `#DC3545`
- `--ss-focus-color`: `#5897FB`
- `--static-success-100`: `#E5F4E9`
- `--static-success-600`: `#28A745`
- `--static-warning-100`: `#FFF8E1`
- `--static-warning-600`: `#FFC107`
- `--static-error-100`: `#FBE6E7`
- `--static-error-600`: `#DB333E`
- `--static-info-100`: `#E2F6F9`
- `--static-info-600`: `#0BB6D1`

### Typefaces

- neo-sans
- Open Sans — on Google Fonts

### Type scale (most-used sizes)

`2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `18px` · `16px` · `1rem` · `.875rem` · `14px` · `.75rem` · `12px`

### Letter-spacing

`-.18px` (21) · `.1px` (10) · `-.5px` (8) · `-.2px` (7) · `.18px` (6) · `.05em` (4)

### Corner radii (most-used)

`20px` · `5px` · `50%` · `10px` · `.25rem` · `500px` · `30px` · `25px` · `50px` · `1.25rem`

### Shadows

- `0 0 12px 3px rgba(0,0,0,.12)`
- `0 4px 12px -4px rgba(0,0,10,.07),0 20px 45px 10px rgba(0,0,12,.08)`
- `0 12px 35px 5px rgba(0,0,20,.04),0 4px 60px -10px rgba(0,0,10,.04)`
- `0 12px 35px 5px rgba(0,0,20,.08),0 4px 60px -25px rgba(0,0,10,.09)`
- `0 12px 35px -1px rgba(0,0,20,.2),0 4px 60px -19px rgba(0,0,10,.19)`
- `0 12px 35px -3px rgba(0,0,20,.32),0 4px 60px -21px rgba(0,0,10,.3)`

### Gradients

- `linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)`
- `linear-gradient(45deg,transparent 50%,grey 0)`
- `linear-gradient(135deg,grey 50%,transparent 0)`
- `linear-gradient(90deg,#1565c0,#000129)`
- `linear-gradient(331deg,#000129 37.79%,#db333e 95.14%)`
- `linear-gradient(to right,
                transparent,
                /* fully transparent at the left edge */
                black 20%,
                /* fully opaque from 20% */
                black 80%,
                /* fully opaque until 80% */
                transparent
                /* fully transparent at the right edge */
            )`

### Breakpoints

360px · 576px · 768px · 992px · 1024px · 1090px