[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcoolors\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":344,"links":345,"dates":400},"\u002Fexamples\u002Fapps\u002Fcoolors\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Coolors product screens examples - Nicelydone","Browse Coolors screen design examples. Preview the interface screenshots and explore related UI patterns. The super fast color schemes generator","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_sign-in_11d668b3_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},"Coolors design examples","\u002Fexamples\u002Fapps\u002Fcoolors",{"label":23,"to":4},"Coolors 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},"Coolors","coolors","The super fast color schemes generator","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcoolors-3e0b0842.png","http:\u002F\u002Fcoolors.co",[35],{"id":36,"title":37,"slug":38},8,"Design","design",[40,73,90,111,149,171,199,217,241,273,299,322],{"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":71},"1c637256-a765-423e-9fbc-6798360aafbc","Sign in","Sign-in screen where the user authenticates with their email or username and password via a centered modal overlay.",2880,1520,"Sign in from Coolors","screen",[49],{"id":50,"label":51,"slug":52,"rank":53,"group":54},4,"Sign In","sign-in",0,{"id":55,"label":56,"slug":57},1,"Access & Account","access-and-account",[59,63,67],{"id":60,"title":61,"slug":62},277,"Button group","button-group",{"id":64,"title":65,"slug":66},175,"Button","button",{"id":68,"title":69,"slug":70},284,"Modal","modal",{"slug":30,"title":29,"logo":32,"categories":72},[],{"uuid":74,"title":75,"description":76,"canonical_path":4,"image":77,"width":44,"height":45,"image_alt":78,"kind":47,"patterns":79,"component_categories":85,"app":88},"bb099b61-e3bf-4a9e-9b57-4d08861a4944","Password reset","Authentication overlay where the user enters their registered email or username and chooses a new password to regain access.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_password-reset_b128c15f_nicelydone.jpg","Password reset from Coolors",[80],{"id":81,"label":82,"slug":83,"rank":53,"group":84},2,"Forgot Password","forgot-password",{"id":55,"label":56,"slug":57},[86,87],{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":44,"height":45,"image_alt":95,"kind":47,"patterns":96,"component_categories":102,"app":109},"7d685912-2946-4db4-badf-d7e47f67b2f2","Sign up","Signup modal where the user creates a Coolors account with a username, email, and password, with an option to join the newsletter.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_sign-up_b8ebb4e8_nicelydone.jpg","Sign up from Coolors",[97],{"id":98,"label":99,"slug":100,"rank":53,"group":101},5,"Sign Up","sign-up",{"id":55,"label":56,"slug":57},[103,107,108],{"id":104,"title":105,"slug":106},240,"Horizontal navigation","horizontal-navigation",{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":110},[],{"uuid":112,"title":113,"description":114,"canonical_path":4,"image":115,"width":44,"height":116,"image_alt":117,"kind":47,"patterns":118,"component_categories":139,"app":147},"5a6026d7-4bc7-476d-9379-8b1180278596","Welcome message","Design editor where a welcome modal prompts the user to watch a tutorial before generating color schemes.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_welcome-message_0ca3eb74_nicelydone.jpg",1526,"Welcome message from Coolors",[119,127,132],{"id":120,"label":121,"slug":122,"rank":53,"group":123},77,"Welcome","welcome",{"id":124,"label":125,"slug":126},7,"Onboarding & Education","onboarding-and-education",{"id":128,"label":129,"slug":130,"rank":55,"group":131},73,"Guided Tour","guided-tour",{"id":124,"label":125,"slug":126},{"id":133,"label":134,"slug":135,"rank":81,"group":136},55,"Design Editor","design-editor",{"id":98,"label":137,"slug":138},"Media & Tools","media-and-tools",[140,144,145,146],{"id":141,"title":142,"slug":143},169,"Avatar","avatar",{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":148},[],{"uuid":150,"title":151,"description":152,"canonical_path":4,"image":153,"width":44,"height":116,"image_alt":154,"kind":47,"patterns":155,"component_categories":165,"app":169},"88ec93d7-1170-4c24-af6c-4219e5afafb3","Onboarding","Design editor where a tutorial modal instructs the user to hit the spacebar to generate color schemes over a five-column color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding_15b65db6_nicelydone.jpg","Onboarding from Coolors",[156,158,160],{"id":128,"label":129,"slug":130,"rank":53,"group":157},{"id":124,"label":125,"slug":126},{"id":133,"label":134,"slug":135,"rank":55,"group":159},{"id":98,"label":137,"slug":138},{"id":161,"label":162,"slug":163,"rank":81,"group":164},58,"Media Editor","media-editor",{"id":98,"label":137,"slug":138},[166,167,168],{"id":141,"title":142,"slug":143},{"id":104,"title":105,"slug":106},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":170},[],{"uuid":172,"title":151,"description":173,"canonical_path":4,"image":174,"width":44,"height":116,"image_alt":154,"kind":47,"patterns":175,"component_categories":191,"app":197},"ac2095f8-8907-48fd-8657-9b00ed8d41fd","Design editor where a tutorial modal explains how to lock colors by clicking on them to generate combinations.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding-2_596bb4f7_nicelydone.jpg",[176,178,183,188],{"id":133,"label":134,"slug":135,"rank":53,"group":177},{"id":98,"label":137,"slug":138},{"id":179,"label":180,"slug":181,"rank":55,"group":182},76,"Tutorial","tutorial",{"id":124,"label":125,"slug":126},{"id":184,"label":185,"slug":186,"rank":81,"group":187},72,"Getting Started","getting-started",{"id":124,"label":125,"slug":126},{"id":161,"label":162,"slug":163,"rank":189,"group":190},3,{"id":98,"label":137,"slug":138},[192,193,194,195,196],{"id":60,"title":61,"slug":62},{"id":141,"title":142,"slug":143},{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":198},[],{"uuid":200,"title":151,"description":201,"canonical_path":4,"image":202,"width":44,"height":116,"image_alt":154,"kind":47,"patterns":203,"component_categories":210,"app":215},"e10922cf-bef0-4aaf-b5c7-10e1a29e2382","Onboarding screen where a tutorial modal instructs the user to click a hex value to type in starting colors, while highlighting a specific color swatch in the background.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding-3_4aa21731_nicelydone.jpg",[204,206,208],{"id":128,"label":129,"slug":130,"rank":53,"group":205},{"id":124,"label":125,"slug":126},{"id":179,"label":180,"slug":181,"rank":55,"group":207},{"id":124,"label":125,"slug":126},{"id":161,"label":162,"slug":163,"rank":81,"group":209},{"id":98,"label":137,"slug":138},[211,212,213,214],{"id":60,"title":61,"slug":62},{"id":141,"title":142,"slug":143},{"id":104,"title":105,"slug":106},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":216},[],{"uuid":218,"title":151,"description":219,"canonical_path":4,"image":220,"width":44,"height":116,"image_alt":154,"kind":47,"patterns":221,"component_categories":230,"app":239},"e65dd201-07ff-4327-965c-fb256cd7bf41","Design editor where a product tour modal explains how to refine the generated color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding-4_739a0ddc_nicelydone.jpg",[222,224,226,228],{"id":133,"label":134,"slug":135,"rank":53,"group":223},{"id":98,"label":137,"slug":138},{"id":128,"label":129,"slug":130,"rank":55,"group":225},{"id":124,"label":125,"slug":126},{"id":179,"label":180,"slug":181,"rank":81,"group":227},{"id":124,"label":125,"slug":126},{"id":161,"label":162,"slug":163,"rank":189,"group":229},{"id":98,"label":137,"slug":138},[231,235,236,237,238],{"id":232,"title":233,"slug":234},214,"Popover","popover",{"id":60,"title":61,"slug":62},{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":240},[],{"uuid":242,"title":243,"description":244,"canonical_path":4,"image":245,"width":44,"height":116,"image_alt":246,"kind":47,"patterns":247,"component_categories":266,"app":271},"9c67e453-abd8-488f-9df3-17a7e76bf101","Generate color scheme","Design editor where the user generates, views, and exports a five-color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_generate-color-scheme_56eef20d_nicelydone.jpg","Generate color scheme from Coolors",[248,250,257,259],{"id":133,"label":134,"slug":135,"rank":53,"group":249},{"id":98,"label":137,"slug":138},{"id":251,"label":252,"slug":253,"rank":55,"group":254},30,"AI Generation","ai-generation",{"id":189,"label":255,"slug":256},"AI","ai",{"id":161,"label":162,"slug":163,"rank":81,"group":258},{"id":98,"label":137,"slug":138},{"id":260,"label":261,"slug":262,"rank":189,"group":263},25,"Upload & Download","upload-and-download",{"id":81,"label":264,"slug":265},"Actions","actions",[267,268,269,270],{"id":60,"title":61,"slug":62},{"id":141,"title":142,"slug":143},{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":272},[],{"uuid":274,"title":275,"description":276,"canonical_path":4,"image":277,"width":44,"height":116,"image_alt":278,"kind":47,"patterns":279,"component_categories":289,"app":297},"143a7e3b-2675-4ea6-9276-9854f15cb2da","Save color scheme","Design editor where the user saves a generated color scheme by providing a palette label in a modal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_save-color-scheme_0db2ce87_nicelydone.jpg","Save color scheme from Coolors",[280,282,287],{"id":133,"label":134,"slug":135,"rank":53,"group":281},{"id":98,"label":137,"slug":138},{"id":283,"label":284,"slug":285,"rank":55,"group":286},11,"Edit","edit",{"id":81,"label":264,"slug":265},{"id":161,"label":162,"slug":163,"rank":81,"group":288},{"id":98,"label":137,"slug":138},[290,294,295,296],{"id":291,"title":292,"slug":293},233,"Tabs","tabs",{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":298},[],{"uuid":300,"title":301,"description":302,"canonical_path":4,"image":303,"width":44,"height":116,"image_alt":304,"kind":47,"patterns":305,"component_categories":315,"app":320},"c8bb31df-32d0-4268-a5d3-5df39811c9a0","Generator settings","Design editor where the user configures color generation settings like isolation mode and monochromatic generation via a modal overlay.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_generator-settings_f3c6f654_nicelydone.jpg","Generator settings from Coolors",[306,308,313],{"id":133,"label":134,"slug":135,"rank":53,"group":307},{"id":98,"label":137,"slug":138},{"id":309,"label":310,"slug":311,"rank":55,"group":312},33,"AI Settings","ai-settings",{"id":189,"label":255,"slug":256},{"id":283,"label":284,"slug":285,"rank":81,"group":314},{"id":81,"label":264,"slug":265},[316,317,318,319],{"id":141,"title":142,"slug":143},{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":321},[],{"uuid":323,"title":324,"description":325,"canonical_path":4,"image":326,"width":44,"height":116,"image_alt":327,"kind":47,"patterns":328,"component_categories":337,"app":342},"47dba8fc-7a56-423d-bfcf-64775cc2c412","Pick color from an image","Design editor where the user can upload an image or enter a URL to extract a color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_pick-color-image_64837c8e_nicelydone.jpg","Pick color from an image from Coolors",[329,331,333,335],{"id":133,"label":134,"slug":135,"rank":53,"group":330},{"id":98,"label":137,"slug":138},{"id":260,"label":261,"slug":262,"rank":55,"group":332},{"id":81,"label":264,"slug":265},{"id":161,"label":162,"slug":163,"rank":81,"group":334},{"id":98,"label":137,"slug":138},{"id":251,"label":252,"slug":253,"rank":189,"group":336},{"id":189,"label":255,"slug":256},[338,339,340,341],{"id":141,"title":142,"slug":143},{"id":104,"title":105,"slug":106},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":343},[],[],[346,348,350,352,354,356,358,360,362,364,366,368,370,373,376,379,382,384,388,392,396],{"label":134,"to":347},"\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":162,"to":349},"\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":129,"to":351},"\u002Fexamples\u002Fscreens\u002Fguided-tour",{"label":180,"to":353},"\u002Fexamples\u002Fscreens\u002Ftutorial",{"label":252,"to":355},"\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":284,"to":357},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":261,"to":359},"\u002Fexamples\u002Fscreens\u002Fupload-and-download",{"label":310,"to":361},"\u002Fexamples\u002Fscreens\u002Fai-settings",{"label":82,"to":363},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":185,"to":365},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":51,"to":367},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":99,"to":369},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":371,"to":372},"Coolors marketing pages","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fmarketing",{"label":374,"to":375},"Coolors user flows","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fflows",{"label":377,"to":378},"Coolors UI components","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fcomponents",{"label":380,"to":381},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":383,"to":18},"All SaaS app examples",{"label":385,"to":386,"description":387},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":389,"to":390,"description":391},"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":393,"to":394,"description":395},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":397,"to":398,"description":399},"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":401,"updated_at":402},"2017-06-10T15:25:00.000Z","2026-09-13T13:02:39.000Z"]