The hues are chosen to be seen: a dot, a bar, a glyph, a filled surface. Read as words on their own tint, three of the four fall under 4.5:1 — orange-400 on orange-50 is 2.13, which is the suggestion of a sentence. So each hue has an ink a few steps darker, and StatusPill writes with it. Ratios are measured against the tint beside them.

The kit's text jobs, all in Urbanist at 700 from the register itself, never a class. Display is the page's one h1 (text-hero, 64 → 80, 1.1, −0.06em); Statement a section's headline (text-statement, 40 → 48); Heading any other on the six mk-h registers (80 · 64 · 48 · 40 · 32 · 24). A title is a string or segments: accent words in the heading gradient (or -alt, peach, violet), a 32px inline icon, a line break. Lead is 18/25.2 in --mk-secondary, 512px wide. Kicker is the violet eyebrow chip — 12/16 violet-500 on violet-50, padded 2/8, or 4/16 over a hero — or a caps line in violet-700.

Four fills, two heights, a hairline border on each: primary (ink) and secondary (white, ink/10 border) on a light ground; on-dark (white) and ghost-dark (white/20 border) on an indigo one. lg is 56px with 40px sides, sm 40px with 24. Hover fades primary and on-dark to 80%; a press drops 1px; focus is a 3px violet ring. The first kit's names still draw these — ink → primary, outline → secondary, light → on-dark, md → sm — and ghost stays its arrowed text link.

A full-bleed ground: paper, beige, beige-light, the two flat indigos, or any --gradient-* token by name — the same vocabulary SplitHero, GradientCard and Slab take. A dark ground turns its text white, re-points --muted-foreground at white 75% and sets the private --mk-lead switch Lead reads, so a Lead or the wordmark follows without a prop; a light surface inside (a glass face, a neumorphic card, a white window) takes ON_LIGHT, which resets --mk-lead and --muted-foreground and gets both greys back. corners rounds the named edges at 36.4 (19.6 below 640px); tone is the first kit's name (ink is the navy).

The glass bezel a mockup sits in, in four layers: a frosted fill over a 6px backdrop blur, a 1px diagonal white stroke (60% at two corners, clear between), the same stroke at 4px blurred σ5, and a 4px white rim blurred 4px just outside the edge — then a white face inset 7–15px at radius − inset, or on a rung with faceRadius (the product hero's 38/16 frame holds a 24 face). radius='full' is a pill: the strokes take its measured height. Gradient and filter ids come from useId, so any number of frames can share a page.

GradientCard is a panel on any ground (radius 32 by default), with two warm layers on request: cap, peach at the top centre; rim, peach toward the edges. NeumorphicCard (neumorphic-card) is the soft white tile — radius 36.4, padded 32, all its depth in --shadow-mk-neu's four inset stops — pressed out of a beige page.

The violet slab: a content-width panel with 100px corners (64 from 768px, 40 on a phone), padded 80, on dark1 by default — the shape a band of glass cards sits in on the product pages. Its children stack in a centred column 40px apart (64 from 640px).

The page-opening hero: the hero-bowl ground (beige above, the indigo bowl rising behind the media's lower half), a 1.15fr/1fr split 56px apart, the h1 left and the lead and actions right, the media in a GlassFrame below, and an optional row under it (the logo drum) drawn only when given. size='page' is the subpage hero: text-hero-page on the top-band ground. variant='product' is the product pages' hero: the product-diagonal ground with rounded bottom corners, the columns bottom-aligned, a 440px lead, pills 12px apart, the media in an 840px 38/16 frame.

The two-column feature behind the home page's oversight and workspace sections: a 474px text column (eyebrow, the h3-register headline with segments, a 16/22.4 body, bullets 16px apart each after a 24px icon slot, the primary pill) beside an art panel on a named ground — --gradient-oversight by default, radius 40 (rounded-mk-panel) or 32 (panelRadius='card'), 600px tall from lg — holding whatever the page puts in it, here a GlassFrame, with an optional footer row pinned to its bottom. Columns are 1fr/1.2fr from lg, 48 apart (80 from xl); flip swaps them. Without a panel the first kit's framed media tile draws instead. The bullet icon and the panel's art are placeholders until the art system lands.

The three pillars: white cards 413×514 at 1440, 20 apart, radius 32, no border; a centred text block (padded 32/24/0, 16 between lines) with a 24/26.4 title whose second line is in the heading gradient, then one 18/25.2 paragraph — lead in ink, body in the secondary grey; under it a 288px art panel, radius 32, flush to the bottom on a named ground (--gradient-pillar-a, radial-warm, --gradient-pillar-c in turn, or artGround). One column below xl. The art here is a neutral placeholder.

How it works: cards 413×490 on beige-light (#fcfaf9), radius 32; a 413×288 art panel clipped by inset(0 round var(--radius-mk-card)) on dark4 (the peach glow over the indigo), then the text padded 24/32/32 — a badge slot (the art system's numbered tile; the step's numeral on dark3 until then) 12px before the 32/38.4 h5 title, and a 16/22.4 body. A step without art has no panel. Three across from lg; the call to action 64px below. variant='integrations' is the toolkit pages' card: white at radius 36.4 (19.6 on a phone), a 438px art top, the badge before a 24/32.4 h6 title.

The navy band under the home hero: a 66px Coin S tile, a statement at 64/70.4 (40 on a phone) whose last line rotates in peach, and the on-dark pill — 112px of air above and below, rounded only at the bottom, where the hero bowl's navy edge runs into it without a seam.

The closing call to action on the CTA indigo: 140px above (64 on a phone), 40 below, rounded only at the top. One line of display type whose last words can be peach, a 16px lead at white 75%, then on-dark and ghost-dark pills. It comes in its own wrapper — 40px of white fading to beige behind the corners — unless the page owns that ground (blend={false}).

The comparison track: a full-width 56px pill on the track grey, padded 4, its tabs equal 48px columns — a 20px icon (muted until active) 16px before a 16/22.4 medium label. The ink pill slides under the active tab (transform .5s cubic-bezier(0,0,.2,1)), placed by arithmetic so the server and client agree; labels turn white over 300ms. variant='gradient' is the white neumorphic bar with a gradient pill (--gradient-tab-pill, a radial), width-capped. Below md the tabs are separate pills in a sideways-scrolling row; from lg a label too long for its column wraps to a second line inside its pill. Vertical is a topic list, a beige card beside the panel (over it, full width, on a phone: a column at every width, so Up/Down hold everywhere); tone='glass' is that list on a dark panel — a glass pill, white labels at 70% with a 20px icon, the active topic's line under it, and an aside (the panel's heading) above it. Built on Radix Tabs: arrow keys and roving focus come from the primitive, Up/Down on a vertical list.

The pricing headline's reel: a window one item tall (clamp(4.75rem, 7vw, 5.5rem); 4.5rem below md), each item an optional 0.875em icon slot 20px before the word, the list written three times. Every ~1.48s it steps one window (0.6s cubic-bezier(.645,.045,.355,1)) while the width follows the word, blurring to 3.75px and dipping out and back as it travels; the edges fade by mask (10% / 15.81% / 95%). Pauses off-screen and with the tab hidden; reduced motion holds the first item. The icons here are placeholders.

The comparison: a SegmentedTabs track over one pair of cards — beige on the left (a 28px icon, a 24px name, an 18px line in the secondary grey), dark3 on the right (a 32px wordmark, a line opening with a violet-50 chip, art in the right 40%), 172px tall at radius 20 (rounded-mk-20), a 120px connector column between. The cards stay put; each scenario's words and art cross-fade inside them (400ms), the inactive layers inert. The row slides in once — left from −28px, right from +28px, 600ms after 120ms — or is placed at once under reduced motion. The connector, the icon and the art are placeholders.

The first kit's comparison, kept for the pages written against it: two lists of rows either side of a divider, sliding in on first view the same way.

The FAQ box: beige, radius 64 (squircle where the browser draws one), padded 64, the heading beside the questions at 519fr/630fr from 1024px. Each question is a white card (radius 36.4) that turns violet when open, its one chevron rotating 180° over 200ms; the first starts open. Questions past initialCount wait in a collapsed row that 'show all' — the secondary pill — opens over 700ms, each entering from a 12px blur 90ms after the last. The JSON-LD carries every item regardless. boxed={false} drops the box for a FAQ already standing on beige, its heading on the column's edge.

Two recipes. native (/compare): a real table, columns 32/34/34%, an 81px header row of 32px marks and names, cells padded 24/16/24/0 and top-aligned under 1px ink/8 rules, each value after a 24px mark — the active check for Spinrun, the inactive one for the other, drawn alike (placeholders here; null leaves a column unmarked); below lg the rows stack, each line marked by its column's own icon. highlighted (/for/*): 1104 wide, white, radius 32, columns 306/341/457, a capitals header, 80px rows with 36px wells (beige, violet-100), Spinrun's column in a 2px dark2 ring round on the right. Every value names its column for a screen reader.

The agencies hero's reel: glass cards (white/24 over a 21px blur, a white/32 border, radius and border scaled with the card — 36.35 and 1.5 at 450 wide) and shadow-mk-reel, with a white face whose top 46.71% is a preview on violet-50, dark4 or beige. The middle card is ×1.2 (×1 on a phone), its neighbours ×0.844 at half opacity; every ~4s the reel steps one card over 1.84s on cubic-bezier(.5,.1,.1,1) — vertically from xl, sideways below. Reduced motion holds the middle card. The previews are placeholders; the art system draws the real ones.

The agencies workflows section: from xl, a header that sticks 112px from the top on the section's ground over a numbered list ruled by 1px ink/8 lines (each item 48px top and bottom: an 18px title after a 16px violet marker, a 16px body, an optional chip), and beside it a square dark2 panel, radius 36.4, padded 64, sticking too and showing the active item's panel. The active item is the one crossing the middle of the viewport; the others dim to 20% until hovered. Below xl each item carries its own panel. The panels here are placeholders.

Defaults to data/social-proof.ts, which is empty — no quote ships without a real, permission-cleared attribution — so both render nothing until it has entries. The grid is one large dark4 card (693×533, radius 32, a white border, a 32/40 display quote) beside a column of beige cards (567×257, radius 32, padded 24). The marquee (testimonial-marquee) drifts glass cards 396 wide, radius 36.4, between 32px progressive-blur edges of eight stacked backdrop blurs (40 → 0.5px). Their layouts are covered by kit-c.test.tsx with fixtures that live only in the test.

RatingRow (a review site's 20px mark, five 16px stars in #ff492c, a 14/20 label, the whole row a link) reads RATING, which is null; LogoDrum (five 220×56 cells of 32px white-mask logos on the indigo band, 1×24 dividers at 15%, one cell turning 56px every ~1.5s) and LogoRow read CUSTOMER_LOGOS, which is empty. All three render nothing until Spinrun has a real rating and customers cleared to show.

The integrations directory: a 74px white search field (radius 25.2, ink/8 border, padded 24/32, a 24px icon at 40%), 40px category chips 8 apart (the chosen one on dark2 with white words), and a grid 16 apart, four columns from lg. Category mirrors to ?category=; the search filters client-side, case- and diacritic-insensitive; every caller wraps it in Suspense. DirectoryCard is its card: 80px, white, radius 25.2, padded 16, a 48px beige well (radius 14) holding a 32px mark before a 16px name.

A directory's show-more: a CSS collapse over the Directory's results grid — cards six on a phone and twelve from md, tiles eight and twenty-four — so it follows the search and the chips without knowing either, and hides its button when the filtered grid already fits. The button is the kit's secondary pill (buttonClassName replaces it); one-way, like the FAQ's show-all. The label is passed translated.

The A–Z index: an h3-register title, then letters 32px apart — each a 16px medium head in the secondary grey, in the display face — over a grid of 14px links in the same grey (two columns, three from sm, four from lg; gaps 8/24), turning ink and underlined on hover. Anything that isn't A–Z falls under '#'.

Small static UI illustrations drawn in HTML and CSS — no screenshots, no SVG artwork — for a CardTrio or FeatureBlock media slot. Every line of text is a prop.

A scripted, clickable agent-in-your-chat demo, the home hero's media. Click a channel to switch its script; the skin toggle re-skins the whole mockup. Both skins shown here; a page picks one with defaultSkin.

results

Web chatSlackWhatsAppEmailTeams

D

Dana9:41 AM

Hey @Spinrun — what moved in our pipeline this week? Flag the deals I should focus on.

DSales team

Web chatSlackWhatsAppEmailTeams

Hey @Spinrun — what moved in our pipeline this week? Flag the deals I should focus on.

Message the channel