[Design systems](/design-systems/) / Genpact

# Genpact design system

genpact.com

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

Corrections or removal: <agent@clinicalterminal.com>

![Genpact homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923722.jpg?alt=media)

## Palette

- Ground

  \#161916

  \--button-fg-color

- Ink

  \#FFFFFF

- Accent on the ground

  \#FF4F59

- Primary

  \#FF4F59

  \--button-bg-color

- On primary

  \#161916

  \--button-fg-color

- Dark

  \#FFAD28

  \--title-color

- Site background

  \#161916

  \--button-fg-color

## Color ramps

Rp Base Color Blue

50

\#EEFEFF

100

\#C1FDFF

200

\#51E1E6

300

\#00AECF

400

\#066C94

500

\#064B73

600

\#073262

700

\#03172E

Rp Base Color Coral

50

\#FFEBEC

100

\#FFC2C6

200

\#FF9AA0

300

\#FF555F

400

\#F62A36

500

\#D90B18

600

\#99030C

700

\#570C10

Rp Base Color Gray

0

\#FFFFFF

50

\#E2EDF6

100

\#D3DCE5

200

\#BEC4CD

300

\#9AA1A7

400

\#848A8F

500

\#5E6266

600

\#404346

700

\#1E2125

800

\#1D1E1F

900

\#151515

Rp Base Color Green

50

\#F2FCE6

100

\#D5F6AD

200

\#B6E188

300

\#6FB557

400

\#2E872E

500

\#124C1C

600

\#0A3F1A

700

\#063D1B

Rp Base Color Iron

50

\#F2F6FA

100

\#E2EAF0

200

\#C4D3E1

300

\#AABBCC

400

\#8DA3B4

500

\#6A7885

600

\#475360

700

\#4D5158

750

\#4D5158

800

\#35383D

900

\#1D232C

Rp Base Color Opaque

1

\#000000

50

\#000000

100

\#000000

200

\#000000

300

\#000000

400

\#000000

500

\#000000

600

\#000000

700

\#000000

800

\#000000

900

\#000000

Rp Base Color Yellow

50

\#FFFBED

100

\#FFEB92

200

\#F9DB4A

300

\#E4B725

400

\#B28519

500

\#9E6B05

600

\#76480C

700

\#6E4103

## Other named colors

- \--rp-base-color-gray-1000 #000000
- \--button-bg-color #FF4F59
- \--button-fg-color #161916
- \--button-active-bg-color #FF727A
- \--button-active-fg-color #161916
- \--button-disabled-bg-color #4A4A4A
- \--button-disabled-fg-color #6D706B
- \--button-focus-bg-color #FF4F59
- \--button-focus-box-shadow-color #FF4F59
- \--button-focus-fg-color #161916
- \--button-hover-bg-color #FF727A
- \--button-hover-fg-color #161916
- \--button-border-color #FF4F59
- \--button-active-border-color #FF727A
- \--button-disabled-border-color #4A4A4A
- \--button-hover-border-color #FF727A
- \--background-color #333333
- \--title-color #FFAD28

## Type

Headings

Archivo · closest free match for Funnel Sans

Genpact at a glance

Body

Archivo · closest free match for Funnel Sans

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

- 64pxGenpact
- 48pxGenpact
- 40pxGenpact
- 36pxGenpact
- 32pxGenpact
- 28pxGenpact
- 24pxGenpact
- 20pxGenpact

## Shape & depth

Cards and panels: 12px corners · buttons and chips: 50px.

### Corner radii

- 12px

  used in 11 rules

- 24px

  used in 11 rules

- 50%

  used in 8 rules

- 50px

  used in 6 rules

- 2px

  used in 4 rules

- 15px

  used in 2 rules

- 8px

  used in 2 rules

- 10px

  used in 1 rule

- 45px

  used in 1 rule

- 4px

  used in 1 rule

### Shadows

- inset 0 6px 8px 4px rgba(0,0,0,.08)

  used in 4 rules

- inset 0 0 59.6px 6px hsla(0,0%,100%,.04)

  used in 2 rules

### Gradients

- linear-gradient(90deg,rgba(255,242,223,0),rgba(255,242,223,.15) 24.5%,rgba(255,242,223,.15) 75%,rgba(255,242,223,0))

  used in 1 rule

- linear-gradient(0deg,rgba(53,56,61,0) 91%,rgba(0,0,0,.08))

  used in 1 rule

- linear-gradient(90deg,#161916 0,transparent 20%)

  used in 1 rule

- linear-gradient(270deg,#161916 0,transparent 20%)

  used in 1 rule

- linear-gradient(139deg,rgba(0,0,0,.66) 61.42%,hsla(0,0%,100%,0) 129.37%)

  used in 1 rule

- radial-gradient(rgba(141,163,180,.15) 1px,transparent 0)

  used in 1 rule

Breakpoints: 376px · 416px · 472px · 473px · 767px · 768px · 769px · 887px · 1023px · 1024px · 1025px · 1084px

## 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%2F100923722.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Genpact"
domain: "genpact.com"
colors:
  primary: "#FF4F59"
  onPrimary: "#161916"
  dark: "#FFAD28"
  background: "#161916"
ground:
  mode: dark
  hex: "#161916"
  ink: "#FFFFFF"
  accent: "#FF4F59"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "12px"
  button: "50px"
---

# Design System — Genpact

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Rp Base Color Blue** (`--rp-base-color-blue-N`): 50 `#EEFEFF` · 100 `#C1FDFF` · 200 `#51E1E6` · 300 `#00AECF` · 400 `#066C94` · 500 `#064B73` · 600 `#073262` · 700 `#03172E`
- **Rp Base Color Coral** (`--rp-base-color-coral-N`): 50 `#FFEBEC` · 100 `#FFC2C6` · 200 `#FF9AA0` · 300 `#FF555F` · 400 `#F62A36` · 500 `#D90B18` · 600 `#99030C` · 700 `#570C10`
- **Rp Base Color Gray** (`--rp-base-color-gray-N`): 0 `#FFFFFF` · 50 `#E2EDF6` · 100 `#D3DCE5` · 200 `#BEC4CD` · 300 `#9AA1A7` · 400 `#848A8F` · 500 `#5E6266` · 600 `#404346` · 700 `#1E2125` · 800 `#1D1E1F` · 900 `#151515`
- **Rp Base Color Green** (`--rp-base-color-green-N`): 50 `#F2FCE6` · 100 `#D5F6AD` · 200 `#B6E188` · 300 `#6FB557` · 400 `#2E872E` · 500 `#124C1C` · 600 `#0A3F1A` · 700 `#063D1B`
- **Rp Base Color Iron** (`--rp-base-color-iron-N`): 50 `#F2F6FA` · 100 `#E2EAF0` · 200 `#C4D3E1` · 300 `#AABBCC` · 400 `#8DA3B4` · 500 `#6A7885` · 600 `#475360` · 700 `#4D5158` · 750 `#4D5158` · 800 `#35383D` · 900 `#1D232C`
- **Rp Base Color Opaque** (`--rp-base-color-opaque-N`): 1 `#000000` · 50 `#000000` · 100 `#000000` · 200 `#000000` · 300 `#000000` · 400 `#000000` · 500 `#000000` · 600 `#000000` · 700 `#000000` · 800 `#000000` · 900 `#000000`
- **Rp Base Color Yellow** (`--rp-base-color-yellow-N`): 50 `#FFFBED` · 100 `#FFEB92` · 200 `#F9DB4A` · 300 `#E4B725` · 400 `#B28519` · 500 `#9E6B05` · 600 `#76480C` · 700 `#6E4103`

### Other named colors

- `--rp-base-color-gray-1000`: `#000000`
- `--button-bg-color`: `#FF4F59`
- `--button-fg-color`: `#161916`
- `--button-active-bg-color`: `#FF727A`
- `--button-active-fg-color`: `#161916`
- `--button-disabled-bg-color`: `#4A4A4A`
- `--button-disabled-fg-color`: `#6D706B`
- `--button-focus-bg-color`: `#FF4F59`
- `--button-focus-box-shadow-color`: `#FF4F59`
- `--button-focus-fg-color`: `#161916`
- `--button-hover-bg-color`: `#FF727A`
- `--button-hover-fg-color`: `#161916`
- `--button-border-color`: `#FF4F59`
- `--button-active-border-color`: `#FF727A`
- `--button-disabled-border-color`: `#4A4A4A`
- `--button-hover-border-color`: `#FF727A`
- `--background-color`: `#333333`
- `--title-color`: `#FFAD28`

### Typefaces

- Funnel Sans
- Zapf Dingbats

### Type scale (most-used sizes)

`64px` · `48px` · `40px` · `36px` · `32px` · `28px` · `24px` · `20px` · `18px` · `16px` · `14px` · `12px`

### Letter-spacing

`.48px` (50) · `.42px` (33) · `.6px` (24) · `.72px` (13) · `.54px` (10) · `.96px` (6)

### Corner radii (most-used)

`12px` · `24px` · `50%` · `50px` · `2px` · `15px` · `8px` · `10px` · `45px` · `4px`

### Shadows

- `inset 0 6px 8px 4px rgba(0,0,0,.08)`
- `inset 0 0 59.6px 6px hsla(0,0%,100%,.04)`

### Gradients

- `linear-gradient(90deg,rgba(255,242,223,0),rgba(255,242,223,.15) 24.5%,rgba(255,242,223,.15) 75%,rgba(255,242,223,0))`
- `linear-gradient(0deg,rgba(53,56,61,0) 91%,rgba(0,0,0,.08))`
- `linear-gradient(90deg,#161916 0,transparent 20%)`
- `linear-gradient(270deg,#161916 0,transparent 20%)`
- `linear-gradient(139deg,rgba(0,0,0,.66) 61.42%,hsla(0,0%,100%,0) 129.37%)`
- `radial-gradient(rgba(141,163,180,.15) 1px,transparent 0)`

### Breakpoints

376px · 416px · 472px · 473px · 767px · 768px · 769px · 887px · 1023px · 1024px · 1025px · 1084px · 1085px · 1086px · 1199px · 1201px · 1301px · 1321px · 1326px · 1401px
```