[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fspectrum\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":347,"links":348,"dates":406},"\u002Fexamples\u002Fapps\u002Fspectrum\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Spectrum product screens examples - Nicelydone","Browse Spectrum screen design examples. Preview the interface screenshots and explore related UI patterns. Where communities are built","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_welcome_a7f2dd3d_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},"Spectrum design examples","\u002Fexamples\u002Fapps\u002Fspectrum",{"label":23,"to":4},"Spectrum 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},"Spectrum","spectrum","Where communities are built","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fspectrum-a5eccc08.png","https:\u002F\u002Fspectrum.chat",[35,39],{"id":36,"title":37,"slug":38},1,"Communities","communities",{"id":40,"title":41,"slug":42},49,"Social Network","social-network",[44,92,121,152,172,204,237,258,276,302,322],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":69,"app":90},"242aa0d3-51b1-4cbe-9889-9649d326ad54","Welcome","Onboarding screen where a new user is welcomed and guided through finding communities, sharing with friends, and building their own community.",2880,3378,"Welcome from Spectrum","screen",[53,61],{"id":54,"label":46,"slug":55,"rank":56,"group":57},77,"welcome",0,{"id":58,"label":59,"slug":60},7,"Onboarding & Education","onboarding-and-education",{"id":62,"label":63,"slug":64,"rank":36,"group":65},79,"Browse","browse",{"id":66,"label":67,"slug":68},8,"Pages & Content","pages-and-content",[70,74,78,82,86],{"id":71,"title":72,"slug":73},227,"Stepper","stepper",{"id":75,"title":76,"slug":77},174,"Card","card",{"id":79,"title":80,"slug":81},175,"Button","button",{"id":83,"title":84,"slug":85},169,"Avatar","avatar",{"id":87,"title":88,"slug":89},240,"Horizontal navigation","horizontal-navigation",{"slug":30,"title":29,"logo":32,"categories":91},[],{"uuid":93,"title":94,"description":95,"canonical_path":4,"image":96,"width":48,"height":97,"image_alt":98,"kind":51,"patterns":99,"component_categories":110,"app":119},"33b9779e-b7c1-4172-835d-f6d51be4f909","Community","Community feed where the user views recent discussion threads across various channels like General, Support, and Feature Requests.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_community_324d6c6b_nicelydone.jpg",4161,"Community from Spectrum",[100,108],{"id":101,"label":102,"slug":103,"rank":56,"group":104},113,"Social Feed","social-feed",{"id":105,"label":106,"slug":107},11,"Social & Collaboration","social-and-collaboration",{"id":62,"label":63,"slug":64,"rank":36,"group":109},{"id":66,"label":67,"slug":68},[111,115,116,117,118],{"id":112,"title":113,"slug":114},233,"Tabs","tabs",{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":48,"height":126,"image_alt":127,"kind":51,"patterns":128,"component_categories":139,"app":150},"2ae1c012-abdc-443a-9dd9-ddc959c587b3","Community message","Detail page where the user reads a community discussion thread about Dribbble invites and can reply using the bottom composer.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_community-message_f074eb99_nicelydone.jpg",2786,"Community message from Spectrum",[129,134],{"id":130,"label":131,"slug":132,"rank":56,"group":133},106,"Comments","comments",{"id":105,"label":106,"slug":107},{"id":135,"label":136,"slug":137,"rank":36,"group":138},109,"Messages","messages",{"id":105,"label":106,"slug":107},[140,144,148,149],{"id":141,"title":142,"slug":143},177,"Breadcrumb","breadcrumb",{"id":145,"title":146,"slug":147},260,"Badge","badge",{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":151},[],{"uuid":153,"title":154,"description":155,"canonical_path":4,"image":156,"width":48,"height":157,"image_alt":158,"kind":51,"patterns":159,"component_categories":164,"app":170},"8133173d-a236-43a9-895f-2c4be6369d2b","Home","Home feed where the user views recent community threads, starts a new conversation, and accesses their joined communities.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_home_b80481ff_nicelydone.jpg",1526,"Home from Spectrum",[160,162],{"id":101,"label":102,"slug":103,"rank":56,"group":161},{"id":105,"label":106,"slug":107},{"id":62,"label":63,"slug":64,"rank":36,"group":163},{"id":66,"label":67,"slug":68},[165,166,167,168,169],{"id":145,"title":146,"slug":147},{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":171},[],{"uuid":173,"title":174,"description":175,"canonical_path":4,"image":176,"width":48,"height":157,"image_alt":177,"kind":51,"patterns":178,"component_categories":191,"app":202},"ef7a931f-93be-4334-98cd-7452627d02f7","Notifications","Home feed where the user can start a new thread, view recent posts from communities like Spectrum, and check their notifications via an open popover.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_notifications_8d6dde8b_nicelydone.jpg","Notifications from Spectrum",[179,183],{"id":180,"label":174,"slug":181,"rank":56,"group":182},110,"notifications",{"id":105,"label":106,"slug":107},{"id":184,"label":185,"slug":186,"rank":36,"group":187},115,"Empty State","empty-state",{"id":188,"label":189,"slug":190},12,"States & Feedback","states-and-feedback",[192,196,197,198,199,200,201],{"id":193,"title":194,"slug":195},214,"Popover","popover",{"id":112,"title":113,"slug":114},{"id":145,"title":146,"slug":147},{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":203},[],{"uuid":205,"title":206,"description":207,"canonical_path":4,"image":208,"width":48,"height":209,"image_alt":210,"kind":51,"patterns":211,"component_categories":230,"app":235},"06748c2a-5fb0-40d7-8504-ccba281aeb7d","Join community","Community feed page for Product Design where the user can browse channel discussions and is prompted to join the group.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_join-community_f988b74e_nicelydone.jpg",3116,"Join community from Spectrum",[212,214,216,224],{"id":101,"label":102,"slug":103,"rank":56,"group":213},{"id":105,"label":106,"slug":107},{"id":62,"label":63,"slug":64,"rank":36,"group":215},{"id":66,"label":67,"slug":68},{"id":217,"label":218,"slug":219,"rank":220,"group":221},14,"Follow","follow",2,{"id":220,"label":222,"slug":223},"Actions","actions",{"id":225,"label":226,"slug":227,"rank":228,"group":229},114,"Confirmation","confirmation",3,{"id":188,"label":189,"slug":190},[231,232,233,234],{"id":145,"title":146,"slug":147},{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":236},[],{"uuid":238,"title":239,"description":240,"canonical_path":4,"image":241,"width":48,"height":242,"image_alt":243,"kind":51,"patterns":244,"component_categories":250,"app":256},"77fe1a84-972d-47ad-9a69-b140c61f4b0f","Profile","User profile page displaying the user's community memberships in a left sidebar and a chronological feed of their recent forum posts in the main area.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_profile_521986fb_nicelydone.jpg",1674,"Profile from Spectrum",[245,248],{"id":228,"label":239,"slug":246,"rank":56,"group":247},"profile",{"id":105,"label":106,"slug":107},{"id":101,"label":102,"slug":103,"rank":36,"group":249},{"id":105,"label":106,"slug":107},[251,252,253,254,255],{"id":141,"title":142,"slug":143},{"id":145,"title":146,"slug":147},{"id":75,"title":76,"slug":77},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":257},[],{"uuid":259,"title":260,"description":261,"canonical_path":4,"image":262,"width":48,"height":157,"image_alt":263,"kind":51,"patterns":264,"component_categories":269,"app":274},"3b03df79-b2e8-486a-aa14-a5f40b7ddaa4","Empty state","Inbox page where the user views their notifications, currently showing an empty state with a prompt to return to the home screen.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_empty-state_7ca456f1_nicelydone.jpg","Empty state from Spectrum",[265,267],{"id":184,"label":185,"slug":186,"rank":56,"group":266},{"id":188,"label":189,"slug":190},{"id":180,"label":174,"slug":181,"rank":36,"group":268},{"id":105,"label":106,"slug":107},[270,271,272,273],{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":275},[],{"uuid":277,"title":278,"description":279,"canonical_path":4,"image":280,"width":48,"height":157,"image_alt":281,"kind":51,"patterns":282,"component_categories":291,"app":300},"2f2d6147-47c4-41a9-9e46-7ccf4e962286","Create a community","Modal where the user creates a new community by setting a name, custom URL slug, description, and optional website.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_create-a-community_756651ba_nicelydone.jpg","Create a community from Spectrum",[283],{"id":284,"label":285,"slug":286,"rank":56,"group":287},58,"Media Editor","media-editor",{"id":288,"label":289,"slug":290},5,"Media & Tools","media-and-tools",[292,296,297,298,299],{"id":293,"title":294,"slug":295},284,"Modal","modal",{"id":112,"title":113,"slug":114},{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":301},[],{"uuid":303,"title":304,"description":305,"canonical_path":4,"image":306,"width":48,"height":157,"image_alt":307,"kind":51,"patterns":308,"component_categories":316,"app":320},"7b73599b-c3c7-477f-999f-f631726c7153","Messaging","Messaging inbox where the user is searching for a recipient by typing their name to start a new conversation.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_messaging_4d9b2603_nicelydone.jpg","Messaging from Spectrum",[309,311],{"id":135,"label":136,"slug":137,"rank":56,"group":310},{"id":105,"label":106,"slug":107},{"id":312,"label":313,"slug":314,"rank":36,"group":315},22,"Search","search",{"id":220,"label":222,"slug":223},[317,318,319],{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":321},[],{"uuid":323,"title":324,"description":325,"canonical_path":4,"image":326,"width":48,"height":327,"image_alt":328,"kind":51,"patterns":329,"component_categories":338,"app":345},"d08111d7-cb06-4655-8e3d-72d4fa7c3eca","Explore","Explore page where the user discovers featured, popular, and recent communities to join.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_explore_43befbca_nicelydone.jpg",2833,"Explore from Spectrum",[330,332],{"id":62,"label":63,"slug":64,"rank":56,"group":331},{"id":66,"label":67,"slug":68},{"id":333,"label":113,"slug":114,"rank":36,"group":334},69,{"id":335,"label":336,"slug":337},6,"Navigation & Commands","navigation-and-commands",[339,340,341,342,343,344],{"id":112,"title":113,"slug":114},{"id":145,"title":146,"slug":147},{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"slug":30,"title":29,"logo":32,"categories":346},[],[],[349,351,353,355,357,359,361,363,365,367,369,371,373,376,379,382,385,388,390,394,398,402],{"label":63,"to":350},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":102,"to":352},"\u002Fexamples\u002Fscreens\u002Fsocial-feed",{"label":185,"to":354},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":136,"to":356},"\u002Fexamples\u002Fscreens\u002Fmessages",{"label":174,"to":358},"\u002Fexamples\u002Fscreens\u002Fnotifications",{"label":131,"to":360},"\u002Fexamples\u002Fscreens\u002Fcomments",{"label":226,"to":362},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":218,"to":364},"\u002Fexamples\u002Fscreens\u002Ffollow",{"label":285,"to":366},"\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":239,"to":368},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":313,"to":370},"\u002Fexamples\u002Fscreens\u002Fsearch",{"label":113,"to":372},"\u002Fexamples\u002Fscreens\u002Ftabs",{"label":374,"to":375},"Spectrum marketing pages","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fmarketing",{"label":377,"to":378},"Spectrum user flows","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fflows",{"label":380,"to":381},"Spectrum UI components","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fcomponents",{"label":383,"to":384},"Communities app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcommunities",{"label":386,"to":387},"Social Network app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsocial-network",{"label":389,"to":18},"All SaaS app examples",{"label":391,"to":392,"description":393},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":395,"to":396,"description":397},"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":399,"to":400,"description":401},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":403,"to":404,"description":405},"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":407,"updated_at":408},"2017-07-02T11:00:00.000Z","2026-09-13T13:02:39.000Z"]