design productivity Color System
Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your wa...
Notion's website embodies the philosophy of the tool itself: a blank canvas that...
Notion uses #ffffff as the primary accent for interactive elements
Carefully selected 8 colors for design-productivity applications
Uses negative letter-spacing, gradient and more
#ffffff
Page background, card surfaces, button text on blue.
#0075de
Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.
#213183
Secondary brand color, used sparingly for emphasis and dark feature sections.
#005bab
Button active/pressed state -- darker variant of Notion Blue.
#f6f5f4
Background surface tint, section alternation, subtle card fill. The yellow undertone is key.
#31302e
Dark surface background, dark section text. Warmer than standard grays.
#615d59
Secondary text, descriptions, muted labels.
#a39e98
Placeholder text, disabled states, caption text.
/* Notion Color System */
:root {
--notion-pure-white: #ffffff;
--notion-notion-blue: #0075de;
--notion-deep-navy: #213183;
--notion-active-blue: #005bab;
--notion-warm-white: #f6f5f4;
--notion-warm-dark: #31302e;
--notion-warm-gray-500: #615d59;
--notion-warm-gray-300: #a39e98;
}
/* Example usage */
.notion-button-primary {
background-color: var(--notion-pure-white);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Airtable's website is a clean, enterprise-friendly platform that communicates "s...
Cal.com's website is a masterclass in monochromatic restraint — a grayscale worl...
Clay's website is a warm, playful celebration of color that treats B2B data enri...
Figma's interface is the design tool that designed itself — a masterclass in typ...