{"id":116,"date":"2026-02-10T06:03:34","date_gmt":"2026-02-10T06:03:34","guid":{"rendered":"https:\/\/oxylibrary.com\/demo-service\/?page_id=25"},"modified":"2026-04-16T10:44:46","modified_gmt":"2026-04-16T10:44:46","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-116-334 bde-section px_page_title_section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-116-335 oxy-container px_container\" data-entrance=\"slideUp\"><div class=\"oxy-container-116-336 oxy-container px_page_title_con\"><h1 class=\"bde-heading-116-337 bde-heading px_page_title_heading\">\nStyle Guide\n<\/h1><div class=\"bde-icon-list-116-338 bde-icon-list px_page_title_breadcrums\">\n<ul>\n  \n              \n    <li>\n                      \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link bde-icon-list__item-wrapper\" href=\"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\" target=\"_self\" data-type=\"url\"  >\n\n      \n      <span class='bde-icon-list__icon'>\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      <\/span>\n      <span class='bde-icon-list__text' >\n      Home\n      <\/span>\n                  <\/a>\n\n      \n    <\/li>\n\n  \n              \n    <li>\n                      \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link bde-icon-list__item-wrapper\" href=\"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/style-guide\/\" target=\"_self\" data-type=\"url\"  >\n\n      \n      <span class='bde-icon-list__icon'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z\"\/><\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Style Guide\n      <\/span>\n                  <\/a>\n\n      \n    <\/li>\n\n  <\/ul>\n\n<\/div><\/div><\/div><\/div>\n<\/section><section class=\"bde-section-116-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-116-101 oxy-container px_container\" data-entrance=\"slideUp\"><div class=\"bde-div-116-126 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-116-125 bde-heading\">\nColor Style\n<\/h4><div class=\"bde-columns-116-128 bde-columns\"><div class=\"bde-column-116-129 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-116-133 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-116-136 bde-heading\">\nBrand Color\n<\/h5><div class=\"bde-text-116-137 bde-text\">\n#000000\n<\/div>\n<\/div><div class=\"bde-column-116-339 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-116-340 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-116-341 bde-heading\">\nText Color\n<\/h5><div class=\"bde-text-116-342 bde-text\">\n#202020\n<\/div>\n<\/div><div class=\"bde-column-116-142 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-116-143 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-116-144 bde-heading\">\nLight Color\n<\/h5><div class=\"bde-text-116-145 bde-text\">\n#f7f8f9\n<\/div>\n<\/div><div class=\"bde-column-116-146 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-116-147 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-116-148 bde-heading\">\nBorder Color\n<\/h5><div class=\"bde-text-116-149 bde-text\">\n#e5e8ec\n<\/div>\n<\/div><\/div>\n<\/div><div class=\"bde-fancy-divider-116-326 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-116-239 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-116-240 bde-heading\">\nHeading Style\n<\/h4><div class=\"bde-div-116-241 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-116-242 bde-heading\">\nThis is a heading.\n<\/h1><div class=\"bde-div-116-243 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-116-244 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-116-245 bde-text\">\nFont: \"Playfair Display\"\n<\/div><div class=\"bde-text-116-246 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-116-247 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-116-248 bde-heading\">\nThis is a heading.\n<\/h2><div class=\"bde-div-116-249 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-116-250 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-116-251 bde-text\">\nFont: \"Playfair Display\"\n<\/div><div class=\"bde-text-116-252 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-116-253 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-116-254 bde-heading\">\nThis is a heading.\n<\/h3><div class=\"bde-div-116-255 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-116-256 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-116-257 bde-text\">\nFont: \"Playfair Display\"\n<\/div><div class=\"bde-text-116-258 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-116-259 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-116-260 bde-heading\">\nThis is a heading.\n<\/h4><div class=\"bde-div-116-261 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-116-262 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-116-263 bde-text\">\nFont: \"Playfair Display\"\n<\/div><div class=\"bde-text-116-264 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-116-265 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-116-266 bde-heading\">\nThis is a heading.\n<\/h5><div class=\"bde-div-116-267 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-116-268 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-116-269 bde-text\">\nFont: \"Playfair Display\"\n<\/div><div class=\"bde-text-116-270 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-116-271 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-116-272 bde-heading\">\nThis is a heading.\n<\/h6><div class=\"bde-div-116-273 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-116-274 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-116-275 bde-text\">\nFont: \"Playfair Display\"\n<\/div><div class=\"bde-text-116-276 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-116-328 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-116-277 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-116-278 bde-heading\">\nRich Text Style\n<\/h4><div class=\"bde-rich-text-116-343 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-116-327 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-116-317 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-116-318 bde-heading\">\nButton Style\n<\/h4><div class=\"bde-div-116-320 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-116-324 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><div class=\"bde-button-116-325 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--secondary bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Secondary 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 Style Guide Color Style Brand Color #000000 Text Color #202020 Light Color #f7f8f9 Border Color #e5e8ec Heading Style This is a heading. Heading 1 Font: &#8220;Playfair Display&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font: &#8220;Playfair Display&#8221; Size: var(&#8211;bde-h2-font-size) This is a heading. Heading 3 Font: &#8220;Playfair Display&#8221; Size: var(&#8211;bde-h3-font-size) This [&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-116","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/pages\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":6,"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/pages\/116\/revisions"}],"predecessor-version":[{"id":891,"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/pages\/116\/revisions\/891"}],"wp:attachment":[{"href":"https:\/\/oxylibrary.com\/oxygen-modern-shop-template\/wp-json\/wp\/v2\/media?parent=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}