Web Design Eras, session by session

Built the last two eras as a pair: Era 5 (SaaS Gradient, 2016-saas) and Era 6 (Agent Era, 2022-agent). All six eras are now built.

Era 5, SaaS Gradient (2016-2020) is the gradient-clipped-headline, floating-screenshot register: Poppins, a purple-to-pink brand gradient, pill buttons with a soft colored shadow, and two blurred blobs behind the hero. Home, Pricing and Customers, plus kit, all reuse the inspiration file’s copy and structure directly. Footer is the 5-column mega footer the era’s own notes called for.

Era 6, Agent Era (2022-2026) is dark hairlines and bento: near-black oklch surfaces, depth from 1px rgba borders instead of shadows, one radial glow behind the hero, IBM Plex Mono for every label, and an npm i @globex/agent install command standing in for the era’s developer-tool register. Home’s bento grid (trace log, latency bars, model routing, guardrails) is a close copy of the mockup’s own four-cell layout. Docs and Changelog are the two secondary pages, each in the same trace-log/mono idiom as home.

Both eras are responsive and use viewport media queries per the world’s period-accurate-CSS ADR, same as Eras 4 and 5’s precedent. Both reused the era-4 checkbox-hack mobile nav, verified working on both projects at 375px.

Company naming followed the drift table in the world spec: Era 5’s brand is plain “Globex,” Era 6’s is “Globex Platform,” rendered as a wordmark plus a small mono “Platform” tag in the header rather than spelling out the full two-word name inline everywhere. No prior era had a two-word drift name, so this was a judgment call with no existing precedent to follow.

Decisions

• The no-em-dash voice rule is scoped to the site’s own voice (meta layer), not in-fiction era copy. Era copy stays era-accurate and reuses the inspiration file’s copy as-is, em dashes included where the mockup has them. Resolves the open thread from the previous session’s entry.
• Era 6’s drift name “Globex Platform” is rendered as “Globex” wordmark + a small mono “Platform” tag, not spelled out in full everywhere. Keeps the header logotype compact and matches the era’s own mono-label visual vocabulary (e.g. “01 / Trace”). Full “Globex Platform” is used in page titles and the footer copyright line.
• Era 5’s footer is 5 columns (brand + Product/Solutions/Resources/Company); Era 6’s is 4 (brand + Platform/Developers/Company). Matches each era’s own inspiration notes (“5-column mega footer” for Era 5; no such note for Era 6, where a tighter bento-consistent footer fit better).

Open threads

• World page’s era band as a timeline instead of a card row: still deferred, the fourth session running. Now that all six eras are built, the whole picture is finally visible, so this is worth a real look next.

Two eras this session instead of the usual one, on the theory that they are better built as a pair than in sequence. Era 4 is the direct reaction against Era 3: the whole flat movement was an argument that Era 3’s stitching, linen and letterpress were decoration pretending to be information. Building them back to back meant Era 4 could be defined by exactly what it deletes.

Era 3, Skeuomorphic (2008 to 2012) is a 980px cream paper sheet floating on a dark linen ground. Everything on it obeys one rule, which the era’s own style guide states outright: the light source is directly above. Text on light takes a white shadow below, text on dark a black shadow above, buttons get a highlight along the top edge and a hard 3px shadow underneath standing in for the thickness of the thing, and input fields invert all of it to look sunk instead of raised. Pages are home, Features, Journal, and the UI kit, which presents itself as “The Style Manual, third edition” because a company with this much confidence in its own craft would absolutely have published one.

Era 4, Flat (2012 to 2016) deletes every gradient, bevel, shadow and rounded corner from that vocabulary in one release. The only radius left in the stylesheet is 50%, on circles. Full-viewport hero, 100-weight type at 74px, ghost buttons with 2px borders, outline icon rings, a turquoise statistics band, and sections that stack full-bleed and alternate white, #ECF0F1 and #2C3E50. Home is the one-page scroll the era invented, and Features and Blog are the deeper pages that still earned their own URLs.

The interesting problem was that Era 4 is the first era in this World with any responsive behavior at all. Eras 1 through 3 are fixed-width because that is what those years shipped, but responsive was the actual headline feature of 2013, and the inspiration sheet’s own copy sells it: a single fluid grid, from 320 pixels wide to whatever comes next. That collided with docs/coding-conventions.md, which says container queries over media queries.

Period accuracy won, and the reasoning got written down as this World’s first ADR, docs/adr/web-design-eras/0001-period-accurate-css-in-era-projects.md. The deciding argument is that both options produce identical pixels at every width, so the only thing the choice affects is what a visitor finds when they open the inspector, and on a site called View-Source that is not a small thing. It follows the precedent from the previous session, where Era 1’s flex layouts were converted to genuine nested tables for the same reason. The exemption is deliberately narrow: it covers mechanisms whose period is part of the reconstruction, and not the conventions that are about code quality.

Era 4’s mobile nav turned out to be a happy case of the same principle paying off twice. A 2013 site collapsed its menu without JavaScript by hanging the open state off a hidden checkbox next to the label, and that trick still works, so the burger menu is both period-accurate and genuinely functional rather than a dead control.

One small thing caught in verification: page titles were being written with — and rendering the entity literally in the browser tab, because Astro escapes text expressions. Switched all eight to the · separator, which docs/voice-and-tone.md asks for anyway.

Decisions

• Era projects may use period-accurate CSS mechanisms, overriding the global container-query rule. Recorded as docs/adr/web-design-eras/0001-period-accurate-css-in-era-projects.md, the first World-scoped ADR in the repo. Era 4 uses Bootstrap 3’s breakpoints (1200 / 992 / 768) as viewport media queries. ADR 0003 still says no World-scoped ADR exists yet; left as-is, since it was true when written, same treatment the pre-rename entries got.
• Era 3 stays fixed-width at 980px. Responsive design was an article in May 2010 and a practice years after that. Consistent with Eras 1 and 2.
• Era 4’s mobile menu uses the checkbox hack, not a dead control. Period-accurate for 2013 and it actually opens, so a visitor on a phone can still reach the other pages.
• Era 4’s “Pricing” nav item points at an anchor on the home page, not a page of its own. That is the one-page scroll working as intended: in 2013 a section was the unit of a marketing site, and only deeper content earned a URL.
• Both eras keep the secondary pages the spec proposed (Features and Journal, Features and Blog). Nothing about either era told a better story than the proposed pair.
• Page titles use ·, not an em dash entity. The entity rendered literally through Astro’s expression escaping, and the separator rule already called for ·.

Open threads

• The era band on the World page is still a row of six cards. Deferred for the third session running. Now that four of six are built and linkable, the card row is carrying more weight than it was designed for.
• Globex’s copy is written to page depth for Eras 1 through 4. Eras 5 and 6 still have only style notes in the inspiration sheet.
• docs/voice-and-tone.md bans em dashes in project copy, but the inspiration sheet’s in-fiction copy uses them freely and the spec says to reuse that copy as-is. Era 2’s built pages contain several; Eras 3 and 4 were written to avoid them without losing the period voice. Worth deciding whether the rule is about the site’s own voice or about every word on the site.

Session started to pick up where Era 1 left off. Confirmed the next unbuilt project per worlds.ts and the spec is Era 2, Web 2.0 Beta (2004–2008): gloss, gradients, perpetual beta. The prior session’s log entry was left in draft with an empty nextFocus, so this entry started from the spec and inspiration sheet directly rather than a handoff note.

Era 2 got built: header/nav, hero, feature grid, tag cloud and footer on the home page, plus Features, Pricing and a kit (style guide) page, all in the gloss/gradient Web 2.0 idiom. worlds.ts now marks 2004-web2 as built.

While reviewing Era 1 against memory of actual 2001-era sites, two corrections came up. First, the canvas needs to stay genuinely fixed-width; period sites had no responsive behavior at all, which turned out to already be true in the built CSS and just needed confirming. Second, several Era 1 regions were still div/flexbox under the hood despite looking table-based. Converted every flex/grid-driven layout (masthead, top nav, side nav list and badges, the investor notice block, the news rail and its hit counter, the footer link row, and the kit page’s swatches/button/section demos) to genuine nested <table>/<tr>/<td> markup, matching how these were actually built.

Also caught that “Nimbus” is a real company’s name. Renamed the fictional company to Globex across both built eras, following the same drift the spec already called for (Globex Systems, Inc. → globex. → Globex → GLOBEX → Globex → Globex Platform). The 2026-08-02 log entries still say “Nimbus,” left as an accurate record of what was decided in that session rather than rewritten to match.

Decisions

• Company renamed Nimbus → Globex, everywhere in the built site (copy, nav, CSS comments, domains, ticker symbol, product-line prefixes). Reason: Nimbus collides with a real, live company. Historical log entries from before the rename are left as-is.
• Era 1’s remaining flex/grid layouts converted to nested tables. The 3-column page layout was already a table; the smaller regions (masthead, nav bars, sidebar lists, notice blocks, news rail, footer, kit demos) were still divs doing the arrangement via CSS flex/grid. Converted all of it to <table>/<tr>/<td>, since that’s what a real 2001 site would have used: CSS flexbox and grid didn’t exist yet.
• Era 2’s canvas stays fixed-width, no container/media-query responsiveness. Consistent with Era 1 and period-accurate: responsive design wasn’t a thing until years later.

Web Design Eras started as a pile of raw material: an inspiration sheet dropped into docs/inspiration/web-design-eras/, the source that would end up anchoring the whole premise. The idea underneath it was ambitious in a specific way — not a pastiche of old web design, but one fictional company, Nimbus, played completely straight across six four-year design eras from 2000 to 2026, built as if each era’s site were actually built at that time: period-accurate fonts, chrome, and copywriting tics, all of it.

That premise got written down properly in docs/specs/web-design-eras.md. The one real decision made here: unlike Cosmic Strawberry and Mint Panther, there’s no curation step for this World. Every one of the six eras becomes a Project — no picking favorites, no rejected concepts sitting on the shelf. Nimbus’s name and market position were deliberately allowed to drift era to era (Nimbus Systems, Inc. → nimbus. → Nimbus → NIMBUS → Nimbus → Nimbus Platform) as period-accurate rebrand behavior, not something to smooth over for consistency.

Nothing got built yet — this was the day the premise got pinned down, not the day the first era got its own page.

Decisions

• All six eras become Projects; no curation step for this World, unlike Cosmic Strawberry / Mint Panther.
• Nimbus’s name/branding is allowed to drift per era — period-accurate, not an inconsistency to fix.