Style · 07
Minimal Minimal = quiet surfaces, hairline borders, and no decoration that is not doing a job.
Quiet surfaces, hairlines, no decoration for its own sake.
Preview North Product Docs Pricing Search docs Get started Quiet surfaces. One action. A hairline SaaS workspace for teams that refuse decoration.
Start free North workspace
Catalog
01
Product One accent. Quiet density. Ship without kitsch.
02
Docs Guides before anyone invents a second color.
03
Settings Defaults that stay out of the way.
Works
Analytics board Minimal · Bento
SaaS landing Minimal · Gradient
Docs shell Minimal Page Overall Page Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
BUILD
- Build a complete Minimal SaaS product marketing homepage. Not a card, not an isolated navbar, not a dashboard, not a tabs widget.
- Domain: quiet SaaS marketing. Docs and Settings are destinations in the nav and feature cells, not the homepage type.
STYLE
- Minimal: hairline borders, neutral surfaces, one accent
- Page fill #FFFFFF, type #1D1D1F, mute #6E6E73, hairline rgba(29,29,31,0.12)
- Feature cells 12px radius. One accent #0071E3 for pills only
- Plus Jakarta Sans for UI. IBM Plex Mono only for tiny meta. No Inter
LAYOUT
- Sticky top nav as page chrome: wordmark North, separate links Product / Docs / Pricing (not one middot string), search field, CTA Get started (#0071E3 pill, white type)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished UIGrammer-like homepage: split hero (copy + product visual), three feature cards, mosaic (one large + two stacked), three-column footer
- Do not present the navbar as a standalone control sitting on an empty well
SECTIONS
1. Split hero: "Quiet surfaces. One action." plus a North workspace visual. CTA Start free
2. Three feature cards: Product, Docs, Settings
3. Mosaic: Analytics board (lead) + SaaS landing + Docs shell
4. Three-column footer: Product / Docs / Legal
INTERACTION
- Hover lifts the CTA and feature cells 2px. No glow, no second accent
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons. No kitsch illustration
- Do not output only a headline plus two empty cells
- Docs and Settings are destinations, not the homepage type
MOTION
- Almost none. Hover: colour or underline, 120ms. State change: 100ms.
- When in doubt, leave it out. Stillness is the style.
- No entrance choreography, no scroll reveals.
- prefers-reduced-motion: no change needed.
Preview Specimen
Minimal Quiet surfaces, hairlines, no decoration for its own sake.
Continue Card Card Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a single Minimal card. Not a page, not a dashboard.
STYLE
- Minimal: hairline borders, neutral surfaces, one accent
- Card #FFFFFF, 12px radius, hairline rgba(29,29,31,0.12). Title #1D1D1F, body #6E6E73
- Continue: #0071E3, white type, pill. Stage is white with the same hairline well
LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one primary button
- No extra tiles, no navbar
INTERACTION
- Hover lifts the card 2px. No glow, no second accent
CONSTRAINTS
- One accent only (#0071E3). No purple, no Inter, no decoration for its own sake
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to this quiet card - not default shadcn
Buttons Buttons Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Minimal button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.
STYLE
- Continue: #0071E3, white type, 12px-friendly pill
- Save: transparent, type #1D1D1F, hairline rgba(29,29,31,0.22)
- Skip: ghost type #6E6E73. White stage, hairline well
LAYOUT
- One horizontal row, 10px gap. No wrapping card
INTERACTION
- Hover lifts each button 2px. No extra color
CONSTRAINTS
- One accent #0071E3. No purple, no Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look
Preview North Overview Billing Open
Navbar Navbar Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Minimal site navbar only. Not tabs, not a page.
STYLE
- White bar, hairline bottom rgba(29,29,31,0.12)
- Wordmark North #1D1D1F; links Overview and Billing #6E6E73; Open #0071E3 pill, white type
LAYOUT
- Single horizontal chrome: wordmark, two links, Open. No panel
INTERACTION
- Open lifts 2px. Links go mute to ink. Bar itself does not lift
CONSTRAINTS
- Hairlines only, one accent, no purple, no Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn
Preview Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
Tabs Tabs Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Minimal Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Selected: weight 600, 2px bottom rule #0071E3, type #1D1D1F
- Unselected: type #6E6E73, no fill pills
- Panel: white, 12px radius, hairline rgba(29,29,31,0.12), 16px padding
LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open
INTERACTION
- Hover on unselected: type mute to ink. The bar itself does not lift
CONSTRAINTS
- No purple underline. No Inter. Not a site navbar
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look
What is Minimal? Minimal UI uses restraint: neutral surfaces, one accent, and hairline borders. If you skip density and radius, the model will add kitsch.
Elements Hairline borders Neutral surfaces One accent Put this word in the prompt.
Copy Prompt BUILD
- Build a complete Minimal SaaS product marketing homepage. Not a card, not an isolated navbar, not a dashboard, not a tabs widget.
- Domain: quiet SaaS marketing. Docs and Settings are destinations in the nav and feature cells, not the homepage type.
STYLE
- Minimal: hairline borders, neutral surfaces, one accent
- Page fill #FFFFFF, type #1D1D1F, mute #6E6E73, hairline rgba(29,29,31,0.12)
- Feature cells 12px radius. One accent #0071E3 for pills only
- Plus Jakarta Sans for UI. IBM Plex Mono only for tiny meta. No Inter
LAYOUT
- Sticky top nav as page chrome: wordmark North, separate links Product / Docs / Pricing (not one middot string), search field, CTA Get started (#0071E3 pill, white type)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished UIGrammer-like homepage: split hero (copy + product visual), three feature cards, mosaic (one large + two stacked), three-column footer
- Do not present the navbar as a standalone control sitting on an empty well
SECTIONS
1. Split hero: "Quiet surfaces. One action." plus a North workspace visual. CTA Start free
2. Three feature cards: Product, Docs, Settings
3. Mosaic: Analytics board (lead) + SaaS landing + Docs shell
4. Three-column footer: Product / Docs / Legal
INTERACTION
- Hover lifts the CTA and feature cells 2px. No glow, no second accent
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons. No kitsch illustration
- Do not output only a headline plus two empty cells
- Docs and Settings are destinations, not the homepage type
MOTION
- Almost none. Hover: colour or underline, 120ms. State change: 100ms.
- When in doubt, leave it out. Stillness is the style.
- No entrance choreography, no scroll reveals.
- prefers-reduced-motion: no change needed.