Notion style guide

A complete style guide inspired by the notion design language. Use it with Windframe AI to generate pages, sections, and components for your own project that follow these same design principles, or start from one of the templates below and customize it in the editor.

3 pages14 sections
Generate Your Own Designor start from a template below
Export To
HTML logoHTMLReact logoReactNext.js logoNext.jsVue logoVueNuxt logoNuxtAngular logoAngularSvelteAstro logoAstroSolidJS logoSolidJSRails logoRails

Design System

The Notion design language

Interfaces built with the clean, structured styling associated with Notion. Focused on content hierarchy, typography, borders, and layout clarity rather than heavy visual decoration. Every component follows the same design principles that make Notion's UI feel clean, readable, and organized.

Border-led layoutsContent-first hierarchyNeutral workspace paletteInter typography

Typography

Aa

Inter

font-normal tracking-normal

The quick brown fox

Design is not how it looks. Design is how it works.

Small body copy, clear and readable

Border-led visual hierarchyMonochrome neutral paletteContent-width constraint

Spacing

Compact & readable

Tight vertical rhythm with generous line height. Compact side navigation and comfortable reading widths.

Border Radius

4-6px subtle rounding

rounded-md

Colors

Design palette

Background

Page / workspace background

Light
Dark

Text

Primary text

Light
Dark

Muted

Secondary text / placeholders

Light
Dark

Border

Dividers / card borders

Light
Dark

More pronounced swatches for quick light/dark comparison.

Shadows

Minimal: border-led hierarchy with occasional shadow-sm on elevated surfaces like modals and popovers

Matching Assets

Notion-style UI generations can include matching avatars and supporting assets inside the interface, so the final result feels cohesive and polished.

+2

Notion in practice

Polished designs inspired by the best design systems

Companies like Linear, Notion, and Vercel invest heavily in their design systems. Windframe studies those systems and bakes their principles into styles you can use out of the box, so your project gets the same level of polish. These are some example images of UIs generated with this style.

Every component, every page: consistent by design. Browse all Notion templates →

AI Playground

Build something new with the Notion style

Describe any UI and Windframe generates it using the same Notion design tokens shown above. Your output stays consistent with every template on this page.

Notion style10+ frameworks

Try an example:

Pre-built components and pages

Browse 17 production-ready templates built with Notion design principles. Preview any template, export the code to your framework, or open it in the visual editor to customize.

Workflow builder landing pageWorkflow builder landing page
page

Workflow builder landing page

Full Page

Project Mgmt app landing pageProject Mgmt app landing page
page

Project Mgmt app landing page

Full Page

Project Management pageProject Management page
page

Project Management page

Admin Pages

Hero ComponentHero Component
section

Hero Component

Hero

Hero Component 2Hero Component 2
section

Hero Component 2

Hero

Content SectionContent Section
section

Content Section

Contents

Features SectionFeatures Section
section

Features Section

Features

Email Subscription FormEmail Subscription Form
section

Email Subscription Form

Forms

Stats sectionStats section
section

Stats section

Stats

Content Section 2Content Section 2
section

Content Section 2

Contents

Content Section 3Content Section 3
section

Content Section 3

Contents

Pricing SectionPricing Section
section

Pricing Section

Pricing

Blog SectionBlog Section
section

Blog Section

Blogs

CTACTA
section

CTA

CTA

Testimonial SectionTestimonial Section
section

Testimonial Section

Testimonials

FooterFooter
section

Footer

Footer

Features Section 2Features Section 2
section

Features Section 2

Features

Explore Styles

Windframe gives you more than one beautiful style

Pick another style below to preview its design language and templates.

Linear

Linear Hero

Hero

Linear Blogs

Blogs

Check out Linear style

Autumn

Autumn Hero

Hero

Autumn Features

Features

Check out Autumn style

Enterprise

Enterprise Hero

Hero

Enterprise Contents

Contents

Check out Enterprise style

Windframe

You have seen what a design style in Windframe can do. Now see everything Windframe can do.

Windframe brings the full workflow into one platform: generate with AI, edit visually, test responsiveness, reuse templates, and export clean code to your framework. It is built to help teams ship polished UI faster, from first prompt to production.

Explore Windframe
Windframe user avatarWindframe user avatarWindframe user avatar15,000+ developers
1,000+ templates10+ frameworks

AI generation with real design systems

Describe any component and get polished, production-ready Tailwind CSS that follows actual design rules, not generic output.

Visual drag-and-drop editor

Fine-tune any component without touching code. Move elements, adjust spacing, swap colors, all visually in real time.

Live preview at every breakpoint

See exactly how your UI looks on mobile, tablet, and desktop before you ship a single line.

Export to 10+ frameworks

React, Next.js, Vue, Nuxt, Svelte, Angular, HTML and more. Clean Tailwind code ready to drop straight into your project.

1,000+ ready-made templates

Browse polished pages, sections, and components across multiple styles. Use them as-is or as a starting point.

Multiple beautiful styles

Linear-inspired, Autumn warmth, Enterprise structure and more. Each is a complete design system, not just a color swap.