Techniques
Warm Paper Canvas
Notion's signature warm-cream background creates a paper-like reading surface that distinguishes it from the cold whites and greys of typical SaaS interfaces. The warmth comes from a carefully chosen off-white with yellow-brown undertones.
.page {
background-color: #fbfaf9;
color: #37352f;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
}
.page-content {
max-width: 900px;
margin: 0 auto;
padding: 48px 96px;
line-height: 1.6;
}
Serif-Sans Heading Pair
The core typographic move of Notion's identity: serif display headings that signal editorial authority, paired with clean sans-serif body text for readability. The contrast creates a "well-typeset document" feel.
.heading {
font-family: 'Source Serif 4', 'Georgia', serif;
font-weight: 700;
color: #37352f;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 0.5em;
}
.heading-1 { font-size: 2.25rem; }
.heading-2 { font-size: 1.75rem; font-weight: 600; }
.heading-3 { font-size: 1.375rem; font-weight: 600; }
.body-text {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: #37352f;
}
Outlined Button with Warm Border
Notion's secondary buttons use a warm-grey outline style — no fill, no shadow — that feels light and unobtrusive. The warm border color keeps the button consistent with the paper-toned canvas.
.button-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 16px;
background: transparent;
border: 1px solid #ddd9d3;
border-radius: 6px;
color: #37352f;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 120ms ease;
}
.button-secondary:hover {
background-color: #f5f3f0;
}
.button-secondary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(14, 42, 77, 0.2);
}