screenroveScreenrove / Design references
Notion design guide
A calm black-on-white workspace where the product window is the hero and colour is kept for tags.
Typography
Observed family: NotionInter. Font files are not distributed.
marketing: Light editorial with illustration
- Canvas:
#ffffff - Primary text:
rgba(0, 0, 0, 0.95) - Body text:
rgba(0, 0, 0, 0.898) - Primary button:
#0075de - Secondary button fill:
#e6f3fe - Secondary button text:
#005bab - Recommended plan card:
#f2f9ff - Card border:
#f6f5f4 - Closing band (sampled from screenshot):
#f6f5f3
Layout and components
- Centred hero with a very large tight headline, one lead sentence and two buttons, followed by a mock Notion window as the proof.
- A 64px global nav: logo left, Product / Resources menus plus Pricing and Request a demo centred, Log in and a blue Get Notion free button right.
- Sections alternate a left-aligned heading and one line of copy with a pastel-framed product vignette; pricing moves into two card groups and a long comparison table.
- Primary button: #0075de fill, white 16px / 500 label, 8px radius, 6px / 15px padding (38px high in the hero).
- Secondary button: #e6f3fe fill with #005bab label, same shape; plan cards use 36px buttons.
- Plan cards: 12px radius, 32px padding; the Free/Plus card has a 2px #f6f5f4 border, the Business/Enterprise card a #f2f9ff fill.
- Hand-drawn black line illustrations and a serif pull-quote face add warmth to an otherwise plain sans layout.
product: Light document workspace
- Canvas:
#ffffff - Primary text:
rgb(44, 44, 43) - Secondary text:
rgb(125, 122, 117) - Tertiary text:
rgb(161, 158, 153) - Cell border:
rgba(42, 28, 0, 0.07) - Active view tab:
rgba(33, 27, 23, 0.05) - Accent button:
#2783de - Sidebar (sampled from screenshot):
#f9f8f6 - In progress pill (sampled):
#f1e3b6 - Planning pill (sampled):
#cae3f7 - High priority pill (sampled):
#f7dad6 - Low priority pill (sampled):
#d6e6dc
Layout and components
- A slim top bar (breadcrumb left, page name centred, actions and one blue button right) over a full-width cover band and a centred page column.
- Databases sit inside the page: title, a row of pill view tabs with filter, sort and search icons on the right, then the table, board or timeline.
- Records open in a side peek over the right half, keeping the database visible on the left.
- View tabs: 32px high, 20px radius, 6px / 12px padding; the active tab gets a 5% warm-black fill and dark text, others grey text.
- Select and status pills: small rounded tints (yellow, blue, red, green) with a darker text of the same hue; status pills add a coloured dot.
- Tables use hairline warm borders (rgba(42, 28, 0, 0.07)), no zebra striping, and a summary row (COMPLETE 0/2, COUNT 2).
- Accent button: #2783de, 6px radius, 28px high, 14px / 500 label.
Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.
Download DESIGN.md