W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
monday.com
monday.com is a Work OS — a configurable work-management surface for projects, CRM, dev, and service teams. The brand voice is energetic, playful, and column-and-row direct. Visually, the identity is carried by the Monday Red mark (#FF3D57) on a clean white canvas, with vivid status colors in-product and disciplined near-black body text on marketing surfaces. Where competing work-OS brands lean on cool blues, monday.com commits to a single hot red.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/monday-com/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/monday-com/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
monday.com
monday.com is a Work OS — a configurable work-management surface for projects, CRM, dev, and service teams. The brand voice is energetic, playful, and column-and-row direct. Visually, the identity is carried by the Monday Red mark (#FF3D57) on a clean white canvas, with vivid status colors in-product and disciplined near-black body text on marketing surfaces. Where competing work-OS brands lean on cool blues, monday.com commits to a single hot red.
Tags: saas, productivity, monday-com, work-os
Atoms
Palette
monday.com · [email protected] · Proprietary — All Rights Reserved
monday.com's brand palette, anchored on Monday Red (#FF3D57) — the signature hot-coral red that has carried the brand since its identity refresh. The institutional voice pairs that red with a clean white canvas and near-black body text. Where competing work-OS brands lean on blues and purples, monday.com commits to a single, energetic red as its identity anchor.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
monday-red |
Monday Red | #FF3D57 |
monday-white |
Monday White | #FFFFFF |
monday-black |
Monday Black | #000000 |
monday-canvas-dark |
Monday Canvas Dark | #1C1F3B |
monday-surface-light |
Monday Surface Light | #F6F7FB |
monday-surface-dark |
Monday Surface Dark | #292F4C |
monday-text-secondary |
Monday Text Secondary | #676879 |
monday-text-tertiary |
Monday Text Tertiary | #9799A7 |
monday-red-hover |
Monday Red Hover | #FF5E73 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
monday-white |
#FFFFFF |
surface |
monday-surface-light |
#F6F7FB |
surface-elevated |
monday-white |
#FFFFFF |
text-primary |
monday-black |
#000000 |
text-secondary |
monday-text-secondary |
#676879 |
text-tertiary |
monday-text-tertiary |
#9799A7 |
primary |
monday-red |
#FF3D57 |
primary-hover |
monday-red-hover |
#FF5E73 |
accent |
monday-red |
#FF3D57 |
accent-hover |
monday-red-hover |
#FF5E73 |
warning |
monday-red |
#FF3D57 |
warning-hover |
monday-red-hover |
#FF5E73 |
error |
monday-red |
#FF3D57 |
success |
monday-red |
#FF3D57 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
monday-canvas-dark |
#1C1F3B |
surface |
monday-surface-dark |
#292F4C |
surface-elevated |
monday-surface-dark |
#292F4C |
text-primary |
monday-white |
#FFFFFF |
text-secondary |
monday-text-tertiary |
#9799A7 |
text-tertiary |
monday-text-secondary |
#676879 |
primary |
monday-red |
#FF3D57 |
primary-hover |
monday-red-hover |
#FF5E73 |
accent |
monday-red |
#FF3D57 |
accent-hover |
monday-red-hover |
#FF5E73 |
warning |
monday-red |
#FF3D57 |
warning-hover |
monday-red-hover |
#FF5E73 |
error |
monday-red |
#FF3D57 |
success |
monday-red |
#FF3D57 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
monday-red |
#FF3D57 |
on-identity |
monday-white |
#FFFFFF |
primary |
monday-red |
#FF3D57 |
primary-hover |
monday-red-hover |
#FF5E73 |
accent |
monday-red |
#FF3D57 |
accent-hover |
monday-red-hover |
#FF5E73 |
success |
monday-red |
#FF3D57 |
warning |
monday-red |
#FF3D57 |
error |
monday-red |
#FF3D57 |
background-light |
monday-white |
#FFFFFF |
background-dark |
monday-canvas-dark |
#1C1F3B |
surface-light |
monday-surface-light |
#F6F7FB |
surface-dark |
monday-surface-dark |
#292F4C |
text-primary-light |
monday-black |
#000000 |
text-primary-dark |
monday-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: monday-red, monday-white, monday-black
- forbidden: any-non-brand-color
The monday.com wordmark renders in Monday Red on light surfaces and in white on dark surfaces. Recoloring the wordmark into off-brand hues violates monday.com's brand-use guidance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill
monday.com's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the wordmark.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Monday Black (#000000) on Monday White (#FFFFFF) clears AA at 21:1.
variantSelection → logo
- use:
logo-light - when:
backgroundColorScheme="dark"
On dark surfaces, use monday.com's documented light-fill wordmark variant; do not invert the red wordmark on the fly.
variantSelection → logo
- use:
logo-red - when:
backgroundColorScheme="light"
On light surfaces, the canonical wordmark renders in Monday Red. A black-on-white monochrome variant is permitted; off- brand hues are not.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
monday.com's trademark guidance forbids use of the monday.com name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. monday.com-skinned surfaces must clear AA on body text.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700, 800
monday.com's marketing surfaces render display headings in the medium-to-heavy band (500–800); lighter weights undermine the bold, energetic voice of the brand.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: monday-white, monday-black, monday-surface-light
Monday Red is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the high-energy, focused voice of the brand surface.
Provenance
- Source: https://monday.com/p/press
- License:
Proprietary — All Rights Reserved - Attribution: monday.com and the monday.com logo are trademarks of monday.com Ltd. The primary brand color Monday Red (#FF3D57) is documented on monday.com's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the monday.com name and mark is governed by monday.com's brand-use guidance at monday.com/p/press.
- Imported:
2026-05-18 - Notes: monday.com's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. The supporting product status colors (greens, yellows, purples) are not catalogued at the brand-atoms palette level because monday.com does not publish their canonical hex values; consumers needing them should pull from monday.com's in-product brand surfaces at consumption time.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by monday.com
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
monday.com
A clear hierarchy in monday.com's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
monday.com
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ monday-red #FF3D57 accent-hover
→ monday-red-hover #FF5E73 background-dark
→ monday-canvas-dark #1C1F3B background-light
→ monday-white #FFFFFF error
→ monday-red #FF3D57 identity
→ monday-red #FF3D57 on-identity
→ monday-white #FFFFFF primary
→ monday-red #FF3D57 primary-hover
→ monday-red-hover #FF5E73 success
→ monday-red #FF3D57 surface-dark
→ monday-surface-dark #292F4C surface-light
→ monday-surface-light #F6F7FB text-primary-dark
→ monday-white #FFFFFF text-primary-light
→ monday-black #000000 warning
→ monday-red #FF3D57 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from monday-com)
Light mode (14 roles)
accent
→ monday-red accent-hover
→ monday-red-hover background
→ monday-white error
→ monday-red primary
→ monday-red primary-hover
→ monday-red-hover success
→ monday-red surface
→ monday-surface-light surface-elevated
→ monday-white text-primary
→ monday-black text-secondary
→ monday-text-secondary text-tertiary
→ monday-text-tertiary warning
→ monday-red warning-hover
→ monday-red-hover Dark mode (14 roles)
accent
→ monday-red accent-hover
→ monday-red-hover background
→ monday-canvas-dark error
→ monday-red primary
→ monday-red primary-hover
→ monday-red-hover success
→ monday-red surface
→ monday-surface-dark surface-elevated
→ monday-surface-dark text-primary
→ monday-white text-secondary
→ monday-text-tertiary text-tertiary
→ monday-text-secondary warning
→ monday-red warning-hover
→ monday-red-hover Rules (9 typed constraints)
error · 7 rules
colorChoice logo.mark allowed monday-red, monday-white, monday-black forbidden any-non-brand-color The monday.com wordmark renders in Monday Red on light surfaces and in white on dark surfaces. Recoloring the wordmark into off-brand hues violates monday.com's brand-use guidance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill monday.com's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the wordmark.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Monday Black (#000000) on Monday White (#FFFFFF) clears AA at 21:1.
variantSelection logo use logo-light when backgroundColorScheme="dark" On dark surfaces, use monday.com's documented light-fill wordmark variant; do not invert the red wordmark on the fly.
variantSelection logo use logo-red when backgroundColorScheme="light" On light surfaces, the canonical wordmark renders in Monday Red. A black-on-white monochrome variant is permitted; off- brand hues are not.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain monday.com's trademark guidance forbids use of the monday.com name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. monday.com-skinned surfaces must clear AA on body text.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700, 800 monday.com's marketing surfaces render display headings in the medium-to-heavy band (500–800); lighter weights undermine the bold, energetic voice of the brand.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith monday-white, monday-black, monday-surface-light Monday Red is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the high-energy, focused voice of the brand surface.
Provenance
- Source
- https://monday.com/p/press
- License
Proprietary — All Rights Reserved- Attribution
- monday.com and the monday.com logo are trademarks of monday.com Ltd. The primary brand color Monday Red (#FF3D57) is documented on monday.com's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the monday.com name and mark is governed by monday.com's brand-use guidance at monday.com/p/press.
- Imported
2026-05-18- Notes
- monday.com's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. The supporting product status colors (greens, yellows, purples) are not catalogued at the brand-atoms palette level because monday.com does not publish their canonical hex values; consumers needing them should pull from monday.com's in-product brand surfaces at consumption time.