Design system

The .bleed layer expands to a full-bleed on scroll (motion.js) while the sky and clouds move in parallax. Use it for one headline release. motion.js finds it by id (bannerCard, bleed), so there is one per page; for a list of releases use ReleaseCards. title/sub: arrays of authored lines (no <br>: each line is a span that sets as a line where it fits; in a phone container the title's lines stay whole as phrases and the subline's run together and balance, components.css); cta: { label, href }.

At 991px and under the groups fold into an accordion (motion.js [data-fgroup], fold()). Do not place it in a page; edit the data to change its links. For a call to action band on the blog use blog/CtaBand. No props; reads footer and social from src/data/footer.js and legal from src/data/site.js. A string item links to '#'.

Use it for a page that opens on one statement. /products opens with product/Hero and the blog with blog/BlogHero instead. center: a product page's opening instead, everything centred in one stack (eyebrow, serif headline, lede, buttons), as on the claude.com product pages; each part rises in turn. title: string with [[word|/href]] markup for underlined links; lede: string; center (default false); eyebrow and actions ([{ label, href, variant }], the first ink and the rest soft unless they say) for the centred stack; badge (a pill over the headline, in place of the eyebrow) and note (fine print under the buttons), both optional. split: the words on four columns beside the page's own picture (the media slot, eight columns), the actions stacked, and an optional row of ways (ways: { label, items: [{ icon, label, href }] }) across the foot; centred, with the picture under it, on a narrower page, and the picture left out on a phone.

A row's rule draws on hover while the other rows dim (motion.js [data-row]); heading and list rise in on scroll. Use it for a short index of links under one statement. For blog posts use blog/PostGrid; for release cards use ReleaseCards. statement: string; rows: [{ title, tag, href }].

Base renders it once on every page; motion.js opens it from Nav's burger (1180px and under) and closes it if the window grows past that. Do not place it in a page, and not for page content: a page's drawer or modal is Sheet. No props; reads nav and mobileButtons from src/data/nav.js and menuLabel from src/data/site.js. A string item links to '#'.

At 1180px and under the links give way to the burger, which opens MobileMenu. Do not place it in a page; a section's path and pages go in Crumb. No props; reads nav and ctaMenu from src/data/nav.js and cta from src/data/site.js. A string item links to '#'.

Cards lift on hover (motion.js [data-card]) and rise in on scroll; three across only where each body keeps 34+ characters a line, else two (an odd last card spans the row) or one; a row shares one anatomy (title, body, details, button). Use it for the latest few announcements. For one headline release use Banner; for blog posts use blog/PostGrid. heading: string (default 'Latest releases'); items: [{ title: [phrases], body, date, category, details: [{ label, href }], href }]. A title's phrases stay whole (.phrase): they share a line where they fit and break between each other first.

Use it once at the top of /blog, under the Crumb, with PostGrid below: a category link filters that list (blog.js), and so does /blog#<slug>. Not for a post page (/blog/<slug> builds its own title block) or other sections: the home page uses Hero, /products uses product/Hero. No props; reads blog.title, blog.intro, blog.cta ({ label, href }) and blog.categories ([{ label, slug }]) from src/data/blog.js.

The list is rendered twice; motion.js drifts the track by half. Use it on /blog under BlogHero, fed the ten newest posts (recent in src/data/blog.js); each item links to /blog/<slug>, and hover brakes the drift. For the full, filterable list use PostGrid; for a post page's related posts use RelatedPosts. items: [{ slug, title, date }], required (no default).

The drawing is src/lib/chart.js: the server draws it at the figure's design width, blog.js draws it again at the width each plot really has (and on every change of that width), so labels keep their size, every category stays visible down to a 320 phone, and a bar chart too narrow for its names turns its bars sideways. Hover and tap tooltips live in blog.js. Use it for a { type: 'chart' } block in a post body on /blog/<slug>: the page spreads the block into props, inside a <figure> with the caption. It draws data series only; for a picture or a diagram use an image block. Props: kind (default 'line'), title (''), x ([]), series ([{ name, values }], default []), panels ([{ title, series }], default null), unit (''), decimals (1), yMax (null), sharedY (false), width (default 'column'; 'bleed' sizes like 'full'), id ('', sets the element id).

Use it as the last section of /blog and of every post page (/blog/<slug>). The form does not submit anywhere yet (onsubmit returns false). For a call to action inside a section use Button; this band is the blog's page ending, not a module for other pages. No props; reads blog.band ({ heading, actions: [{ label, href, variant }], newsletter: { title, body, placeholder, fine } }) from src/data/blog.js.

Without an image there is no media slot and no stand-in: the card is one text column, its button beside the copy where the card is wide enough (blog.css). Use it on /blog, between PostGrid and CtaBand, to point at one piece outside the post list (a guide, a playbook). To link a post use PostCard; for the page's closing call to action use CtaBand. No props; reads blog.featured ({ label, title, body, cta: { label, href }, image?: { src, alt } }) from src/data/blog.js.

PostGrid renders it, so do not place it yourself. blog.js folds the rows (the shared accordion from motion.js) and filters and sorts PostGrid's cards by the groups labelled Sort by, Category and Product; when the sidebar collapses, PostGrid's filter button opens it as a popover. No props; reads blog.filters ([{ label, options, type: 'radio'|'check' }]) from src/data/blog.js. A radio group starts on its first option.

n picks one; they are placeholders for real art. Four drawings that repeat (n 5 draws n 1); the stroke is currentColor and the SVG sets no size, so the parent sets its color and size. Used in PostCard, a post page's hero tile and its image blocks without a src, and through Tile's art. For a colored tile with the squiggle texture use Tile (it takes art); for interface icons use Icons. n (default 1).

Lifts on hover (motion.js). Where blog.js marks it data-orphan (the odd last card of a two-across list), it spans the row with its tile beside its text. Use it inside a .post-grid: PostGrid renders one per post on /blog (blog.js filters, sorts and pages them), RelatedPosts on a post page. The cover is the post's own wherever the card sits, the same as the tile on its page; no list assigns it. For a lab experiment use LabCard; for the moving strip use Carousel. post: { slug, title, date, category, product }, required; index (default 0), written to data-index.

Use it once on /blog (its ids are fixed), fed every post. blog.js searches, filters, sorts and pages it, and shows blog.empty when nothing matches. For a short fixed set of posts use RelatedPosts; for the moving strip of recent posts use Carousel. posts: [{ slug, title, date, category, product }], required; each card wears its post's own cover. Also reads blog.search, blog.pageSize and blog.empty from src/data/blog.js.

It shows the category, product, date, reading time and a Copy link action (blog.js copies the page URL). A detail with no value (a post with no product) is left out rather than shown empty. Use it once in a post page's header (/blog/<slug>), after the lede. For a post in a list use PostCard. post: { category, product, date, minutes }, required.

Use it on a post page (/blog/<slug>), before the CtaBand; the page passes up to four other posts, same category first. For the full, filterable list on /blog use PostGrid; for the moving strip of recent posts use Carousel. posts: [{ slug, title, date, category, product }], required; each card wears its post's own cover, the one it wears in the post list and on its page. Also reads blog.related ({ title, body }) from src/data/blog.js.

It goes nowhere yet (placeholder): submitting keeps you here. The last section of /products, after the FAQ; once per page (product.js [data-ask-bar] blocks the submit and sends on Enter). Not a working form or a general call to action: for a link or button use Button.astro; the blog's closing band is blog/CtaBand.astro. No props; reads page.ask ({ title, lede, placeholder, label, href }) from src/data/product.js.

A /products section, after Quotes; once per page. Its button opens the drawer (Sheet.astro, id capsDrawer); product.js runs the map. For the three columns alone use Trio.astro; the map is Constellation.astro, which only this section places. No props; reads page.change ({ title, items, see, drawer }) and capabilities ({ groups: [{ id, label, items }] }) from src/data/product.js.

Where the shell is too narrow for a radial drawing to keep clear of its own lines (product.css, --cq-map) the same groups are drawn as headed lists instead. Both drawings are aria-hidden: screen readers get one list of every capability with its line of copy. Only placed by Change.astro on /products, once per page. Not the place to read the capabilities: the drawer in Change.astro (Sheet.astro) lists them with their copy. No props; reads capabilities ({ center, groups }) from src/data/product.js and mapLayouts and mapEdges from src/data/product-map.js.

Role tabs, then the day (8AM, 12PM, 4PM) for the chosen role. Every role's deck is rendered here; switching role swaps which deck is live (product.js). The /products section under the hero (id work); once per page. Not for opening one use case by role and task (use Picker.astro), and not on any other page or twice on one: product.js drives one by id. No props; reads page.work, page.picker.roleLabel, roles, days, apps and deckTiles from src/data/product.js.

Under the stage: the video card, then the three columns. Wide: rings orbit; <=1180 the outer ring goes; <=599 the inner ring becomes one strip scrolling left. The /products hero, once per page. For the site home hero use components/Hero.astro; for the blog's, blog/BlogHero.astro. No props; reads page.hero, page.trio (Trio.astro), heroTiles and tasks from src/data/product.js.

The stack shows the role's three use cases (front one opened as a file window); drag the front card or use the arrow keys to cycle; click it, press Enter, or pick a task in the rail to open the use case. The task rail lists the chosen role's tasks, so neither rail runs past the stack. The rails drift apart slightly as the section scrolls past. <=1180: sentence and stack only. A /products section, once per page (product.js [data-picker]); the use case opens in a Sheet.astro modal. Not for a plain choice or a dialog elsewhere (use Menu.astro or Sheet.astro), and not to walk through one role's day (use Day.astro). No props; reads page.picker, page.hero, page.work, roles, tasks, apps and deckTiles from src/data/product.js.

Then square media on the left, the quote on the right with the name pinned to the bottom, a player, and arrows; side by side down to a 900 shell (the quote on seven columns under a 1068 shell), then the media in a landscape crop over the quote at its measure. Play reads the quote karaoke-style: it dims, and each word darkens as the clip passes it. The clip is a placeholder: the player keeps time and the waveform is a working seek slider, but no audio is loaded. A /products section after Day, once per page (product.js [data-quotes]). Customer quotes only: for a marquee of posts use blog/Carousel.astro. No props; reads page.quotes ({ label, play, pause, seek, prev, next, items: [{ text, name, role, length, tile, art }] }) from src/data/product.js.

They rise in on scroll; no hover. For /products only (product/Hero.astro and Change.astro; styles in product.css). On the brand pages a three-up is the page's own .three grid. items: [{ title, body }]; level: the heading level of each title (default 3; the hero passes 2).

It opens on the empty light ground, so the first frame rendered here is that ground at the name's framing. Once per page, as the /brand hero; the page must also load brand-motion.js, which runs the two BrowserMini windows the film opens. For one move with its own control use MotionStage.astro; for the nav fold in a browser window on its own, BrowserMini.astro. reel: { label, controls: { pause, play, aria }, nav: { aria, v2, v3 } }, all copy (story.reel in src/data/brand-story.js); no default.

One component for every place the nav fold is shown: the v2 study on /brand/motion and the hero film on /brand. Not for a stage on its own: a fold, dot or bridge with its control is MotionStage.astro (this wraps one, with no control). id: the stage's id; scene: fold (default) | fold-v3; aria: the scroll area's label; label: the logo's label; class: extra classes

Dimensions are the artwork's own numbers (viewBox units, from brand.logo.geometry); labels are mono, dimension lines take the accent. For the construction section of /brand/identity. Not the logo in use: place the mark with Mark.astro and the name with Wordmark.astro; the mark at each size is LogoOptical.astro. notes: the prose for each figure, [construction, clear space], set under its own figure (on the figures' columns where they sit side by side). Reads brand.logo.geometry and brand.logo.figures from src/data/brand.js and draws #mark-sym (MarkSymbol.astro, in Base). [x1,y1,x2,y2,label,lx,ly,anchor]

Light and dark ladders side by side, for the optical-size section of /brand/identity (the page must load brand.js). Not the logo in use and not for any other page: place the mark at one size with Mark.astro and the name with Wordmark.astro; for the construction and clear space use LogoConstruction.astro. notes: the prose for each ladder, [light, dark], set under its own ladder (on the ladders' columns where they sit side by side). Reads brand.logo.ladder from src/data/brand.js and the sizes from the spec-sizes token in tokens.json.

The first frame is rendered here at build time from the same code, so the page reads correctly before any script runs. For every moving logo on /brand, /brand/identity, /brand/motion and /brand/messaging (the page loads brand-motion.js). Not for the nav fold in a browser window (BrowserMini.astro), the /brand hero film (BrandReel.astro) or a still logo (Mark.astro, Wordmark.astro). Props, with defaults: id, label, scene (fold), frame (plain), centered (false), start, autoplay (0), back (true), controls (true), title, vb, class. The default slot is the stage's note: it sits in the caption under the control (beside the stage, for a square one with room).

One component and one role on all four brand pages, for a centered moment and a working piece alike, so peer sections read as peers: every title is the same size at a given width (--fs-cat up to --pdp-head-fit; a long one balances into more lines, it never shrinks), on the section's axis: centered over statements, lists and tables, at the start in a section that holds a live demo and where the copy runs left on a phone (brand-pdp.css .head). Titles pass through glue() (src/lib/glue.js). Not for a page's own title (the hero's eyebrow, h1 and lede) or a card's title (h3 in a tile, tenet or trait). title: the heading; tag: the label above it (optional); size: 'xl' sets a closing statement at the banner size.

The control is the system's outline button (base.css .btn). MotionStage renders one in each stage's caption, the control and its readout as one group from the stage's start edge (on the hero's axis under a page hero's stage); use it on its own only beside a stage with controls={false}. Not a general button (use Button.astro). Labels come from brandSection.controls[kind] (src/data/brand-section.js); brand-motion.js drives them. id: the stage's svg id; kind: fold (default) | dot | bridge; class: extra classes on the row dir: the stage's resting direction (1 folded or built, -1 open or on the dot; default -1)

Use it in the /lab grid, one per experiment from getLab() (src/lib/lab.js); it links to that experiment's player at /lab/<slug>. For the experiment's own page use LabPlayer; for a blog post use PostCard. Labels come from lab.card in src/data/lab.js. exp: { slug, title, summary, kicker?, aspect (default '16/9'), cardUrl, posterUrl, latest, versions: [{ id, name, date }] }, required.

Play (on the stage or on a version's card) opens that version as its own full page, /lab/<slug>/<version>/, so it runs in its native full viewport on any device; the browser's Back returns here. The version menu, the cards and ?v= select. Behaviour in src/scripts/lab.js. Use it once on /lab/<slug>; it renders the h1 and, when there is more than one version, the versions list. For the /lab catalogue use LabCard. exp: an experiment from getLab() (src/lib/lab.js): title, summary, kicker?, aspect (default '16/9'), requires?, inputs?, latest, versions [{ id, name, date, build?, scene, summary, url, stillUrl, thumbUrl }]. Labels: lab.player in src/data/lab.js.