---
generator: clinical-terminal-brand-kit
company: "Veeva Systems"
domain: "veeva.com"
colors:
  primary: "#F89C26"
  onPrimary: "#01040B"
  dark: "#01040B"
  accent: "#F46700"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#01040B"
  accent: "#B45E00"
fonts:
  heading: "Poppins"
  body: "Roboto"
radius:
  card: "15px"
  button: "60px"
---

# Design System — Veeva Systems

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

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

## Color
- **Accent on the ground: #B45E00** (4.62:1), adjusted from Veeva Systems's primary #F89C26 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #F89C26** for filled shapes (buttons, chips, bars), with #01040B text on it (9.55:1).
- Secondary accent #F46700: charts and a second data series only.
- Quote every hex exactly as written above.

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

## Shape
- Cards and panels: 15px corners. Buttons and chips: 60px.

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

## Tokens from the site's stylesheets

### Other named colors

- `--footer-fix-color`: `#1B2E53`

### Typefaces

- Poppins — on Google Fonts
- Roboto — on Google Fonts
- Verdana

### Type scale (most-used sizes)

`42px` · `36px` · `30px` · `28px` · `24px` · `22px` · `20px` · `1.25rem` · `18px` · `16px` · `14px` · `12px`

### Letter-spacing

`-.03em` (95) · `-.02em` (3) · `2px` (2) · `0.1em` (2) · `-2px` (2) · `.75px` (1)

### Corner radii (most-used)

`24px` · `40px` · `16px` · `4px` · `60px` · `8px` · `50%` · `20px` · `6px` · `10px`

### Shadows

- `0 5px 8px 0 rgba(0,0,0,.15)`
- `0 .99px 11.8px 0 rgba(0,0,0,.05),0 2.75px 32.7px 0 rgba(0,0,0,.07),0 6.6px 78.7px 0 rgba(0,0,0,.09),0 22px 80px 0 rgba(0,0,0,.14)`
- `0px 12px 24px -10px rgba(0,0,0,0.25)`
- `inset 0 1px 1px rgba(0,0,0,0.075)`
- `none !important`
- `0 0 0 .25rem rgba(13,110,253,.25)`

### Gradients

- `linear-gradient(163deg,#f5670e 4.54%,#ff6b00 88.28%)`
- `linear-gradient(195deg,#1b2f54 10.29%,#01050b 25.48%,#02060d 37.84%,#030710 47.81%,#040a13 55.82%,#060c18 62.3%,#080f1d 67.7%,#0a1223 72.44%,#0c1629 76.97%,#0e1a2f 81.72%,#101d36 87.11%,#13213c 93.6%,#152543 101.61%,#172849 111.57%,#192c4f 123.93%,#1b2f54 139.12%)`
- `linear-gradient(180deg,#f7981d,#ff6b00)`
- `linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)`
- `linear-gradient(146deg,#fff 5.2%,#eef1f5 92.04%)`
- `linear-gradient(91deg,#449fd7 6.43%,#54dddd 104.88%)`

### Breakpoints

400px · 480px · 500px · 550px · 576px · 600px · 650px · 658px · 681px · 700px · 767px · 768px · 773px · 780px · 783px · 800px · 840px · 990px · 991px · 992px · 1024px · 1090px · 1200px · 1320px · 1400px · 1600px