Next How it works

What's new

The design system, in one place

A live catalogue of Unless's brand atoms, components, product surfaces, and downloadable assets - built from the same build-time recipes the public site uses, so every asset on this page is always the latest version. Internal-facing for the team, downloadable-facing for partners and press.

What's new

Last updated · entries are reverse-chronological (newest first).

  • Homepage + Customer Agent overview — full rework around the customer ↔ team flywheel. Home hero switched to dark mode; the chat demo dropped out and a 12° tilted blueprint (no Unless mark) sits in the right slot instead — a quieter, more technical-looking opening. Trust badges + divider styling updated for the navy surface. Section 3 renamed The customer-facing side: light Customer Agent demo with a four-button scenario switcher (Acquisition / Retention / Expansion / Support); all four DemoAgents render at once, switcher toggles CSS-fade between them so switching scenarios never blanks the surface. Section 4 renamed The team-facing side: dark Team Assistant demo, single scenario, no switcher; Living Knowledge callout removed (it now lives in the new Engine section). New section 5 The Engine: three senses (Living Knowledge / Living Memory / Living Context) above a full-width dashboard walker with prev / next buttons that step through nine screens across the Train → Test → Deploy → Analyze → Trust → Inbox loop. Section 8 The math dropped its dashboard preview; the table now reads at full width with larger base type so the numbers carry the section on their own. Solution overview picked up two new sections: a learning-loop visualisation at the top (new <AgentExchangeLoop> component — small Customer Agent + Team Assistant heads, dot orbits between them; centre swaps between "Unanswered question" / "Knowledge improved"; blueprints alternate-rotate per half-cycle) and a Team Assistant feature section with the dark demo + three capabilities. Section colour rhythm rebalanced so no two same-colour sections sit back-to-back.

  • Consumer-facing logo family added to the regeneration pipeline + Einstein explainer ships on Monotile. The icon recipe now emits the entire /public/logo/ family in lockstep with the favicons: bare mark at 400 × 400 (SVG + PNG), full lockup at 1330 × 400 in both BLACK (paper- bound, dark icon palette) and WHITE (navy- bound, light icon palette), plus the 640 × 320 AWS Marketplace variant. All 20 outputs regenerated and committed. Identity → Favicons: the "Regenerate from the recipe" block dropped its explicit Node-script callout. New "Always the latest" copy explains the recipe-driven family without naming implementation. Identity → Wordmark: the lockup caption now picks up a 16-px top margin via a generic .ds-content-body .ds-meta:not(:first-child) rule in the layout, so any mono caption following a frame anywhere in the design system gets breathing room — fixed in CSS, not in-situ. Surfaces → Monotile: new first tab Einstein picks up the aperiodic-monotile explainer + Smith / Myers / Kaplan / Goodman-Strauss credit from the public Colophon page, so the brand context now lives next to the texture itself.

  • Every design system page now follows the content-object convention. All 32 design pages refactored so each one carries a const content = { meta, … } block at the top of the frontmatter holding every editable string + data row, with the template body referencing content.X.Y throughout. Matches the convention used everywhere else on the site (see src/pages/en/trust.astro for the canonical example). Team members can now edit copy without touching markup. pageTitle + pageDescription flow into <DesignSystemLayout> per page so each route gets its own <title> + meta description for SEO. /en/design/ redirects to /en/design/about/whats-new/ so the landing copy lives in exactly one file. Production build still emits 222 routes; tab states + downloads all preserved.

  • Design system promoted from DEV-only to live production routes. The legacy src/pages/en/design/[...slug].astro catch-all (3,000+ lines) is gone. Replaced with one regular Astro page file per section / subpage under src/pages/en/design/<section>/<subpage>.astro — 31 files plus src/pages/en/design/index.astro for the bare landing. Shared CSS + the two download scripts (logo, social) moved into DesignSystemLayout.astro so every page picks them up automatically. New resolveActiveTab() helper in design-system-nav.ts means each page's frontmatter is just three lines. Production build now emits all 32 design routes as real pre-rendered HTML (was 0; site total goes 190 → 222 pages). Footer's "Team" link replaced with "Design system" pointing at /en/design/; the team roster is still reachable from the About us page.

  • Tab-content audit - no more repetition across tabs. Walked every section with a tab strip and confirmed that section-level mono headlines / ledes don't sit above the tabs (which made them repeat across every tab's content). Sixteen sections rewritten so each tab carries its OWN descriptive headline + lede paragraph, framing the specific content of that tab: Surfaces (Monotile, Blueprint, Spotlight, Theme), Product (Agents, Dashboard), Identity (Logo, Wordmark — already done), Foundations (Colour, Typography, Spacing, Motion, Iconography), Components (Buttons, Cards, Forms, Navigation), Experiments (Agent visualisation, Demo Agent), Media kit (Press kit, Social templates, Brand usage rules). Section landings without tabs (whats-new, how-it-works, registry, contributing, contact, lockups, favicons, agent-loop, help-center) keep their existing intros — nothing to repeat across there.

  • Social media assets → Media kit / Social templates; recipe matched to the original sketches. Moved the full per-platform asset catalogue out of the Experiments sandbox into Media kit → Social templates — that's the right home for partner / press downloads. experiments/social-bg removed from the IA entirely. Composition updated to match the original sketch design: logo + tilted blueprint + Houdini spot now anchored at golden-ratio-right (x = W / φ ≈ 0.618 W, y = H / 2), not centred. The Houdini spot's radial gradient glow centres on the same point — soft peak-blue lift on navy, soft charcoal vignette on paper. Fade overlay deliberately omitted; the surface lives on its own without the directional ramp. Navy variant lightened - einstein-hats monotile opacity bumped from 0.32 to 0.55 so the pattern peeks through more visibly (matching the AgentSketch idle dark surface where the navy gradient's 0.55 floor lets the texture breathe). LinkedIn now also ships the company page banner at 1128 × 191 alongside the 1584 × 396 personal banner — same recipe, cropped for the company surface. The new cover spec is a covers: [] array so any future platform can carry multiple variants without further refactoring. Demo Agent: dropped the "Perplexity-style" phrase from the intro per feedback.

  • Six fixes - repeated content, dead tabs, empty visualisations, social asset recipe. Agent visualisation was rendering empty: <AgentSketch width="280"> passed a string, and the component's typeof width === 'number' branch was skipped, emitting style="width: 280;" (no px, invalid CSS). Changed to width={280}; now both Customer Agent and Team Assistant variants render at the correct 280-px frame. Help Center + Agent loop both had tab strips declared in the IA with no per-tab content — removed the tab arrays. Rule restated: if there's no active option for a tab, don't show it. Demo Agent had a section-level lede repeating above every tab; moved into each tab with a scenario-specific framing line. Added a 24-px gap between the lede and the DemoAgent frame via .ds-demo-agent-host so the description doesn't hug the demo. Product / Dashboard: every tab (Train, Test, Deploy, Analyze, Trust, Inbox) now opens with its own short framing line — no section-level lede above the tabs. Experiments / Social media assets: covers redesigned to use the AgentSketch idle background recipe — surface fill + faded einstein-hats monotile underneath + tilted (12°) blueprint behind + faded Unless mark on top, all in one self-contained SVG that renders + downloads as a single PNG. Covers moved out of the 2-column grid onto their own full-width rows so the recipe reads at scale.

  • Blueprint geometry corrected across every render. The real <AgentLoop> / <DemoAgent> blueprint draws its crosshair from ±120 viewBox units (the lines bleed past the viewBox and run "infinitely" until the parent frame clips them) and carries 0 / 90 / 180 / 270 degree indicators at the four cardinal ticks. My standalone Surfaces / Blueprint previews and the social-media-cover composition both had a short crosshair (±45, stopping at the viewBox) and were missing the degree labels entirely. Updated: Surfaces → Blueprint pattern (crosshair extended + labels added; SVG gets overflow: visible so the parent frame's overflow: hidden does the final clipping), Experiments → Agent visualisation (degree labels added; crosshair already at ±120), Experiments → Social media assets cover (crosshair extended to ±1000 in local coords so it reaches the canvas edge on every aspect; labels added). Diagonal lines also tuned to match the real component (stroke 0.15, dasharray "1.4 1", opacity 0.6).

  • Product / Agents - stage rhythm tightened, tab strip now full-width. Card body padding increased from 14 → 18px and tightened the inter-element gap to 12px, echoing DemoAgent's inset-x-6 / mt-3 mb-4 proportions. Nav band bumped to 14px vertical to balance the deeper body. The tab strip now stretches full-width of the body column (was align-self: flex-start - shrunk to content), with each tab carrying flex: 1 and centred text so the three tabs share the row equally. Matches the real DemoAgent tab recipe (flex items-stretch justify-between w-full). Input footer picked up the same 18px gutters and a subtle soft shadow to match the live demo.

  • Identity / Logo + Wordmark - stop repeating the section title across tabs. Logo (mark) had its eyebrow ("A circle and a golden-ratio triangle") ABOVE the tabs, so every follow-up tab (Construction / Usage / Download) rendered the section eyebrow PLUS its own tab eyebrow stacked — a double title. Same shape on Wordmark: outer eyebrow + lede glued to every tab. Moved the section eyebrow + lede INSIDE the default Spec tab on both pages; each other tab now owns its own framing line, no repetition. Press kit / Bios: filtered to co-founders only (Sander + Marcel) via jobTitle.includes('co-founder'). Photos still show the whole team.

  • Social media assets — full rebuild. Experiments → Social backgrounds renamed Social media assets. Tabs swapped from format-based (Link preview / Square / Story / X header) to platform-based (LinkedIn / Facebook / X / Instagram). Each tab now ships a profile picture (Unless mark on solid paper-cool or navy, at the platform's exact square size) AND a cover / banner / feed asset at the platform's native aspect ratio, using the <AgentSketch> background recipe (paper-cool / navy + blueprint pattern + faded Unless mark). Every asset has a live SVG preview and a PNG download button that rasterises the in-page SVG onto a canvas at the exact upload resolution. Sizes per platform: LinkedIn profile 400 × 400, banner 1584 × 396; Facebook profile 400 × 400, cover 1640 × 624; X profile 400 × 400, header 1500 × 500; Instagram profile 400 × 400, post 1080 × 1080.

  • Press kit photos + bios - entire team. Previously only the first four members shipped. Now the Photos and Bios tabs in Media kit → Press kit render all of src/data/member.json (Sander, Marcel, Ecesu, Alexandre, Martijn, Gray, Antonin).

  • Mono headline margins fixed. .ds-mono-headline ships with margin: 0 0 12px in the layout — no top margin, ever. That's the right call for a subpage's opening kicker, but it glued every subsequent in-page mono headline to the previous element (figure, frame, list). Added .ds-content-body .ds-mono-headline:not(:first-child) { margin-top: 32px } so non-first headlines read as section breaks, not as labels glued to the thing above.

  • Five fixes around the agent visualisations + dashboard / Deploy. Deploy: dropped Acquisition · Signals / Personality / In-app notifications — only the Procedures view is actually authored for the Acquisition moment, the others render moment-agnostic surfaces or (NotificationsView) preview the Expansion moment by default, so labeling them all "Acquisition" fabricated screens that don't exist in the product. Experiments → Agent visualisation: rebuilt as the agent sketch ALONE (without blueprint) and the agent sketch WITH the rotating blueprint embedded directly behind the mark via <AgentSketch>'s behind-mark slot - no orbit cards, no surrounding frame. Both Customer Agent + Team Assistant render directly on the page's paper surface; the previous grey and navy chrome are gone. Experiments → Agent loop: now renders at width="100%" so the bento cards lay out in a proper 2 × 2 quadrant beside the agent, not stacked below it. Removed the outer grey frame. Experiments → Demo Agent: the IA had four tabs that did nothing; now ships two real tabs — Customer Agent (homepageExpansion, light) and Team Assistant (teamAssistantTicket, dark) — with the matching scenario in each.

  • Product / Agents - stage cards reworked. Each stage card now matches the DemoAgent's natural 440 × 660 aspect (2:3 portrait) so the thumbnails read as actual agent windows. Layout is a 3-row grid: full-width nav band (tinted, edge-to-edge), padded body (1fr), padded input footer. The input field is present in every stage — previously only the Empty stage carried it, which broke the "this is one agent at four moments" reading. Applied to both Customer Agent + Team Assistant tabs.

  • Product / Dashboard - section titles upgraded. Each dashboard frame is now introduced by a proper <h3 class="ds-dashboard-title"> (anchor ink, weight 600, 20px, 40px top margin) instead of a mono headline. Previously the titles read too light AND had no top margin, so they glued to the previous frame. Same treatment applied to the Help Center tab on Product / Agents for consistency.

  • Surfaces section, three fixes. Blueprint pattern now shows the pattern AS-IS — concentric circles, 24-tick band, crosshair, dashed diagonals — rendered inline as standalone SVG at a 12° tilt on both paper and navy, decoupled from the rotating <AgentLoop> context. Houdini spot was visually broken: MonotileBackground positions its SVG with absolute inset-0 but the .ds-frame wrapper wasn't position: relative + no overflow clip, so the SVG escaped the frame. Replaced with a dedicated .ds-monotile-frame wrapper (relative + overflow:hidden + aspect-ratio + radius). Same fix applied to Media kit → Social templates. Theme surfaces: each surface tab now renders a real eyebrow + H2 + lede + body at production weights / colours directly on the actual surface, so the contrast is visible (not just described).

  • Identity housekeeping. Identity → Logo: the lede paragraph moved INSIDE the Spec tab — previously it sat outside all tab containers, which made it read as "the same intro on every tab" and was confusing. Identity → Lockups and Identity → Favicons had tab strips declared in the IA (['Variants', 'Spacing', 'Usage', 'Download'] and ['Web', 'iOS', 'Android', 'Download']) but no actual per-tab content wrappers, so the tabs did nothing. Removed the tab arrays entirely — both pages render as single-view layouts that match their content. Rule: don't ship a tab strip with no per-tab content.

  • Foundations → Typography → Type scale now renders each heading at its actual weight (H1 700, H2/H3/H4 600, body 400, strong 600) so the visual hierarchy reads correctly. The samples previously inherited body weight because Tailwind's preflight collapses heading weight to inherit and the inline styles didn't override. Added an explicit Weights block to the Tokens tab documenting the four-step scale.

  • Information lists in the design system now render with a hard brand-blue square marker instead of the default black disc — small visual rhythm cue that ties prose bullets to the system's chromatic accent. Scoped to plain prose <ul> / <ol> in .ds-content-body; structural lists (.ds-feed, .ds-agent-list, .ds-agent-proc-list, .ds-agent-pills) and embedded preview components stay untouched.

  • Wordmark typeface documented. The "Unless" wordmark in the lockup is set in Hanken Grotesk (--font-wordmark) but provided as pre-converted vector paths inside the SVG — no live font is loaded at runtime, so there's no webfont request, no FOUT, no fallback risk. Noted on Foundations → Typography → Fonts, Identity → Logo, Identity → Lockups, and the dedicated Identity → Wordmark page.

  • Design system pages filled out as the single source of truth. Foundations (Colour, Typography, Spacing, Motion, Iconography) now render visual examples — swatch grids with live token chips, typographic samples at every scale level, 8-point spacing bars, an icon sampler at 24px stroke 1.5. Components (Buttons, Cards, Forms, Navigation) ship live demos on both paper + navy surfaces with every state. Surfaces (Blueprint, Houdini, Theme) embed the live AgentLoop + MonotileBackground recipes. Identity → Wordmark documents the lockup-only ship path. Product → Agents reworked: the Customer Agent + Team Assistant demos are now rendered as four frozen stages each (empty / answer / search·context / procedures·audit) directly on the paper background, with lorem ipsum placeholder copy. Product → Dashboard stacks every available view per section (Train ×2, Deploy ×4, Analyze ×3, Trust ×2). Experiments → Agent visualisation now shows the simplified agent with AND without the rotating blueprint in side-by-side cards. Media kit → Press kit pulls from llms.txt, organization.json, and member.json for the one-pager, logos, photos, and bios. About → Asset registry + Contributing documented. Archived design handoff files removed (live docs are the only canonical source).

  • docs/DESIGN_SYSTEM.md synced with the live CSS + components. Nine hex-code mismatches corrected (--fg-primary 0B1220 → 13192A, --accent-trust 2563EB → 3B82F6, --u-blue-400 60A5FA → 93B4F5, --border-strong CBD5E1 → 6B7384, --status-info-fg 2563EB → 3B82F6, plus --u-navy-700, --accent-trust-cta, --accent-link, --bg-paper-warm). Retired component sections deleted (TestimonialGrid, Testimonials), BrowserImage rewritten as sizing-agnostic (Screenshot.astro carries the fixed-pixel frame). New components catalogued: UnlessIcon, UnlessLockup, MonotileBackground, DashboardPreview, HelpCenterPreview, AgentSketch, AgentLoop, DemoAgent, plus the design system page itself. .u-monotile-band reclassified from "visual recipe" to "typography marker". .u-kicker-mono documented alongside the line-marker eyebrow.

  • Apple home-screen + Android maskable icons now share one consistent recipe — paper-cool (#ECEDF0) full-bleed background, disc scaled to 80 % of the canvas, 20 % safe-zone margin. Previously the maskable variants used a brand-blue background; the new paper-cool treatment reads as a clean app-icon "tile" identical across iOS + Android. The buildPaddedIconSvg helper in scripts/regenerate-icons.mjs produces all three from one parameterised recipe.

  • Regenerated every favicon + manifest icon under /public/ from the build-time recipe via scripts/regenerate-icons.mjs. SVG favicon, three PNG sizes (32 / 96 / 180 apple-touch), two MASKABLE Android icons (192 / 512, with the 80 % safe-zone padding the W3C spec requires), and a hand-assembled multi-resolution favicon.ico (16 / 32 / 48 PNG frames inside one ICO container). Orphaned /assets/logo/unless-icon-*.svg + unless-lockup-*.svg also regenerated so static-file fallbacks match the recipe. See Identity / Favicons.

  • Experiments / Social backgrounds now ships at the four destination sizes actually used in distribution: 1200×630 link preview, 1080×1080 square, 1080×1920 portrait story, 1500×500 X header. Each tab renders light + dark variants at the exact aspect. Identity / Favicons catalogues the seven real files under /public/ plus the live site.webmanifest and the <head> link references.

  • Phase 2 content migration landed. Every subpage we have components for is now populated — Identity / Lockups, Surfaces / Monotile, Product / Agents, Product / Dashboard (one tab per dashboard section), Product / Help Center, Experiments / Agent visualisation, Experiments / Agent loop, Experiments / Demo Agent, Experiments / Social backgrounds. Foundations / Components / Media-kit slots carry intro pages describing their scope until token visualisations land.

  • Built the Unless lockup generator. The "Unless" wordmark is inlined verbatim from the original lockup SVG (no font dependency, no glyph regeneration); the icon next to it is the build-time mark. Replaces the static unless-lockup-*.svg file references in the Jumbotron nav logo, footer in Layout.astro, and the 404 page.

  • Fixed a long-standing cascade leak that turned the DashboardPreview's title white whenever the preview sat inside a .u-section-dark or .u-monotile-band page section (Trust, Engine sub-pages, Data-and-Privacy). Same defense applied to HelpCenterPreview.

  • Moved the design system from /en/dashboard-sketch/ to /en/design/. Each section / subpage now has its own pre-rendered HTML, so deep links work.

  • Built the design system chrome (left strip + nav with "Design system" eyebrow + breadcrumb / title / tabs) and IA.

  • Replaced every static unless-icon-*.svg usage with the build-time UnlessIcon component. Social-bg composites and the mark on the dashboard / help-center / agent-sketch / demo-agent surfaces all flow from the same recipe now.

  • Houdini-style spot baked into the hero + CTA monotile backgrounds at build time (no JS). Light bg gets a subtle dark vignette, dark bg gets a peak-blue-lifted glow. Surfaces / Monotile.

  • Dashboard chrome picked up a mono "Dashboard" eyebrow above the sidebar nav, perfectly aligned with the middle column's breadcrumb. Product / Dashboard.

The rule that keeps this honest

Append, don't curate

Every meaningful visual change to the design system gets a one-line entry here. Entries describe what changed and where it's visible — not how it was built.