[{"data":1,"prerenderedAt":107},["ShallowReactive",2],{"$fgjdiF75rFXSxMsa-sE54zm6ZsQoxH-BGFVNQEcR2mf4":3},{"item":4,"meta":47},{"id":5,"title":6,"alt":7,"date":8,"design-phase":9,"designer":10,"era":11,"extension":12,"featured":13,"gallery":14,"image":16,"meta":21,"narrative":36,"project":37,"source-file":36,"stem":38,"subject":39,"tags":40,"tool":44,"type":45,"__hash__":46},"archive\u002Farchive\u002F2026-q3\u002F2026-03-17-c21-policy-skin.md","Policy Skin","SecurityPolicySkin demo — the extracted policy card treatment with ribbon states.","2026-03-17","1.0","mark","seed","md",false,[15,18],{"src":16,"alt":17},"\u002Fcycles\u002Fdesign\u002Fc21-policy-skin.png","SecurityPolicySkin demo with ribbon states.",{"src":19,"alt":20},"\u002Fcycles\u002Fdesign\u002Fc21-policy-skin-full.png","Policy Skin — full demo page",{"body":22},{"type":23,"value":24,"toc":32},"minimark",[25,29],[26,27,28],"p",{},"c21 extracted the policy card's visual treatment — colored border, shadow, ribbon badge — into a composable skin any card content can wear. The demo shows all five states plus the ribbon-less variant.",[26,30,31],{},"Captured 2026-08-15 (c71 backfill). Current render of a surface first built in c21; visual language reflects the later c48\u002Fc52 re-skins.",{"title":33,"searchDepth":34,"depth":34,"links":35},"",2,[],null,"brand","archive\u002F2026-q3\u002F2026-03-17-c21-policy-skin","product",[41,42,43],"c21","security","components","Playwright capture","screengrab","OSexgr0AfCdqnu0fD_593RMi-qKipStvhoMP-5P-X2Y",{"eras":48,"designers":71,"subjects":75,"projects":95},[49,56,63,66],{"id":50,"name":51,"description":52,"startDate":53,"endDate":54,"order":55},"ideation","Ideation","First dashboard and site mockups, pre-brand.","2022-01","2025-09",0,{"id":57,"name":58,"description":59,"startDate":60,"endDate":61,"order":62},"pre-seed","Pre-Seed","Establishing identity, voice, and visual language.","2025-10","2026-01",1,{"id":11,"name":64,"description":65,"startDate":61,"order":34},"Seed","Building the product and its interface.",{"id":67,"name":68,"description":69,"order":70},"post-seed","Post-Seed","Scaling the product and expanding reach.",3,[72],{"id":10,"name":73,"role":74},"Mark","Founder \u002F Design",[76,80,84,87,91],{"id":77,"label":78,"description":79},"front-site","Front Site","Public website and marketing pages.",{"id":81,"label":82,"description":83},"pitch-deck","Pitch Deck","Investor and partner presentations.",{"id":39,"label":85,"description":86},"Product","Application UI and dashboard.",{"id":88,"label":89,"description":90},"cli","Command Line Tools","Terminal interfaces and output.",{"id":92,"label":93,"description":94},"brand-system","Brand System","Style guide, brand documents, MCP server.",[96,100,104],{"id":97,"label":98,"description":99},"brochure-site","Brochure Site","Public marketing website — messaging, landing pages, campaigns.",{"id":101,"label":102,"description":103},"dashboard","Dashboard","Product application UI — the tool customers use.",{"id":37,"label":105,"description":106},"Brand","Brand system, style guides, design tokens, and tooling.",1789151054734]