[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fspectrum":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":49,"showcases":50,"links":360,"dates":395},"\u002Fexamples\u002Fapps\u002Fspectrum","detail","apps",true,{"title":9,"description":10,"og_image":11},"Spectrum design examples - Nicelydone","Explore Spectrum UI design examples. Where communities are built","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fspectrum_welcome_a7f2dd3d_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},"Spectrum design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Spectrum",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Spectrum","spectrum","Where communities are built","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fspectrum-a5eccc08.png","https:\u002F\u002Fspectrum.chat",[41,45],{"id":42,"title":43,"slug":44},1,"Communities","communities",{"id":46,"title":47,"slug":48},49,"Social Network","social-network",[],[51,357],{"family":52,"examples":53},"screens",[54,102,131,162,182,214,247,268,286,312,332],{"uuid":55,"title":56,"description":57,"canonical_path":29,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":62,"component_categories":79,"app":100},"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",[63,71],{"id":64,"label":56,"slug":65,"rank":66,"group":67},77,"welcome",0,{"id":68,"label":69,"slug":70},7,"Onboarding & Education","onboarding-and-education",{"id":72,"label":73,"slug":74,"rank":42,"group":75},79,"Browse","browse",{"id":76,"label":77,"slug":78},8,"Pages & Content","pages-and-content",[80,84,88,92,96],{"id":81,"title":82,"slug":83},227,"Stepper","stepper",{"id":85,"title":86,"slug":87},174,"Card","card",{"id":89,"title":90,"slug":91},175,"Button","button",{"id":93,"title":94,"slug":95},169,"Avatar","avatar",{"id":97,"title":98,"slug":99},240,"Horizontal navigation","horizontal-navigation",{"slug":36,"title":35,"logo":38,"categories":101},[],{"uuid":103,"title":104,"description":105,"canonical_path":29,"image":106,"width":58,"height":107,"image_alt":108,"kind":61,"patterns":109,"component_categories":120,"app":129},"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",[110,118],{"id":111,"label":112,"slug":113,"rank":66,"group":114},113,"Social Feed","social-feed",{"id":115,"label":116,"slug":117},11,"Social & Collaboration","social-and-collaboration",{"id":72,"label":73,"slug":74,"rank":42,"group":119},{"id":76,"label":77,"slug":78},[121,125,126,127,128],{"id":122,"title":123,"slug":124},233,"Tabs","tabs",{"id":85,"title":86,"slug":87},{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":130},[],{"uuid":132,"title":133,"description":134,"canonical_path":29,"image":135,"width":58,"height":136,"image_alt":137,"kind":61,"patterns":138,"component_categories":149,"app":160},"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",[139,144],{"id":140,"label":141,"slug":142,"rank":66,"group":143},106,"Comments","comments",{"id":115,"label":116,"slug":117},{"id":145,"label":146,"slug":147,"rank":42,"group":148},109,"Messages","messages",{"id":115,"label":116,"slug":117},[150,154,158,159],{"id":151,"title":152,"slug":153},177,"Breadcrumb","breadcrumb",{"id":155,"title":156,"slug":157},260,"Badge","badge",{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":29,"image":166,"width":58,"height":167,"image_alt":168,"kind":61,"patterns":169,"component_categories":174,"app":180},"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",[170,172],{"id":111,"label":112,"slug":113,"rank":66,"group":171},{"id":115,"label":116,"slug":117},{"id":72,"label":73,"slug":74,"rank":42,"group":173},{"id":76,"label":77,"slug":78},[175,176,177,178,179],{"id":155,"title":156,"slug":157},{"id":85,"title":86,"slug":87},{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":181},[],{"uuid":183,"title":184,"description":185,"canonical_path":29,"image":186,"width":58,"height":167,"image_alt":187,"kind":61,"patterns":188,"component_categories":201,"app":212},"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",[189,193],{"id":190,"label":184,"slug":191,"rank":66,"group":192},110,"notifications",{"id":115,"label":116,"slug":117},{"id":194,"label":195,"slug":196,"rank":42,"group":197},115,"Empty State","empty-state",{"id":198,"label":199,"slug":200},12,"States & Feedback","states-and-feedback",[202,206,207,208,209,210,211],{"id":203,"title":204,"slug":205},214,"Popover","popover",{"id":122,"title":123,"slug":124},{"id":155,"title":156,"slug":157},{"id":85,"title":86,"slug":87},{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":213},[],{"uuid":215,"title":216,"description":217,"canonical_path":29,"image":218,"width":58,"height":219,"image_alt":220,"kind":61,"patterns":221,"component_categories":240,"app":245},"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",[222,224,226,234],{"id":111,"label":112,"slug":113,"rank":66,"group":223},{"id":115,"label":116,"slug":117},{"id":72,"label":73,"slug":74,"rank":42,"group":225},{"id":76,"label":77,"slug":78},{"id":227,"label":228,"slug":229,"rank":230,"group":231},14,"Follow","follow",2,{"id":230,"label":232,"slug":233},"Actions","actions",{"id":235,"label":236,"slug":237,"rank":238,"group":239},114,"Confirmation","confirmation",3,{"id":198,"label":199,"slug":200},[241,242,243,244],{"id":155,"title":156,"slug":157},{"id":85,"title":86,"slug":87},{"id":89,"title":90,"slug":91},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":246},[],{"uuid":248,"title":249,"description":250,"canonical_path":29,"image":251,"width":58,"height":252,"image_alt":253,"kind":61,"patterns":254,"component_categories":260,"app":266},"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",[255,258],{"id":238,"label":249,"slug":256,"rank":66,"group":257},"profile",{"id":115,"label":116,"slug":117},{"id":111,"label":112,"slug":113,"rank":42,"group":259},{"id":115,"label":116,"slug":117},[261,262,263,264,265],{"id":151,"title":152,"slug":153},{"id":155,"title":156,"slug":157},{"id":85,"title":86,"slug":87},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":267},[],{"uuid":269,"title":270,"description":271,"canonical_path":29,"image":272,"width":58,"height":167,"image_alt":273,"kind":61,"patterns":274,"component_categories":279,"app":284},"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",[275,277],{"id":194,"label":195,"slug":196,"rank":66,"group":276},{"id":198,"label":199,"slug":200},{"id":190,"label":184,"slug":191,"rank":42,"group":278},{"id":115,"label":116,"slug":117},[280,281,282,283],{"id":85,"title":86,"slug":87},{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":285},[],{"uuid":287,"title":288,"description":289,"canonical_path":29,"image":290,"width":58,"height":167,"image_alt":291,"kind":61,"patterns":292,"component_categories":301,"app":310},"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",[293],{"id":294,"label":295,"slug":296,"rank":66,"group":297},58,"Media Editor","media-editor",{"id":298,"label":299,"slug":300},5,"Media & Tools","media-and-tools",[302,306,307,308,309],{"id":303,"title":304,"slug":305},284,"Modal","modal",{"id":122,"title":123,"slug":124},{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":311},[],{"uuid":313,"title":314,"description":315,"canonical_path":29,"image":316,"width":58,"height":167,"image_alt":317,"kind":61,"patterns":318,"component_categories":326,"app":330},"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",[319,321],{"id":145,"label":146,"slug":147,"rank":66,"group":320},{"id":115,"label":116,"slug":117},{"id":322,"label":323,"slug":324,"rank":42,"group":325},22,"Search","search",{"id":230,"label":232,"slug":233},[327,328,329],{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":331},[],{"uuid":333,"title":334,"description":335,"canonical_path":29,"image":336,"width":58,"height":337,"image_alt":338,"kind":61,"patterns":339,"component_categories":348,"app":355},"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",[340,342],{"id":72,"label":73,"slug":74,"rank":66,"group":341},{"id":76,"label":77,"slug":78},{"id":343,"label":123,"slug":124,"rank":42,"group":344},69,{"id":345,"label":346,"slug":347},6,"Navigation & Commands","navigation-and-commands",[349,350,351,352,353,354],{"id":122,"title":123,"slug":124},{"id":155,"title":156,"slug":157},{"id":85,"title":86,"slug":87},{"id":89,"title":90,"slug":91},{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"slug":36,"title":35,"logo":38,"categories":356},[],{"family":358,"examples":359},"pages",[],[361,363,365,368,371,374,377,379,383,387,391],{"label":362,"to":29},"Spectrum product screens",{"label":364,"to":32},"Spectrum marketing pages",{"label":366,"to":367},"Spectrum user flows","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fflows",{"label":369,"to":370},"Spectrum UI components","\u002Fexamples\u002Fapps\u002Fspectrum\u002Fcomponents",{"label":372,"to":373},"Communities app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcommunities",{"label":375,"to":376},"Social Network app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsocial-network",{"label":378,"to":18},"All SaaS app examples",{"label":380,"to":381,"description":382},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":384,"to":385,"description":386},"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":388,"to":389,"description":390},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":392,"to":393,"description":394},"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":396,"updated_at":397},"2017-07-02T11:00:00.000Z","2026-09-13T13:02:39.000Z"]