Admin: StyleGuide

Global Colors Scheme

Color ID: 0
Name: Bermuda
Hex: #74d8c2


Color ID: 1
Name: Picton Blue
Hex: #41c3e5


Color ID: 2
Name: White Transluent
Hex: rgba(255,255,255,0.7)


Color ID: 3
Name: White
Hex: #ffffff


Color ID: 4
Name: Denim
Hex: #1278ab


Color ID: 5
Name: Ebony Clay
Hex: #2b3644


Color ID: 6
Name: Shuttle Gray
Hex: #576677


Color ID: 7
Name: Black
Hex: #000000


Color ID: 8
Name: Catskill White
Hex: #f4f7fa


Color ID: 9
Name: Gray0
Hex: #f9f9fa


Color ID: 10
Name: Gray1
Hex: #eceeef


Color ID: 11
Name: Gray5
Hex: #adb4b9


Color ID: 12
Name: Gray6
Hex: #98a1a8


Color ID: 13
Name: Gray9
Hex: #374047


Color ID: 14
Name: Gray2
Hex: #dee1e3


Color ID: 15
Name: Gray8
Hex: #606e79


Color ID: 16
Name: primary
Hex: #15adc1


Color ID: 17
Name: secondary
Hex: #1d3d42


Color ID: 18
Name: accent
Hex: #aaa517


Color ID: 19
Name: alert
Hex: #aa173c


Color ID: 20
Name: success
Hex: #37aa17


Color ID: 21
Name: bkgd_light
Hex: #ffffff


Color ID: 22
Name: bkgd_dark
Hex: #282828


Color ID: 23
Name: text_light
Hex: #ffffff


Color ID: 24
Name: text_dark
Hex: #404040


Color ID: 25
Name: Gray7
Hex: #7f8b93



Color Scheme




Loop through Global Colors

Color: Bermuda
Color: Picton Blue
Color: White Transluent
Color: White
Color: Denim
Color: Ebony Clay
Color: Shuttle Gray
Color: Black
Color: Catskill White
Color: Gray0
Color: Gray1
Color: Gray5
Color: Gray6
Color: Gray9
Color: Gray2
Color: Gray8
Color: primary
Color: secondary
Color: accent
Color: alert
Color: success
Color: bkgd_light
Color: bkgd_dark
Color: text_light
Color: text_dark
Color: Gray7
ct Global Settings

fonts

  • Text: Open Sans
  • Display: Source Sans Pro

scripts

  • scroll_to_hash:
  • scroll_to_hash_time:
  • scroll_to_hash_offset:

indicateParents

true

classSuggestionsLimit

5

headings

  • H1:
    • font-size-unit: px
    • font-size: 36
    • font-weight: 700
    • color:
  • H2:
    • font-size-unit: px
    • font-size: 30
    • font-weight:
    • color:
  • H3:
    • font-size-unit: px
    • font-size: 24
    • font-weight:
    • color:
  • H4:
    • font-size-unit: px
    • font-size: 20
    • font-weight:
    • color:
  • H5:
    • font-size-unit: px
    • font-size: 18
    • font-weight:
    • color:
  • H6:
    • font-size-unit: px
    • font-size: 16
    • font-weight:
    • color:

body_text

  • font-size-unit: px
  • font-size: 16
  • font-weight: 400
  • line-height: 1.6
  • color: #404040

links

  • all:
    • color: #0074db
    • font-weight:
    • text-decoration: none
    • hover_color:
    • hover_text-decoration: none
  • text_link:
    • color:
    • font-weight:
    • text-decoration:
    • hover_color:
    • hover_text-decoration:
  • link_wrapper:
    • color:
    • font-weight:
    • text-decoration:
    • hover_color:
    • hover_text-decoration:
  • button:
    • border-radius-unit: px
    • font-weight:
    • border-radius: 3

sections

  • container-padding-top-unit: px
  • container-padding-bottom-unit: px
  • container-padding-left-unit: px
  • container-padding-right-unit: px
  • container-padding-top: 75
  • container-padding-bottom: 75
  • container-padding-left: 20
  • container-padding-right: 20

columns

  • padding-top: 20
  • padding-top-unit: px
  • padding-bottom: 20
  • padding-bottom-unit: px
  • padding-left: 20
  • padding-left-unit: px
  • padding-right: 20
  • padding-right-unit: px

aos

  • type:
  • duration:
  • easing:
  • offset:
  • delay:
  • anchor-placement:
  • once:
  • mirror:
  • disable:

max-width

1120

breakpoints

  • tablet: 992
  • phone-landscape: 768
  • phone-portrait: 480

FontsOptions

Warning: Undefined array key "fontsOptions" in /var/web/site/public_html/wp-content/plugins/oxygen/component-framework/components/classes/code-block.class.php(133) : eval()'d code on line 14 Warning: foreach() argument must be of type array|object, null given in /var/web/site/public_html/wp-content/plugins/oxygen/component-framework/components/classes/code-block.class.php(133) : eval()'d code on line 14

Headings

H1

  • font-size-unit: px
  • font-size: 36
  • font-weight: 700
  • color:

H2

  • font-size-unit: px
  • font-size: 30
  • font-weight:
  • color:

H3

  • font-size-unit: px
  • font-size: 24
  • font-weight:
  • color:

H4

  • font-size-unit: px
  • font-size: 20
  • font-weight:
  • color:

H5

  • font-size-unit: px
  • font-size: 18
  • font-weight:
  • color:

H6

  • font-size-unit: px
  • font-size: 16
  • font-weight:
  • color:

links

all

  • color: #0074db
  • font-weight:
  • text-decoration: none
  • hover_color:
  • hover_text-decoration: none

text_link

  • color:
  • font-weight:
  • text-decoration:
  • hover_color:
  • hover_text-decoration:

link_wrapper

  • color:
  • font-weight:
  • text-decoration:
  • hover_color:
  • hover_text-decoration:

button

  • border-radius-unit: px
  • font-weight:
  • border-radius: 3
ct Global Settings

Headings H1:

font-size: 36px
font-weight: 700
color:

Headings H2: 30px font-weight: color:

Headings H3: 24px font-weight: color:

Headings H4: 20px font-weight: color:

Headings H5: 18px font-weight: color:

Headings H6: 16px font-weight: color:

ct Global Settings 

array(12) {
  ["fonts"]=>
  array(2) {
    ["Text"]=>
    string(9) "Open Sans"
    ["Display"]=>
    string(15) "Source Sans Pro"
  }
  ["scripts"]=>
  array(3) {
    ["scroll_to_hash"]=>
    string(0) ""
    ["scroll_to_hash_time"]=>
    string(0) ""
    ["scroll_to_hash_offset"]=>
    string(0) ""
  }
  ["indicateParents"]=>
  string(4) "true"
  ["classSuggestionsLimit"]=>
  string(1) "5"
  ["headings"]=>
  array(6) {
    ["H1"]=>
    array(4) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "36"
      ["font-weight"]=>
      string(3) "700"
      ["color"]=>
      string(0) ""
    }
    ["H2"]=>
    array(4) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "30"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(0) ""
    }
    ["H3"]=>
    array(4) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "24"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(0) ""
    }
    ["H4"]=>
    array(4) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "20"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(0) ""
    }
    ["H5"]=>
    array(4) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "18"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(0) ""
    }
    ["H6"]=>
    array(4) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "16"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(0) ""
    }
  }
  ["body_text"]=>
  array(5) {
    ["font-size-unit"]=>
    string(2) "px"
    ["font-size"]=>
    string(2) "16"
    ["font-weight"]=>
    string(3) "400"
    ["line-height"]=>
    string(3) "1.6"
    ["color"]=>
    string(7) "#404040"
  }
  ["links"]=>
  array(4) {
    ["all"]=>
    array(5) {
      ["color"]=>
      string(7) "#0074db"
      ["font-weight"]=>
      string(0) ""
      ["text-decoration"]=>
      string(4) "none"
      ["hover_color"]=>
      string(0) ""
      ["hover_text-decoration"]=>
      string(4) "none"
    }
    ["text_link"]=>
    array(5) {
      ["color"]=>
      string(0) ""
      ["font-weight"]=>
      string(0) ""
      ["text-decoration"]=>
      string(0) ""
      ["hover_color"]=>
      string(0) ""
      ["hover_text-decoration"]=>
      string(0) ""
    }
    ["link_wrapper"]=>
    array(5) {
      ["color"]=>
      string(0) ""
      ["font-weight"]=>
      string(0) ""
      ["text-decoration"]=>
      string(0) ""
      ["hover_color"]=>
      string(0) ""
      ["hover_text-decoration"]=>
      string(0) ""
    }
    ["button"]=>
    array(3) {
      ["border-radius-unit"]=>
      string(2) "px"
      ["font-weight"]=>
      string(0) ""
      ["border-radius"]=>
      string(1) "3"
    }
  }
  ["sections"]=>
  array(8) {
    ["container-padding-top-unit"]=>
    string(2) "px"
    ["container-padding-bottom-unit"]=>
    string(2) "px"
    ["container-padding-left-unit"]=>
    string(2) "px"
    ["container-padding-right-unit"]=>
    string(2) "px"
    ["container-padding-top"]=>
    string(2) "75"
    ["container-padding-bottom"]=>
    string(2) "75"
    ["container-padding-left"]=>
    string(2) "20"
    ["container-padding-right"]=>
    string(2) "20"
  }
  ["columns"]=>
  array(8) {
    ["padding-top"]=>
    string(2) "20"
    ["padding-top-unit"]=>
    string(2) "px"
    ["padding-bottom"]=>
    string(2) "20"
    ["padding-bottom-unit"]=>
    string(2) "px"
    ["padding-left"]=>
    string(2) "20"
    ["padding-left-unit"]=>
    string(2) "px"
    ["padding-right"]=>
    string(2) "20"
    ["padding-right-unit"]=>
    string(2) "px"
  }
  ["aos"]=>
  array(9) {
    ["type"]=>
    string(0) ""
    ["duration"]=>
    string(0) ""
    ["easing"]=>
    string(0) ""
    ["offset"]=>
    string(0) ""
    ["delay"]=>
    string(0) ""
    ["anchor-placement"]=>
    string(0) ""
    ["once"]=>
    string(0) ""
    ["mirror"]=>
    string(0) ""
    ["disable"]=>
    string(0) ""
  }
  ["max-width"]=>
  string(4) "1120"
  ["breakpoints"]=>
  array(3) {
    ["tablet"]=>
    string(3) "992"
    ["phone-landscape"]=>
    string(3) "768"
    ["phone-portrait"]=>
    string(3) "480"
  }
}
Loop through Global Colors

Array
(
    [colorsIncrement] => 26
    [setsIncrement] => 3
    [colors] => Array
        (
            [0] => Array
                (
                    [id] => 1
                    [name] => Bermuda
                    [value] => #74d8c2
                    [set] => 2
                )

            [1] => Array
                (
                    [id] => 2
                    [name] => Picton Blue
                    [value] => #41c3e5
                    [set] => 2
                )

            [2] => Array
                (
                    [id] => 3
                    [name] => White Transluent
                    [value] => rgba(255,255,255,0.7)
                    [set] => 2
                )

            [3] => Array
                (
                    [id] => 4
                    [name] => White
                    [value] => #ffffff
                    [set] => 2
                )

            [4] => Array
                (
                    [id] => 5
                    [name] => Denim
                    [value] => #1278ab
                    [set] => 2
                )

            [5] => Array
                (
                    [id] => 6
                    [name] => Ebony Clay
                    [value] => #2b3644
                    [set] => 2
                )

            [6] => Array
                (
                    [id] => 7
                    [name] => Shuttle Gray
                    [value] => #576677
                    [set] => 2
                )

            [7] => Array
                (
                    [id] => 8
                    [name] => Black
                    [value] => #000000
                    [set] => 2
                )

            [8] => Array
                (
                    [id] => 9
                    [name] => Catskill White
                    [value] => #f4f7fa
                    [set] => 2
                )

            [9] => Array
                (
                    [id] => 10
                    [name] => Gray0
                    [value] => #f9f9fa
                    [set] => 3
                )

            [10] => Array
                (
                    [id] => 11
                    [name] => Gray1
                    [value] => #eceeef
                    [set] => 3
                )

            [11] => Array
                (
                    [id] => 12
                    [name] => Gray5
                    [value] => #adb4b9
                    [set] => 3
                )

            [12] => Array
                (
                    [id] => 13
                    [name] => Gray6
                    [value] => #98a1a8
                    [set] => 3
                )

            [13] => Array
                (
                    [id] => 14
                    [name] => Gray9
                    [value] => #374047
                    [set] => 3
                )

            [14] => Array
                (
                    [id] => 15
                    [name] => Gray2
                    [value] => #dee1e3
                    [set] => 3
                )

            [15] => Array
                (
                    [id] => 16
                    [name] => Gray8
                    [value] => #606e79
                    [set] => 3
                )

            [16] => Array
                (
                    [id] => 17
                    [name] => primary
                    [value] => #15adc1
                    [set] => 0
                )

            [17] => Array
                (
                    [id] => 18
                    [name] => secondary
                    [value] => #1d3d42
                    [set] => 0
                )

            [18] => Array
                (
                    [id] => 19
                    [name] => accent
                    [value] => #aaa517
                    [set] => 0
                )

            [19] => Array
                (
                    [id] => 20
                    [name] => alert
                    [value] => #aa173c
                    [set] => 0
                )

            [20] => Array
                (
                    [id] => 21
                    [name] => success
                    [value] => #37aa17
                    [set] => 0
                )

            [21] => Array
                (
                    [id] => 22
                    [name] => bkgd_light
                    [value] => #ffffff
                    [set] => 0
                )

            [22] => Array
                (
                    [id] => 23
                    [name] => bkgd_dark
                    [value] => #282828
                    [set] => 0
                )

            [23] => Array
                (
                    [id] => 24
                    [name] => text_light
                    [value] => #ffffff
                    [set] => 0
                )

            [24] => Array
                (
                    [id] => 25
                    [name] => text_dark
                    [value] => #404040
                    [set] => 0
                )

            [25] => Array
                (
                    [id] => 26
                    [name] => Gray7
                    [value] => #7f8b93
                    [set] => 3
                )

        )

    [sets] => Array
        (
            [0] => Array
                (
                    [id] => 0
                    [name] => Global Colors
                )

            [1] => Array
                (
                    [id] => 2
                    [name] => proteus
                )

            [2] => Array
                (
                    [id] => 3
                    [name] => composite-elements
                )

        )

)
Color ID: 0, Hex: #74d8c2, Name: Bermuda
Color ID: 1, Hex: #41c3e5, Name: Picton Blue
Color ID: 2, Hex: rgba(255,255,255,0.7), Name: White Transluent
Color ID: 3, Hex: #ffffff, Name: White
Color ID: 4, Hex: #1278ab, Name: Denim
Color ID: 5, Hex: #2b3644, Name: Ebony Clay
Color ID: 6, Hex: #576677, Name: Shuttle Gray
Color ID: 7, Hex: #000000, Name: Black
Color ID: 8, Hex: #f4f7fa, Name: Catskill White
Color ID: 9, Hex: #f9f9fa, Name: Gray0
Color ID: 10, Hex: #eceeef, Name: Gray1
Color ID: 11, Hex: #adb4b9, Name: Gray5
Color ID: 12, Hex: #98a1a8, Name: Gray6
Color ID: 13, Hex: #374047, Name: Gray9
Color ID: 14, Hex: #dee1e3, Name: Gray2
Color ID: 15, Hex: #606e79, Name: Gray8
Color ID: 16, Hex: #15adc1, Name: primary
Color ID: 17, Hex: #1d3d42, Name: secondary
Color ID: 18, Hex: #aaa517, Name: accent
Color ID: 19, Hex: #aa173c, Name: alert
Color ID: 20, Hex: #37aa17, Name: success
Color ID: 21, Hex: #ffffff, Name: bkgd_light
Color ID: 22, Hex: #282828, Name: bkgd_dark
Color ID: 23, Hex: #ffffff, Name: text_light
Color ID: 24, Hex: #404040, Name: text_dark
Color ID: 25, Hex: #7f8b93, Name: Gray7