Mudita

How illustrated diagrams follow the brand palette: the palette token generator, the Painter layer, and a Claude Code skill that maps a vector's colours to roles. Code snippets and specs, not shipped.

A new section on Refer & earn: +200 credits for a public post on LinkedIn, X or Facebook (paste the link, we check it), +400 for a G2 review (confirmed by G2). Post dialog with a link check; G2 dialog; Fresh / In progress / Not approved states.

End to end for LinkedIn, X, Facebook and G2: our dialog, the platform's composer, where to copy the post link, pasting it back, pending, credited or not approved.

Where people find it, each on the live screen: a link in the export-done banner, a row in the Share dialog, an earn nudge, a G2 line on the welcome-to-Pro dialog, and two rows in the Get most out of Pro checklist.

The lean version for engineering: flows, button states, on-the-fly testimonial drafts, frontend surfaces by file, backend tables and jobs, analytics, and what to settle before build.

What earns what, the platform rules that shape it (Trustpilot bans incentives, G2 allows disclosed ones up to $100, FTC bans sentiment-based rewards), eligibility, flows, card states, and open questions.

Start here: the creator modal, Refer & earn, the Share dialog and the nudge on one page, with the states each one covers and the open questions.

Two messages, one headline: we make the video for you (pick one of our finished videos, add your face, no starting from scratch), and you earn credits for every signup it brings. One modal: how it works, pick a HardLaunch template video, add one selfie (with consent), watch it render, then download with a referral link and a per-platform caption. Ends on a creator page with signups and credits. The phone on the right carries the story from template creator to you.

Eight layouts that each run the whole flow (How it works, Pick, Face, Making, Share), so a direction is judged on every step: decision pane, centre stage, full width with the phone on cue, video on the left, act where you look, phone-sized sheet, big tiles, build rail. Round 1 (Pick step only) is kept at crazy8s-round-1.html.

The live redesigned Share dialog (Export to PowerPoint · Invite to collaborate · Share externally), rebuilt from the app, with a creator-video promo under the social buttons. It reuses the dialog's own Analytics-promo shape: tinted card, art faded in from the right, one small button.

The creator program as one of the bottom-right nudges, built to the live NudgeCard and scored by the existing weighted engine: proposed signals, weights, role scores and a -100 off switch once a video is made. "How it scores" shows the config.

Where creator signups are tracked: the existing Refer & earn page, rebuilt from the app, with a creator card in the hero, a Your videos section, a "Your video" source in the invites table and a credits meter split by link vs videos. Toggle between no videos yet and has videos.

Copied from atlas on 9 Oct 2026: pass 45 of run 2026-08-25-01 in designs/crm-sync-workflows. Pixel-identical to the atlas screen because it loads atlas's own design system, copied into assets/, rather than this repo's shared one.

The live marketing page as captured on 6 Oct 2026, in plain HTML and CSS with the site's own fonts and images, so it can be forked and riffed on. The interactions work: the Create, Refresh and Build accordions, the persona tabs, the testimonial carousel and the FAQ. Includes the new Create · Edit · Refresh video section under Overview, from the Figma exploration: three transparent product videos over a fixed blue background, with each tab's bottom bar tracking playback before handing off to the next. It also collapses to a single column on phones.

Ten slides for someone with nothing in their dashboard yet, written as a tutorial rather than a manual: every slide ends in one action the reader takes from the slide, and slides 5, 6 and 7 are performed on the deck itself, so editing, remixing and sharing all happen on the thing they are already looking at. Full copy per slide, plus the two problems the pattern runs into: links only fire in present mode, and four of the seven features are behind a plan gate.

A learn-by-doing tutorial, not a feature tour: every point names a real control (Import PowerPoint, Make shorter, Redesign slide, Invite new members), says where it is, and says what happens when you press it. Each slide is assigned a real layout from the Glaze catalog (861 variations, 63 layouts, 9 categories, pulled from the live qc1 CDN) and written to that layout's node count and character band. Includes the full layout reference with node ranges, the S/M/L/X contract read out of MenuParser.js, a table of every control the deck points at so it can be re-checked when the UI moves, and a paste-ready prompt. Autofit is dead in the codebase, so the bands are the only thing preventing clipped text.

The ten slides actually generated on qc1 in Glaze, captured slide by slide, with a scoreboard of which layout each one landed on and the Remix alternatives for the two that missed. The layouts land and the copy does not: node counts held on nine of ten slides, but almost every string was rewritten shorter, and slide 7 turned ten data points into a gauge showing one. Also catches a composition failure node counts cannot predict, and the generator writing "your mark on every page".

What a slide can mechanically do (hyperlink opens a new tab, slide link stays put, neither fires in the editor), the shipped "For you" card catalog this competes with and its 3 - docCount rule, and the plan gate on every feature the deck touches.

A copy of Mani's export-PPT paywall with all 53 font-size and px line-height values converted to rem at a 16px root, and now snapped onto the published ramp: 10 / 12 / 13 / 14 / 16 / 18 / 20 / 24 / 32, with icons on their own --icon-xs/sm/md ladder because Phosphor sizes glyphs by font-size. On screen that means the tier name and price go 28 to 24, the credit number 26 to 20 — it was 2px off the name, which read as a mistake rather than a hierarchy — and the checkout's seller note and renewal legal come up to the 12px floor DESIGN.md sets for a paragraph.

The card carries a paper plane for Basic, a fighter jet for Pro and a gold rocket for Gold — three 3D emoji arranged as a speed ladder, and speed is the one axis these plans do not differ on. Eight replacements, each drawn across all three tiers and shown twice: large, and again at the real 44 px where most of them fall apart. The deck stack draws the plan as the number of decks it buys. The credit spark promotes the glyph already sitting next to “1,000 Credits”. Slides lit across a grid and the capacity ring both draw capacity, one as area and one as an arc. A peek at what you unlock crops the real surface each tier turns on. The palette you get to bring makes Brand Kit the visible difference. One cover, three finishes keeps one deck and moves only the finish. Nothing is the control. Every one carries what it costs.

Where the fork came from, the full px to rem table, the seven values that sit off the design system scale, and how the conversion was verified.

Two slides from the JAS '26 partnership deck, the cover and The Opportunity, each in both states, with five ways to show the model doing the swap. Stream types the copy in behind a caret and scans the picture into focus. Shimmer sweep crosses the whole slide with one band of light on the background gradient's own diagonal, so it costs the same seven seconds whatever the slide holds. Stagger swap assembles it word by word and tile by tile. Stream, in sequence does one part at a time, which is the clearest and by far the longest. Stream, lit is the first one with the writing glowing: each character lands hot and cools as the caret moves on, then one shine crosses the finished line. Slides are data and treatments are code, so a third slide is a spec rather than new motion.

Which Figma nodes the slides come from, the layout numbers read off them, why the mosaic is a pre-downscaled file rather than a CSS effect, and how to re-render.

The slide loader with 16:9 rectangular pixels instead of round dots, and opacity as the only motion, nothing scales. Levers for pixel height, ratio and gap alongside the wave, field and phase controls.

One canvas renderer for the wait before a generated image lands, taking only what the slide already knows: its background colour and the mask shape. Runs three phases: unaware, then a preview the dots morph into, then the picture. Brand blue throughout (light or dark shade by background), with a stroke and inner glow that clear once the image arrives. Three real slides from app.presentations.ai, same call, exact geometry.

Twelve square placeholders in the generative-loaders idiom (resolution, pixel grid, mip ladder, quadtree, raster, dither, denoise…). All resolve the same latent subject on one 2.35s beat; size / radius / speed / colour / surface controls.

The other half of the problem: thirteen ways to hand off from placeholder to a real picture (shimmer, blur-up, top-down decode, mosaic, iris, focus brackets). Frame shape, speed and surface are switchable.

The brand kit extraction loader with 16:9 rectangular pixels and opacity-only motion. Pixel height, ratio and gap are levers; the generic skeleton and three-phase sequence are unchanged.

The wait between "analyze linear.app" and "your kit is ready" (Figma: AMJ '26 Handoff → Extracting Loader). Each card placeholder is a low-resolution render of the content coming: grey bands become the palette, a paragraph shape becomes the specimen, a centred block becomes the logo. Dither screen with twelve sliders, plus speed and manual step-through.

Touchpoint 2, built proper. Faithful focused “Start your next presentation” screen (Figma 349-507) — full sidebar, blurred dashboard behind, suggestion rows — with the brand kit as a pale tint band atop the prompt box that re-tints to the selected kit (Coca-Cola red · Patagonia navy · Default blue). “Change” opens a live kit picker; suggestions fill the prompt.

Touchpoint 2 exploration. Round 3 (current): making the prompt box itself brand-kit themed — solid & pale colour bands, a kit-coloured stroke around the whole box, colour glow, pale wash, themed input outline, accent rail. Rolling current round.

Brand-kit-themed prompt box — 8 visual treatments (band · stroke · glow · wash · rail).

Hybrids of toolbar pill ↔ header chip — branched off round 1’s picks 01 + 02.

The opening 8 placements (toolbar pill · header chip · in-field tag · swatch strip · tinted header · dots-only · Pro-gated · merged Style).

The in-editor touchpoints: Theme panel (Design · Colors · Font) + Presentation settings. Opens on a deck for Anthropic — a Brand-Fetch auto-theme (their palette + an editorial mood blueprint) shown as the "Currently applied" theme, with a sleek PRO nudge to save it as a brand kit (reuse + share with the workspace; copy in a tooltip). Saving drops an Anthropic kit into "Your brand kits". Each tab leads with a "Your brand kits" section — multiple kits (Patagonia, Tessera), one theme/palette/pairing each — above the stock library, styled as the real cards. Logos default to the kit, with an "Upload logo" + choose-a-kit flow. "Add new color theme" / "Add new font pair" open the real modals, each with an "Add to brand kit" picker — New brand kit first, then selectable kits, then already-taken ones greyed (one palette + one pairing per kit). Choosing a kit auto-names the theme after it; "New brand kit…" hands off to the dashboard.

The live "Currently applied" thumbnail at the top of the Design tab — a mirror of the deck's active mood. Moods as layout blueprints (radial · glass · split · tiles) that re-skin from the live palette + font; title reads "<base> (modified)" once overridden.

Three layers: an immutable asset portal (~200 presentations.ai-built company kits) → fork-on-provision into a workspace → edits scoped to that workspace. Two workspaces from one company diverge independently. Editing = admins only (become an admin to edit; seat types later).

Look & feel = colour + type · voice = personality + words · logo types (full / icon / wordmark) · template ways-in · Gold knowledge-graph upsell · team photos · image re-tag.

Current source of truth — lean, table-driven; leads with a V1 → V2 diff.

The voice model + research basis (the V1 three-layer model; V2 keeps personality + words).

A worked instance of the three-layer model — built from Dropbox's Q3 2024 IR deck + dropbox.com. Personality (who we are / are not), words, and the hidden definition layer that compiles to the generator prompt.

Frozen V1 reference (tag brand-kit-v1) — full-scope, mood + sample deck included.

Shared reference for the folder — presentation-services code reality, one-off prototype decisions, running TODO. Ages with the code; not a spec.

Touchpoint 3 (manage). Sidebar kit nav + preview-rich accordions, filled state (Coca-Cola · Patagonia · a no-logo kit).

Frozen V1 — filled kit with mood switcher + mood-aware sample deck. Patagonia demo.

Every icon in the qc1 editor that is not Phosphor, audited surface by surface, with the Phosphor replacement rendered next to it from the font we actually ship. Two findings: a second icon pack called appicon (699 glyphs) owns the text toolbar, text properties and image toolbar, and the Phosphor icons that are there run the legacy phosphor-react delivery at two different weights. Four icons need a design decision.

First-fold video for Project Knowledge. A sales AE drops 8 real enablement files into a Project, the graph forms, and a first-call deck builds from it. The shot that carries the feature is the hover-to-source citation: pricing and case-study numbers traced back to the file they came from, not the internet. Shot list, on-screen copy, VO, and an investor variant.

The template Anika picks in the video, in both states: unfilled (headings, helper lines naming the question each slide forces, and opinionated prompts where content goes) and filled (the preview render the gallery thumbnail needs). The prompts are the expertise being sold, and the first thing that reads as deletable placeholder.

First-fold video for Start from a Template, rebuilt on the JAS '26 handoff flow, shot by shot with timings. The claim is that a template is a position on what a good deck answers, so the video rests on the filmstrip in the template detail view and its payoff in the editor. Scenario is a brand partnership (Marlow x Trailhead), and the input is a messy braindump rather than a tidy prompt.

Candidate anchor screens for the design harness: the cancel flow, three checkout variants, zero credits, and the Gold upsells. Built from Figma on the design system, each filling the viewport so it can be annotated at any window size. Candidates, not the bank: a screen earns a row in exemplars.json once it has been annotated.

Lean v1 scope (Linear PRE-105): one explicitly-published link per deck turns analytics on; three metrics (median time per slide, engagement/drop-off, total views) each with a click-into-viewer breakdown; three touchpoints (editor, Share publish, dashboard context menu). Synced with the Linear ticket.

The single deck modal for Phase 1: an Analytics tab (key takeaways, three metric tiles that double as tabs — Median time, Completion, Views with a Total/Unique toggle — per-slide dwell, slide retention, source + devices split, and a viewer list that drills into any one person) and a Share tab (the deck's one tracked link, ask-name / download / notify / expiry, revoke). Realistic sales-deck data, on the design system.

Same functionality as the modal, restructured as a full-page master-detail: a left rail lists viewers (All viewers on top, then per-viewer), and selecting one re-scopes the right side in place, no navigating to a new page. Left/right instead of top/bottom; the rail mini-stats follow the active metric. The pattern earmarked for the dashboard Analytics tab.

Engagement analytics for any shared deck, any channel (deal room, public/social, cold email, investor send, embed, marketing). The distribution taxonomy, the identity-is-inverse-to-reach spectrum, two read models (aggregate vs per-person), the metrics catalogue, the shared tracked-link engine, and the access friction-dial. Ships first, standalone; the deal room consumes it. DocSend is the reference.

The seller assembles the room WYSIWYG: edit the actual page in place (co-brand header, title, hero deck, materials stack, next-steps MAP, contact card). Theme = a live Brand-Kit re-skin (the signature move, smart-default inherits the deck's kit). Share slide-over with the friction-dial (soft name prompt, opt-in password). All six Phase-1 essentials.

In-room analytics scoped to the AE's one question: is this deal moving. Co-branded modal where the three deal-health stats double as tabs: Last viewed (a views-over-time graph, busy early vs now) · Viewed (the buying group; tap a row to expand their detail inline, no navigation) · Resources opened (the list; the native deck expands to per-slide time, other resources are click-and-open). Per-person detail is a tidy inline accordion (engagement → the deck's per-slide heat strip + drop-off → resources). New deck-analytics visual language (layered shell, 24px stat type, gradient bars, rounded-square + pastel-smiley avatars). Honest data throughout (email not job titles; domain = internal/external, not a company name; "viewed" not "engaged"). Follows the In-room analytics grounding.

The deck-native deal room itself (Pitch/Trumpet/Aligned territory), consuming Deck analytics. Room + Mutual Action Plan state machines, flat buyer access, the opinionated-not-a-builder design stance, competitive wedge (PAI makes the deck), and locked calls (Salesforce → V2, School A post-sale, no page builder). Specs and protos to follow.

The transactional rail: renewal-failure dunning, paid-trial charge failure, and team-plan variants. Provider-driven retry cadence, active/dormant copy, decline-reason buckets. Ships on SES via billing; waits on the Chargebee migration for the webhooks it fires on.

The marketing rail, separate from billing and not blocked by Chargebee. Campaign map, how Sendy fires (autoresponder / segment / list), and the open question of what user state syncs into Sendy. Onboarding/activation drip written in full both ways (time-only + behavioral); free→paid, education, reactivation, broadcasts scaffolded.

The two-rail split, how Sendy sends, the merge-tag reality, the open user-sync question, and the TODO across both halves.

Faithful rebuild of the JAS create prompt (Figma 260:4535). The placeholder is a big, inviting 20 px; once you start typing the text settles down to 16 px, and a large paste expands the box rather than shrinking the type. Toggle three interaction models (Scale down / Snap to 16 / Fixed 16, expand) to compare them live.

A chat card for the PPT-import flow: a Free user uploaded a 30-slide presentation; we build 15, upgrading unlocks more (Pro 60, Gold 99). Sits after Level 1, before Level 2. The rolling crazy8s.html shows the latest round; earlier rounds are snapshotted below. Messaging follows the Voice & Tone guide.

When the gate fires and what the upgrade prompt offers — standard vs 7-day trial users, Free/Pro, per slide count. Plan caps: Free 15, Pro 60, Gold 99. This is the logic behind the card.

Progress-forward · two paths · tier ladder · minimal · slide map · go bigger · slim inline · now-vs-upgrade.

Every framing defaults to Upgrade as the primary action, with "Continue with 15" kept as a quiet skip.

The scenario, integration point (post-L1/pre-L2), chat-card pattern, and the voice rules driving the copy.

The JAS create flow (Figma 160:1834): type a prompt → Continue → the title shrinks and the prompt collapses as the 12-role grid appears → tap a role for an in-place designation menu → pick a title (selected card shows a check + the title) → Create Presentation (appears only after a role is picked) → chat with the prompt as the first message and the brand loader. Full interactive flow.

Non-technical handoff spec: every screen, the three prompt-box states, the role/designation selection rules, when the CTA appears, and the nuances that must survive the rebuild (reopened role pins the pick to the top, Create always goes to chat, no loader, emoji→check, and more).

Remove the upfront role step; land the new user straight on the (faithfully replicated) new_dev prompt screen. Capture designation + work email softly while the deck generates, incentivised with credits (Figma AMJ-26 pattern). Interactive: prompt → generation + inline asks.

Solve it on the prompt screen (JAS Figma 160:1595, replicated exactly): Create Presentation → 3s processing → ask role → on pick, designation reveals inline (searchable, Marketing wired with ~24 titles, free-entry fallback) → only then chat. Toggle 3 interaction variants for the role→title moment: Stacked / Focused / One field.

The role analysis that drove the soft-capture pivot, the Figma pattern, locked decisions, and the workspace/onboarded decoupling risk.

Reworking the signup/login page to feel like the presentations.ai marketing site — same messaging, design-system tokens intact. Round 1: founder's letter · marketing hero · navy premium · airy orbs · testimonial wall · editorial landing · stat-forward · product-tour cards.

Content to preserve, design tokens, and the founder-letter placeholder note.

Phosphor icons animated → Lottie .json for chat loading states (20px, alongside Tyo's spinner). Globe + sparkle; switch icon, recolor / speed / surface, drag-drop any .json.

How these map to Tyo's loader + chat sizing, and how the globe Lottie is built from parametric shapes.

The conversational loading labels in the chat flow (loadingPhrases.js) — per-stage flavor variants + shared generics, canonical label first, shuffled every ~4.2s.

Editor load → auto-open presentation → return to full editor.

Pulsing dot + cross-fading label.

Label with a thin determinate progress bar.

Four step nodes that check off, with the active label.

Export-PPT / Upgrade modal · Continue to Editor · Share · Replay.

No modal · Continue to Editor · Share · Replay.

Export-PPT / Sign-up modal · Share · Replay.

Refine-panel options composed from a 16-atom inventory by user role (default · leadership · consulting · sales) and input type.

The composition logic — 18 atoms, tiers, pinning & gating, by role & input. Rendered from the spec doc.