monday.com

monday.com sets large Poppins headlines with tight tracking on a light bone white canvas. Indigo (#6161ff) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 160px, with 24px and 16px on smaller elements.

monday.com ↗

Colors

Indigo

#6161ff

Primary actions and links

Orchid

#fe81e4

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#000000

Headlines and body copy

Deep Bone White

#f3f4f5

Surface or divider

Ash

#7c7b7b

Supporting colour

Deep Ash

#535768

Supporting colour

Graphite

#323338

Supporting colour

Ash 2

#676879

Supporting colour

Type scale

DisplayPeople and agents work best in one AI workspacePoppins · 56px · 400

HeadingGet more done with agentsPoppins · 56px · 400

SubheadingPosts, campaigns and ads. Done.Poppins · 28px · 400

BodyGet complex work done in minutes, build any tool, and automate manual work. This is the nePoppins · 17px · 400

NavEnterprisePoppins · 14px · 300

Buttons

Get StartedMarketingOperationsIT

Style reference measured from the public page at monday.com on 2026-10-12 for design education. monday.com and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# monday.com — Style Reference
> monday.com sets large Poppins headlines with tight tracking on a light bone white canvas. Indigo (#6161ff) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 160px, with 24px and 16px on smaller elements.

**Theme:** light · **Source:** https://monday.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Indigo | `#6161ff` | `--color-accent` | Primary actions and links |
| Orchid | `#fe81e4` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Deep Bone White | `#f3f4f5` | `--color-surface-1` | Surface or divider |
| Ash | `#7c7b7b` | `--color-surface-2` | Supporting colour |
| Deep Ash | `#535768` | `--color-surface-3` | Supporting colour |
| Graphite | `#323338` | `--color-surface-4` | Supporting colour |
| Ash 2 | `#676879` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Poppins | 56px | 400 | 1.20 | -0.040em |
| Heading | Poppins | 56px | 400 | 1.20 | -0.030em |
| Subheading | Poppins | 28px | 400 | 1.30 | 0 |
| Body | Poppins | 17px | 400 | 1.60 | 0 |
| Nav | Poppins | 14px | 300 | 1.00 | 0 |

Font families on the page: Poppins. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 160px, 24px, 16px, 50%, 1600px
- Primary button: background `#6161ff`, text `#ffffff`, radius 160px, padding 12px 16px, 13px / 300

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer