Throughline, on one page.

A cream page with ink type: a Pangaia serif for every headline, the payoff phrase in italic, and Figtree for everything that explains. Big rounded bands in ink and deep green stack the page, lilac is the one action colour, and speech itself is the ornament.

Style only from these tokens. In code the same system is installed as .claude/skills/throughline-design-system, where a gate keeps every page on them; here it is the reference for decks, designs and anything else Claude makes for the brand.

To change anything here, leave a comment on the token or the section and send it to Claude: it comes back as a new locked version, here and in the code. Edits made directly on this page are not part of the lock.

Build what each piece needs from these tokens, new parts included: the recipes below are examples of the brand, not a kit to assemble. Start from who the piece is for and the one thing it must say, then compose.

It is: warm, editorial, playful, assured, human. It is not: cold, techy, glossy, corporate, cluttered.

The Stickers group holds a student's annotation stickers, kept apart from the brand elements: Key (★ on the House block); New to me (! on the Leaf block); Got it (✓ on the Stack block); Disagree (✗ on the Cross block); Love (♥ on the U block); Look again (eyes on the Note block); Connects (arrow on the Bubble block). Use them only as a student's marks on an idea, exactly as the files draw them; the group's README has their rules.

• Link tokens.css. Copy project/tokens.css and project/fonts/ into the canvas side by side (e.g. ds/throughline/tokens.css and ds/throughline/fonts/), then put only <link rel="stylesheet" href="ds/throughline/tokens.css"> in each artboard's <head>. It holds every token, Figtree from Google Fonts and PP Pangaia from the relative fonts/ folder. Add no other font link.
• Link components/bundle.css only for mounted components, i.e. when the canvas renders this page's React components from components/bundle.js. Copy it into a components/ folder beside fonts/ (e.g. ds/throughline/components/bundle.css): it loads Pangaia from ../fonts/. It carries the same tokens plus the components' utilities, so a canvas that links it needs nothing else.

• Ground and measure: cream --background, ink --foreground. Content sits in --lay-page with --lay-gutter margins; the hero takes --sp-chapter above, every band --sp-section of padding, tight ones --sp-region. Running text never runs wider than --ms-md; a lead holds --ms-sm.
• Full-width bands, every second one dark: --inverse-surface with --inverse-foreground or --brand-base with --brand-contrast; corners at --r-containers, the nearest token to the site's larger ones. One stacked pair is the site's own: the ink proof band runs straight into the green number band, the green overlapping the ink. Never two ink or two green bands together.
• Type stack: --font-display at --weight-regular for every headline: --text-display for the hero, --text-h1 for a closing band, --text-h2 for section titles, --text-h3 for feature titles. --font-sans for everything that explains: --text-lead under a title, --text-body for running text, --text-small for captions and legal. The serif is never bold; the sans is never a headline.
• Italic emphasis: a page headline carries one italic phrase, the payoff: the last two or three words or the second line. Wrap it in headline-payoff. One italic per page headline, never a whole one; sub-heads stay upright (The challenge:); body text is never italic. Only the upright Pangaia is loaded, so the browser synthesises the italic.
• An eyebrow stands above a section title: the eyebrow recipe at --text-micro, uppercase by --case-eyebrow, --ink-eyebrow on cream, the band's text colour on dark; --sp-stack-xs above the title. Two sections open with the headline alone: the green number band and the beige trust panel. Eyebrows label sections and footer columns, never a card, a panel or a photo.
• Section openers are centred: eyebrow, headline, one lead at --text-lead in --ms-sm, then a single action, stacked at --sp-stack-sm. What follows splits left and right: a panel or photo card on one side, a serif --text-h3 title with --text-body on the other, two equal columns at --sp-stack-md gap, centred vertically.
• Feature rows use the feature recipe: a beige panel (--card, --r-containers) or a photo card holds the demo, the title sits beside it. The first feature band is three columns (feature-three): the step list left, the photo card in the middle, the title right. A step list keeps one feature-step-on in --foreground and dims the rest to --text-secondary: ink marks the active step, never a bar.
• Numbers are typography: a statistic is the stat recipe, --font-display at --text-h2 (or --text-h1 in a key-results rail) with a --text-small sans caption beneath in the same ink. Never bold, never the sans, never a chart where one number makes the point.
• Testimonials are a scattered field, not a grid: on an ink band, testimonial cards on alternating grounds (--background, --card, --primary, --brand-base, --palette-base-color-glow, --palette-base-color-flare), each rotated a few degrees either way and some straddling the band's edges; quotes in the serif at --text-lead, attribution in --text-small beside a round mark.
• The FAQ is one rounded container (--r-containers) split in two: questions on --brand-base in --brand-contrast, the open question lifted on a lighter pill (a color-mix of --brand-base with --brand-contrast), answers on --card as a chat reply with the grasp-mark beside it. Above it, a two-word serif title with an italic payoff (Good questions.).
• Every page closes the same way: a photo-band on one of the four kept photos with a cream serif title at --text-h1 and an italic payoff, a lead and one lilac action; then the footer: two product tiles, four link columns under eyebrows, the grasp-logo lock-up (mark then word) at --lay-page width, the legal line and the social glyphs.
• The nav floats: a cream bar (navbar recipe) with a hairline ink border and --r-inline corners, hugging its content and centred, repeating at the top of every viewport; the Grasp logo left, a segmented product switch on --card with the active segment in cream (--r-chip), text links at --text-body --weight-semibold, the lilac action right. Above it, the green announcement line.
• Photography: the four kept photos are warm, motion-blurred figures. They are cropped into cards at --r-containers or into the closing band, never shown square-cornered or small. Type on a photo is cream only; the speech-wave or the flow-pill is the only overlay ornament, and a 15% ink scrim goes under type on photo-flow-card alone.
• Interaction: menus, dialogs, selects, tabs, tooltips and toggles come from shadcn/ui in components/ui, dressed by the tokens: --popover surface, hairline, no shadow, a --ring outline at --sp-optical offset on focus, --primary for the chosen state (popovers and menus follow the popover recipe and mark it in ink), --duration-quick with --ease-standard.
• Spacing follows the type scale: --sp-inset-lg inside a card, --sp-stack-xs between a title and its lead, --sp-stack-sm between lead and action, --sp-stack-lg between feature rows, --sp-section between bands. Buttons are --ctl-lg tall with --sp-stack-sm side padding. Nothing is spaced by eye.

• Lilac --primary is the one action colour: the primary button (action recipe: --primary ground, --primary-foreground text, hairline ink border, --r-controls, --ctl-lg tall), the annual toggle, the chosen plan tag, the Dictation product tile. One lilac action per view; it never colours text, icons or a band.
• Deep green --brand-base is a surface, never an accent: the announcement line, the number band, the FAQ question panel, the ROI panel, the Notetaker tile. Text on it is --brand-contrast; it never appears as a text colour, a button or an icon tint.
• Ink --inverse-surface bands carry the proof: client logos, testimonials, case-study meta, the business hero. Logos on ink are cream, type is --inverse-foreground, and lilac appears there only as a button or a testimonial card ground.
• Orange --palette-base-color-glow is for the New badge (tile-new: a pill with ink text) and one testimonial card; coral --palette-base-color-flare for one testimonial card and the Free plan tag. Both stay small and few: never a band, never a button, never text.
• Secondary actions: action-ghost on --background with --foreground text and the same hairline ink border, radius and height; action-ink (--interactive ground, --interactive-foreground text) only inside pricing cards. Links with a chevron do the rest; there is no third button style.
• States are quiet: the site changes nothing on hover or press, so a hover is at most a color-mix darkening of the ground by 8% --foreground over --duration-quick --ease-standard; focus is a --ring outline offset by --sp-optical; active matches hover. Nothing lifts, nothing glows: every shadow token is none.
• Two text tones only: --foreground for titles, body and links; --text-secondary for captions, dimmed steps and the eyebrow (--ink-eyebrow). No third grey, no tinted text.
• Semantic colours (--success, --warning, --destructive and their -muted grounds) live inside product UI only: form validation, alerts, admin states. They never appear in a marketing band, a card or a headline.
• Compliance stamps (stamp recipe) are hairline circles in ink at half strength on cream, --brand-contrast on green, with the label in a serif line beneath. Never filled, never coloured, never a logo lock-up.
• There is no brand dark mode; the dark block in the tokens is derived by rule. Prefer the site's own answer: a dark passage is an ink or green band inside a cream page, not a theme switch.
• Charts: one data line in --chart-1 on a --background card with --text-small axis text and no fills; the number it supports sits above it in the serif. No multi-colour series in marketing.
• No gradients and no tints in marketing: every ground is one flat palette colour. The gradients the site paints live inside the product demo (word highlighting) and the language card; they are content, not brand surface.

• No box-shadow anywhere: cards, buttons, the nav and popovers sit flat on their ground; depth comes from a darker band, a hairline or a tilt. Every shadow token is none and the site has no box-shadow on any card or button. A shadow turns the flat cream-and-ink page into a generic SaaS template.
• No gradient paints on bands, buttons, cards or text; every surface is one flat palette colour. The only gradients on the site sit inside the product demo (word highlighting). Brand surfaces are flat cream, beige, ink, green and lilac.
• The serif is never bold or semibold: headlines, numbers and quotes are regular-weight Pangaia; emphasis is one italic phrase, not weight. Every display and heading step on the site is weight 400; a bold Pangaia reads as a different, heavier brand.
• Section and page titles are never set in --font-sans and never all caps or title case; the sans is for body, eyebrows, buttons and product UI, uppercase for the eyebrow alone. The serif sentence-case title over a sans body with one small uppercase eyebrow is the whole voice of the brand; a sans or capped headline makes it any other AI tool.
• Lilac --primary never colours text or icons; it is a ground for buttons, tiles, tags and the underline stroke only. Lilac on cream fails contrast and the site never does it; lilac is where you click, not what you read.
• Buttons are --r-controls rounded rectangles, never full pills; the pill radius --r-chip is for tags, the product switch and the Flow pill only. The 8 px button beside pill-shaped tags is the site's control contrast; pill buttons flatten it into a template.
• No blue anywhere: links are ink, focus is the --ring ink outline, charts use --chart-1. The browser's blue focus ring is replaced, never kept. The palette has no blue and the site's focus colour was answered as ink. Blue links or rings read as unstyled.
• No coloured bar down the left edge of a card, quote or list item; a pull quote takes a hairline in --border, an active step is marked by ink against --text-secondary. The house rule bans edge accent bars; the site's one coral step marker is translated into weight of ink so the gate and the brand agree.
• Photos are never filtered, tinted or recoloured; the blur is in the file. Over type, at most a 15% ink scrim. Only a viz's stickers cast a drop-shadow, by depth. The warm motion-blurred photography is shot that way; a CSS filter or colour overlay turns it into stock. A sticker's shadow follows its cut-out, which only a drop-shadow can draw.
• Rotation is for testimonial cards and plan tags only; headlines, panels, bands, buttons and photos are never tilted. The scattered tilted cards work because everything around them is square to the page.

• Section band: The page's section unit: a full-width band padded --sp-section top and bottom, its content in band-inner at --lay-page with --lay-gutter margins. Plain band is cream; band-ink and band-green are the dark bands, rounded on every corner at --r-containers. band-tight pads --sp-region; band-centre stacks a centred opener at --sp-stack-sm; band-signoff holds the grasp-logo lock-up at content width as the footer sign-off. Markup: section.band.band-ink › div.band-inner.band-centre › content.
• Eyebrow label: The uppercase label above a section title and over each footer column: --text-micro sans, uppercase by --case-eyebrow, tracked by --tracking-eyebrow, --ink-eyebrow on cream. On a dark band add eyebrow-inverse (cream) or eyebrow-green (the green band's text); in a deck add eyebrow-deck (--text-caption). One line, two to four words, --sp-stack-xs above the title. It labels a section, never a card, a panel or a photo; the green number band and the beige trust panel carry none. Markup: p.eyebrow.
• Serif headline with italic payoff: Every title: --font-display at regular weight with one italic payoff phrase wrapped in em.headline-payoff (the last words or the second line), optionally underlined by the lilac stroke with headline-underline on the same em. headline is --text-h2 (section titles); headline-display the hero at --text-display; headline-h1 the closing band; headline-h3 a feature title, a FAQ panel header or an upright sub-head. headline-inverse and headline-green set the dark bands' text colour. Markup: h2.headline › text, then em.headline-payoff.headline-underline.
• Floating nav and announcement line: The header: navbar-announce is the full-width --brand-base line with one cream sentence and a chevron link; navbar is the cream bar floating beneath it, hugging its content and centred, with a hairline ink border and --r-inline corners. Inside: the Grasp logo in navbar-brand, a segmented product switch (navbar-switch on --card, the active segment cream at --r-chip), text links in navbar-links at --text-body --weight-semibold, then the lilac action. Markup: header.navbar-header › div.navbar-announce, nav.navbar › navbar-brand, navbar-switch, navbar-links.
• Feature row: A feature row: a demo panel on one side, a serif --text-h3 title and --text-body on the other, at --sp-stack-md gap. feature-panel is the beige panel (--card, --r-containers, --sp-inset-lg); feature-photo a photo card at --r-containers. feature-three adds a third column for the step list (steps, panel, title). A step list is feature-steps of feature-step lines (serif --text-lead, dimmed to --text-secondary) with exactly one feature-step-on in --foreground; feature-deck-step is the deck size. Markup: div.feature › feature-steps, feature-panel, feature-copy.
• Serif statistic: A number as typography: stat-value in --font-display at --text-h2, regular weight, with stat-label in --text-small sans beneath at --sp-optical. stat-big lifts the number to --text-h1 for a key-results rail; stat-row lays several in a row. Number band: stat-pair sets the two cards 1:3, stat-card is the outlined card (hairline --brand-contrast, --r-containers) and stat-topline the sentence-case sans label centred above the number; stat-deck-label is the deck size. Never bold, never an eyebrow in a card. Markup: div.stat › stat-topline, stat-value, stat-label.
• Tilted testimonial card: A quote card for the ink band: --r-containers corners, --sp-inset-lg padding, the quote in the serif at --text-lead with its quotation marks typed in (the recipe cannot add them), attribution in --text-small by a round mark. Plain is cream; testimonial-lilac, -beige, -glow (orange), -flare (coral) and -green are the other grounds; testimonial-tilt-left or -right rotates it. testimonial-case is the case-study card: quote and who left, testimonial-side right with testimonial-photo over testimonial-stats (two stat recipes); testimonial-deck-quote is the deck size.
• Compliance stamp: A circular hairline stamp for certifications: a circle sized from --ctl-xl, its line ink at half strength (a color-mix with the cream), the certification's short name in stamp-name (--text-small sans) over stamp-art, a slot for the faint line emblem (no kept file ships one yet), and the certification's full name in the serif stamp-label beneath (HIPAA Compliance, SOC 2 Type II Compliance, ISO 27001). stamp-row lays three in a line at --sp-stack-lg; stamp-green gives cream lines on a green band. Never filled, never coloured, never an adjective as the label.
• Product tile: The small product card in the footer and product lists: a beige tile (--card, --r-card-small, --sp-inset-md padding) with a square art well on the left (tile-art on lilac --primary for Dictation holding the flow-bar; tile-art-green on --brand-base for Notetaker), the name at --text-body --weight-semibold, one --text-small line, and a chevron link. tile-new is the orange New pill beside the name. Two tiles side by side in tile-row at --sp-stack-sm. Markup: div.tile › div.tile-art, div.tile-copy › div.tile-head › span.tile-name, span.tile-new; p.tile-text; a.tile-link.
• Closing photo band: The full-bleed band every page ends on: a kept photo filling a rounded frame (--r-containers), a cream serif title at --text-h1 with an italic payoff, one lead and one action centred over it. The photo goes in photo-band-media (the node carries the asset); photo-band-scrim is a 15% ink veil for photo-flow-card only, the other three photos carry cream type as they are. Nothing else over the photo but the flow-pill. Markup: section.photo-band › div.photo-band-media (asset), div.photo-band-scrim (optional), div.photo-band-copy › h2.photo-band-title, p.photo-band-lead.
• Settings popover: Every popover and menu (as shipped in View settings): white --popover, hairline ink border, --r-inline corners, no shadow, width hugs content. Rows sit --sp-inset-xs from every edge and each other, padded --sp-inset-md (text 20px in). Hovered row: popover-row-hover, lilac --primary, --radius-sm corners. Switch: ink when on (popover-switch-on), light grey off; chosen state is ink, never lilac. Single-choice lists add popover-list so rows touch. Markup: div.popover › label.popover-row › span, span.popover-switch.

Canvas. 16:9 frame, root attribute data-deck (its envelope resets the type scale). Margins --deck-frame-pad, gutter --deck-frame-gutter, gaps --deck-gap-xs to --deck-gap-2xl. Cream --background; one slide in three on --inverse-surface or --brand-base; panels at --r-containers.

1. Cover: Cream ground. Eyebrow (deck name, date) in eyebrow-deck at the top-left margin; title in headline-display with the payoff in headline-payoff and the lilac underline under it; the Grasp logo (grasp-logo) --ctl-sm tall anchored to the bottom-left margin, set from the frame's bottom edge, never stacked under the title. A photo cover (photo-closing) carries no mark.
2. Section divider: A full-bleed band-ink or band-green slide: eyebrow, then one serif line at --text-h1 with an italic payoff, left-aligned at --ms-sm. The speech-wave in cream rides across the lower third once in the deck; otherwise the slide is empty space.
3. Statement: One sentence in the serif at --text-h2, left-aligned at --ms-sm, with one --text-body sans line beneath at --deck-gap-sm; cream ground. The sentence is the idea of the slide; no bullets.
4. Numbers: One to three stat recipes in a row at --deck-gap-xl with a one-line title and nothing else: numbers at --text-display in the serif, labels in stat-deck-label. For a comparison, one number sits on a photo card and the other in the outlined stat-card (hairline --brand-contrast, --r-containers) on band-green (45 wpm against 220 wpm); both centred, label above the number.
5. Split: Left: a serif --text-h2 title and --text-body sans (at most four lines) at --ms-sm; right: a beige panel (--card, --r-containers) holding a product crop, or a photo card on photo-second-bg or photo-bg2. Gap --deck-gap-lg; the panel fills the frame height inside the margins.
6. Quote: On band-ink: one testimonial card tilted a few degrees in a palette ground, the quote in testimonial-deck-quote wrapped in quotation marks, attribution in --text-caption; or on cream a serif quote at --text-h3. One voice per slide, and nothing else on it.
7. Proof: Eyebrow Used by professionals at, then a single row of client marks in cream on band-ink, evenly spaced at --deck-gap-md and one height (--ctl-lg). Never a grid of logos.
8. Trust: Three stamp recipes in a row on cream or on a --card panel: the certification's full name in the serif label beneath each circle (HIPAA Compliance, SOC 2 Type II Compliance, ISO 27001), one sans line above or below. Never a list of certifications on a photo card; photo cards carry product UI, one number or the speech-wave.
9. Close: photo-closing full-bleed with the serif at --text-display in cream, an italic payoff, one sans line and the next step written as a line (a URL, a name), no button and no mark: the deck signed on its cover.

• One idea per slide: one headline and one of a panel, a quote card or a row of numbers; a Numbers slide carries the numbers and a one-line title only, the quote card moves to its own Quote slide.
• Every title is the serif at a deck type step with exactly one italic phrase; the sans never exceeds --text-body and four lines.
• Dark slides follow the band grammar: cream type, cream logos, lilac only on a button or a card ground; the underline stroke stays on cream slides.
• No shadows, no gradients, no rotated chrome; only testimonial cards tilt.
• Numbers are serif, captions sans; never a chart where one number makes the point.
• Photos: the four kept files only, large and cropped, cream type over them; the flow-pill appears once in the deck.
• Deck sizes only: --deck-gap-md between title and body, --deck-gap-xl between columns; the small slots take their deck variants (eyebrow-deck, stat-deck-label, testimonial-deck-quote, feature-deck-step), never web sizes.
• One eyebrow per slide, above the title; the eyebrow recipe never sits inside a panel or on a photo card in a deck.

Canvas. One portrait page (A4 or US Letter), a plain light root (no data-deck), cream --background with ink --foreground; margins --sp-region on every side; the title spans the text column, the body runs in two columns at --sp-stack-md gap. No nav, no buttons: the action is a line of text.

1. Masthead: The Grasp logo (grasp-logo) --ctl-2xs tall top-left; the document type and date as an eyebrow top-right; a --divider hairline rule beneath at --sp-stack-sm. Nothing else at the top.
2. Title: Headline at --text-h2 in the serif (not --text-h1: a ch measure scales with the type and overruns the page) with one headline-payoff phrase and the lilac underline beneath it, spanning the column, three lines at most, balanced; a lead at --text-lead sans at --sp-stack-xs below.
3. Numbers strip: A beige panel (--card, --r-containers, --sp-inset-lg) with three stat recipes in a row: numbers at --text-h2 in the serif, captions --text-small. The strip carries the proof the page is built on.
4. Body: Two columns at --sp-stack-md gap: upright serif sub-heads in headline-h3 ending in a colon (The challenge:), never headline-payoff; --text-body sans paragraphs; numbered steps as an ordered list with the number inside the --weight-semibold sans lead-in (1. Install it.), no separate digit column; hairlines under list rows only. One serif quote at --text-lead.
5. Proof: Directly after the body at --sp-stack-lg, no rule between: a single testimonial card in --primary or --card (tilted by a degree or two at most on paper) or a row of three stamp recipes with the certification names as their serif labels. One proof, not a wall.
6. Close: A band-green panel at --r-containers across the width with a one-line serif call at --text-h3 (italic payoff) and the action as a plain --text-body line: a URL or a name, never a button. The legal line at --text-small sits under it; the mark signed in the masthead and is not repeated.

• No nav, no buttons, no links styled as controls: the action is a line of text.
• Serif titles with one italic phrase in the headline only; sub-heads upright; sans body; numbers in the serif.
• Cream and ink carry the page; the lilac stroke, the beige numbers strip and the green close panel are its only colour, each once.
• A photo only as a band at the top, one of the four kept, at most a third of the page, cream type over it.
• Hairlines only under the masthead and under list rows at column width; never a page-wide rule between sections, which are set apart by --sp-stack-lg of space. No shadows, no gradients, no tilted chrome.
• Eyebrows only above a title or a column, never as a label on every paragraph.

Canvas. Long-form web page: header and media at --lay-page, running text at --ms-md with a left rail at --ms-xs; cream --background; --sp-section between header and body, paragraphs at --sp-stack-xs, sections at --sp-stack-lg; the navbar and the standard footer top and bottom.

1. Kicker and title: Breadcrumb as an eyebrow (CASE STUDY, then the subject) with a chevron between; the subject's own mark if there is one; title at --text-h2 in the serif at --ms-md with an optional italic payoff; standfirst at --text-lead; author and date in --text-small --text-secondary.
2. Hero media: A photo card or video frame at --r-containers filling the right half beside the title, on one of the kept photos; or full width below the title at --lay-page. Never square-cornered.
3. Meta band: A band-ink across the page: three or four eyebrow-and-value pairs (Featuring, Industry, Location) in cream, --text-micro over --text-small, spread across the width at --sp-stack-lg gaps.
4. Key results rail: Left rail: Key results as stat recipes stacked at --sp-stack-md, numbers at --text-h1 in the serif (stat-big), captions --text-small; below them one lilac panel (--primary, --r-inline, --sp-inset-lg) with a serif --text-lead line and the actions, sticky as the reader scrolls.
5. Body: Right column at --ms-md: serif --text-h3 sub-heads that end in a colon, --text-body sans paragraphs, --weight-semibold lead-ins on bullets and numbered steps, underlined ink links. Steps carry a row of app marks --ctl-sm tall on the right, separated by --divider hairlines.
6. Pull quotes: A serif quote between sections at --text-lead and the name in --text-small --weight-semibold beneath. One every two or three sections; the quote is the subject's voice, never the brand's.
7. Trust: Private and secure: a serif --text-h3 heading, two sans lines, three stamp recipes in a row, a ghost action (Learn more) beneath.
8. Close: The photo-band on photo-closing with a two-word serif title (Start flowing), a lead, the lilac action and a ghost action; then the standard footer.

• Running text is always the sans at --text-body and never wider than --ms-md; the serif is for titles, sub-heads, numbers and quotes.
• Sub-heads end in a colon (The challenge:, The solution:, The results:).
• Numbers in the rail are the serif at --text-h1; never repeat them as a chart.
• Inline links are underlined ink; chevron links only in the rail and the close.
• One photo card in the header; product crops only as cards at --r-containers; no bare images between paragraphs.
• No sidebars of related content; the rail holds results and one action panel.

Canvas. Content --lay-page in --lay-gutter margins on cream --background; sections are bands at --sp-section padding, the hero --sp-chapter above; dark bands on --inverse-surface or --brand-base at --r-containers; the announcement line and floating navbar on top; splits stack on mobile.

1. Header: navbar-announce in --brand-base with one cream line and a chevron link; the navbar floating below it: logo, product switch, text links, the lilac action.
2. Hero: Centred: eyebrow, headline-display with the second line italic, lead at --ms-sm, one lilac action, a --text-small availability line. The speech-trail full-bleed at the hero's foot with the flow-pill on the junction; --sp-chapter above the eyebrow.
3. Proof band: band-ink with the eyebrow Used by professionals at and a single row of client marks in cream, one height, evenly spaced; its rounded corners sit just below the hero, and the green number band follows straight on, overlapping its foot (the site's one stacked pair).
4. Headline number band: band-green, no eyebrow: the headline at --text-h2 in cream with an italic payoff, a lead, then stat-pair (1:3): the outlined stat-card (hairline --brand-contrast, --r-containers) against a photo card on photo-flow-card with the speech-wave and the inverted flow-pill. In each card a sentence-case sans label (Keyboard, Flow) is centred at the top, the serif number centred beneath.
5. Feature rows: The first feature band is feature-three: the step list (feature-steps, one feature-step-on in ink, the rest in --text-secondary) left, the photo card in the middle, the serif --text-h3 title and --text-body right. Later rows are two columns with the panel alternating left and right; the two beige swooshes bleed behind the band.
6. Headline and list: Centred eyebrow and --text-h2 headline with the lilac underline under its payoff, a lead, one action; then feature rows of beige demo panels (language pill, snippet) with titles on the right, inactive ones in --text-secondary.
7. Trust panel: A full-width beige panel (--card, --r-containers) with no eyebrow: serif --text-h3 title with an italic payoff on the left, two sans lines and an action-link in the middle, three stamp recipes on the right with the certification names beneath.
8. Testimonial field: band-ink: eyebrow, --text-h2 cream headline with an italic payoff, then at least five testimonial cards scattered and tilted across the band over all six grounds, two carrying a photo, two overlapping the band's edge. A case-study card is testimonial-case: a palette card with the photo in its right half and two stats beneath it, never a photo card.
9. FAQ: Eyebrow FAQS and a two-word serif headline (Good questions.), then the split container: the green question panel headed Questions and the beige answer panel headed Answer, each header in headline-h3 in the panel's text colour; the answer panel echoes the open question in a small --background bubble at --r-inline above the reply bubble with the grasp-mark.
10. Close and footer: photo-band on photo-closing with a cream --text-h1 title, lead and lilac action; the footer: Products eyebrow, two tile recipes (lilac art with the flow-bar, green art for Notetaker with tile-new), four link columns under eyebrows, the grasp-logo lock-up (mark then word) at --lay-page width in band-signoff, legal line and social glyphs.

• Alternate grounds: dark bands sit between cream, except the site's own stacked pair (ink proof band straight into the green number band); never two ink or two green bands together, never two beige panels without cream between.
• One lilac action per band; secondary actions are ghost buttons or action-link chevron links.
• Every page headline is the serif with one italic phrase; every section has an eyebrow except the green number band and the trust panel.
• Photos only in cards at --r-containers or the closing band, cream type over them.
• Tilt only testimonial cards and plan tags.
• The speech-trail once, in the hero; the speech-wave once per band; the flow-pill once per view.
• No shadows, no gradients, hairline borders only; the floating nav is the one overlay.
• Mobile: splits stack, bands keep --r-containers, the nav keeps its pill switch and the lilac action.

• Use the files in Logos as they are: the-grasp-lock-up-the-speech-bubble-mark-with-th.svg, the-grasp-mark-an-ink-speech-bubble-head-holding.svg, the-word-grasp-ink-as-exported-from-figma.svg. Never redraw, stretch or recolour a mark; leave clear space of half its height.

• The brand's own icons are in Icons (5): one set, one stroke. In code, inline the SVG with currentColor so it takes the text colour; never mix in another set.