ATOMIC TIER · TEMPLATES

Layout skeletons — empty rooms waiting for content.

A template is the floor plan, not the furniture. Each one below shows the structural grid (header, KPI row, sidebar, hero, footer) as labeled dashed-line zones with placeholder boxes. To ship a page, copy a template, drop in real headlines / numbers / images.

How to read

dashed box = zone you can rename / repurpose

grey bar = text placeholder (drop copy here)

filled tile = image / chart slot

CTA pill = action / button slot

01 · DashboardLayout

For analytics, BI, admin reports — dark, dense, data-first.

7 zones: top nav, page header with filters, 4-up KPI row, main 2-col chart, secondary 2-col, data table, footer. Designed for power users scanning numbers, not consumers.

aesthetic · dark archetype · A · dashboard / report density · high font · Inter + IBM Plex Mono

TOP NAV · sticky · h-14

cmd K

PAGE HEADER · title + filter strip + primary action

[date range]

[filter 1]

[filter 2]

[filter 3]

+ add

KPI ROW · 4 cards · large number + delta + sparkline

[KPI 1 placeholder]

[KPI 2 placeholder]

[KPI 3 placeholder]

[KPI 4 placeholder]

MAIN CHART ROW · 2/3 + 1/3 split · area chart + donut

7d 30d 90d

[Multi-series area chart placeholder]

[Donut + legend placeholder]

SECONDARY ROW · 1/2 + 1/2 · bar chart + heatmap

[Horizontal bar chart · N rows]

[Heatmap · weekday × month]

DATA TABLE · sortable header + N rows + pagination

[filter]

[view all]

ID Customer Plan Amount Status Date

[pagination meta]

prev next

FOOTER · meta · last updated · build version

① TOP NAV

② PAGE HEADER

③ KPI ROW

④ CHART ROW

⑤ SECONDARY ROW

⑥ DATA TABLE

⑦ FOOTER

02 · InternalToolLayout

For internal tools, project trackers — 3-pane productive shell.

Left sidebar (workspace + nav + filters) + top bar (breadcrumb + tabs) + main list view + right detail panel. Built for keyboarded power users.

aesthetic · dark archetype · B · internal tool density · very high layout · 64-col sidebar + 96-col detail

SIDEBAR · w-64

⌘K

[group · projects]

[group · filters]

[breadcrumb / breadcrumb / breadcrumb]

[Tab 1 · active]

[Tab 2]

[Tab 3]

[Group header 1]

[N items]

[Group header 2]

[N items]

[Row selected · pinned to detail panel →]

[Group header 3]

[N items]

[Detail · w-96]

[label]

[body]

[activity feed]

[timestamp]

[reply / comment input]

① SIDEBAR · w-64

② TOP BAR + TABS

③ LIST VIEW (grouped)

④ DETAIL PANEL · w-96

03 · LandingLayout

For consumer landing, DTC, SaaS marketing — warm, narrative, conversion-focused.

8 zones: sticky nav, hero (headline + visual), feature grid, how-it-works, testimonial, pricing, FAQ, closing CTA, footer. Built for first-time visitors → signup.

aesthetic · warm archetype · C · landing density · low font · Plus Jakarta Sans + Instrument Serif

STICKY NAV · transparent · blur backdrop

[Sign in]

[Start free]

HERO · headline + sub + 2 CTA + visual blob

[Primary CTA]

[Secondary CTA]

FEATURE GRID · 3 cards · icon + headline + body

[Feature 1]

[Feature 2]

[Feature 3]

HOW IT WORKS · 4 steps · numbered horizontal

TESTIMONIAL · quote + author + photo

[Quote · Author name · Title]

PRICING · 2 tier cards · features list + CTA

[Tier 1 CTA]

[recommended]

[Tier 2 CTA]

FAQ · 5 collapsed items

CTA CLOSING · mesh bg · headline + CTA

[Closing CTA]

FOOTER · 4 columns + bottom strip

① NAV

② HERO

③ FEATURES

④ STEPS

⑤ QUOTE

⑥ PRICING

⑦ FAQ

⑧ CLOSE

⑨ FOOTER

04 · ArticleLayout

For editorial, journals, blog longreads — cream paper, generous reading.

7 zones: minimal masthead, hero with category + title, body column (max-w-2xl, drop cap), pull quote, inline image, author bio, related grid, footer.

aesthetic · warm editorial archetype · D · article density · very low (reading) font · Fraunces body · Inter meta

MASTHEAD · minimal · wordmark + issue meta

[Publication wordmark]

ARTICLE HERO · category tag + title + meta + hero image

[category] · [issue / date]

[Author name] · [date] · [N min read]

[Hero image · caption]

ARTICLE BODY · max-w-2xl · drop cap · paragraphs · H2 · pull quote · inline image

[H2 subheading]

[Pull quote · italic · centered]

[Inline image · figure caption]

AUTHOR BIO · avatar + bio + social

[written by]

RELATED · 3-up · image + title + meta

[Read next]

[category]

EDITORIAL FOOTER · masthead small + colophon

[Publication wordmark]

① MASTHEAD

② HERO

③ BODY

④ PULL QUOTE

⑤ AUTHOR

⑥ RELATED

⑦ FOOTER

05 · DeckLayout

For pitch decks, annual reports, narrative slides — 16:9 cream paper.

5 slide templates stacked vertically: cover, big number, 2-col compare, quote, divider. Each slide is its own composable scene.

aesthetic · warm archetype · E · deck ratio · 16:9 each slide font · Fraunces display + Inter

SLIDE 1 · COVER · title + subtitle + brand mark + page number

[Brand mark] · [Volume / issue]

01 / 05

[Author · Date] [Confidential]

SLIDE 2 · BIG NUMBER · huge stat + label + context paragraph

[Stat label]

[N]

[Context note · source]

02 / 05

SLIDE 3 · COMPARE · before / after · two columns side by side

[Section label]

[Before]

[After]

03 / 05

SLIDE 4 · QUOTE · huge italic + attribution

04 / 05

SLIDE 5 · DIVIDER · chapter mark + title · transition between sections

[chapter 02 · transition]

05 / 05

① COVER

② BIG NUMBER

③ COMPARE

④ QUOTE

⑤ DIVIDER

06 · MobileShellLayout

For PWA, mobile-first app — 390px phone, sticky bottom nav.

Phone frame · status bar · greeting header · card row · day picker · list card · chart card · sticky bottom nav. Scrollable interior, fixed chrome.

aesthetic · warm friendly archetype · F · PWA width · 390px iPhone font · Plus Jakarta Sans

[App name · Mobile preview]

[9:41]

[greeting]

[axis] [axis] [axis] [axis]

[nav 1]

[nav 2]

[nav 3]

[nav 4]

① STATUS BAR

② HEADER · greeting + avatar

③ CARD ROW · horizontal scroll

④ DAY PICKER · 7 cols

⑤ LIST CARD · N rows

⑥ CHART CARD

⑦ STICKY BOTTOM NAV · pill · 4 icons + center action