[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fpersona\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":39,"showcases":264,"links":265,"dates":310},"\u002Fexamples\u002Fapps\u002Fpersona\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Persona product screens examples - Nicelydone","Browse Persona screen design examples. Preview the interface screenshots and explore related UI patterns. All the world’s a stage","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fpersona_gallery_7c7f0b97_nicelydone.jpg",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Persona design examples","\u002Fexamples\u002Fapps\u002Fpersona",{"label":23,"to":4},"Persona product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"categories":34},"Persona","persona","All the world’s a stage","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpersona-1a69c2f5.png","https:\u002F\u002Fpersona.co",[35],{"id":36,"title":37,"slug":38},6,"Publishing","publishing",[40,69,109,154,184,206,223,237,254],{"uuid":41,"title":42,"description":43,"canonical_path":4,"image":11,"width":44,"height":45,"image_alt":46,"kind":47,"patterns":48,"component_categories":58,"app":67},"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",[49],{"id":50,"label":51,"slug":52,"rank":53,"group":54},145,"Demo Page","demo-page",0,{"id":55,"label":56,"slug":57},15,"Marketing Page Types","marketing-page-types",[59,63],{"id":60,"title":61,"slug":62},174,"Card","card",{"id":64,"title":65,"slug":66},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":42,"description":71,"canonical_path":4,"image":72,"width":44,"height":73,"image_alt":46,"kind":47,"patterns":74,"component_categories":97,"app":107},"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,[75,83,92],{"id":76,"label":77,"slug":78,"rank":53,"group":79},7,"Add & Create","add-and-create",{"id":80,"label":81,"slug":82},2,"Actions","actions",{"id":84,"label":85,"slug":86,"rank":87,"group":88},86,"Templates","templates",1,{"id":89,"label":90,"slug":91},8,"Pages & Content","pages-and-content",{"id":93,"label":94,"slug":95,"rank":80,"group":96},82,"Media Detail","media-detail",{"id":89,"label":90,"slug":91},[98,102,106],{"id":99,"title":100,"slug":101},284,"Modal","modal",{"id":103,"title":104,"slug":105},277,"Button group","button-group",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":108},[],{"uuid":110,"title":111,"description":112,"canonical_path":4,"image":113,"width":44,"height":73,"image_alt":114,"kind":47,"patterns":115,"component_categories":136,"app":152},"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",[116,124,131],{"id":117,"label":118,"slug":119,"rank":53,"group":120},55,"Design Editor","design-editor",{"id":121,"label":122,"slug":123},5,"Media & Tools","media-and-tools",{"id":125,"label":111,"slug":126,"rank":87,"group":127},102,"settings",{"id":128,"label":129,"slug":130},10,"Settings & Admin","settings-and-admin",{"id":132,"label":133,"slug":134,"rank":80,"group":135},11,"Edit","edit",{"id":80,"label":81,"slug":82},[137,138,139,143,147,151],{"id":60,"title":61,"slug":62},{"id":103,"title":104,"slug":105},{"id":140,"title":141,"slug":142},223,"Slider","slider",{"id":144,"title":145,"slug":146},257,"Input number","input-number",{"id":148,"title":149,"slug":150},233,"Tabs","tabs",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":153},[],{"uuid":155,"title":156,"description":157,"canonical_path":4,"image":158,"width":159,"height":73,"image_alt":160,"kind":47,"patterns":161,"component_categories":174,"app":182},"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",2800,"Popover from Persona",[162,164,166],{"id":117,"label":118,"slug":119,"rank":53,"group":163},{"id":121,"label":122,"slug":123},{"id":132,"label":133,"slug":134,"rank":87,"group":165},{"id":80,"label":81,"slug":82},{"id":167,"label":168,"slug":169,"rank":80,"group":170},114,"Confirmation","confirmation",{"id":171,"label":172,"slug":173},12,"States & Feedback","states-and-feedback",[175,179,180,181],{"id":176,"title":177,"slug":178},168,"Accordion","accordion",{"id":140,"title":141,"slug":142},{"id":148,"title":149,"slug":150},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":183},[],{"uuid":185,"title":186,"description":187,"canonical_path":4,"image":188,"width":44,"height":73,"image_alt":189,"kind":47,"patterns":190,"component_categories":195,"app":204},"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",[191,193],{"id":117,"label":118,"slug":119,"rank":53,"group":192},{"id":121,"label":122,"slug":123},{"id":132,"label":133,"slug":134,"rank":87,"group":194},{"id":80,"label":81,"slug":82},[196,200,201,202,203],{"id":197,"title":198,"slug":199},183,"Color picker","color-picker",{"id":176,"title":177,"slug":178},{"id":140,"title":141,"slug":142},{"id":148,"title":149,"slug":150},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":205},[],{"uuid":207,"title":186,"description":208,"canonical_path":4,"image":209,"width":159,"height":73,"image_alt":189,"kind":47,"patterns":210,"component_categories":215,"app":221},"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",[211,213],{"id":117,"label":118,"slug":119,"rank":53,"group":212},{"id":121,"label":122,"slug":123},{"id":132,"label":133,"slug":134,"rank":87,"group":214},{"id":80,"label":81,"slug":82},[216,217,218,219,220],{"id":176,"title":177,"slug":178},{"id":140,"title":141,"slug":142},{"id":144,"title":145,"slug":146},{"id":148,"title":149,"slug":150},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":222},[],{"uuid":224,"title":186,"description":225,"canonical_path":4,"image":226,"width":159,"height":73,"image_alt":189,"kind":47,"patterns":227,"component_categories":232,"app":235},"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",[228,230],{"id":117,"label":118,"slug":119,"rank":53,"group":229},{"id":121,"label":122,"slug":123},{"id":132,"label":133,"slug":134,"rank":87,"group":231},{"id":80,"label":81,"slug":82},[233,234],{"id":103,"title":104,"slug":105},{"id":144,"title":145,"slug":146},{"slug":30,"title":29,"logo":32,"categories":236},[],{"uuid":238,"title":186,"description":239,"canonical_path":4,"image":240,"width":159,"height":73,"image_alt":189,"kind":47,"patterns":241,"component_categories":246,"app":252},"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",[242,244],{"id":117,"label":118,"slug":119,"rank":53,"group":243},{"id":121,"label":122,"slug":123},{"id":132,"label":133,"slug":134,"rank":87,"group":245},{"id":80,"label":81,"slug":82},[247,248,249,250,251],{"id":197,"title":198,"slug":199},{"id":176,"title":177,"slug":178},{"id":144,"title":145,"slug":146},{"id":148,"title":149,"slug":150},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":253},[],{"uuid":255,"title":256,"description":257,"canonical_path":4,"image":258,"width":159,"height":73,"image_alt":259,"kind":47,"patterns":260,"component_categories":261,"app":262},"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":30,"title":29,"logo":32,"categories":263},[],[],[266,268,270,272,274,276,278,280,283,286,289,292,294,298,302,306],{"label":118,"to":267},"\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":133,"to":269},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":77,"to":271},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":168,"to":273},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":94,"to":275},"\u002Fexamples\u002Fscreens\u002Fmedia-detail",{"label":111,"to":277},"\u002Fexamples\u002Fscreens\u002Fsettings",{"label":85,"to":279},"\u002Fexamples\u002Fscreens\u002Ftemplates",{"label":281,"to":282},"Persona marketing pages","\u002Fexamples\u002Fapps\u002Fpersona\u002Fmarketing",{"label":284,"to":285},"Persona user flows","\u002Fexamples\u002Fapps\u002Fpersona\u002Fflows",{"label":287,"to":288},"Persona UI components","\u002Fexamples\u002Fapps\u002Fpersona\u002Fcomponents",{"label":290,"to":291},"Publishing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpublishing",{"label":293,"to":18},"All SaaS app examples",{"label":295,"to":296,"description":297},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":299,"to":300,"description":301},"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":303,"to":304,"description":305},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":307,"to":308,"description":309},"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":311,"updated_at":312},"2016-06-16T08:45:00.000Z","2026-09-13T13:02:39.000Z"]