[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"work-arsonistai":3,"work-siblings-arsonistai":119},{"id":4,"title":5,"accent":6,"body":7,"completedAt":97,"cover":98,"coverAlt":99,"description":13,"extension":100,"external":101,"liveUrl":102,"meta":103,"navigation":104,"order":92,"path":105,"role":106,"seo":107,"stack":108,"status":114,"stem":115,"summary":116,"year":117,"__hash__":118},"work\u002Fwork\u002Farsonistai.md","ArsonistAI","#c2410c",{"type":8,"value":9,"toc":89},"minimark",[10,14,19,22,41,45,57,63,74,82,86],[11,12,13],"p",{},"ArsonistAI runs seven services, from content generation to operations consulting to training\nteams on Claude Code and Cursor, and sells three self serve products beside them: a KPIs plugin,\na portfolio tool, and a Figma business toolkit. That is two different businesses sharing one\nhomepage, and the failure mode is obvious. An enterprise buyer evaluating a consultancy and a\ndesigner buying a plugin do not want to read the same page.",[15,16,18],"h2",{"id":17},"the-problem-underneath-the-brief","The problem underneath the brief",[11,20,21],{},"Most sites solve this by picking one audience and hiding the other behind a nav item. That treats\nthe second audience as an afterthought, which shows. The actual fix is structural: let the\nservices read as a consultancy's capability list, let the products read as a small, confident\nshelf of things you can just buy, and make sure neither section has to apologize for the other's\ntone.",[23,24,25,31,36],"metric-row",{},[26,27],"metric",{"label":28,"note":29,"value":30},"Services listed","Content, concept visualization, exploration, experience optimization, product design, ops consulting, training.","7",[26,32],{"label":33,"note":34,"value":35},"Self serve products","A KPIs plugin, a portfolio tool, and a Figma business toolkit, sold without a sales call.","3",[26,37],{"label":38,"note":39,"value":40},"Locales","English and Spanish, resolved through the same path segment pattern as the multilingual travel sites.","2",[15,42,44],{"id":43},"how-it-is-built","How it is built",[11,46,47,48,52,53,56],{},"Next.js, built with Turbopack rather than the default bundler, on a design token system laid over\nTailwind rather than raw utility classes. Tokens are named in the Material 3 convention,\n",[49,50,51],"code",{},"text-label-lg",", ",[49,54,55],{},"rounded-shape-full",", but the palette underneath is the brand's own lava red\nrather than Material's defaults. That distinction matters more than it sounds: it gets the\ndiscipline of a token system, consistent spacing and type scale across seven service pages,\nwithout inheriting a design language that has nothing to do with fire.",[58,59],"shot",{"alt":60,"caption":61,"src":62},"The ArsonistAI home page hero in dark mode, with the lava accented logo and a sticky blurred navigation bar.","Dark mode is the default rendering, not a toggle a visitor discovers later. The lava palette was built to live there permanently.","\u002Fwork\u002Farsonistai\u002Fshot-home.png",[11,64,65,66,69,70,73],{},"The contact form runs Cloudflare Turnstile instead of a visible CAPTCHA, which keeps the one\naction an enterprise lead actually needs to take, send a message, from competing with a puzzle.\nLocale routing follows the same path segment pattern this portfolio uses elsewhere: ",[49,67,68],{},"\u002Fen"," and\n",[49,71,72],{},"\u002Fes"," resolve through one route tree, the same trick applied to a fire themed design consultancy\ninstead of a travel operator.",[75,76,79],"callout",{"title":77,"tone":78},"The decision that held up","accent",[11,80,81],{},"Naming the design tokens after a system nobody on the team was actually using kept the palette\ndisciplined without importing that system's opinions. A token layer earns its keep by being\nconsistent, not by being borrowed wholesale.",[15,83,85],{"id":84},"what-i-would-keep","What I would keep",[11,87,88],{},"Letting the services and the products sit in genuinely different registers on the same page,\nrather than forcing a single tone to cover a consulting engagement and a plugin purchase. Buyers\nin each category never have to translate the other section into something that applies to them.",{"title":90,"searchDepth":91,"depth":92,"links":93},"",2,3,[94,95,96],{"id":17,"depth":91,"text":18},{"id":43,"depth":91,"text":44},{"id":84,"depth":91,"text":85},"2026-07","\u002Fwork\u002Farsonistai\u002Fcover.png","The ArsonistAI home page in dark mode, showing the lava accented services grid above a row of client logos.","md",null,"https:\u002F\u002Fwww.arsonistai.com",{},true,"\u002Fwork\u002Farsonistai","Front end build and design system",{"title":5,"description":13},[109,110,111,112,113],"Next.js","React","Turbopack","Tailwind CSS","Cloudflare Turnstile","completed","work\u002Farsonistai","An AI design consultancy with two audiences on one homepage, enterprises hiring for AI augmented product work, and individual designers buying tools off the shelf.",2026,"adx_EYHFqAji85SKl-Ldukrz7wHlt60NevLTzN4h9UY",[120,124,128,129,133,137,141,145,149,153],{"path":121,"title":122,"summary":123},"\u002Fwork\u002Fwayta-peru","Wayta Perú","A bilingual travel operator site where the marketing page, the blog, and the studio the client edits in are one deployment.",{"path":125,"title":126,"summary":127},"\u002Fwork\u002Fpersonae","Personae","A persona library built on IBM Carbon, where every profile links out to its research and every reader can flag a claim that no longer holds.",{"path":105,"title":5,"summary":116},{"path":130,"title":131,"summary":132},"\u002Fwork\u002Fhcit","HCIT","A five vertical AI and infrastructure integrator whose site had to make enterprise grade credibility legible without turning into an alphabet soup of sub brands.",{"path":134,"title":135,"summary":136},"\u002Fwork\u002Flynne","Lynne","A lead capture first booking site for a solo telehealth counseling practice, sized to get one action in front of a visitor rather than a full site's worth of pages.",{"path":138,"title":139,"summary":140},"\u002Fwork\u002Fn-hub","N Brand Portal","An internal brand portal holding the logos, color tokens, and templates a small team actually needs, so the approved asset stops living in an eight month old Slack thread.",{"path":142,"title":143,"summary":144},"\u002Fwork\u002Freductivist","Reductivist","A minimalist goods brand selling a handful of well made objects, where the real commerce problem was resisting the urge to add a fourth product to the homepage.",{"path":146,"title":147,"summary":148},"\u002Fwork\u002Fpattern-library","Pattern Library","Four hundred and twenty two documented interaction patterns across web, mobile, and cross platform concerns, with the rationale that makes each one work.",{"path":150,"title":151,"summary":152},"\u002Fwork\u002Fflow-society-mx","Flow Society MX","An e-bike tour operator in Jalisco, with a six step booking flow, a per departure availability calendar, and an operator dashboard behind it.",{"path":154,"title":155,"summary":156},"\u002Fwork\u002Fcytron-motorcycles","Cytron Motorcycles","A Tokyo motorcycle brand invented end to end, drawn as a working prototype and then built as the site that prototype had been arguing for.",1789230933861]