Autumn style guide

A complete style guide inspired by the autumn 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.

5 pages11 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 Autumn design language

Atmospheric product UI with soft gradient light, rounded surfaces, and calm neutral typography. Autumn feels expressive without becoming noisy, so layouts stay elegant in both light and dark modes.

Atmospheric gradient glowsSoft rounded surfacesNeutral-first readabilityIndigo-accent actions

Typography

Aa

Plus Jakarta Sans

font-semibold tracking-normal

The quick brown fox

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

Small body copy, clear and readable

Gradient atmosphere layersRounded glass-like surfacesReadable neutral typography

Spacing

Concrete 8px spacing system

Buttons use px-4 py-2 and px-5 py-3. Hero spacing runs from pt-14 on mobile to pt-20 on large screens.

Border Radius

Soft 12-16px rounding

rounded-xl / rounded-2xl

Colors

Design palette

Canvas

Page background

Light
Dark

Text

Headings / body copy

Light
Dark

Muted

Secondary text / nav links

Light
Dark

Action

Primary CTAs and highlights

Light
Dark

Ambient Glow

Decorative gradient atmosphere

Light
Dark

More pronounced swatches for quick light/dark comparison.

Shadows

Soft shadow-lg on framed previews with subtle ring-1 overlays for depth

Autumn 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 Autumn templates →

AI Playground

Build something new with the Autumn style

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

Autumn style10+ frameworks

Try an example:

Pre-built components and pages

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

Full page 1Full page 1
page

Full page 1

Full Page

Full page 2Full page 2
page

Full page 2

Full Page

Full page 1Full page 1
page

Full page 1

Full Page

Coming Soon 1Coming Soon 1
page

Coming Soon 1

Coming Soon

Coming Soon 2Coming Soon 2
page

Coming Soon 2

Coming Soon

Hero 1Hero 1
section

Hero 1

Hero

Hero 2Hero 2
section

Hero 2

Hero

Hero 3Hero 3
section

Hero 3

Hero

Features 1Features 1
section

Features 1

Features

Features 2Features 2
section

Features 2

Features

Features 3Features 3
section

Features 3

Features

Stats 1Stats 1
section

Stats 1

Stats

Stats 2Stats 2
section

Stats 2

Stats

Stats 3Stats 3
section

Stats 3

Stats

Content 1Content 1
section

Content 1

Contents

Content 1Content 1
section

Content 1

Contents

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

Enterprise

Enterprise Hero

Hero

Enterprise Contents

Contents

Check out Enterprise style

Notion

Notion Hero

Hero

Notion Features

Features

Check out Notion 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.