[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fillustrio\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":353,"links":354,"dates":412},"\u002Fexamples\u002Fapps\u002Fillustrio\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Illustrio product screens examples - Nicelydone","Browse Illustrio screen design examples. Preview the interface screenshots and explore related UI patterns. A smarter icon library","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_sign-in_ff63a838_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},"Illustrio design examples","\u002Fexamples\u002Fapps\u002Fillustrio",{"label":23,"to":4},"Illustrio 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},"Illustrio","illustrio","A smarter icon library","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fillustrio-be37898b.png","https:\u002F\u002Fillustrio.com",[35,39],{"id":36,"title":37,"slug":38},8,"Design","design",{"id":40,"title":41,"slug":42},30,"Productivity","productivity",[44,81,103,148,181,199,222,250,279,304,329,345],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":62,"app":79},"4230ed50-d272-4753-84c6-e9ce402a8410","Sign in","Sign-in screen where the user authenticates with their email and password via a modal overlay.",2880,1526,"Sign in from Illustrio","screen",[53],{"id":54,"label":55,"slug":56,"rank":57,"group":58},2,"Forgot Password","forgot-password",0,{"id":59,"label":60,"slug":61},1,"Access & Account","access-and-account",[63,67,71,75],{"id":64,"title":65,"slug":66},240,"Horizontal navigation","horizontal-navigation",{"id":68,"title":69,"slug":70},284,"Modal","modal",{"id":72,"title":73,"slug":74},233,"Tabs","tabs",{"id":76,"title":77,"slug":78},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":80},[],{"uuid":82,"title":83,"description":84,"canonical_path":4,"image":85,"width":48,"height":49,"image_alt":86,"kind":51,"patterns":87,"component_categories":93,"app":101},"97c723a7-728d-42a1-9daa-04e30360f850","Sign up","Landing page for an icon library with an active modal prompting the user to register with their email address to get started.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_sign-up_b7caf74f_nicelydone.jpg","Sign up from Illustrio",[88],{"id":89,"label":90,"slug":91,"rank":57,"group":92},5,"Sign Up","sign-up",{"id":59,"label":60,"slug":61},[94,98,99,100],{"id":95,"title":96,"slug":97},258,"Header","header",{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":102},[],{"uuid":104,"title":105,"description":106,"canonical_path":4,"image":107,"width":48,"height":49,"image_alt":108,"kind":51,"patterns":109,"component_categories":138,"app":146},"84333dd7-0e65-4d7d-b074-77d963d43e8f","Home","Search results page where the user browses a grid of yellow icons and can filter them by style using a bottom tab bar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_home_6298272a_nicelydone.jpg","Home from Illustrio",[110,117,122,129],{"id":111,"label":112,"slug":113,"rank":57,"group":114},84,"Search Results","search-results",{"id":36,"label":115,"slug":116},"Pages & Content","pages-and-content",{"id":118,"label":119,"slug":120,"rank":59,"group":121},79,"Browse","browse",{"id":36,"label":115,"slug":116},{"id":123,"label":124,"slug":125,"rank":54,"group":126},13,"Filter & Sort","filter-and-sort",{"id":54,"label":127,"slug":128},"Actions","actions",{"id":130,"label":131,"slug":132,"rank":133,"group":134},130,"Checkout","checkout",3,{"id":135,"label":136,"slug":137},14,"Payments & Checkout","payments-and-checkout",[139,143,144,145],{"id":140,"title":141,"slug":142},260,"Badge","badge",{"id":64,"title":65,"slug":66},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"width":48,"height":49,"image_alt":153,"kind":51,"patterns":154,"component_categories":174,"app":179},"3cb03574-e60d-474b-836d-e735701b2f52","Settings","Settings modal where the user updates their first name, last name, and views their email address under the profile tab.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_settings_4e4310df_nicelydone.jpg","Settings from Illustrio",[155,162,166],{"id":133,"label":156,"slug":157,"rank":57,"group":158},"Profile","profile",{"id":159,"label":160,"slug":161},11,"Social & Collaboration","social-and-collaboration",{"id":159,"label":163,"slug":164,"rank":59,"group":165},"Edit","edit",{"id":54,"label":127,"slug":128},{"id":167,"label":168,"slug":169,"rank":54,"group":170},94,"Account Settings","account-settings",{"id":171,"label":172,"slug":173},10,"Settings & Admin","settings-and-admin",[175,176,177,178],{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":180},[],{"uuid":182,"title":183,"description":184,"canonical_path":4,"image":185,"width":48,"height":49,"image_alt":186,"kind":51,"patterns":187,"component_categories":195,"app":197},"645b9a1c-c977-4a8b-a9d2-b4c4ec3b53d0","Notification","Search interface for an icon library where the user can find icons and toggle between styles like fill, stroke, and duo via a bottom bar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_notification_f58a22bc_nicelydone.jpg","Notification from Illustrio",[188,193],{"id":189,"label":190,"slug":191,"rank":57,"group":192},22,"Search","search",{"id":54,"label":127,"slug":128},{"id":118,"label":119,"slug":120,"rank":59,"group":194},{"id":36,"label":115,"slug":116},[196],{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":198},[],{"uuid":200,"title":201,"description":202,"canonical_path":4,"image":203,"width":48,"height":49,"image_alt":204,"kind":51,"patterns":205,"component_categories":215,"app":220},"f3cbb072-513e-4c3f-b8b7-394220d30e45","Pricing","In-app modal where the user selects between an unlimited monthly subscription, a pay-as-you-go option, or a fixed credit pack for downloading icons.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_pricing_9953e25c_nicelydone.jpg","Pricing from Illustrio",[206,213],{"id":207,"label":201,"slug":208,"rank":57,"group":209},89,"pricing",{"id":210,"label":211,"slug":212},9,"Plans & Limits","plans-and-limits",{"id":130,"label":131,"slug":132,"rank":59,"group":214},{"id":135,"label":136,"slug":137},[216,217,218,219],{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":221},[],{"uuid":223,"title":224,"description":225,"canonical_path":4,"image":226,"width":48,"height":49,"image_alt":227,"kind":51,"patterns":228,"component_categories":243,"app":248},"20d67659-ee3a-451c-ae24-cea0a5d689e1","Dropdown","Search results page where the user browses a grid of icons, filters by color palette via a dropdown, and selects icon styles like fill or stroke from a bottom toolbar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_dropdown_fe0727f6_nicelydone.jpg","Dropdown from Illustrio",[229,231,233,235,240],{"id":111,"label":112,"slug":113,"rank":57,"group":230},{"id":36,"label":115,"slug":116},{"id":123,"label":124,"slug":125,"rank":59,"group":232},{"id":54,"label":127,"slug":128},{"id":118,"label":119,"slug":120,"rank":54,"group":234},{"id":36,"label":115,"slug":116},{"id":236,"label":237,"slug":238,"rank":133,"group":239},23,"Select","select",{"id":54,"label":127,"slug":128},{"id":130,"label":131,"slug":132,"rank":241,"group":242},4,{"id":135,"label":136,"slug":137},[244,245,246,247],{"id":140,"title":141,"slug":142},{"id":64,"title":65,"slug":66},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":249},[],{"uuid":251,"title":252,"description":253,"canonical_path":4,"image":254,"width":48,"height":49,"image_alt":255,"kind":51,"patterns":256,"component_categories":274,"app":277},"0788e22f-b239-4437-9820-6d0abdd9fb2b","Single","Detail modal where the user previews an icon, switches between style variants, reviews metadata like designer and keywords, and downloads the asset in SVG or PNG format.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_single_8225656a_nicelydone.jpg","Single from Illustrio",[257,262,267,272],{"id":258,"label":259,"slug":260,"rank":57,"group":261},82,"Media Detail","media-detail",{"id":36,"label":115,"slug":116},{"id":263,"label":264,"slug":265,"rank":59,"group":266},25,"Upload & Download","upload-and-download",{"id":54,"label":127,"slug":128},{"id":268,"label":269,"slug":270,"rank":54,"group":271},12,"Favorite","favorite",{"id":54,"label":127,"slug":128},{"id":123,"label":124,"slug":125,"rank":133,"group":273},{"id":54,"label":127,"slug":128},[275,276],{"id":68,"title":69,"slug":70},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":278},[],{"uuid":280,"title":281,"description":282,"canonical_path":4,"image":283,"width":48,"height":49,"image_alt":284,"kind":51,"patterns":285,"component_categories":295,"app":302},"e1f88d98-7335-464e-bfa1-356189c364ce","Empty state","List view showing an empty state for the user's favorites, featuring a top navigation bar with search and a bottom toolbar for selecting icon styles.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_empty-state_6311fd73_nicelydone.jpg","Empty state from Illustrio",[286,293],{"id":287,"label":288,"slug":289,"rank":57,"group":290},115,"Empty State","empty-state",{"id":268,"label":291,"slug":292},"States & Feedback","states-and-feedback",{"id":118,"label":119,"slug":120,"rank":59,"group":294},{"id":36,"label":115,"slug":116},[296,300,301],{"id":297,"title":298,"slug":299},174,"Card","card",{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":303},[],{"uuid":305,"title":306,"description":307,"canonical_path":4,"image":308,"width":48,"height":49,"image_alt":309,"kind":51,"patterns":310,"component_categories":320,"app":327},"3864d5c4-342e-4380-9da7-646ce0ab3716","Create","Creation flow where the user names a new custom palette and defines its primary and secondary colors.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_create_f09cf6ae_nicelydone.jpg","Create from Illustrio",[311,313],{"id":159,"label":163,"slug":164,"rank":57,"group":312},{"id":54,"label":127,"slug":128},{"id":314,"label":315,"slug":316,"rank":59,"group":317},58,"Media Editor","media-editor",{"id":89,"label":318,"slug":319},"Media & Tools","media-and-tools",[321,325,326],{"id":322,"title":323,"slug":324},183,"Color picker","color-picker",{"id":68,"title":69,"slug":70},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":328},[],{"uuid":330,"title":331,"description":332,"canonical_path":4,"image":333,"width":48,"height":49,"image_alt":334,"kind":51,"patterns":335,"component_categories":338,"app":343},"2569594b-4a90-4ef3-a62f-bd1cbf1e889c","Password reset","Password recovery modal overlaid on an icon library landing page, prompting the user to enter their email address to receive a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_password-reset_42ee54c4_nicelydone.jpg","Password reset from Illustrio",[336],{"id":54,"label":55,"slug":56,"rank":57,"group":337},{"id":59,"label":60,"slug":61},[339,340,341,342],{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":344},[],{"uuid":346,"title":150,"description":347,"canonical_path":4,"image":348,"width":48,"height":49,"image_alt":153,"kind":51,"patterns":349,"component_categories":350,"app":351},"acfce97d-cbce-4643-98d8-de4c0c7db501","Account creation Onboarding Settings Form Account management Account settings Account setup","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fillustrio_settings-2_12751981_nicelydone.jpg",[],[],{"slug":30,"title":29,"logo":32,"categories":352},[],[],[355,357,359,361,363,365,367,369,371,373,375,377,379,382,385,388,391,394,396,400,404,408],{"label":119,"to":356},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":131,"to":358},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":124,"to":360},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":163,"to":362},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":55,"to":364},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":112,"to":366},"\u002Fexamples\u002Fscreens\u002Fsearch-results",{"label":168,"to":368},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":288,"to":370},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":269,"to":372},"\u002Fexamples\u002Fscreens\u002Ffavorite",{"label":259,"to":374},"\u002Fexamples\u002Fscreens\u002Fmedia-detail",{"label":315,"to":376},"\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":201,"to":378},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":380,"to":381},"Illustrio marketing pages","\u002Fexamples\u002Fapps\u002Fillustrio\u002Fmarketing",{"label":383,"to":384},"Illustrio user flows","\u002Fexamples\u002Fapps\u002Fillustrio\u002Fflows",{"label":386,"to":387},"Illustrio UI components","\u002Fexamples\u002Fapps\u002Fillustrio\u002Fcomponents",{"label":389,"to":390},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":392,"to":393},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":395,"to":18},"All SaaS app examples",{"label":397,"to":398,"description":399},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":401,"to":402,"description":403},"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":405,"to":406,"description":407},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":409,"to":410,"description":411},"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":413,"updated_at":414},"2016-12-14T08:00:00.000Z","2026-09-13T13:02:39.000Z"]