{"id":72,"date":"2024-08-28T14:02:46","date_gmt":"2024-08-28T18:02:46","guid":{"rendered":"https:\/\/blog.uvm.edu\/catamount\/?page_id=72"},"modified":"2024-08-28T15:25:41","modified_gmt":"2024-08-28T19:25:41","slug":"foundations-palette","status":"publish","type":"page","link":"https:\/\/blog.uvm.edu\/catamount\/foundations-palette\/","title":{"rendered":"Foundations: Palette"},"content":{"rendered":"\n<p>Our primary color palette is designed for use throughout our digital products within interfaces and for branding. The primary brand dark (Catamount Green) and primaryLight (Catamount Gold) are displayed most frequently across our products&#8217; screens and components.<\/p>\n\n\n\n<p>Primary colors are used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dark background fills<\/li>\n\n\n\n<li>Key actions such as primary call to action buttons<\/li>\n\n\n\n<li>Highlighted content<\/li>\n<\/ul>\n\n\n\n<p>Component guidelines indicate how colors should be applied, noting where some should be utilized sparingly and with purpose for specific components like errors UI interface elements and background fields.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Primary<\/h2>\n\n\n\n<p><a href=\"https:\/\/uvmedu.invisionapp.com\/dsm\/university-of-vermont\/ivy\/nav\/5fa7cb6f8c01200018361128\/folder\/5f82e4d10fa0e27f3176fe8f?mode=preview\">Primary palette<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"415\" src=\"https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_primraybrand.png\" alt=\"\" class=\"wp-image-73\" srcset=\"https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_primraybrand.png 897w, https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_primraybrand-300x139.png 300w, https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_primraybrand-768x355.png 768w\" sizes=\"auto, (max-width: 897px) 100vw, 897px\" \/><\/figure>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Grayscale<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>darkGray: #26292C<br \/>lightGray: #5D646B<br \/>neutral: #F7F7F7<br \/>White: #FFF<br \/><\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Brand Accent<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"404\" src=\"https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_brandAccent.png\" alt=\"\" class=\"wp-image-74\" srcset=\"https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_brandAccent.png 869w, https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_brandAccent-300x139.png 300w, https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_brandAccent-768x357.png 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Modals<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"395\" src=\"https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_blackModals.png\" alt=\"\" class=\"wp-image-75\" srcset=\"https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_blackModals.png 852w, https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_blackModals-300x139.png 300w, https:\/\/blog.uvm.edu\/catamount\/files\/2024\/08\/swatch_blackModals-768x356.png 768w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><br \/><br \/><\/h2>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our primary color palette is designed for use throughout our digital products within interfaces and for branding. The primary brand dark (Catamount Green) and primaryLight (Catamount Gold) are displayed most frequently across our products&#8217; screens and components. Primary colors are used for: Component guidelines indicate how colors should be applied, noting where some should be [&hellip;]<\/p>\n","protected":false},"author":5625,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":4,"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/pages\/72\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/catamount\/wp-json\/wp\/v2\/media?parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}