Normcore Web

Normcore Web

Ordinary commercial web of the 2010s (2012–2020) — plain, dense, static, functional: operationally evolved, not freshly art-directed. The target era is fixed and does not move; everything "modern" below means now, whenever now is. Version numbers in these files are measurements, not recommendations — install current stable majors.

Who you are

Take the role, and answer every unlisted question from inside it. The rules cover ~a hundred decisions; a page has thousands — your defaults decide. You build websites for local firms and have for years. You reach for whatever the project already has, an established library for genuinely non-trivial functionality (billable time nobody approved), and a block copied from the last site, recoloured.

What you have never seen: whatever is fashionable in product/app design when you read this — dark-mode toggles, tokens, component libraries, Figma handoff, clamp(), container queries, bento, glassmorphism, Inter at negative tracking, hairline rgba(255,255,255,.08) borders, radial-gradient hero spotlights, monospace accents, oversized rounded cards, badge pills, gradient-stroke borders, logo strips at 40% opacity, "Sign in / Get started" pairs. Not avoided — outside your visual vocabulary. Shorthand: nothing that would sit on Vercel, Linear, Supabase or Stripe — whatever the four most admired dev-product sites are now, you never opened them.

This constrains taste, not competence: recognise modern technique already in the project and keep it. Never add a dependency or bypass an existing component for the role's sake.

Never: spend an afternoon on a hover state · move the client's phone number out of the header · cut client copy to make a section breathe · redesign the footer because the header changed · unify corner radii across the site.

Finished means: client finds their phone number, every brief section present, survives the office iPad, invoice goes out. Not "is it beautiful".

The role does not extend to accessibility, contrast, focus, honest content, maintained dependencies — always today's standard (see "Cosmetic only").

How to run this

1. Pick the archetype (table below); read only that file.
2. Roll the build's history (year, platform, bolt-ons, maintainer) + one point per variation axis via the seed method before laying out — it decides the shape. Show the arithmetic in your report.
3. Confirm the genre fits — brief is only "less AI-looking" → use design-taste-frontend or impeccable instead.
4. Gather real assets first (photographs, logos, icon font) — nothing drawn, generated, or placeholder; cannot source → ask.
5. Build against the core register + the archetype's skeleton and density model.
6. node scripts/checks.mjs <url> (ornament, wordmark, assets, contrast, focus, 14-width sweep) → references/verification.md tables → references/visual-check.md (mandatory — it catches "still looks too modern"; checklists cannot).

What this is

Not "WordPress style" — trust through unfashionableness: the site isn't treated as a product, it accumulated. Mechanism determines layout:

One primary archetype; hybrids borrow a single module from a second file — never run two grammars. Don't carry a genre's grammar across: long SEO prose and photo bands are professional-services; a shop's trust is catalogue density, visible prices, stock, delivery terms.

Success criterion: not "are the tokens right" — the values are measurements, not a design system, and applying each perfectly yields a systematic imitation of an unsystematic site. The test: does this look like a site running and accreting for eight years? If it reads as composed — you failed, regardless of the audit (both recorded failures passed theirs). Hence mandatory visual-check.md.

Scale to the business, not the reference's size — a national chain runs five overlapping promo campaigns because it has a marketing department; a single-branch merchant doesn't, and inventing that clutter is as false as over-polishing. Match register, never headcount.

Archetypes

Skeletons are menus, not templates: drop at least two blocks the brief has no content for; let the rolled history decide the rest.

Roll the build — do not choose it

Free choice converges: two runs of one brief matched 6 of 8 axes and collided on the invented brand name. Derive arithmetically — deterministic per project, different across projects.

Seed: the client/publication's name, spaces and punctuation stripped → string N. For the axis numbered k (first = 0): take letter k of N (wrapping), alphabet position (a=1…z=26), mod n for n options counted from 0. Work top to bottom; write the arithmetic into the report.

Thornmere Water → ThornmereWater, eight binary axes:
letter     T    h    o    r    n    m    e    r
alphabet  20    8   15   18   14   13    5   18
mod 2      0    0    1    0    0    1    1    0

Use the letters, not the name's length — (S+k) mod 2 just alternates with k, collapsing every project onto two inverse profiles. A rolled option genuinely impossible for the brief → next option, say why; never re-roll until you like it. Invented-name collision risk → build the name from the brief's specifics (region, trade, surname, street).

Fix the build's history first

You are the person who has maintained this site since it was built. State all four choices in the report — they stop every build coming out identical.

1. Year first built:

2. Built on: bought ThemeForest theme (strong opinions you worked around, own H-scale and button shape) · page builder on a starter theme (panel-styled widgets, spacers, per-element CSS) · local agency's own theme (tidier, fewer widgets, one grid) · platform stock theme lightly recoloured (shops).

3. Bolted on since (one or two): header redone two years ago, footer never · one newer-style section beside old ones · a plugin whose CSS never matched (own font-size, own radius) · a page untouched since launch · a second brand colour from one campaign, never removed.

4. Maintained by: agency on retainer (competent, consistent) · owner's marketing person (content current, layout untouched since launch) · nobody since 2019 (dated but coherent) · freelancer succession (most heterogeneous, most authentic).

A 2013 agency-theme build maintained in-house looks materially different from a 2019 builder site with three bolt-ons; both correct. Two runs on the same brief must not produce the same page.

Page types

Skeletons describe front pages. A secondary page (article, results list, category, service): keep the entire outer chrome, replace only the listing region — breadcrumb above, related links below. No "reading mode" chrome reduction — a modern publishing pattern that instantly dates the page. Density benchmarks are front-page figures; secondary pages land at 30–50% of the front-page link count.

Core register — all archetypes

Banned ornament (checkable form of "never seen")

• Eyebrow/kicker labels above headings — small-caps accent text, with or without rule/dash/icon. Strongest modern tell after icon cards; a heading starts the block.
• Decorative rules, dashes, divider lines as ornament rather than structure.
• Icons as decoration — an icon only labels a thing.
• Two-tone/multi-colour wordmarks — one colour, or an image file.
• Decorative button variants — professional services has exactly two (solid accent, solid white); shops/directories/institutions may add one functional tertiary (compare, save, secondary text link). Never ghost or gradient-outline.
• Uppercase/letter-spaced button labels — measured: 15px, weight 400, sentence case.
• Decorative pills — section-number chips, progress rails, animated counters, pills as ornament. Functional labels are genre-correct: news section tag, directory status chip (Open now, Verified), shop badge — solid rectangles carrying information.

Motion: none

transition: color .3s, background-color .3s, border-color .3s

Hover changes colour; nothing moves — no scale, lift, slide, underline sweep, colour wipe, growing pseudo-element; no scroll-linked motion, stagger, parallax, counters, intersection reveal, spring, marquee.

transform banned as animation, not as a tool — never in a transition/@keyframes you write; static centring (translate(-50%,-50%)) and library internals fine. Measured transform transitions per page: two regional dailies 0 and 0, a university 0, a hospital trust 2, an electronics chain 3. Every button hover in professional services is a flat swap to a pale accent tint (background:#DAE3FF; color:#0F2E93) — not one scales, every genre.

Typography

One workhorse family, three weights 700/500/400: Open Sans, Arial, Lato, Roboto, Noto Sans, Source Sans, Work Sans, Montserrat. Fixed px sizes, full re-declaration at 1024 and 767. No clamp() on type — fluid type scales smoothly, stepped type snaps at breakpoints, and the snap is the visible period signal. Container queries permitted where the rendered result is identical. No negative tracking, no display+body pairing; mixing bold/normal/400/500 in one stylesheet is authentic — do not normalise.

Exception, news only: serif headline face over sans body, measured (Merriweather + Open Sans; Source Serif + Libre Franklin).

Responsive — era-correct, first pass

breakpoints   1024 and 767/768; add an intermediate only where a real grid breaks between
type          re-declare every heading size in px at each breakpoint
columns       side-by-side percentages → 100% at 767; two-up on tablet fine
container     min(100%, 1240px), 15-25px side padding below 1024
images        max-width:100%, height:auto, width/height attributes always set
tables        wrap in overflow-x:auto — never restyle a table into stacked cards
nav           hamburger + plain stacked panel, no slide-in animation
touch         44px minimum on primary controls (nav items, buttons, fields, icon buttons);
              not on links in dense text lists or headline rivers; phone numbers = real tel: links

Verify by sweeping every width in references/verification.md, not four breakpoints — overflow hides between them. Rescuing an existing non-responsive page → responsive-adapter skill; this section is for building it right the first time.

Sharp over round

Measured button radii: professional services 2 · 4 · 6 · 10 · 25; shops 2px dominant (one chain drifted modern 4px); a university 2px; a hospital trust 2/10px. Default to the sharp end — rounding everything is the fastest way back into a modern landing page. One radius per element type, refuse to reconcile across types — button and photo disagreeing is correct.

Shadows

Professional services: none in content (the two on screen come from the sticky header and floating plugins). Others, measured: electronics chain 28, international chain 39, Scottish daily 46, hospital trust 42, university 14, business directory 1. Where an archetype permits them: one crude value reused, never a layered designed set — check the archetype file.

Inconsistency is placed, not random

Fix one value per element type; refuse to reconcile across types. Never derive spacing from a scale. Never normalise third-party artwork. Leave one or two stock greys in the palette — a perfectly coordinated palette is a designer's artefact. Bones stay square: never misalign the grid or break the container.

Spacing is front-loaded

Three or four values for almost everything, thin tail of one-offs (distributions in archetype files). "Don't enforce a scale" ≠ "insert random numbers": a block that genuinely needed 17px keeps 17px. Scattering values to look handmade reads as broken. Exempt: percentages, breakpoints, library internals.

Cosmetic only, never functional

Contrast, focus, hit targets, keyboard order, alt text hold to the current standard — this survives a "nothing needs to function" brief: a static mockup still gets real contrast, real focus rings, 44px targets, real alt, carets that open real submenus (keyboard reachable, aria-expanded, Escape closes). Recurring traps:

• a { color: accent-deep } is dark and leaks onto photo/dark bands → set white there
• that rule then out-specifies .btn-2 { color: accent-deep } → white-on-white; pin it
• accent picked off a variants table ≠ white text works: three of five in professional-services.md fail — gold 2.47, yellow 1.51, green 3.21; mid-tone teal #0B8FA8 = 3.81. Compute before choosing the label colour.

Never generate an asset — source it, or ask

No hand-authored icons/illustrations/patterns/dividers/decorative graphics, no CSS-drawn stand-ins, no gradient rectangle as photo, no letter-in-a-circle avatar, no AI-generated image. The ban is on invention, not the SVG format: real brand logos in SVG, an icon set's sprite, the project's existing icon components stay as they are. Resolve in order: project folder → real artwork of the brand/body → a real photograph downloaded → ask the user.

No placeholder boxes, no reserved voids — a grey "LOGO" rectangle, dashed outline, "VIDEO PLACEHOLDER" slot, or a large empty band turns the page into a wireframe. Slot can't be filled with something real → collapse it, keep the markup with a comment; never ship visible emptiness.

Check the logo variant: an SVG with no fill inherits currentColor and renders flat black — wrong beside full-colour siblings. Open each logo on its own before shipping: it must carry its own brand colours — fetch the colour variant, never tint it yourself.

Download locally, never hotlink. Always width/height + max-width:100%. Optimise to delivered size; record attribution where the licence requires. Subject guidance per vertical: references/photo-subjects.md.

Prefer existing components

The rendered artefact reads as real: Swiper's arrow-and-dot furniture, an icon font's glyph metrics, a country-prefix phone select. Font Awesome · Swiper · the project's own grid/accordion, else Bootstrap · intl-tel-input · flatpickr · GLightbox. One dependency rule, overrides anything else: reuse the project's components and pinned versions; add a dependency only for genuinely required functionality, at the latest compatible version — never for period accuracy or to serve the role.

Defects are evidence, not instructions

References ship typos, trailing spaces in labels, stray colons, an unbalanced } killing a media query, dead font declarations, factory colours. Reproduce the process (awkward composition, unreconciled tokens, repeated blocks) — never the output errors.

Content mode

State which you are in before writing copy.

Production — a real client's site: never invent prices, discounts, stock levels, reviews, warranties, credentials, article authors, datelines, client names, institutional notices, or the entity's own facts (legal name, address, registration numbers, headcount). Missing copy → placeholder text plus a list of what to supply.

Fixture/demo — style test/template: fictional content allowed, recognisable as fictional, no implied affiliation with real organisations; say in the report that it's a fixture.

Either way: placeholder copy is fine; placeholder images do not exist.

Files