[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fpersona":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":45,"showcases":46,"links":277,"dates":309},"\u002Fexamples\u002Fapps\u002Fpersona","detail","apps",true,{"title":9,"description":10,"og_image":11},"Persona design examples - Nicelydone","Explore Persona UI design examples. All the world’s a stage","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_gallery_7c7f0b97_nicelydone.jpg",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Persona design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Persona",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fpersona\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fpersona\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Persona","persona","All the world’s a stage","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpersona-1a69c2f5.png","https:\u002F\u002Fpersona.co",[41],{"id":42,"title":43,"slug":44},6,"Publishing","publishing",[],[47,274],{"family":48,"examples":49},"screens",[50,79,119,164,189,207,221,247,264],{"uuid":51,"title":52,"description":53,"canonical_path":29,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":58,"component_categories":68,"app":77},"355a8818-ddd7-42f0-91e6-482599775b99","Gallery","Demo page showcasing a gallery of 32 distinct visual persona cards, exploring different typography, color palettes, and layout treatments for image and text combinations.",2780,14846,"Gallery from Persona","screen",[59],{"id":60,"label":61,"slug":62,"rank":63,"group":64},145,"Demo Page","demo-page",0,{"id":65,"label":66,"slug":67},15,"Marketing Page Types","marketing-page-types",[69,73],{"id":70,"title":71,"slug":72},174,"Card","card",{"id":74,"title":75,"slug":76},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":78},[],{"uuid":80,"title":52,"description":81,"canonical_path":29,"image":82,"width":54,"height":83,"image_alt":56,"kind":57,"patterns":84,"component_categories":107,"app":117},"8a8e7d60-89dc-4ee4-b89c-f95c1409aed4","Creation flow step where the user previews the 'Bas Jan Ader' visual style template and can choose to start a new project with it.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_gallery-2_bf97ef44_nicelydone.jpg",1544,[85,93,102],{"id":86,"label":87,"slug":88,"rank":63,"group":89},7,"Add & Create","add-and-create",{"id":90,"label":91,"slug":92},2,"Actions","actions",{"id":94,"label":95,"slug":96,"rank":97,"group":98},86,"Templates","templates",1,{"id":99,"label":100,"slug":101},8,"Pages & Content","pages-and-content",{"id":103,"label":104,"slug":105,"rank":90,"group":106},82,"Media Detail","media-detail",{"id":99,"label":100,"slug":101},[108,112,116],{"id":109,"title":110,"slug":111},284,"Modal","modal",{"id":113,"title":114,"slug":115},277,"Button group","button-group",{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":118},[],{"uuid":120,"title":121,"description":122,"canonical_path":29,"image":123,"width":54,"height":83,"image_alt":124,"kind":57,"patterns":125,"component_categories":146,"app":162},"b35254ba-21d4-43c3-a0b3-bf74cf25eb4e","Settings","Design editor where the user customizes the visual style of a persona page, adjusting width, padding, and alignment via a right-hand properties sidebar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_settings_77d626c0_nicelydone.jpg","Settings from Persona",[126,134,141],{"id":127,"label":128,"slug":129,"rank":63,"group":130},55,"Design Editor","design-editor",{"id":131,"label":132,"slug":133},5,"Media & Tools","media-and-tools",{"id":135,"label":121,"slug":136,"rank":97,"group":137},102,"settings",{"id":138,"label":139,"slug":140},10,"Settings & Admin","settings-and-admin",{"id":142,"label":143,"slug":144,"rank":90,"group":145},11,"Edit","edit",{"id":90,"label":91,"slug":92},[147,148,149,153,157,161],{"id":70,"title":71,"slug":72},{"id":113,"title":114,"slug":115},{"id":150,"title":151,"slug":152},223,"Slider","slider",{"id":154,"title":155,"slug":156},257,"Input number","input-number",{"id":158,"title":159,"slug":160},233,"Tabs","tabs",{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":163},[],{"uuid":165,"title":166,"description":167,"canonical_path":29,"image":168,"width":54,"height":83,"image_alt":169,"kind":57,"patterns":170,"component_categories":175,"app":187},"3f757d02-dd34-431a-86af-084a6ecb8d44","Content editor","Design editor where the user customizes the layout, padding, alignment, and typography of a persona profile page.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_content-editor-2_f1d1e667_nicelydone.jpg","Content editor from Persona",[171,173],{"id":127,"label":128,"slug":129,"rank":63,"group":172},{"id":131,"label":132,"slug":133},{"id":142,"label":143,"slug":144,"rank":97,"group":174},{"id":90,"label":91,"slug":92},[176,180,184,185,186],{"id":177,"title":178,"slug":179},183,"Color picker","color-picker",{"id":181,"title":182,"slug":183},168,"Accordion","accordion",{"id":150,"title":151,"slug":152},{"id":158,"title":159,"slug":160},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":188},[],{"uuid":190,"title":166,"description":191,"canonical_path":29,"image":192,"width":193,"height":83,"image_alt":169,"kind":57,"patterns":194,"component_categories":199,"app":205},"32f868e5-1c11-4c50-b0a2-a197800b760b","Design editor where the user configures the layout, alignment, and text styles for a persona page via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_content-editor-3_b3699b12_nicelydone.jpg",2800,[195,197],{"id":127,"label":128,"slug":129,"rank":63,"group":196},{"id":131,"label":132,"slug":133},{"id":142,"label":143,"slug":144,"rank":97,"group":198},{"id":90,"label":91,"slug":92},[200,201,202,203,204],{"id":181,"title":182,"slug":183},{"id":150,"title":151,"slug":152},{"id":154,"title":155,"slug":156},{"id":158,"title":159,"slug":160},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":206},[],{"uuid":208,"title":166,"description":209,"canonical_path":29,"image":210,"width":193,"height":83,"image_alt":169,"kind":57,"patterns":211,"component_categories":216,"app":219},"7ccbc94c-ef23-4280-939b-385cd79926f7","Design editor where the user is selecting a font family from an open dropdown menu in the typography inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_content-editor-4_b513e024_nicelydone.jpg",[212,214],{"id":127,"label":128,"slug":129,"rank":63,"group":213},{"id":131,"label":132,"slug":133},{"id":142,"label":143,"slug":144,"rank":97,"group":215},{"id":90,"label":91,"slug":92},[217,218],{"id":113,"title":114,"slug":115},{"id":154,"title":155,"slug":156},{"slug":36,"title":35,"logo":38,"categories":220},[],{"uuid":222,"title":223,"description":224,"canonical_path":29,"image":225,"width":193,"height":83,"image_alt":226,"kind":57,"patterns":227,"component_categories":240,"app":245},"fe284787-b11c-4137-a214-675df1edfd28","Popover","Design editor where the user is prompted to save or discard changes made to the typography and layout settings before proceeding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_popover_73161043_nicelydone.jpg","Popover from Persona",[228,230,232],{"id":127,"label":128,"slug":129,"rank":63,"group":229},{"id":131,"label":132,"slug":133},{"id":142,"label":143,"slug":144,"rank":97,"group":231},{"id":90,"label":91,"slug":92},{"id":233,"label":234,"slug":235,"rank":90,"group":236},114,"Confirmation","confirmation",{"id":237,"label":238,"slug":239},12,"States & Feedback","states-and-feedback",[241,242,243,244],{"id":181,"title":182,"slug":183},{"id":150,"title":151,"slug":152},{"id":158,"title":159,"slug":160},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":246},[],{"uuid":248,"title":166,"description":249,"canonical_path":29,"image":250,"width":193,"height":83,"image_alt":169,"kind":57,"patterns":251,"component_categories":256,"app":262},"1fef1453-fe1e-46e2-84e7-d4b43dd0f45a","Design editor where the user customizes the backdrop of their persona, configuring image selection, scaling, color overlays, and transition effects in a right-hand sidebar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_content-editor_da331b5d_nicelydone.jpg",[252,254],{"id":127,"label":128,"slug":129,"rank":63,"group":253},{"id":131,"label":132,"slug":133},{"id":142,"label":143,"slug":144,"rank":97,"group":255},{"id":90,"label":91,"slug":92},[257,258,259,260,261],{"id":177,"title":178,"slug":179},{"id":181,"title":182,"slug":183},{"id":154,"title":155,"slug":156},{"id":158,"title":159,"slug":160},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":263},[],{"uuid":265,"title":266,"description":267,"canonical_path":29,"image":268,"width":193,"height":83,"image_alt":269,"kind":57,"patterns":270,"component_categories":271,"app":272},"31be2c97-6236-4cc3-9377-778e87b9ad52","Sign up","Account creation Onboarding Settings Form Account management Account settings","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_sign-up_b28ca2bf_nicelydone.jpg","Sign up from Persona",[],[],{"slug":36,"title":35,"logo":38,"categories":273},[],{"family":275,"examples":276},"pages",[],[278,280,282,285,288,291,293,297,301,305],{"label":279,"to":29},"Persona product screens",{"label":281,"to":32},"Persona marketing pages",{"label":283,"to":284},"Persona user flows","\u002Fexamples\u002Fapps\u002Fpersona\u002Fflows",{"label":286,"to":287},"Persona UI components","\u002Fexamples\u002Fapps\u002Fpersona\u002Fcomponents",{"label":289,"to":290},"Publishing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpublishing",{"label":292,"to":18},"All SaaS app examples",{"label":294,"to":295,"description":296},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":298,"to":299,"description":300},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":302,"to":303,"description":304},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":306,"to":307,"description":308},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":310,"updated_at":311},"2016-06-16T08:45:00.000Z","2026-09-13T13:02:39.000Z"]