[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"i-material-symbols:language":3,"i-material-symbols:person":8,"i-mdi:instagram":10,"i-mdi:youtube":12,"i-ri:linkedin-fill":14,"i-ri:twitter-x-line":16,"i-ri:facebook-fill":18,"post-pattern-library":20,"i-material-symbols:person-outline":68,"i-material-symbols:calendar-month":70,"i-mdi:schedule":72},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12.013 2t3.875.788t3.175 2.15t2.15 3.175t.787 3.875t-.787 3.887t-2.15 3.188t-3.175 2.15t-3.875.787t-3.888-.787M12 19.95q.65-.9 1.125-1.875T13.9 16h-3.8q.3 1.1.775 2.075T12 19.95m-2.6-.4q-.45-.825-.787-1.713T8.05 16H5.1q.725 1.25 1.813 2.175T9.4 19.55m5.2 0q1.4-.45 2.488-1.375T18.9 16h-2.95q-.225.95-.562 1.838T14.6 19.55M4.25 14h3.4q-.075-.5-.112-.987T7.5 12t.038-1.012T7.65 10h-3.4q-.125.5-.187.988T4 12t.063 1.013t.187.987m5.4 0h4.7q.075-.5.113-.987T14.5 12t-.038-1.012T14.35 10h-4.7q-.075.5-.112.988T9.5 12t.038 1.013t.112.987m6.7 0h3.4q.125-.5.188-.987T20 12t-.062-1.012T19.75 10h-3.4q.075.5.113.988T16.5 12t-.038 1.013t-.112.987m-.4-6h2.95q-.725-1.25-1.812-2.175T14.6 4.45q.45.825.788 1.713T15.95 8M10.1 8h3.8q-.3-1.1-.775-2.075T12 4.05q-.65.9-1.125 1.875T10.1 8m-5 0h2.95q.225-.95.563-1.838T9.4 4.45Q8 4.9 6.912 5.825T5.1 8\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"currentColor\" d=\"M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z\"\u002F>",{"postType":21,"id":22,"author":23,"date":26,"modified":27,"title":28,"slug":29,"seoTitle":30,"seoDescription":31,"excerpt":32,"trimmedExcerpt":33,"content":34,"readingTime":35,"featuredImage":36,"postCategory":41,"relatedPosts":46},"post",23677,{"id":24,"name":25},"author-0301142015","Canto","2019-10-25T16:21:41","2026-07-22T15:53:10","Pattern library: 3 ways to optimize your site’s design consistency","pattern-library","Pattern library – 3 ways to optimize your site","A pattern library is a rundown of visual elements for a site. It gives instruction for a site’s visual outlook. Learn how to best use them here.","What is a pattern library? A pattern library is a documented set of reusable UI components, visual design elements, and usage guidelines that define how a website or product looks and behaves. It serves as a single source of truth for designers, developers, and content teams building or maintaining a site. Pattern libraries keep visual […]","What is a pattern library? A pattern library is a documented set of reusable UI components, visual design elements, and...","\u003Ch2 class=\"wp-block-heading\" id=\"toc-1--what-is-a-pattern-library\">What is a pattern library?\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">A pattern library is a documented set of reusable UI components, visual design elements, and usage guidelines that define how a website or product looks and behaves. It serves as a single source of truth for designers, developers, and content teams building or maintaining a site. Pattern libraries keep visual output consistent across pages, teams, and updates.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"\u002Fglossary\u002Fmarketing-resource-management\u002F\">Marketing resource management\u003C\u002Fa> (MRM) combines tools and processes that enable marketing teams to plan, execute, and measure campaigns with greater efficiency. A pattern library functions as a core MRM asset, giving teams the shared visual standards they need to produce on-brand content at scale.\u003C\u002Fp>\u003Ch2 class=\"wp-block-heading\" id=\"toc-2--what-is-a-pattern-library\">What is a pattern library?\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">A pattern library is a complete list of details explaining how design elements appear on a site. It is essentially a blueprint for user interface design elements. The visual makeup of a site consists of different design elements, which are determined by the pattern library.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">A good example of a pattern library is a movie. Every movie is made up of different elements, such as scenery, location, lines, props and time of day. These elements are documented in the script. The script holds the layout of all the things that makeup the movie. In order to know how a movie will look on the screen, the script needs to be consulted. A pattern library is like the script of a website’s appearance. The things like lines, props and scenery are the design elements.\u003C\u002Fp>\u003Cfigure class=\"wp-block-image aligncenter wp-image-23681\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"534\" src=\"\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-2.jpg\" alt=\"Two male and one female worker using different computers for graphics.\" class=\"wp-image-23681\" srcset=\"\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-2.jpg 800w, \u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-2-450x300.jpg 450w, \u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-2-768x513.jpg 768w\" \u002F>\u003Cfigcaption class=\"wp-element-caption\">Pattern Libraries are similar to a movie script in that they instruct projects.\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 class=\"wp-block-heading\" id=\"toc-3--centralize-your-pattern-library\">Centralize your pattern library\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">Centralizing your pattern library is a huge benefit to web designers and other team members helping with site construction. This helps maintain consistency and cuts down on extra time spent. It creates shared libraries for entire teams to access and draw elements from. With a central pattern library, any newly created logos or other design is shared with everyone involved. It can be used for all projects thereafter as well.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">The benefits of a central pattern library are best seen in a scenario where a team member creates a dynamic new colored font that works great on the current site. Before a central library is implemented, this font wouldn’t be available to everyone. In fact, it might have to be recreated by other departments. The central library ensures everyone can use it and the site can maintain solidarity of font color.\u003C\u002Fp>\u003Cfigure class=\"wp-block-image aligncenter wp-image-23683\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"533\" src=\"\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-3.jpg\" alt=\"Two female workers going over graphic designs next to a laptop.\" class=\"wp-image-23683\" srcset=\"\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-3.jpg 800w, \u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-3-450x300.jpg 450w, \u002Fcdn\u002Fen\u002F2019\u002F03\u002F19195510\u002Fpattern-library-3-768x512.jpg 768w\" \u002F>\u003Cfigcaption class=\"wp-element-caption\">Centralize your library pattern to keep everyone current and on the same page.\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 class=\"wp-block-heading\" id=\"toc-4--make-your-pattern-library-more-accessible\">Make your pattern library more accessible\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">In order to have your entire company use a pattern library, from one department to the next, it needs to be extremely functional and accessible for all skill levels. There are a lot of different ways to accomplish this. The first way is to implement systems that make decisions for team members more basic. For example, if they’re choosing to build a design from templates rather than using complex coding, things are likely to work out better throughout a project.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Another way to make it more accessible is to be able to choose specific applications and features of the pattern library. This way they would narrow their choices down to things they are familiar with or projects they’re currently involved in. For example, say they chose ‘medical supplies’ then chose ‘business agreements’ then selected a component from this subsection such as ‘credit card authentication’. They could then be given a visual representation of this and an outline of this path they took on the website.\u003C\u002Fp>\u003Cfigure class=\"wp-block-image aligncenter wp-image-36259\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"533\" src=\"\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19193355\u002Fpattern-library-12.jpg\" alt=\"A young man researches images and design on a PC.\" class=\"wp-image-36259\" srcset=\"\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19193355\u002Fpattern-library-12.jpg 800w, \u002Fcdn\u002Fen\u002F2019\u002F03\u002F19193355\u002Fpattern-library-12-450x300.jpg 450w, \u002Fcdn\u002Fen\u002F2019\u002F03\u002F19193355\u002Fpattern-library-12-768x512.jpg 768w\" \u002F>\u003Cfigcaption class=\"wp-element-caption\">Create accessibility with your library pattern.\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 class=\"wp-block-heading\" id=\"toc-5--ensure-consistent-site-design-using-pattern-library\">Ensure consistent site design using pattern library\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">As a site grows, its pages gain additions and its subpages develop. With new additions and subpages comes the potential for aesthetic errors. A site needs consistency from page to page to uphold a professional appearance. This is usually from different departments being put in charge of adding different pieces of the site.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">A pattern library rectifies this issue by allowing companies to copy all design elements of a page and easily input it into any newly created parts of the site. Any time a user adds something to the original site, it will retain a consistent pattern of elements.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">To further simplify this issue and increase the potential of your pattern library, implement a \u003Ca href=\"\u002Fdigital-asset-management\u002F\">digital asset management\u003C\u002Fa> system. This helps teams by storing things like visual element files, logo files and other media in a central location. It boosts team communication throughout site-building processes as well.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Solidify the professionalism of your site with a pattern library. It keeps your design elements consistent and organized.\u003C\u002Fp>",4,{"url":37,"url_md":38,"alt":39,"height":40,"width":40},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19193355\u002Fpattern-library-11.jpg","https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fen\u002F2019\u002F03\u002F19193355\u002Fpattern-library-11-450x450.jpg","A group of illustrated books.",800,[42],{"id":43,"slug":43,"title":44,"path":45},"marketing-technology","Marketing technology","\u002Fpost-category\u002Fmarketing-technology\u002F",[47,54,61],{"featuredImage":48,"postId":49,"slug":50,"title":51,"description":52,"path":53},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fen\u002F2019\u002F12\u002F19193042\u002Fdigital-media-production-436x450.jpg",38017,"digital-media-production","Digital media production – A basic, helpful guide","Digital media production is one of the many ways companies can stand out next to their competition. Read more about how it works and its future relevance.","\u002Fblog\u002Fdigital-media-production\u002F",{"featuredImage":55,"postId":56,"slug":57,"title":58,"description":59,"path":60},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fen\u002F2021\u002F04\u002F19185543\u002Ffree-email-marketing-feature-450x263.jpeg",56583,"free-email-marketing","Which free email marketing tool is best? Our top picks","There are lots of free email marketing tools out there. Which one should you use? We narrowed down the options. ","\u002Fblog\u002Ffree-email-marketing\u002F",{"featuredImage":62,"postId":63,"slug":64,"title":65,"description":66,"path":67},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fen\u002F2021\u002F12\u002F19184855\u002FGodiva-dam-consistency-Feature-450x263.jpg",59739,"godiva-dam-consistency","How Godiva found sweet success by using a DAM solution for global brand management","For Godiva, going with Canto as their DAM solution was key to global brand management, providing their luxurious brand experience consistently.","\u002Fblog\u002Fgodiva-dam-consistency\u002F",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":69},"\u003Cpath fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20zm2-2h12v-.8q0-.275-.137-.5t-.363-.35q-1.35-.675-2.725-1.012T12 15t-2.775.338T6.5 16.35q-.225.125-.363.35T6 17.2zm7.413-8.587Q14 8.825 14 8t-.587-1.412T12 6t-1.412.588T10 8t.588 1.413T12 10t1.413-.587M12 18\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":71},"\u003Cpath fill=\"currentColor\" d=\"M12 14q-.425 0-.712-.288T11 13t.288-.712T12 12t.713.288T13 13t-.288.713T12 14m-4.712-.288Q7 13.426 7 13t.288-.712T8 12t.713.288T9 13t-.288.713T8 14t-.712-.288M16 14q-.425 0-.712-.288T15 13t.288-.712T16 12t.713.288T17 13t-.288.713T16 14m-4 4q-.425 0-.712-.288T11 17t.288-.712T12 16t.713.288T13 17t-.288.713T12 18m-4.712-.288Q7 17.426 7 17t.288-.712T8 16t.713.288T9 17t-.288.713T8 18t-.712-.288M16 18q-.425 0-.712-.288T15 17t.288-.712T16 16t.713.288T17 17t-.288.713T16 18M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":73},"\u003Cpath fill=\"currentColor\" d=\"M12 20a8 8 0 0 0 8-8a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8m0-18a10 10 0 0 1 10 10a10 10 0 0 1-10 10C6.47 22 2 17.5 2 12A10 10 0 0 1 12 2m.5 5v5.25l4.5 2.67l-.75 1.23L11 13V7z\"\u002F>",1790226109474]