{"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-08-14T06:33:10","modified_gmt":"2026-08-14T06:33:10","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<main id='oxy-main'><section class=\"bde-section-25-483 bde-section inner_top_section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-25-484 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-25-485 bde-heading heading_title\">\nStyle Guide\n<\/h2><div class=\"bde-icon-list-25-486 bde-icon-list\">\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-logistic-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-home3\" viewBox=\"0 0 32 32\">\n<path d=\"M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z\"\/>\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              <div class='bde-icon-list__item-wrapper'>\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=\"M32 96l320 0V32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l96 96c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-96 96c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160L32 160c-17.7 0-32-14.3-32-32s14.3-32 32-32zM480 352c17.7 0 32 14.3 32 32s-14.3 32-32 32H160v64c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-96-96c-6-6-9.4-14.1-9.4-22.6s3.4-16.6 9.4-22.6l96-96c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 64H480z\"\/><\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Style Guide\n      <\/span>\n              <\/div>\n      \n    <\/li>\n\n  <\/ul>\n\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-25-333 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-25-334 bde-heading bde-preset-4b7a3f9a-6d05-4441-908c-6fe50bb15242 heading_title\">\nHeading\n<\/h2><div class=\"bde-grid-25-335 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-336 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-337 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-25-338 bde-heading\">\nTitle 01\n<\/h1><h2 class=\"bde-heading-25-339 bde-heading\">\n(h1) Heading \n<\/h2>\n<\/div><div class=\"bde-div-25-340 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-341 bde-heading\">\nFont-Size : 20vw\n<\/h3><h3 class=\"bde-heading-25-342 bde-heading\">\nLine Height : 1.2\n<\/h3><h3 class=\"bde-heading-25-343 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-25-344 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-345 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-25-346 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3\">\nTitle 02\n<\/h2><h2 class=\"bde-heading-25-347 bde-heading\">\n(h2) Heading Title\n<\/h2>\n<\/div><div class=\"bde-div-25-348 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-349 bde-heading\">\nFont-Size : 50px\n<\/h3><h3 class=\"bde-heading-25-350 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-25-351 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-25-352 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-353 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-354 bde-heading bde-preset-a114a2ee-c062-4f0e-815d-e098950ea1d2\">\nTitle 03\n<\/h3><h3 class=\"bde-heading-25-355 bde-heading\">\n(h3)  Sub Heading\n<\/h3>\n<\/div><div class=\"bde-div-25-356 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-357 bde-heading\">\nFont-Size : 24px\n<\/h3><h3 class=\"bde-heading-25-358 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-25-359 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-25-360 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-361 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-362 bde-heading bde-preset-b64e60ab-842d-4d11-a316-d04623155719\">\nTitle 04\n<\/h4><h4 class=\"bde-heading-25-363 bde-heading\">\n(h4) Sub Heading-1\n<\/h4>\n<\/div><div class=\"bde-div-25-364 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-365 bde-heading\">\nFont-Size : 18px\n<\/h3><h3 class=\"bde-heading-25-366 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-25-367 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-25-368 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-369 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-370 bde-heading bde-preset-b64e60ab-842d-4d11-a316-d04623155719\">\nTitle 05\n<\/h5><h4 class=\"bde-heading-25-371 bde-heading\">\n(h5) Sub Heading\n<\/h4>\n<\/div><div class=\"bde-div-25-372 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-373 bde-heading\">\nFont-Size : 16px\n<\/h3><h3 class=\"bde-heading-25-374 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-25-375 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div>\n<\/div><h2 class=\"bde-heading-25-376 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nText\n<\/h2><div class=\"bde-grid-25-377 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-378 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-379 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-25-380 bde-heading\">\nBody Font-Style\n<\/h1>\n<\/div><div class=\"bde-div-25-381 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-382 bde-heading\">\nFont-Size : 16px\n<\/h3><h3 class=\"bde-heading-25-383 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-25-384 bde-heading\">\nFont-Weight : 400\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-25-385 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-386 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-25-387 bde-heading\">\nText-Link\n<\/h1>\n<\/div><div class=\"bde-div-25-388 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-25-389 bde-heading\">\nFont-Size : 16px\n<\/h3><h3 class=\"bde-heading-25-390 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-25-391 bde-heading\">\nFont-Weight : 400\n<\/h3>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-25-392 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-25-393 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nLogo Style\n<\/h2><div class=\"bde-div-25-394 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-395 bde-div\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-25-396 bde-image2\" src=\"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-content\/uploads\/sites\/72\/2026\/07\/Oxygen-Library-Plus-Logo.png\" loading=\"lazy\" srcset=\"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-content\/uploads\/sites\/72\/2026\/07\/Oxygen-Library-Plus-Logo.png 672w, https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-content\/uploads\/sites\/72\/2026\/07\/Oxygen-Library-Plus-Logo-300x116.png 300w\" sizes=\"(max-width: 672px) 100vw, 672px\"><h3 class=\"bde-heading-25-397 bde-heading bde-preset-b64e60ab-842d-4d11-a316-d04623155719 sub_heading\">\nBlack Logo\n<\/h3>\n<\/div><div class=\"bde-div-25-398 bde-div\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-25-399 bde-image2\" src=\"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-content\/uploads\/sites\/72\/2026\/07\/Oxygen-Library-Plus-Logo-w.png\" loading=\"lazy\" srcset=\"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-content\/uploads\/sites\/72\/2026\/07\/Oxygen-Library-Plus-Logo-w.png 672w, https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-content\/uploads\/sites\/72\/2026\/07\/Oxygen-Library-Plus-Logo-w-300x116.png 300w\" sizes=\"(max-width: 672px) 100vw, 672px\"><h3 class=\"bde-heading-25-400 bde-heading sub_heading\">\nWhite Logo\n<\/h3>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-25-401 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-25-402 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nColor Style\n<\/h2><div class=\"bde-grid-25-403 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-404 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-405 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-406 bde-heading\">\n#F94735\n<\/h4>\n<\/div><div class=\"bde-text-25-407 bde-text\">\n--bdp_primary\n<\/div>\n<\/div><div class=\"bde-div-25-408 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-409 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-410 bde-heading\">\n#0F333D\n<\/h4>\n<\/div><div class=\"bde-text-25-411 bde-text\">\n--bdp_secondary\n<\/div>\n<\/div><div class=\"bde-div-25-479 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-480 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-481 bde-heading\">\n#FAC12E\n<\/h4>\n<\/div><div class=\"bde-text-25-482 bde-text\">\n---bdp_primary_1\n<\/div>\n<\/div><div class=\"bde-div-25-412 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-413 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-414 bde-heading\">\n#0F313A\n<\/h4>\n<\/div><div class=\"bde-text-25-415 bde-text\">\n--bdp_heading\n<\/div>\n<\/div><div class=\"bde-div-25-416 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-417 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-418 bde-heading\">\nFFFFFF\n<\/h4>\n<\/div><div class=\"bde-text-25-419 bde-text\">\n--bdp_light\n<\/div>\n<\/div><div class=\"bde-div-25-420 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-421 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-422 bde-heading\">\n#E0E2E4\n<\/h4>\n<\/div><div class=\"bde-text-25-423 bde-text\">\n--bdp_border\n<\/div>\n<\/div><div class=\"bde-div-25-424 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-425 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-426 bde-heading\">\n#6D6B6B\n<\/h4>\n<\/div><div class=\"bde-text-25-427 bde-text\">\n--bdp_text\n<\/div>\n<\/div><div class=\"bde-div-25-428 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-429 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-25-430 bde-heading\">\n#F1F3F5\n<\/h4>\n<\/div><div class=\"bde-text-25-431 bde-text\">\n--bdp_white\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-25-432 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-25-433 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nContainer\n<\/h2><div class=\"bde-div-25-434 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-435 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-436 bde-heading\">\nWidth : 1400px\n<\/h5><h5 class=\"bde-heading-25-437 bde-heading\">\nVertical Padding : 60px\n<\/h5><h5 class=\"bde-heading-25-438 bde-heading\">\nHorizontal Padding : 20px\n<\/h5><h5 class=\"bde-heading-25-439 bde-heading\">\nColumn Gap : 30px\n<\/h5>\n<\/div>\n<\/div><h2 class=\"bde-heading-25-440 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nText\n<\/h2><div class=\"bde-grid-25-441 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-442 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-443 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-444 bde-heading\">\nBody Font-Style\n<\/h5>\n<\/div><div class=\"bde-div-25-445 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-446 bde-heading\">\nFont-Size : 16px\n<\/h5><h5 class=\"bde-heading-25-447 bde-heading\">\nLine Height : 1.3em\n<\/h5><h5 class=\"bde-heading-25-448 bde-heading\">\nFont-Weight : 400\n<\/h5>\n<\/div>\n<\/div><div class=\"bde-div-25-449 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-450 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-451 bde-heading\">\nText-Link\n<\/h5>\n<\/div><div class=\"bde-div-25-452 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-453 bde-heading\">\nFont-Size : 16px\n<\/h5><h5 class=\"bde-heading-25-454 bde-heading\">\nLine Height : 1.2em\n<\/h5><h5 class=\"bde-heading-25-455 bde-heading\">\nFont-Weight : 400\n<\/h5>\n<\/div>\n<\/div>\n<\/div><h2 class=\"bde-heading-25-456 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nFont-Family\n<\/h2><div class=\"bde-grid-25-457 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-25-458 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-459 bde-heading\">\nHeading - font Family : Space Grotesk<br>\n<\/h5><h5 class=\"bde-heading-25-460 bde-heading\">\nFont-weight :700\n<\/h5><h5 class=\"bde-heading-25-461 bde-heading\">\nline height : 1.2em\n<\/h5>\n<\/div><div class=\"bde-div-25-462 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-25-463 bde-heading\">\nBody - font Family : DM Sans<br>\n<\/h5><h5 class=\"bde-heading-25-464 bde-heading\">\nFont-weight :400\n<\/h5><h5 class=\"bde-heading-25-465 bde-heading\">\nline height : 1.3em\n<\/h5><h5 class=\"bde-heading-25-466 bde-heading\">\nBase Size : 16px\n<\/h5>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-25-467 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-25-468 bde-heading bde-preset-213c4d18-8b82-4a26-b7f6-39fd58648df3 heading_title\">\nbutton Variable\n<\/h2><div class=\"bde-div-25-469 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-25-470 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-471 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><\/div>\n<\/section><\/main>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Style Guide Heading Title 01 (h1) Heading Font-Size : 20vw Line Height : 1.2 Font-Weight : 700 Title 02 (h2) Heading Title Font-Size : 50px Line Height : 1.2em Font-Weight : 700 Title 03 (h3) Sub Heading Font-Size : 24px Line Height : 1.2em Font-Weight : 700 Title 04 (h4) Sub Heading-1 [&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-logistic-template\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":0,"href":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"wp:attachment":[{"href":"https:\/\/oxylibrary.com\/oxygen-logistic-template\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}