Linear style guide
A complete style guide inspired by the linear 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.
HTML
React
Next.js
Vue
Nuxt
AngularSvelte
Astro
SolidJS
RailsDesign System
The Linear design language
Interfaces built with the clean, structured styling associated with Linear. Focused on typography, spacing, and layout clarity rather than heavy visual decoration. Every component follows the same design principles that make Linear's UI feel polished and professional.
Typography
Inter Variable
font-medium tracking-[-0.022em]
The quick brown fox
Design is not how it looks. Design is how it works.
Small body copy, clear and readable
Spacing
Tight & dense
max-w-[1024px], px-6 gutters, h-8 / h-10 buttons
Border Radius
8–10px rounded
rounded-lg
Colors
Design paletteBackground
Page / app background
Text
Primary text
Muted
Secondary text / nav links
Border
Dividers / borders
More pronounced swatches for quick light/dark comparison.
Shadows
Buttons: custom shadow-[...] with inset top highlight + stacked drop shadows. Nav: bg-white/80 backdrop-blur-[20px]
Linear 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 Linear templates →
AI Playground
Build something new with the Linear style
Describe any UI and Windframe generates it using the same Linear design tokens shown above. Your output stays consistent with every template on this page.
Try an example:
Pre-built components and pages
Browse 31 production-ready templates built with Linear design principles. Preview any template, export the code to your framework, or open it in the visual editor to customize.
CRM landing page
Full Page
Compliance App landing page
Full Page
Credit Card App Landing Page
Full Page
Hero Section
Hero
Features Section
Features
Features Section
Features
Content Section
Contents
Content Section
Contents
Testimonial Section
Testimonials
Pricing Section
Pricing
Contact Form Section
Forms
CTA Section
CTA
Footer Section
Footer
Centered Hero Section
Hero
Centered Logo Section
Logo
Centered Features Section
Features
Centered Testimonial Section
Testimonials
Centered Blog Section
Blogs
Email Subscription Form
Forms
Centered Pricing Section
Pricing
Centered FAQs Section
FAQs
Centered CTA Section
CTA
Footer Section 2
Footer
Hero Section 3
Hero
Features Section 3
Features
Content Section 3
Contents
Content Section 4
Contents
FAQs Section 2
FAQs
Email Subscription Form 2
Forms
CTA Section 2
CTA
Footer Section 3
Footer
CRM landing page
Full Page
Credit Card App Landing Page
Full Page
Features Section
Features
Content Section
Contents
Testimonial Section
Testimonials
Contact Form Section
Forms
Footer Section
Footer
Centered Logo Section
Logo
Centered Testimonial Section
Testimonials
Email Subscription Form
Forms
Centered FAQs Section
FAQs
Footer Section 2
Footer
Features Section 3
Features
Content Section 4
Contents
Email Subscription Form 2
Forms
Footer Section 3
Footer
Compliance App landing page
Full Page
Hero Section
Hero
Features Section
Features
Content Section
Contents
Pricing Section
Pricing
CTA Section
CTA
Centered Hero Section
Hero
Centered Features Section
Features
Centered Blog Section
Blogs
Centered Pricing Section
Pricing
Centered CTA Section
CTA
Hero Section 3
Hero
Content Section 3
Contents
FAQs Section 2
FAQs
CTA Section 2
CTA
CRM landing page
Full Page
Hero Section
Hero
Content Section
Contents
Pricing Section
Pricing
Footer Section
Footer
Centered Features Section
Features
Email Subscription Form
Forms
Centered CTA Section
CTA
Features Section 3
Features
FAQs Section 2
FAQs
Footer Section 3
Footer
Compliance App landing page
Full Page
Features Section
Features
Content Section
Contents
Contact Form Section
Forms
Centered Hero Section
Hero
Centered Testimonial Section
Testimonials
Centered Pricing Section
Pricing
Footer Section 2
Footer
Content Section 3
Contents
Email Subscription Form 2
Forms
Credit Card App Landing Page
Full Page
Features Section
Features
Testimonial Section
Testimonials
CTA Section
CTA
Centered Logo Section
Logo
Centered Blog Section
Blogs
Centered FAQs Section
FAQs
Hero Section 3
Hero
Content Section 4
Contents
CTA Section 2
CTA
Explore Styles
Windframe gives you more than one beautiful style
Pick another style below to preview its design language and templates.
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.
15,000+ developersAI 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.