---
generator: clinical-terminal-brand-kit
company: "Cognizant"
domain: "cognizant.com"
colors:
  primary: "#262663"
  onPrimary: "#FFFFFF"
  dark: "#000048"
  accent: "#26EFE9"
  highlight: "#2F96A9"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000048"
  accent: "#262663"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "10px"
  button: "10px"
---

# Design System — Cognizant

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

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

## Color
- **Accent on the ground: #262663** (13.64:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #262663** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (13.64:1).
- Secondary accent #26EFE9: charts and a second data series only.
- Highlight #2F96A9 (from Cognizant's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--primary`: `#000048`
- `--primary-hover`: `#000048`
- `--accent1-light`: `#85A0F9`
- `--accent1-medium`: `#7373D8`
- `--accent1-dark`: `#2E308E`
- `--accent2-light`: `#92BBE6`
- `--accent2-lighter`: `#E5EFF9`
- `--accent2-medium`: `#6AA2DC`
- `--accent2-dark`: `#2F78C4`
- `--accent2-darker`: `#2866A7`
- `--accent3-light`: `#97F5F7`
- `--accent3-medium`: `#26EFE9`
- `--accent3-dark`: `#06C7CC`
- `--white`: `#FFFFFF`
- `--gray-lightest`: `#F5F5F2`
- `--gray-lighter`: `#E8E8E6`
- `--gray-light`: `#D0D0CE`
- `--gray-medium`: `#97999B`
- `--gray-dark`: `#53565A`
- `--red`: `#B81F2D`
- `--link-hover-color-light`: `#C9FBFA`
- `--button-hover-bgcolor`: `#A8F9F6`
- `--tint-accent2-light`: `#DEEBF8`
- `--tint-hover-color`: `#9DC2E9`

### Typefaces

- Gellix (`--body-font-family`)
- Gellix !important

### Type scale (most-used sizes)

`4.2rem` · `3.15rem` · `2.35rem` · `2rem` · `1.8rem` · `1.35rem` · `20px` · `1.25rem` · `.75rem` · `0.75rem` · `.6rem`

### Corner radii (most-used)

`.75rem` · `0.5rem` · `0.25rem` · `.5rem`

### Shadows

- `none !important`

### Gradients

- `linear-gradient(35deg,#2d2d8f 10%,#006fba 50%,#21fceb 94%)`
- `linear-gradient(35deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%)`
- `linear-gradient(45deg, #5e93ef 10%, #c7ed88 65%, #eee2a0 85%, #efe34a)`
- `linear-gradient(150deg,#5e93ef 10%,#c7ed88 65%,#eee2a0 85%,#efe34a)`
- `radial-gradient(at 95% 7%,#45bcc9 0,rgba(69,188,201,.001) 60%)`
- `radial-gradient(at 95% 93%,#fae500 0,rgba(250,229,0,.001) 60%)`

### Breakpoints

599px · 600px · 1023px · 1024px · 1200px