Webflow wrote
the new hire
an employee handbook

Read before touching anything

The Orientation Packet

A new hire orientation page set like a mid-century corporate employee handbook.

The visual register comes from 1960s corporate manuals, the Paul Rand era of annual reports: heavy geometric caps, deep pine green print grounds, cream paper panels, typewriter overprints, and cut paper collage plates. Here that language dresses a page type freelancers build all the time, the onboarding or program landing page for a course, cohort, or training day.

The day’s news made the pairing: Webflow’s MCP 2.0 governs its machine coworkers with written rules, roles, and sign-offs, so the issue is the orientation packet the new hire reads on day one. Index tabs mark the sections, an agenda column times the items, and an access table says who may publish.

• index tabs
• cut paper collage
• typewriter stamps
• geometric caps
• access matrix
• day one agenda
• manual cream

Morning session: your tools

Late morning: house craft

Afternoon session: how we work here

Borrow this pattern

The index-tab section divider

Long onboarding, course, and program pages need a spine, and a binder tab is one a client already understands. Give each section a full-width panel whose heading sits in a protruding folder tab: the tab carries the section number and title, the fill color rotates through the palette, and a matching rail of small tabs up top doubles as in-page navigation.

What keeps it honest: the tab is the section’s real heading, an anchor target rather than decorative chrome, so screen readers and scanners get the same map. Use it anywhere a page walks someone through stages, from a course syllabus to a client onboarding flow to a services guide.

Take-home materials

Paste this into an AI site builder to reproduce today’s system: a new hire orientation landing page in the register of a mid-century corporate employee handbook.

Build a one page new hire orientation landing page styled as a
mid-century corporate employee handbook, in the register of a 1960s
annual report.

Structure. A full bleed cover hero on a deep pine green field: a small
typewriter kicker, an oversized geometric sans headline in cream with
one phrase in mustard, a two sentence serif deck, and a framed
illustration plate on the right tilted about one degree. Under the
headline, set the masthead as a rubber stamp: three stacked typewriter
lines inside a double border, rotated slightly. Below the hero, a
contents rail of cream folder tab chips that anchor link to sections.

Sections are cream paper panels that open with index tab dividers: the
section heading sits in a protruding folder tab whose fill rotates
mustard, vermillion, and ink green. Inside, run items as a day one
agenda: a monospace time label beside each item headline and one or two
sentences. Include one small access table (three rows, two subject
columns) with a mustard caption band, and close with a typed
interoffice memo block holding a signature rule.

Type. League Spartan 700 to 800 for the headline, tabs, and item heads.
Source Serif 4 for body at 19px, line height 1.7, measure about 66
characters. Courier Prime for stamps, time labels, captions, and the
memo. Palette: deep pine green #124A3E ground, cream #F2E6C4 panels,
dark green ink #16302A text, vermillion #DD4326 and mustard #E5A31D
reserved for tabs, underlines, and the table caption.

Guardrails. Never justify text. Keep body text at or above 18px and
WCAG AA contrast against its actual background. No gradients, glow, or
neon. No fake toggles or search fields. Corner radius 11px or less, and
only on folder tab tops. Illustrations are flat cut paper collage with
visible paper grain and no readable text. Hover states on links and tab
chips near 150ms, with a prefers-reduced-motion guard.

Files cleanly with Beaver Builder AI, Bolt, v0, Lovable, and Claude Code.