[{"data":1,"prerenderedAt":112},["ShallowReactive",2],{"$fJc7KsHyOeyoypY__raJDVSH25dSvKZZdI4uJpxFj32U":3},{"item":4,"meta":52},{"id":5,"title":6,"alt":7,"date":8,"design-phase":9,"designer":10,"era":11,"extension":12,"featured":13,"gallery":14,"image":26,"meta":27,"narrative":39,"project":40,"source-file":41,"stem":42,"subject":43,"tags":44,"tool":49,"type":50,"__hash__":51},"archive\u002Farchive\u002F2022-q2\u002F2022-06-15-design-tokens-components.md","Design Tokens & Components","Dark-themed problems-vs-solutions page layout with teal and coral section headers comparing challenges with Qpoint benefits.","2022-06-15","1.0","mark","ideation","md",false,[15,16,17,18,19,20,21,22,23,24,25],"\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-2.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-3.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-4.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-5.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-6.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-7.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-8.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-9.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-10.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-11.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components-12.png","\u002Farchive\u002F2022-q2\u002Fdesign-tokens-components.png",{"body":28},{"type":29,"value":30,"toc":35},"minimark",[31],[32,33,34],"p",{},"Twelve explorations of page sections, layout patterns, and component structures.\nIncludes problems\u002Fsolutions layouts, \"Big point\" headline treatments with\nvarious image placement options, and wireframe-level content block arrangements.\nEarly thinking about how to systematize the marketing site's visual vocabulary.",{"title":36,"searchDepth":37,"depth":37,"links":38},"",2,[],null,"brand","design.marketing.history.1.ai","archive\u002F2022-q2\u002F2022-06-15-design-tokens-components","brand-system",[45,46,47,48],"design-tokens","components","layout-patterns","wireframes","Illustrator","sketch","rNN-UAKNYdCJOhhX3-01l08pbQQ77znlzHUsemmMXm0",{"eras":53,"designers":76,"subjects":80,"projects":100},[54,60,67,71],{"id":11,"name":55,"description":56,"startDate":57,"endDate":58,"order":59},"Ideation","First dashboard and site mockups, pre-brand.","2022-01","2025-09",0,{"id":61,"name":62,"description":63,"startDate":64,"endDate":65,"order":66},"pre-seed","Pre-Seed","Establishing identity, voice, and visual language.","2025-10","2026-01",1,{"id":68,"name":69,"description":70,"startDate":65,"order":37},"seed","Seed","Building the product and its interface.",{"id":72,"name":73,"description":74,"order":75},"post-seed","Post-Seed","Scaling the product and expanding reach.",3,[77],{"id":10,"name":78,"role":79},"Mark","Founder \u002F Design",[81,85,89,93,97],{"id":82,"label":83,"description":84},"front-site","Front Site","Public website and marketing pages.",{"id":86,"label":87,"description":88},"pitch-deck","Pitch Deck","Investor and partner presentations.",{"id":90,"label":91,"description":92},"product","Product","Application UI and dashboard.",{"id":94,"label":95,"description":96},"cli","Command Line Tools","Terminal interfaces and output.",{"id":43,"label":98,"description":99},"Brand System","Style guide, brand documents, MCP server.",[101,105,109],{"id":102,"label":103,"description":104},"brochure-site","Brochure Site","Public marketing website — messaging, landing pages, campaigns.",{"id":106,"label":107,"description":108},"dashboard","Dashboard","Product application UI — the tool customers use.",{"id":40,"label":110,"description":111},"Brand","Brand system, style guides, design tokens, and tooling.",1776106298998]