---
generator: clinical-terminal-brand-kit
company: "DeepIntent"
domain: "deepintent.com"
colors:
  primary: "#0B53FF"
  onPrimary: "#FFFFFF"
  dark: "#091F34"
  background: "#F5F5F5"
ground:
  mode: light
  hex: "#F5F5F5"
  ink: "#091F34"
  accent: "#0B53FF"
fonts:
  heading: "Manrope"
  body: "Manrope"
radius:
  card: "16px"
  button: "999px"
---

# Design System — DeepIntent

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

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

## Color
- **Accent on the ground: #0B53FF** (5.21:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0B53FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.68:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Manrope**. Body: **Manrope**. Both on Google Fonts.

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

## Voice
- Tone: professional. Energy: low. Written for marketers.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Opacity Neutral Darkest** (`--opacity--neutral-darkest-N`): 5 `#010203` · 10 `#010203` · 15 `#010203` · 20 `#010203` · 30 `#010203` · 40 `#010203` · 50 `#010203` · 60 `#010203`
- **Opacity White** (`--opacity--white-N`): 5 `#FFFFFF` · 10 `#FFFFFF` · 15 `#FFFFFF` · 30 `#FFFFFF` · 50 `#FFFFFF`

### Other named colors

- `--colors--peppermint`: `#79FACB`
- `--colors--cobalt`: `#0B53FF`
- `--colors--white`: `#FFFFFF`
- `--colors--neutral-darkest`: `#010203`
- `--colors--deep-blue`: `#0C2741`
- `--colors--peppermint-light`: `#A1FBDA`
- `--colors--peppermint-lighter`: `#E4FEF4`
- `--colors--peppermint-dark`: `#60C8A2`
- `--colors--cobalt-darkest`: `#03184C`
- `--colors--cobalt-dark`: `#0842CC`
- `--colors--citrus`: `#DAFB92`
- `--colors--soft-white`: `#F5F5F5`
- `--colors--deep-blue-darkest`: `#030B13`
- `--colors--citrus-light`: `#E5FCB2`
- `--colors--soft-white-lighter`: `#FDFDFD`
- `--colors--deep-blue-dark`: `#091F34`
- `--colors--cobalt-light`: `#5486FF`
- `--colors--cobalt-lighter`: `#CEDCFF`
- `--colors--cobalt-lightest`: `#E6EDFF`
- `--colors--neutral-lightest`: `#F2F2F2`
- `--colors--neutral-lighter`: `#D8D9D9`
- `--colors--cobalt-darker`: `#042166`
- `--colors--neutral-darker`: `#1A1B1C`
- `--colors--deep-blue-light`: `#54677A`
- `--colors--neutral-light`: `#B2B3B3`
- `--colors--neutral`: `#808081`
- `--colors--neutral-dark`: `#4D4D4E`
- `--colors--peppermint-lightest`: `#F1FEF9`
- `--colors--peppermint-darker`: `#306451`
- `--colors--peppermint-darkest`: `#244B3C`
- `--colors--deep-blue-lightest`: `#E6E9EC`
- `--colors--deep-blue-lighter`: `#CED3D9`
- `--colors--deep-blue-darker`: `#040F1A`
- `--colors--soft-white-light`: `#F8F8F8`
- `--colors--soft-white-dark`: `#C4C4C4`
- `--colors--soft-white-darker`: `#626262`
- `--colors--soft-white-darkest`: `#494949`
- `--colors--citrus-lightest`: `#FBFEF4`
- `--colors--citrus-lighter`: `#F7FEE9`
- `--colors--citrus-dark`: `#AEC874`
- `--colors--citrus-darker`: `#57643A`
- `--colors--citrus-darkest`: `#414B2B`
- `--colors--soft-white-lightest`: `#FEFEFE`

### Typefaces

- Manrope !important

### Type scale (most-used sizes)

`2.5rem` · `2.25rem` · `2rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `14px` · `.8125rem` · `.75rem` · `.625rem`

### Letter-spacing

`.05em` (6) · `.08em` (6) · `.02em` (4) · `.06em` (4) · `-.0225rem` (3) · `-.045em` (2)

### Corner radii (most-used)

`1rem` · `100px` · `50%` · `999px` · `100%` · `16px` · `.25rem` · `8px` · `2px` · `20px`

### Shadows

- `0 4px 16px #0c27411f`
- `-4px 4px 12px #0003`
- `0 1px 2px #14233c0a, 0 24px 48px -32px #14233c1a`
- `0 1px 2px #14233c0a, 0 24px 48px -32px #14233c2e`
- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`

### Gradients

- `linear-gradient(to right, #0000 0%, #000 20% 80%, #0000 100%)`
- `linear-gradient(#0000, #000, #000)`
- `linear-gradient(#0000 50%, #0c2741f2 86%)`
- `linear-gradient(35deg, #0c2741ba, #0c274133)`
- `linear-gradient(0deg, #000, #fff)`
- `linear-gradient(0deg, #fff, #000)`

### Breakpoints

479px · 767px · 768px · 991px · 992px