{"id":25,"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-06-04T02:57:13","modified_gmt":"2026-06-04T02:57:13","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-25-329 bde-section px_page_title_section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-25-330 oxy-container px_container\" data-entrance=\"slideUp\"><div class=\"bde-div-25-331 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-25-332 bde-heading px_page_title_heading\">\nStyle Guide\n<\/h1>\n<\/div><\/div><\/div>\n<\/section><section class=\"bde-section-25-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-25-101 oxy-container px_container\" data-entrance=\"slideUp\"><div class=\"bde-div-25-126 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-125 bde-heading\">\nColor Style\n<\/h4><div class=\"bde-columns-25-128 bde-columns\"><div class=\"bde-column-25-129 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-133 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-25-136 bde-heading\">\nPrimary Color\n<\/h5><div class=\"bde-text-25-137 bde-text\">\n#FC9C2D\n<\/div>\n<\/div><div class=\"bde-column-25-142 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-143 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-25-144 bde-heading\">\nLight Color\n<\/h5><div class=\"bde-text-25-145 bde-text\">\n#FFF9F3\n<\/div>\n<\/div><div class=\"bde-column-25-146 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-147 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-25-148 bde-heading\">\nBorder Color\n<\/h5><div class=\"bde-text-25-149 bde-text\">\n#DCD7D2\n<\/div>\n<\/div><\/div><div class=\"bde-columns-25-150 bde-columns\"><div class=\"bde-column-25-155 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-156 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-25-157 bde-heading\">\nHeading Color\n<\/h5><div class=\"bde-text-25-158 bde-text\">\n#202020\n<\/div>\n<\/div><div class=\"bde-column-25-159 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-160 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-25-161 bde-heading\">\nText Color\n<\/h5><div class=\"bde-text-25-162 bde-text\">\n#635854\n<\/div>\n<\/div><div class=\"bde-column-25-163 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-164 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-25-165 bde-heading\">\nBackground Color\n<\/h5><div class=\"bde-text-25-166 bde-text\">\n#FFFFFF\n<\/div>\n<\/div><\/div>\n<\/div><div class=\"bde-fancy-divider-25-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-25-239 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-240 bde-heading\">\nHeading Style\n<\/h4><div class=\"bde-div-25-241 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-25-242 bde-heading\">\nThis is a heading.\n<\/h1><div class=\"bde-div-25-243 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-25-244 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-25-245 bde-text\">\nFont: \"Geist\"\n<\/div><div class=\"bde-text-25-246 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-25-247 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-25-248 bde-heading\">\nThis is a heading.\n<\/h2><div class=\"bde-div-25-249 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-25-250 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-25-251 bde-text\">\nFont: \"Geist\"\n<\/div><div class=\"bde-text-25-252 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-25-253 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-254 bde-heading\">\nThis is a heading.\n<\/h3><div class=\"bde-div-25-255 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-25-256 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-25-257 bde-text\">\nFont: \"Geist\"\n<\/div><div class=\"bde-text-25-258 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-25-259 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-260 bde-heading\">\nThis is a heading.\n<\/h4><div class=\"bde-div-25-261 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-25-262 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-25-263 bde-text\">\nFont: \"Geist\"\n<\/div><div class=\"bde-text-25-264 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-25-265 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-266 bde-heading\">\nThis is a heading.\n<\/h5><div class=\"bde-div-25-267 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-25-268 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-25-269 bde-text\">\nFont: \"Geist\"\n<\/div><div class=\"bde-text-25-270 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-25-271 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-25-272 bde-heading\">\nThis is a heading.\n<\/h6><div class=\"bde-div-25-273 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-25-274 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-25-275 bde-text\">\nFont: \"Geist\"\n<\/div><div class=\"bde-text-25-276 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-25-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-25-277 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-278 bde-heading\">\nRich Text Style\n<\/h4><div class=\"bde-rich-text-25-316 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-25-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-25-317 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-318 bde-heading\">\nButton Style\n<\/h4><div class=\"bde-div-25-320 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-25-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-25-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 Color Style Primary Color #FC9C2D Light Color #FFF9F3 Border Color #DCD7D2 Heading Color #202020 Text Color #635854 Background Color #FFFFFF Heading Style This is a heading. Heading 1 Font: &#8220;Geist&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font: &#8220;Geist&#8221; Size: var(&#8211;bde-h2-font-size) This is a heading. Heading 3 Font: &#8220;Geist&#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-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":3,"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":678,"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/pages\/25\/revisions\/678"}],"wp:attachment":[{"href":"https:\/\/oxylibrary.com\/oxygen-drone-service-template\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}