[{"data":1,"prerenderedAt":142},["ShallowReactive",2],{"work-pattern-library":3,"work-siblings-pattern-library":104},{"id":4,"title":5,"accent":6,"body":7,"completedAt":82,"cover":83,"coverAlt":84,"description":13,"extension":85,"external":86,"liveUrl":86,"meta":87,"navigation":88,"order":89,"path":90,"role":91,"seo":92,"stack":93,"status":99,"stem":100,"summary":101,"year":102,"__hash__":103},"work\u002Fwork\u002Fpattern-library.md","Pattern Library","#3730a3",{"type":8,"value":9,"toc":74},"minimark",[10,14,19,22,41,45,48,51,57,60,67,71],[11,12,13],"p",{},"Patterns are recipes, components are ingredients, and a design system is the cookbook. Most\nteams document the ingredients thoroughly and never write down a single recipe, which is why the\nsame navigation argument gets held twice a year.",[15,16,18],"h2",{"id":17},"the-problem-underneath-the-brief","The problem underneath the brief",[11,20,21],{},"A component library tells you that a button exists and what states it has. It cannot tell you\nwhether this screen wants a button at all. That knowledge lives in people's heads, leaves when\nthey leave, and gets rebuilt from scratch by whoever arrives next. The gap is not a missing\ncomponent, it is a missing named solution to a recurring problem, together with the context that\nmakes it the right answer here and the wrong one two screens over.",[23,24,25,31,36],"metric-row",{},[26,27],"metric",{"label":28,"note":29,"value":30},"Documented patterns","Each one written against a fixed template rather than free form notes.","422",[26,32],{"label":33,"note":34,"value":35},"Platform tracks","Web, mobile, and the cross cutting concerns that belong to neither.","3",[26,37],{"label":38,"note":39,"value":40},"Mobile conventions compared","iOS Human Interface Guidelines and Material 3 divergence is called out per pattern.","2",[15,42,44],{"id":43},"how-it-is-organised","How it is organised",[11,46,47],{},"Every entry follows the same anatomy: the problem, the context where it applies, the solution,\nthe accessibility requirements, and the cases where the pattern is the wrong choice. That last\nsection is the one people skip writing and the one they come back for.",[11,49,50],{},"The mobile track calls out where the two platform conventions actually disagree, rather than\npicking one and pretending it is universal. A back gesture, a sheet dismissal, and a destructive\nconfirmation are three places where following one platform's guidance on the other produces an\napp that feels subtly wrong and no one can say why.",[52,53],"shot",{"alt":54,"caption":55,"src":56},"The pattern browser with the search field focused and category filters visible along the top.","The browser is a single generated HTML file with search and filters, so the library opens instantly and works with no build step or network.","\u002Fwork\u002Fpattern-library\u002Fshot-browser.png",[11,58,59],{},"The cross platform track holds motion, AI interfaces, and a persuasion section that includes a\ntaxonomy of deceptive patterns. Naming a dark pattern precisely is what lets a team decline to\nbuild one without the conversation becoming a matter of taste.",[61,62],"demo",{"component":63,"note":64,"origin":65,"title":66},"TransitionDemo","Chrome runs the real View Transitions morph. Everywhere else the same state change happens without the tween, and under reduced motion it is skipped entirely. That progressive story is the pattern, not a caveat attached to it.","the pattern library motion track","Shared element transition, the pattern demonstrating itself",[15,68,70],{"id":69},"what-it-changed","What it changed",[11,72,73],{},"Having the recipes written down moved design review from opinion to reference. The question stops\nbeing whether someone likes the interaction and becomes whether this is the pattern for this\nproblem, and if not, which one is.",{"title":75,"searchDepth":76,"depth":77,"links":78},"",2,3,[79,80,81],{"id":17,"depth":76,"text":18},{"id":43,"depth":76,"text":44},{"id":69,"depth":76,"text":70},"2026-04","\u002Fwork\u002Fpattern-library\u002Fcover.png","The pattern library browser, showing a search field above a filtered grid of pattern cards.","md",null,{},true,8,"\u002Fwork\u002Fpattern-library","Research, writing, and the browser that reads it",{"title":5,"description":13},[94,95,96,97,98],"Markdown","Vanilla JS","iOS HIG","Material 3","WCAG 2.2","completed","work\u002Fpattern-library","Four hundred and twenty two documented interaction patterns across web, mobile, and cross platform concerns, with the rationale that makes each one work.",2026,"41UK-LdAizeVKG0rRT8VX6YqnBTrnfdmhfPd7aoUz8Q",[105,109,113,117,121,125,129,133,134,138],{"path":106,"title":107,"summary":108},"\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":110,"title":111,"summary":112},"\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":114,"title":115,"summary":116},"\u002Fwork\u002Farsonistai","ArsonistAI","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.",{"path":118,"title":119,"summary":120},"\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":122,"title":123,"summary":124},"\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":126,"title":127,"summary":128},"\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":130,"title":131,"summary":132},"\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":90,"title":5,"summary":101},{"path":135,"title":136,"summary":137},"\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":139,"title":140,"summary":141},"\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.",1789230933970]