{"id":7,"date":"2026-09-29T18:15:44","date_gmt":"2026-09-29T16:15:44","guid":{"rendered":"https:\/\/glen-moray.r2agency.dev\/?page_id=7"},"modified":"2026-09-29T18:15:44","modified_gmt":"2026-09-29T16:15:44","slug":"design-system","status":"publish","type":"page","link":"https:\/\/glen-moray.r2agency.dev\/?page_id=7","title":{"rendered":"Design System"},"content":{"rendered":"<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/styles\/default.min.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/highlight.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/languages\/xml.min.js\"><\/script>\n\n\n<section class=\"block block-design-system\">\n    <h1>Design System<\/h1>\n\n    <h2>Logos<\/h2>\n\n    <div class=\"logos\">\n                    <div class=\"logo\">\n                <h3>Default logo<\/h3>\n\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                    <img decoding=\"async\" src=\"https:\/\/glen-moray.r2agency.dev\/app\/themes\/glen-moray\/src\/images\/logos\/logo.png\" alt=\"Glen Moray\" class=\"\">                <\/div>\n\n                <h4>Code<\/h4>\n                <div class=\"code\">\n                    <code class=\"language-html\" contenteditable=\"true\">\n                        the_site_logo()                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"logo\">\n                <h3>Monochrome light logo<\/h3>\n\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                    <img decoding=\"async\" src=\"https:\/\/glen-moray.r2agency.dev\/app\/themes\/glen-moray\/src\/images\/logos\/logo-light.png\" alt=\"Glen Moray\" class=\"\">                <\/div>\n\n                <h4>Code<\/h4>\n                <div class=\"code\">\n                    <code class=\"language-html\" contenteditable=\"true\">\n                        the_site_logo('light')                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"logo\">\n                <h3>Monochrome dark logo<\/h3>\n\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                    <img decoding=\"async\" src=\"https:\/\/glen-moray.r2agency.dev\/app\/themes\/glen-moray\/src\/images\/logos\/logo-dark.png\" alt=\"Glen Moray\" class=\"\">                <\/div>\n\n                <h4>Code<\/h4>\n                <div class=\"code\">\n                    <code class=\"language-html\" contenteditable=\"true\">\n                        the_site_logo('dark')                    <\/code>\n\n                <\/div>\n            <\/div>\n            <\/div>\n\n    <h2>Colors<\/h2>\n\n    <div class=\"colors\">\n            <\/div>\n\n    <h2>Atoms<\/h2>\n\n    <div class=\"atoms\">\n                    <div class=\"atom\">\n                <h3>Heading 1<\/h3>\n                <h4>Description<\/h4>\n                <p>Heading 1 is the most important heading<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <h1 class=\"wp-block-heading\">Lorem ipsum dolor sit<\/h1>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Heading 2<\/h3>\n                <h4>Description<\/h4>\n                <p>Heading 2 is the second most important heading<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <h2 class=\"wp-block-heading\">Lorem ipsum dolor sit<\/h2>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Heading 3<\/h3>\n                <h4>Description<\/h4>\n                <p>Heading 3 is the third most important heading<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <h3 class=\"wp-block-heading\">Lorem ipsum dolor sit<\/h3>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Heading 4<\/h3>\n                <h4>Description<\/h4>\n                <p>Heading 4 is the fourth most important heading<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <h4 class=\"wp-block-heading\">Lorem ipsum dolor sit<\/h4>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Heading 5<\/h3>\n                <h4>Description<\/h4>\n                <p>Heading 5 is the fifth most important heading<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <h5 class=\"wp-block-heading\">Lorem ipsum dolor sit<\/h5>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Heading 6<\/h3>\n                <h4>Description<\/h4>\n                <p>Heading 6 is the sixth most important heading<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <h6 class=\"wp-block-heading\">Lorem ipsum dolor sit<\/h6>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Paragraph<\/h3>\n                <h4>Description<\/h4>\n                <p>Paragraph is a block of text<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <p class=\"wp-block-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Image<\/h3>\n                <h4>Description<\/h4>\n                <p>Image is a block of image<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/200\/300\" alt=\"Image\" \/><\/figure>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>List<\/h3>\n                <h4>Description<\/h4>\n                <p>List is a block of list<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <ul class=\"wp-block-list\"><li>Lorem ipsum dolor sit<\/li><li>Lorem ipsum dolor sit<\/li><li>Lorem ipsum dolor sit<\/li><\/ul>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Quote<\/h3>\n                <h4>Description<\/h4>\n                <p>Quote is a block of quote<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Lorem ipsum dolor sit<\/p><\/blockquote>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Table<\/h3>\n                <h4>Description<\/h4>\n                <p>Table is a block of table<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                     <table class=\"wp-block-table\"><tbody><tr><td>Lorem ipsum dolor sit<\/td><td>Lorem ipsum dolor sit<\/td><\/tr><tr><td>Lorem ipsum dolor sit<\/td><td>Lorem ipsum dolor sit<\/td><\/tr><\/tbody><\/table>                 <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n                    <div class=\"atom\">\n                <h3>Button<\/h3>\n                <h4>Description<\/h4>\n                <p>Button is a block of button<\/p>\n                <h4>Preview<\/h4>\n                <div class=\"preview\">\n                    \n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Lorem ipsum<\/a><\/div>\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\">Lorem ipsum<\/a><\/div>\n<\/div>\n                <\/div>\n                <h4>Code<\/h4>\n                <div class=\"code\">\n\n                    <code class=\"language-html\" contenteditable=\"true\">\n                    <\/code>\n\n                <\/div>\n            <\/div>\n            <\/div>\n\n    <h2>Variables<\/h2>\n\n\n<\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":0,"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/glen-moray.r2agency.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}