Five tokens, split across two brand systems that never blend into a single "house blue." Intel's three carry the hardware-facing screens (onboarding, Snap camera, Silicon scan); IBM's two carry the cloud/AI-platform screens (Ask, Sandbox). --intel-energy is the busiest of the five — it's the one color reused for every "something is live right now" signal in the app.

Four surfaces, each one step lighter than the last, all mixed with navy rather than gray — the app never drops to a true black (#000) or a neutral gray card. --surface-2 is the lightest of the four and is reused specifically for the outbound side of the Ask chat thread, so a partner's own question reads as slightly "raised" above the model's reply.

Only two semantic colors exist in the whole app — no separate error/red token at all. --ok marks anything confirmed or complete (a finished pipeline step, the infra pill's live dot); --warn is reserved for attention states. The restraint is deliberate: most of what the app communicates is progress and provenance, not failure states.

Four weights, each tied to one real job rather than to a size — and the mapping holds across both surfaces. Light (300) carries the largest, most declarative text on either surface: the app's onboarding hero and the microsite's own H1, same weight, same "meant to feel spoken rather than declared" register. Medium is the workhorse — every screen title in the app, every H3/H4 on the microsite. Bold is reserved for the smallest text, not the largest, on the app side (tiny uppercase chip callouts); the microsite doesn't use 700 at all in headings, only in a handful of UI labels — a real, worth-noting asymmetry rather than a mistake to paper over.

Four durations, two curves — every ordinary transition in the app (button press, card hover, panel fade, the sheet sliding in) reuses one of these six values rather than declaring its own timing. --dur-slide is the outlier: it's the only duration paired with the spring curve instead of the standard one, because it's the one transition (the slide-in sheet) meant to feel like it overshoots slightly rather than settling flat.

Three flagship moments get their own bespoke, un-tokenized timing rather than reusing the base tokens above: the Snap-pipeline cascade (staccato glide), the Silicon chip-scan AR sweep (sine in/out), and the Ask-Granite listening rings (ease-out). Each one earns its duration because it's a one-off signature beat, not a repeated interaction pattern like a button press.

Named here, not in the codebase — Snap and Silicon never share a literal shared component in app/index.html, but their three screens each map onto the same shape in the same order. The three steps at right are that shape made explicit, so a third capability added later has a pattern to match rather than reinventing its own flow.

Brand mark and avatar, present in every mode except onboarding. The base .topbar rule already carries 60px of top padding by default — child mode's own override only trims the bottom padding from 12px to 6px, a smaller adjustment than "the header gets 60px of padding in child mode" might suggest; the 60px is the shared default, not a child-mode addition.

One line, three facts: a live-pulsing dot, which accelerator and cloud it's running on, and the connected region with its latency reading. It sits directly under the topbar on every tabbed screen — the only place in the app that states outright what hardware is doing the work.

Fixed at three destinations, Home active by default. None of the four capabilities — Snap, Ask, Sandbox, Silicon — has its own tab; each is launched from a card on Home instead, so adding a fifth capability later doesn't require a fourth tab.

Three modes, computed once from two hardcoded name sets (ONBOARDING_SCREENS, TAB_SCREENS) rather than declared per screen — anything not in either set falls through to child mode by default, so a new capability screen inherits the right chrome automatically instead of needing its mode set by hand.

Six real toggles across two Settings groups — "Data & privacy" (data residency lock, on-device PII redaction, audit log) and "Notifications" (anomaly alerts, renewal reminders, Silicon updates). Five default on; only Silicon updates — marketing-adjacent, not governance — defaults off.

Three options, one row, used in exactly one place in the whole app — the Energy mode row in Settings, where it trades power draw against inference throughput on the tenant's Gaudi 3 allocation. Balanced is the real default.

A rounded-square scan icon over a single line of copy: "Authenticate to provision." The subhead states the stakes plainly — a single-tenant environment is about to spin up, sealed to this specific identity, before any hardware is touched. Once authenticated, the resulting tenant is named per-partner (e.g. tenant-acme-eu-de-04, seen on the Benchmark screen), not a shared pool.

All five real regions — not a condensed subset. Each carries its own compliance badges rather than one generic "your data is safe" line — EU regions cite the EU AI Act and GDPR, the US region cites FedRAMP and HIPAA, APAC regions cite their own local frameworks (METI, IRAP) — so the badge set itself signals which industries the region is built for. Frankfurt is the one card with both a latency callout and a separate compliance badge, since its meta line is already spent on "lowest latency."

Two states, not one — the dot exists only while .bell-btn carries .has-new, and the app removes that class the moment the partner actually opens Notifications. There's no unread count anywhere in the badge, on purpose: it competes for the same "something's live" attention the infra pill's own dot already claims.

The real extracted invoice (INV-04719, Silicon Valley Foundry) carries six confidence-scored fields plus a four-line-item breakdown; three of the highest-signal values are sampled here rather than the full field list, which is documented in prose above but doesn't need every row re-rendered to prove the pattern.

Every one of the eleven microsite pages opens on this same preloader: the Intel × IBM wordmark pulses gently at the center while four horizontal strips, stacked to fill the screen, sit at full height in front of the page. Once the page has actually finished loading, the strips collapse to zero height in alternating directions — odd strips collapse from the top down, even strips from the bottom up — so the reveal reads as a venetian-blind sweep rather than a simple fade.

The home page hero is the one true full-bleed instance: a looping background video darkened by a two-layer gradient overlay, carrying the real campaign headline — "From IA to AI. The Age of Ingenuity, written together." — at Light 300 weight with three individually gradient-filled word accents. It's the same real headline documented as a Typography sample elsewhere in this library, shown here in its actual hero context rather than as an isolated type specimen.

Six of the eleven inner pages (relationship, scales, capabilities, proof, milestones, faq) pair the same video hero with a giant outlined numeral in the corner — each page's own real statistic, not a decorative default: 45 (years) on Relationship, 3 (scales) on Scales, 4 (capability domains) on Capabilities, 6 (proof points) on Proof, 9 on Milestones, 4 on FAQ. The digit is a frosted-glass cutout — a backdrop-blur masked to the exact glyph shape sits behind a white outlined stroke, so the moving video shows through the numeral itself, feathering to transparent toward the bottom.

Hovering a capability card lights the one petal of the pinwheel that corresponds to it and fades in that capability's IBM duotone icon at the petal's tip — the two of four petals shown here (Finance, AI) prove the mechanism; the other two (Talent, Supply) use the identical rule, just mapped to the top/left positions instead. At rest all four petals sit desaturated and dim, reading as one unified low-key engine rather than four separate shapes.

Higher on the same home page, before the pinwheel section, a separate "Four pillars" row uses the plain white-tile card — no pinwheel, no hover-linked bloom, just an icon, a heading, and a paragraph. Two of the four real pillars are shown here; the other two (Frontier R&D, Strategic Consulting) use the identical card shape with different real copy.

Scales.html frames the whole partnership as three concurrent scales — a single decision, a multi-year program, a whole industry ecosystem — each its own card treatment: Scale 01 is a plain white-bordered card, Scale 02 is the featured/current scale in a dark navy-to-blue gradient with a "Where it lives" tag, Scale 03 returns to a light card with an IBM-blue accent instead of Intel-blue. The escalating visual weight (light → dark-featured → light-accent) mirrors the escalating scope of what each card describes.

Milestones.html lists the partnership's real dated events as a stacked row list rather than a graphical timeline — a large year numeral and month sit in a fixed left column, with a category eyebrow, headline, description, and link in the flexible right column. A hairline top border separates each row instead of a card boundary, so the whole page reads as one continuous ledger rather than a stack of discrete cards.

Proof.html's "6-case grid" reuses the white-bordered card shape from the Four Pillars family (border, hover-lift, blue border tint) but with a different internal layout tuned for a dated claim: a category-plus-date eyebrow, a headline framed as an outcome, a short substantiating description, and a text link rather than a button.

The home page and Voices carry a Swiper carousel of three real, named executive quotes — an Intel Foundry VP, IBM's Chairman & CEO, and an IBM Research GM. Quote text renders larger and lighter than ordinary body copy, in a bordered panel with generous internal padding, so a single quote reads as the section's whole visual weight rather than competing with surrounding chrome.

Voices.html closes with a real archival section — three 1982 newspaper quotes about IBM's original $250M Intel equity stake, each in its own card with a large decorative quotation mark, a category label describing what the quote is "on" (Intel's leadership, IBM's interest, Intel's independence), the italic quote itself, and a full attribution including the original publication and date. It's the same card shape as the current-voices testimonial, scaled down and made plural.

Both real accordion instances (Scales' "Frequently asked" band and the dedicated FAQ page) open with their first question already expanded and every other question collapsed — the same real Bootstrap accordion behavior, just retextured. The two real questions shown here are Scales' own first pair, verbatim.

Experience's own hero swaps the campaign headline for a harder pitch — "Fast is easy. Trusting it is the hard part." — and backs it with four real, specific performance numbers read off the app's own benchmark screen, rather than the qualitative claims used everywhere else on the microsite.

A dedicated card just below the hero hands the demo off to the visitor's own phone — a client-generated QR code beside real, specific reassurances (no install, works offline, exact screen/flow count) rather than generic "scan me" copy. The QR box shown here is the real initial loading state — the actual code renders client-side after the page's own script runs, so "QR loading…" is the genuine unloaded state, not a placeholder invented for this library.

Below the QR card, twelve real screenshots from the app's own app/screens/ folder are arranged into staggered walkthrough rows — trios of three, pairs of two, or singles — each phone tile a genuine link to that exact screen's hash in app/index.html. Hovering any tile lifts it and reveals "Open live ↗"; this is the microsite's own native version of the live-chip pattern this library uses everywhere else, not a library invention — it exists in the real page.