Shells · thirty empty designs

Start from a page that already looks like something.

Each shell is one HTML file with no scripts and no build: colour and type tokens on :root, a dark set under prefers-color-scheme, Google Fonts only, 16px gutters on a phone, and placeholder content that reads like a real product. Copy the file, keep the tokens, replace the words.

1 file each0 scriptstokens on :rootdark modephone-safeno lorem ipsumall thirty in three more palettes →
Editorial shell: a serif essay with a drop cap, pull quote and a margin note on a cream page.
01

Editorial

Serif long-form: 66ch measure, drop cap, pull quote, margin notes that fold under the text on a phone.

for: essays, docs, changelogs with opinions
OpenDownload
Dashboard shell: sidebar, four stat tiles with sparklines, a bar chart and a recent-orders table.
02

Dashboard

Sidebar that becomes a top strip, stat tiles with sparklines, a chart drawn with divs, an activity table.

for: admin screens, analytics, the home of a tool
OpenDownload
Brutalist shell: thick black rules, a huge condensed headline with a yellow highlight, a numbered index of work.
03

Brutalist

Thick rules, one accent used as a block, condensed grotesk at poster size, a grid that shows its bones.

for: studio sites, zines, manifestos, loud tools
OpenDownload
Glass shell: frosted panels over soft coral, blue and yellow blobs, a balance figure, a progress ring and a tab bar.
04

Glass

Frosted panels over slow colour blobs, one big number, a conic ring, pill controls, a floating tab bar.

for: wallets, players, health and weather views
OpenDownload
Terminal shell: a monospace page with a prompt headline, an install block and a colour-coded session transcript.
05

Terminal

Monospace grid, prompt-styled header, a session transcript, a flag table and a status bar. Phosphor green by night.

for: CLI tools, logs, status pages, changelogs
OpenDownload
Magazine shell: a centred serif masthead, a lead story with image, secondary stories, shorts and a numbered most-read list.
06

Magazine grid

Twelve columns: lead story, secondaries with thumbnails, a shorts column, a most-read rail, an archive box.

for: publications, newsletter archives, link blogs
OpenDownload
Card stack shell: a phone-width column of colour cards for habits with a day strip, a floating plus button and a tab bar.
07

Card stack

One phone-width column: sticky header, segmented control, a day strip, colour cards with progress, a FAB and a tab bar.

for: habits, notes, tasks, queues, decks
OpenDownload
Landing shell: a centred serif headline with a green italic, two buttons and a framed product mock.
08

Landing hero

Hero, logo strip, three features, a quote, two prices, a CTA band, footer. Every section deletes cleanly.

for: the front page of a product
OpenDownload
Settings shell: a section rail on the left and cards of label-and-control rows with inputs, selects and toggles.
09

Settings / form

Section rail, label + control rows, native inputs styled once, a CSS toggle switch, a danger zone, a sticky save bar.

for: preferences, onboarding, checkout, edit views
OpenDownload
Data table shell: a toolbar with search and filter chips above a dense invoices table with status pills and pagination.
10

Data table

Toolbar, sticky-header table, row selection, status pills, tabular figures, pagination. Rows become cards on a phone.

for: invoices, users, logs, jobs, files
OpenDownload
Pricing shell: a centred headline, a monthly/yearly pill switch and three tier cards, the middle one marked most chosen.
11

Pricing

Three tiers, a CSS-only monthly/yearly switch, a feature comparison table, an FAQ in details/summary, a closing band.

for: the page that says what it costs
OpenDownload
Onboarding shell: a centred card with a three-segment progress stepper, a step-one form for name and email, Back and Next.
12

Onboarding

A three-step wizard with no script: radios hold the step, :checked picks the panel and the stepper state, Back and Next are labels.

for: first-run setup, sign-up, a short survey
OpenDownload
Chat shell: a list of conversations with avatars and unread badges beside a thread of white and blue bubbles with day dividers.
13

Chat

Conversation list, thread with bubbles for both sides, day dividers, an attachment, a CSS typing indicator, a pinned composer.

for: support inboxes, DMs, team chat, assistants
OpenDownload
Kanban shell: five columns of cards with coloured labels, avatars, due dates and checklist counts on a grey board.
14

Kanban

Filter chips, columns that scroll sideways inside the board, cards with labels, progress bars, due dates and a WIP limit.

for: tasks, pipelines, content plans, deals
OpenDownload
Calendar shell: a seven-column September grid with coloured event bars, a red today marker and an agenda panel on the right.
15

Calendar

Month grid with leading and trailing days, event bars, a today marker, an agenda rail. Events become dots on a phone.

for: bookings, team calendars, content plans
OpenDownload
Map and list shell: a results list of bike repair shops with numbered pins beside a pale placeholder map with roads, a canal, parks and pins.
16

Map + list

Search, filter chips and a results list beside a map drawn with CSS: roads, a river, parks, numbered pins. Swap in real tiles later.

for: store finders, directories, apartments, trails
OpenDownload
Media player shell: a gradient cover, a large episode title, a scrubber with chapter marks, transport buttons and an up-next queue.
17

Media player

Cover art, scrubber and volume as styled range inputs, chapter marks, transport controls, a queue with the current track marked.

for: podcasts, music, audiobooks, lecture archives
OpenDownload
Docs shell: a navigation tree on the left, an article with a code block and a callout in the middle, an on-this-page rail on the right.
18

Docs sidebar

Nav tree with the current page marked, reading column with code, callouts and a parameter table, on-this-page rail, prev/next.

for: product docs, API references, handbooks
OpenDownload
Inbox shell: folders with counts, a message list with unread dots and labels, and an open message with an attachment and reply box.
19

Inbox

Three panes: folders, a message list with unread weight, a reading pane with a reply box. Folders become chips, then the list stands alone.

for: email, tickets, notifications, review queues
OpenDownload
Checkout shell: numbered contact, delivery and payment sections with floating-label inputs and a sticky order summary with totals.
20

Checkout

Contact, delivery and payment sections, floating labels, CSS-only choice cards that open, a sticky summary that folds into details on a phone.

for: shops, subscriptions, bookings, donations
OpenDownload
Auth shell: a dark green brand panel with a serif quote on the left, a log-in form with an error message and SSO buttons on the right.
21

Auth

Brand panel with one quote, a CSS-only switch between log in and create account, an error state, a strength meter, SSO buttons.

for: log in, sign up, password reset
OpenDownload
Error and empty states shell: a large 404 with an eye for a zero, and a grid of six state cards with small CSS illustrations.
22

Error + empty states

A 404 hero and six state cards: no results, first run, offline, no access, server error, maintenance. Every illustration is CSS.

for: 404s, empty lists, offline and maintenance screens
OpenDownload
Profile shell: a sunset cover, an overlapping round avatar, stats, tabs, an about rail and a grid of pinned projects.
23

Profile

Cover, overlapping avatar, stats, tabs, an about rail and a feed of pinned work and recent activity. The rail goes on top on a phone.

for: member profiles, author pages, portfolios
OpenDownload
Notifications shell: filter chips, a feed grouped by day with unread tints and action buttons, and a rail of delivery toggles.
24

Notifications

Day groups, unread tint and bar, an icon tile per kind, inline actions, and a preferences rail with CSS toggles and quiet hours.

for: activity feeds, notification centres, audit trails
OpenDownload
Changelog shell: dates and version tags on the left of a vertical rule, release entries with a bar chart and New, Improved and Fixed lists on the right.
25

Changelog

Sticky dates and version tags, a vertical rule with a dot per release, entries with labelled New / Improved / Fixed lists and a figure.

for: release notes, changelogs, project timelines
OpenDownload
Photo gallery shell: a large serif title over a dense grid of wide, tall and square colour-field tiles with an album strip.
26

Photo gallery

Dense grid with wide and tall tiles, hover captions that stay visible on a phone, an album strip, filters. Placeholders are gradients.

for: portfolios, albums, lookbooks, collections
OpenDownload
Invoice shell: a white sheet on a grey desk with sender and recipient, a line-item table, totals with VAT and a deposit, and bank details.
27

Invoice

A sheet with parties, line items, totals, payment details and terms; an A4 print stylesheet; rows become labelled blocks on a phone.

for: invoices, receipts, quotes, order confirmations
OpenDownload
Search results shell: a query bar with tabs, a filter rail, an answer box, results with highlighted snippets, and an info panel on the right.
28

Search results

Sticky query bar and tabs, filter rail, answer box, results with marked snippets, related questions as details, pagination, info panel.

for: site search, knowledge bases, catalogues
OpenDownload
App page shell: a green app icon, a Get button, a facts strip, a row of pastel phone screenshots, and ratings with a histogram.
29

App page

Icon, pitch and Get button, facts strip, CSS phone screenshots that scroll sideways, what’s new, ratings histogram, a sticky Get bar on a phone.

for: app listings, download pages, extension pages
OpenDownload
Email newsletter shell: a 600 pixel cream letter with a serif masthead, a hero story with an illustration, two-up stories and a numbers band.
30

Email newsletter

A 600px letter with no tables: masthead, hero story, two-up blocks that wrap, numbers band, product block, footer with unsubscribe.

for: newsletters, product updates, digests
OpenDownload