Style · 20

Flat

Flat = solid color fills, no gradients, minimal shadow; bold flat color carries the hierarchy.

Solid fills. One bold accent. No gradient.

North Search docs

Color is the interface.

Color is the interface. Solid fills, one bold accent, a hairline. No gradient.

Accent block

Values

Solid

Color carries the hierarchy. No texture, no gloss.

Quiet

A hairline and a 5% shadow. That is the only depth.

Fast

Rounded corners, one accent, ship the block.

Works

Marketing site Flat

Consumer app Flat · Minimal

Pricing strip Flat · Neo-brutalism

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

STYLE
- Flat: solid color fills, no gradients, hairline borders, one confident accent, a quiet shadow only where a card needs lift
- Page background a flat light tint #EDF0F4; every block is a solid white panel with a 1px #E4E7EC hairline
- Accent #FF5A3C carries the primary actions and kickers; secondary blue #2D7FF9 for one link state only; ink #15181E
- Radius 14px on cards, 12px on buttons. Shadow is subtle: 0 2px 8px rgba(21, 24, 30, 0.05). No gloss, no bevel
- Type: a clean geometric sans (Inter / Geist) for UI. No serif, no neon

LAYOUT
- Container max-width 1120px. Flat tint ground; every block is a solid white panel, never a gradient slab
- Top bar is a solid white chrome: wordmark left, three links, search field, primary CTA — hairline bottom
- Color blocks (the hero accent strip, the pricing middle column) are the only filled color on the page

SECTIONS
1. Hero: a solid white panel with headline "Color is the interface.", kicker NEW, one dek line, primary CTA Start free plus ghost See the kit
2. Three solid value cards: Solid, Quiet, Fast — kicker, one line, Read more each
3. Feature band: two columns, left a solid accent strip block, right a short list of four claims
4. Pricing strip: three solid columns, the middle one filled #FF5A3C with white text
5. Closing CTA band: a wide solid panel with one accent CTA
6. Three-column solid footer: Product / Company / Colophon

INTERACTION
- Hover lifts each panel 2px and turns its hairline to the accent; filled buttons darken one step
- Focus is a 2px solid #FF5A3C outline, never a glow ring
- Color stays flat on hover — no gradient fades, no gloss sweeps

MOTION
- Motion is short and linear: 140ms ease for lifts, no overshoot, no bounce
- Use ease, not steps; panels settle, they do not spring
- Entrance is a 8px rise with the panel fading in, staggered 40ms per card
- prefers-reduced-motion: no rise, no stagger, panels appear instantly

TECHNICAL
- React, Tailwind CSS, a .flat surface utility (solid fill + hairline + quiet shadow). One homepage route.

DON'Ts
- Do not call this skeuomorphic: flat has no bevel, gloss, or faux texture; surfaces are flat
- Do not call this neo-brutalism: corners are rounded and the border is a quiet hairline, not a hard black rule
- No gradient fills, no neon, no drop shadow heavier than 8px of 5% black, no glass
- Do not output only a headline plus two empty cells. Do not make every surface a solid accent block

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Flat card. Not a page, not a dashboard.

STYLE
- Flat: a solid white panel with a hairline border and almost no shadow; color does the talking
- Fill #FFFFFF; border 1px solid #E4E7EC; radius 14px; shadow 0 2px 8px rgba(21, 24, 30, 0.05)
- Kicker in accent #FF5A3C; title in ink #15181E. No gradient on the card, no inner glow

LAYOUT
- One card only: kicker, title, one-line summary, one primary button
- No navbar, no secondary tiles, no image

INTERACTION
- Hover lifts the card 2px and turns the hairline to the accent; no color fill chase, no blur

CONSTRAINTS
- This is NOT skeuomorphic: no bevel, no gloss, no faux texture. The surface stays flat
- This is NOT neo-brutalism: corners are rounded and the border is a quiet hairline, not a hard black rule
- No gradient fills, no neon, no drop shadow heavier than 8px of 5% black

TECHNICAL
- React, Tailwind CSS, a .flat surface utility (solid fill + hairline). One component, no route

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Flat button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.

STYLE
- Radius 12px. Continue: solid #FF5A3C, white label, no gradient. Save: white fill, ink label, 1px #D7DBE2 border
- Skip is text only in #15181E at 70% alpha
- No shadow on the buttons; the solid fill is the only depth cue

LAYOUT
- One horizontal row, 12px gap. No card chrome, no helper text

INTERACTION
- Hover darkens the solid fill one step (#E8482F) and lifts 1px; outline button gains a tinted border

CONSTRAINTS
- Solid fills only — a gradient button reads as skeuomorphic, not flat
- No square corners, no gloss highlight, no heavy shadow

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button into flat solids and outlines

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Flat site navbar only. Not tabs, not a page.

STYLE
- A solid white bar with a 1px #E4E7EC bottom hairline; radius 0 on the page, or 14px as a floating chip
- Wordmark NORTH in ink #15181E weight 700. Links Product and Pricing in ink at 70% alpha
- CTA Start free: solid #FF5A3C, white label, radius 12px, no shadow

LAYOUT
- Single horizontal chrome: wordmark left, two links, CTA right. No panel below, no dropdown

INTERACTION
- Bar is static; only the CTA and links react. Hover links gain a 1px ink underline

CONSTRAINTS
- The bar is a flat solid surface; a frosted or gradient bar breaks the language
- No thick borders, no gloss, no blur

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation into a flat bar

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Flat Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- A hairline-divided tablist; selected tab is a solid #FF5A3C pill with white label weight 600
- Unselected tabs are text only, ink at 60% alpha, no fill
- Panel: solid white with a 1px #E4E7EC border, 14px radius, 0 2px 8px shadow

LAYOUT
- Horizontal tablist plus one panel below. No wordmark, no CTA

INTERACTION
- Switching tabs slides a solid fill in; selected locks with a darker ring. No bounce

CONSTRAINTS
- The panel must be a flat solid surface; do not bevel or gloss it
- No square tabs, no neon, no heavy shadow

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs into flat solids

What is Flat?

Flat design says color is the interface. Name a solid accent, a hairline, and a quiet shadow, then let blocks of color carry the hierarchy. It is the anti-skeuomorphic: surfaces are flat, not textured.

Elements

Solid color fills
No gradient
Minimal shadow

Put this word in the prompt.

Typical colors

#FF5A3C
#2D7FF9
#15181E

Use on

Consumer apps
Marketing sites
Dashboards that ship fast

Prompt formula

[Component] + Flat + Solid fill + One accent + Hairline

BUILD - Build a complete Flat marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: consumer apps and marketing sites first; dashboards reuse the solid fills and hairlines, not the accent everywhere. STYLE - Flat: solid color fills, no gradients, hairline borders, one confident accent, a quiet shadow only where a card needs lift - Page background a flat light tint #EDF0F4; every block is a solid white panel with a 1px #E4E7EC hairline - Accent #FF5A3C carries the primary actions and kickers; secondary blue #2D7FF9 for one link state only; ink #15181E - Radius 14px on cards, 12px on buttons. Shadow is subtle: 0 2px 8px rgba(21, 24, 30, 0.05). No gloss, no bevel - Type: a clean geometric sans (Inter / Geist) for UI. No serif, no neon LAYOUT - Container max-width 1120px. Flat tint ground; every block is a solid white panel, never a gradient slab - Top bar is a solid white chrome: wordmark left, three links, search field, primary CTA — hairline bottom - Color blocks (the hero accent strip, the pricing middle column) are the only filled color on the page SECTIONS 1. Hero: a solid white panel with headline "Color is the interface.", kicker NEW, one dek line, primary CTA Start free plus ghost See the kit 2. Three solid value cards: Solid, Quiet, Fast — kicker, one line, Read more each 3. Feature band: two columns, left a solid accent strip block, right a short list of four claims 4. Pricing strip: three solid columns, the middle one filled #FF5A3C with white text 5. Closing CTA band: a wide solid panel with one accent CTA 6. Three-column solid footer: Product / Company / Colophon INTERACTION - Hover lifts each panel 2px and turns its hairline to the accent; filled buttons darken one step - Focus is a 2px solid #FF5A3C outline, never a glow ring - Color stays flat on hover — no gradient fades, no gloss sweeps MOTION - Motion is short and linear: 140ms ease for lifts, no overshoot, no bounce - Use ease, not steps; panels settle, they do not spring - Entrance is a 8px rise with the panel fading in, staggered 40ms per card - prefers-reduced-motion: no rise, no stagger, panels appear instantly TECHNICAL - React, Tailwind CSS, a .flat surface utility (solid fill + hairline + quiet shadow). One homepage route. DON'Ts - Do not call this skeuomorphic: flat has no bevel, gloss, or faux texture; surfaces are flat - Do not call this neo-brutalism: corners are rounded and the border is a quiet hairline, not a hard black rule - No gradient fills, no neon, no drop shadow heavier than 8px of 5% black, no glass - Do not output only a headline plus two empty cells. Do not make every surface a solid accent block

Flat

Color is the interface.

Solid

Quiet

Fast

Flat

What is Flat?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns