Design spec · creative director pass · 5 Sep 2026← Back to the audit · UX critique →

Pillar PEO Advisors: module design spec (home, HR Audit, Charlotte)

Existing brand, refined. Navy #02064B, green #2ECC70, sky #54C5F2 (used once, noted), League Spartan + Nunito Sans, the fluted-column mark. Nothing new at the brand level. Everything new at the module level.

What was wrong with the previous mockup

Cover the logo and it is a shadcn agency site in navy paint.

  1. Floated-card-right hero. Headline left, white rounded card with a drop shadow right. The Load Diagram was the right idea drawn wrong: 560px, boxed, with a rotated sticker. A clip-art infographic about the metaphor instead of the metaphor being the page.
  2. Everything is a card. 10px radius, box-shadow: 0 30px 60px on hero card, form and map, green offset shadow on the founder photo, 999px pills for pass/watch/fail. 2023 SaaS moves; the client feels them without naming them.
  3. Small template modules in a row. Four hero facts, four dashed slots in a grid, six industry cards, four steps, accordion FAQ, CTA band with form card. Every module is nameable from a component library. Nothing had to be made up for this company.
  4. Ambient noise. Body grid texture, two radial green glows. Makeup on uncommitted bones.
  5. Display type too small. H2 at 52px, table names at 20px. Restraint at small scale reads as timid.
  6. Green was decorative. One green word, eyebrow rules, a foundation slab. It never carried anything.

The fix is one idea at scale: the site is a structural drawing set for a building called your firm, and the column is the only thing on the page that bears load.

System (all pages)

Ground. Page #F4F6FA. White #FFFFFF only inside drawing modules. Navy bands #02064B. No gradients, glows or body texture: delete body::before, .hero::after, .ink::after.

Structure. Hairline --hair: rgba(2,6,75,.18); heavy rule 2px navy. Zero box-shadows. Radius 0 on sheets, tables, tags, images; 4px on buttons and inputs only. Every light section opens with a 2px navy rule across the container, no <hr>.

Green, four roles only. (a) The column and capital, on navy. (b) 2px structural rules. (c) The PASS mark. (d) The primary button on navy bands. Green text on white is banned; #1A7A45 carries green-coded text on light. Sky appears once: the water on the Charlotte plat.

Type. League Spartan 700, tracking -0.03em, line-height 0.95. Desktop real pixels: H1 96 (clamp(56px,7.2vw,96px)), H2 64 (clamp(40px,4.8vw,64px)), H3 28, prices 72. Label layer: League Spartan 600, 12px, tracking .16em, uppercase (the logo's own "PEO ADVISORS" voice; no monospace needed). Body Nunito Sans 18/1.55, prose 60ch; secondary 15px. tabular-nums on every number.

Grid. 12 columns, 32px gutter, max 1280, side padding 32 (20 under 720px). Section padding 128 desktop / 80 mobile. 8px vertical unit; rows 56px unless stated.

Chrome. Header 72px, logo 40px tall, five links 15px/600, one navy button 40px tall radius 4, hover #0E124E, scale(.98) press. Footer white, 2px green top rule, four columns, compliance line in label caps.

Motion. --ease: cubic-bezier(.16,1,.3,1). UI 160ms. Reveals 600–900ms, only on the three page devices, each explaining the product. prefers-reduced-motion disables all.

HOME

H1. The Bearing Column (hero, the page device)

Buyer purpose. A managing partner sees the five things the firm legally carries and the one object carrying them. No reading required.

Desktop. Full-bleed navy, min-height: calc(100vh - 72px), floor 760px. Grid 7fr 5fr, gap 64, align-items: end. Left: label at white 62%, H1 96px white with "the load." green, lede 21px white 78% 52ch, green-fill button (navy text) + white ghost button (1px at 50%). Right: column SVG 480×680, plinth on the hero's bottom edge.

SVG (viewBox 0 0 480 680), geometry taken from the logo mark.

Motion. Plates settle: translateY(-18px) opacity 0 → rest, 700ms, bottom plate first, 90ms stagger, once. Nothing else moves.

Mobile (<960). Single column, H1 56px, SVG width:min(100%,360px) centered under the buttons, margin-top 48. Under 400px hide the statute text.

Remove. .load, .tag, .facts, glows.

H2. Proof Ledger

One row, grid-template-columns: 2fr 2fr 1fr 1fr, 2px navy rule on top, hairlines between cells, padding 32, min-height 168. Cells: two testimonials, Google rating, membership marks. Unfilled cell = dashed 1px rgba(2,6,75,.5), no fill, label in #1A7A45, instruction 15px. Filled quote: League Spartan 600 24px, attribution in label caps. Mobile 2-up, 1-up under 560. Removes the four floating slot boxes; one ledger with blanks reads honest, four empty cards read unfinished.

H3. Service Schedule (an architect's drawing schedule)

Buyer purpose. Every service, scope, duration, price, deliverable on one sheet, priced before the call.

Desktop. White sheet with a drafting border: 1px navy border plus 1px navy outline at outline-offset: 8px. No radius. Sheet header in label caps: "Schedule A · Services" left, "Sheet 1 of 1 · Rev 2026-09" right. Columns 80px 1.6fr 2.4fr 1fr 1fr 1.6fr; header row 44px label caps on #EEF1F7, 2px navy rule under; body rows 88px, hairlines, no zebra. Mark cell: a keynote hexagon 36px, 1.5px navy stroke, white fill, "A-1" 12px 700 inside (real drafting convention). Service name 28px League Spartan, sub-line 15px at 74%. Price 20px 700 tabular. Deliverable links underlined 2px green.

Title block. Bottom-right, 4×2 hairline cells, label caps: PROJECT / your firm · DRAWN BY / Pillar PEO Advisors, Charlotte NC · SCALE / fixed price · DATE / quoted on the scope call. The joke and the promise at once.

Mobile. Rows become stacked blocks: hexagon top-left, name, then a two-column definition list (Scope, Duration, Price, Deliverable). Border and title block stay.

H4. State Grid ("every state is a rulebook")

Buyer purpose. The nationwide multi-state story, plus the NC/SC worked example for the local buyer.

Desktop. 5fr 7fr, gap 64. Left: label, H2 "Every state is its own rulebook.", lede, guides link. Right: a 50-state tile cartogram on the standard 11×8 tile-map positions (NPR/WSJ layout). Tiles 56×56, gap:4px, 1px hairline, two-letter code 12px label caps, transparent. NC and SC: navy fill, green text, a 2px green rule joining them (home pair). States with a published guide: solid hairline, linked. Without: dashed hairline at 40%, aria-disabled. Legend under the grid in label caps: "■ home pair · □ guide published · ⬚ guide in progress". Honest about coverage; fills in as guides ship.

Worked example. Under both columns, the NC/SC table as 1.2fr 1fr 1fr, 2px navy top rule, 56px hairline rows, header cells navy with white label caps. Same six rows. No outer border.

Motion. On first scroll into view (40%), tiles fade in row by row, 400ms, 20ms stagger, NC/SC last and turning green. "We check every state, and start from here."

Mobile. Tiles 30px under 400px viewport (11×30 + 10×4 = 370), labels 10px. Table stacks with the state name as a label above each cell.

H5. Industry Index

Not a card grid. Six rows, grid-template-columns: 64px 3fr 5fr 40px, 2px navy rule on top, hairlines between, padding 32px 0. Index "01" label caps at 50%; industry name 40px League Spartan; risk line 18px with detail 15px/74%; arrow. Hover: name shifts 8px right in 160ms, arrow turns #1A7A45. No fills. Mobile 48px 1fr, name 28px.

H6. Load Report, first look

5fr 7fr, copy left, the Inspection Tag (A1) right at 560px, nine areas and marks only.

H7. The Founders (a person, not a card)

Desktop. Navy band, 5fr 7fr, no gap. Left: founders photo bleeding to the viewport's left edge and both band edges, aspect-ratio:4/5, object-fit:cover, object-position:50% 30%. Treatment: filter:grayscale(1) contrast(1.08) and mix-blend-mode:screen on the navy band, so shadows go navy and highlights stay white. A phone snapshot fused into the palette without pretending it isn't a real photo. Caption bottom-left on the photo, label caps white 70%: "Caleb + Josiah Sherrill · Charlotte, NC". Right, padding 96: quote in League Spartan 600 40px/1.1 white; "Caleb Sherrill, founder" 15px; credential slot dashed white 50%; ghost link "How we get paid, in plain terms →".

Mobile. Photo full width above text, padding 32. Remove: figure border, green offset shadow, figcaption box.

H8. Questions (index, not accordion)

Keep <details>. Max-width 880, 2px navy top rule, question 24px League Spartan 700 with "01"–"05" label caps in a 56px column, hairlines between, no plus icon. Open item gets a 2px green rule on its left edge at -32px. Answer 18px at 74%, 66ch.

H9. Scope Sheet (CTA band)

Navy, 6fr 6fr, gap 64. Left: H2, lede, phone in label caps with the number green. Right: the form without a card. Inputs transparent, 52px tall, 1px bottom line white 40%, white text, labels label caps white 62%; focus = 2px green bottom line. Button green fill navy text, full width, 52px. Footnote 13px white 55%. The form becomes part of the band instead of a widget on it.

HR AUDIT

A1. The Inspection Tag (hero, the page device)

Buyer purpose. The Load Report is a physical object with nine marks on it. Fixed price, three weeks, no deck.

Desktop. Navy hero, 6fr 6fr, gap 64, align-items:center, min-height 760. Left: label "Service A-1 · HR Audit · any state", H1 84px with the last sentence green, lede, two buttons, then the fee strip: three cells, hairline dividers white 25%, headcount in label caps and price at 56px League Spartan white. Middle cell: 2px green top rule, "most firms". No card, no bullets.

Right: the tag, 440×640, white, 1px navy border, no radius.

Motion. Marks stamp in: scale 1.4→1, opacity 0→1, 220ms, top to bottom, 70ms stagger, after 300ms. A clipboard being ticked.

Mobile. Tag width:min(100%,400px) under the fee strip; strip stacks, price 44px. Remove: .tiers, .facts.

A2. Book / Don't book

6fr 6fr, 2px navy top rule, H3 28px per column, list markers replaced by 12px navy squares (book) or dashed squares (don't). No card.

A3. Sequence (a Gantt strip, not 01/02/03)

Header: day ticks 1–21 in label caps at 50%, hairline ticks, 2px navy baseline. Four 72px hairline rows, each with a 24px navy bar spanning its days (1; 2–5; 6–15; 16–21), step name 28px League Spartan and description 15px right of the bar's start. Bar four is green. Under it: "Your team's time: about 4 hours, total" in label caps. Mobile: bars stack, day range as a label beside each name. Remove: .steps.

A4. Sample Load Report

The tag at 5fr 7fr (tag in the 7), case study slot left under the lede. Reuse, don't redesign.

A5. Forty-one checks

Two columns at 15px, 12px square markers that fill navy on hover. Container 1040. A 96px display "41" sits left of the H2 at desktop.

A6, A7. Questions and Book

As H8 and H9. Scheduler slot sits on the navy band as a dashed white-50% rectangle 480px tall, no white card.

CHARLOTTE (template for 11 metros)

C1. The State Line (hero, the page device)

Buyer purpose. A Charlotte firm with one person in Fort Mill is an SC employer. Show them the line they crossed.

Desktop. Navy hero, 6fr 6fr, gap 64, min-height 720. Left: breadcrumb in label caps, H1 84px with "across the line" green, lede, two buttons. Right: a plat drawing, SVG 560×520, no card, no map tiles, drawn like a county survey sheet:

Under the plat: the zip list as two label caps columns, white 70%, 1fr 1fr, hairline rows.

Motion. The state line draws itself once on load (stroke-dashoffset path length → 0, 900ms), then the three SC discs turn green. The page's point, in one second.

Mobile. Plat full width at 560/520, labels 10px, zip list one column. Remove: .map card and the embed slot; the GBP map becomes a footer link until GBP is verified.

C2. Why Charlotte firms call us

Prose left (60ch, 18px). Right: the Inspection Tag with four rows and column heads "Finding / Frequency / Fix", same three mark fills. Footnote in label caps.

C3. Services in Charlotte

The Schedule component with columns 80px 2fr 3fr 1fr and title block "SHEET C-2 · CHARLOTTE SPECIFICS".

C4. Named, with permission

One Proof Ledger row, 1fr 1fr, dashed slots until filled. The page does not ship with these empty.

C5, C6. Questions and Book

H8 and H9 with location=charlotte on the scheduler.

Build notes