🚀 Just launchedApple UI design taste for AI agents — create polished UIs using Apple’s design style.Try it now

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

Content-first workspace interfaces inspired by Notion. Bold Inter headings, centered or split editorial compositions, neutral card surfaces, clear borders, and generous section rhythm keep dense information readable and organized.

Bold Inter hierarchyNeutral workspace surfacesCentered and split compositionsGenerous section rhythm

Typography

Aa

Inter

font-bold tracking-tight for display; font-medium to font-normal for UI and body

The quick brown fox

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

Small body copy, clear and readable

Bold balanced display headingsCentered max-w-screen-lg sectionsNeutral grouped card surfaces

Spacing

Generous editorial rhythm

Centered max-w-screen-lg content, compact navigation, 64-96px section spacing, and 16-32px card padding.

Border Radius

4-8px controls, 12-16px content cards

rounded-md to rounded-2xl

Colors

Design palette

Canvas

Root, navigation, and footer surfaces

Light
Dark

Grouped Surface

Trust bars, grouped regions, and quiet sections

Light
Dark

Card

Feature, quote, stat, and resource cards

Light
Dark

Primary Text

Headings and primary actions

Light
Dark

Muted Text

Body copy and supporting labels

Light
Dark

Border

Dividers, cards, and inputs

Light
Dark

More pronounced swatches for quick light/dark comparison.

Shadows

Use elevation selectively: shadow-sm for active tabs, shadow-lg for framed media, shadow-xl for mega menus, and stronger shadows only for showcase imagery.

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

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 avatar18,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 precision, Notion clarity, Apple polish, Stripe structure and more. Each is a complete design system, not just a color swap.