# notion.com website design: fonts, colors and UI patterns

[Open the live Fudge conversation](https://design.withfudge.com/share/notion.com-design)

Last updated: 2026-05-14

Based on **12 captured pages** from [notion.com](https://notion.com), this profile summarizes observed visual evidence rather than claiming access to the site's private design system. Evidence last updated **2026-05-14**.

## Captured pages

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9284?format=jpg)](https://design.withfudge.com/share/pin-9284)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9284)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9283?format=jpg)](https://design.withfudge.com/share/pin-9283)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9283)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9282?format=jpg)](https://design.withfudge.com/share/pin-9282)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9282)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9281?format=jpg)](https://design.withfudge.com/share/pin-9281)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9281)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9280?format=jpg)](https://design.withfudge.com/share/pin-9280)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9280)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9279?format=jpg)](https://design.withfudge.com/share/pin-9279)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9279)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9278?format=jpg)](https://design.withfudge.com/share/pin-9278)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9278)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9277?format=jpg)](https://design.withfudge.com/share/pin-9277)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9277)

[![Build with Notion’s Developer Platform – Notion](https://pin.fontofweb.com/9276?format=jpg)](https://design.withfudge.com/share/pin-9276)

[Build with Notion’s Developer Platform – Notion](https://design.withfudge.com/share/pin-9276)

[![Choose from 30,000+ Notion templates | Notion Marketplace](https://pin.fontofweb.com/8943?format=jpg)](https://design.withfudge.com/share/pin-8943)

[Choose from 30,000+ Notion templates | Notion Marketplace](https://design.withfudge.com/share/pin-8943)

[![The AI workspace that works for you. | Notion](https://pin.fontofweb.com/8079?format=jpg)](https://design.withfudge.com/share/pin-8079)

[The AI workspace that works for you. | Notion](https://design.withfudge.com/share/pin-8079)

[![The AI workspace that works for you. | Notion](https://pin.fontofweb.com/8078?format=jpg)](https://design.withfudge.com/share/pin-8078)

[The AI workspace that works for you. | Notion](https://design.withfudge.com/share/pin-8078)

## Colors

- `#6666fd`
- `#1313ba`
- `#7171a8`
- `#ffffff`

## Typography captured from notion.com

- **I A Writer Mono S**
- **Inter**
- **Noto Sans Arabic**
- **Lyon**

### How Fudge assembled this page

Fudge automatically assembled this guide from saved screenshots and extracted typography and color observations. It does not claim access to private source files or design tokens.