{"id":723,"date":"2026-02-11T06:04:48","date_gmt":"2026-02-11T06:04:48","guid":{"rendered":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/?page_id=723"},"modified":"2026-04-16T10:44:12","modified_gmt":"2026-04-16T10:44:12","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-723-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-723-101 oxy-container px_con\" data-entrance=\"slideUp\"><div class=\"bde-div-723-102 bde-div px_bg_div px_page_title_div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-columns-723-103 bde-columns\"><div class=\"bde-column-723-104 bde-column\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-723-105 bde-heading px_page_title_heading\">\nStyle Guide\n<\/h1><a class=\"bde-container-link-723-106 bde-container-link breakdance-link\" href=\"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\" target=\"_self\" data-type=\"url\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-723-107 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-home\" viewBox=\"0 0 32 32\">\n<path d=\"M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z\"\/>\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-text-723-108 bde-text\">\nHome\n<\/div>\n\n<\/a>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/section><section class=\"bde-section-723-109 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-723-110 oxy-container px_con\" data-entrance=\"slideUp\"><div class=\"bde-div-723-127 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-128 bde-div px_subtitle\">\n  \n  \n\t\n\n\n\n<div class=\"bde-pulse-dot-723-129 bde-pulse-dot\"><div class=\"bde-pulse-dot__ping\"><\/div>\n<div class=\"bde-pulse-dot__core\"><\/div><\/div><div class=\"bde-text-723-130 bde-text px_subtitle_text\">\nColor Style\n<\/div>\n<\/div><div class=\"bde-columns-723-147 bde-columns\"><div class=\"bde-column-723-148 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-149 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-150 bde-heading\">\nPrimary Color\n<\/h5><div class=\"bde-text-723-151 bde-text\">\n#648BFF\n<\/div>\n<\/div><div class=\"bde-column-723-152 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-153 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-154 bde-heading\">\nSecondary Color\n<\/h5><div class=\"bde-text-723-155 bde-text\">\n#2B448D\n<\/div>\n<\/div><div class=\"bde-column-723-156 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-157 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-158 bde-heading\">\nLight Color\n<\/h5><div class=\"bde-text-723-159 bde-text\">\n#F6F8FF\n<\/div>\n<\/div><div class=\"bde-column-723-160 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-161 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-162 bde-heading\">\nBorder Color\n<\/h5><div class=\"bde-text-723-163 bde-text\">\n#D8E2FF\n<\/div>\n<\/div><\/div><div class=\"bde-columns-723-164 bde-columns\"><div class=\"bde-column-723-169 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-170 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-171 bde-heading\">\nHeading Color\n<\/h5><div class=\"bde-text-723-172 bde-text\">\n#202020\n<\/div>\n<\/div><div class=\"bde-column-723-173 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-174 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-175 bde-heading\">\nText Color\n<\/h5><div class=\"bde-text-723-176 bde-text\">\n#5F5F6B\n<\/div>\n<\/div><div class=\"bde-column-723-177 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-178 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-723-179 bde-heading\">\nBackground Color\n<\/h5><div class=\"bde-text-723-180 bde-text\">\n#FFFFFF\n<\/div>\n<\/div><div class=\"bde-column-723-221 bde-column\">\n  \n  \n\t\n\n\n\n\n<\/div><\/div>\n<\/div><div class=\"bde-fancy-divider-723-222 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-div-723-131 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-132 bde-div px_subtitle\">\n  \n  \n\t\n\n\n\n<div class=\"bde-pulse-dot-723-133 bde-pulse-dot\"><div class=\"bde-pulse-dot__ping\"><\/div>\n<div class=\"bde-pulse-dot__core\"><\/div><\/div><div class=\"bde-text-723-134 bde-text px_subtitle_text\">\nHeading Style\n<\/div>\n<\/div><div class=\"bde-div-723-181 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-723-182 bde-heading\">\nThis is a heading.\n<\/h1><div class=\"bde-div-723-183 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-723-184 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-723-185 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-723-186 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-723-187 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-723-188 bde-heading\">\nThis is a heading.\n<\/h2><div class=\"bde-div-723-189 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-723-190 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-723-191 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-723-192 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-723-193 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-723-194 bde-heading\">\nThis is a heading.\n<\/h3><div class=\"bde-div-723-195 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-723-196 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-723-197 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-723-198 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-723-199 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-723-200 bde-heading\">\nThis is a heading.\n<\/h4><div class=\"bde-div-723-201 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-723-202 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-723-203 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-723-204 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-723-205 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-723-206 bde-heading\">\nThis is a heading.\n<\/h5><div class=\"bde-div-723-207 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-723-208 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-723-209 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-723-210 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-723-211 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-723-212 bde-heading\">\nThis is a heading.\n<\/h6><div class=\"bde-div-723-213 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-723-214 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-723-215 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-723-216 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-723-225 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-div-723-135 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-136 bde-div px_subtitle\">\n  \n  \n\t\n\n\n\n<div class=\"bde-pulse-dot-723-137 bde-pulse-dot\"><div class=\"bde-pulse-dot__ping\"><\/div>\n<div class=\"bde-pulse-dot__core\"><\/div><\/div><div class=\"bde-text-723-138 bde-text px_subtitle_text\">\nRich Text Style\n<\/div>\n<\/div><div class=\"bde-rich-text-723-226 bde-rich-text breakdance-rich-text-styles\">\n<h1>H1<\/h1>\n<h2>H2<\/h2>\n<h3>H3<\/h3>\n<h4>H4<\/h4>\n<h5>H5<\/h5>\n<h6>H6<\/h6>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n    pariatur.<\/p>\n<blockquote>Block quote<\/blockquote>\n<p>Ordered list<\/p>\n<ol role=\"list\" class=\"list\">\n    <li>Item 1<\/li>\n    <li>Item 2<\/li>\n    <li>Item 3<\/li>\n<\/ol>\n<p>Unordered list<\/p>\n<ul role=\"list\">\n    <li>Item A<\/li>\n    <li>Item B<\/li>\n    <li>Item C<\/li>\n<\/ul>\n<p><a href=\"#\">Text link<\/a><\/p>\n<p><strong>Bold text<\/strong><\/p>\n<p><em>Emphasis<\/em><\/p>\n<p><sup>Superscript<\/sup><\/p>\n<p><sub>Subscript<\/sub><\/p>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-723-224 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-div-723-139 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-723-140 bde-div px_subtitle\">\n  \n  \n\t\n\n\n\n<div class=\"bde-pulse-dot-723-141 bde-pulse-dot\"><div class=\"bde-pulse-dot__ping\"><\/div>\n<div class=\"bde-pulse-dot__core\"><\/div><\/div><div class=\"bde-text-723-142 bde-text px_subtitle_text\">\nButton Style\n<\/div>\n<\/div><div class=\"bde-div-723-218 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-723-219 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--primary bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Primary Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div>\n<\/div><\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Color Style Primary Color #648BFF Secondary Color #2B448D Light Color #F6F8FF Border Color #D8E2FF Heading Color #202020 Text Color #5F5F6B Background Color #FFFFFF Heading Style This is a heading. Heading 1 Font: &#8220;Plus Jakarta Sans&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font: &#8220;Plus Jakarta Sans&#8221; Size: var(&#8211;bde-h2-font-size) This is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_oxygen_hide_in_design_set":false,"_oxygen_tags":"","footnotes":""},"class_list":["post-723","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/pages\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":9,"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/pages\/723\/revisions"}],"predecessor-version":[{"id":746,"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/pages\/723\/revisions\/746"}],"wp:attachment":[{"href":"https:\/\/oxylibrary.com\/oxygen-branding-agency-template-pack\/wp-json\/wp\/v2\/media?parent=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}