The Engine Design System.

Magenta is the accent on both. One accent per surface, never two.

Colour is a two-value variant and not currentColor. With currentColor, any ancestor's text colour silently becomes brand colour, and a magenta wordmark is one careless text-primary away. Size by height alone. The brand forbids distortion, and neither the turbo's 1001:1000 — square to the eye, not to the box — nor the wordmark's 2001:732.5 is a ratio anybody reproduces by hand.

Status is functional colour. It reports state and nothing else. It is never decoration, never a second accent, and never a stand-in for magenta. Ink on a status fill is always Off Black, because white fails AA on all three. There is no info colour. Use the neutral ramp for informational states.

DM Sans has no condensed cut. --font-condensed and --font-extra-condensed remain as roles and resolve to the brand face, so big numbers and poster-scale words are set in DM Sans Black until the brand team assigns a condensed face. Display type is large: 92 to 104px on a 1480px page. Scaling Display 1 down to 48px does not produce a smaller display size. It produces an H1.

DM Sans is a variable Google Font under the Open Font Licence: weight 100 to 1000, and an optical-size axis from 9 to 40, so body sizes get the looser cut and display sizes the tight one. There is no substitute face. A machine that cannot reach Google renders a size-adjusted Helvetica Neue or Arial matched to DM Sans's width, which the package ships as "DM Sans Fallback". --font-mono resolves to the brand face; JetBrains Mono is retired, and a product that needs character-cell alignment binds its own monospace.

Depth comes from rules and nested panels, not shadow. The package holds two shadow tokens, --shadow-panel and --shadow-modal, and both are for product chrome and modals. Neither belongs on a brand surface. Neither is a substitute for the rule that should have been there.

The hairline sits 14px from the top, inset 24px each side, and the type is set flush to the bottom-left instead of centred. That is the deck's signature composition. Centring it is the most common way a page stops looking like Engine.

Motion is fast, but it is never mandatory. prefers-reduced-motion drops everything to fades, and the package's base layer already does that globally. A product importing @engineio/ui/styles gets it without writing a line. Turn the setting on and press Run again. The blocks jump, and nothing on this page breaks.

Never people. Never warm tones. Never stock-office imagery. No handshakes, no laptops, no meeting rooms. Always cropped into a rounded rectangle at the media radius or bled to the page edge, with the sub-brand badge top-right. Type over photography gets the bottom-up black scrim, not a capsule and not a box. Subject leans by sub-brand and the grade never does. Studio takes the machined and constructed, Integration the connective, both monochrome.

The two frames hold no photography. None ships in this package, and filling them with a stand-in would put an image into the design system that the brand never approved. The scrim under the type is the only gradient the brand permits. Backgrounds are one of three things, and photography is the third: flat Off Black, flat white for print and letterhead, or full-bleed monochrome. No patterns, no textures, no illustration, no noise.

No emoji. Anywhere. Not in brand material, not in product UI, not in copy, and not in a commit message that ends up in release notes. The only non-alphanumeric glyphs the brand sanctions are the multiplication sign for a close control and the brand's asterisk for footnotes. This is the one voice rule with a grep behind it. CI scans the source and fails the build, because a design system that only asks nicely gets one eventually.

There is no solid variant. An opaque fill can only be right on one surface, and these chips have to read on the page, on a card and in a table cell. The status variants are functional, not categorical. Reach for success when something has succeeded, never because green suited the row. The brand chip's ink is primary-300 and not pure magenta, because magenta on its own tint is 4.37:1 and the brand forbids magenta text below 15px bold.

The bar is aria-hidden, so the title has to carry the message with the colour ignored entirely. "Upload failed." beats "Error." The neutral variant takes a grey bar instead of none, so a mixed stack keeps its left edge. Pass onDismiss to get the close control, and omit it for a static alert.

Hover a row for the 6% white wash. The second row is data-state="selected", which takes the magenta tint. Never a coloured border or an edge accent, both of which the brand rules out. Because the cells carry no fill there are no fill collisions. A Badge, a Separator or an unchecked Switch reads correctly in any column, which the gapped-tile treatment could not promise.

Below the rule.

The header is `static` here only so the gallery can scroll past it. On a page it is sticky and the hero's art layer starts at its top edge, so the render shows through the glass at rest. The marquee takes real logos as images — white on transparent, fitted to one box — and this one renders text tiles through the `item` snippet.

No uppercase, no mono and no eyebrows on a landing. The page has four sizes of type; a tracked label is a fifth. Inside a mock screen the scale drops again — 15px bold titles, 11 to 13px text, 10px tags — because a mock is a picture of a product, not the page.

Rules learned the expensive way. Nothing plays until it is on screen. Rotating rows never use rise — the stagger leaves a hole — they use Svelte fly, flip and fade. A reveal is opacity only, because a translate on it makes every anchor scroll land short. And when several things on a page rotate they share one beat and take turns, so only one thing is ever moving.

Clicking a step is the only control — no hover pause, no pause button, both tried and removed. The mock is decorative; the step list and the callout carry everything it shows. Under reduced motion the timer is off, not fast: a 0.01ms fill would advance every step in one frame.

The screen runs off the card's bottom edge on purpose — design the mock to be cut. Two surfaces and no borders: card over page, page colour inside. One sentence per card, as an h3, with a full stop; the mock shows the thing and the sentence names it.

SectionHead above it is the h2 and lead every section opens with, and mt-section is the rhythm between blocks — here overridden to zero because the gallery section already spaced it. Sentence case, a full stop, 26ch, balanced. No eyebrow above it; the landings removed every one.

UI is built on `@engineio/ui`. Read `node_modules/@engineio/ui/AGENTS.md`
before writing or reviewing any UI.

Point at the path. Do not copy the rules into a repo; the copy goes stale on the next version. The repo also carries a Claude Code skill that is only that pointer.