Admin: StyleGuide

Global Colors Scheme

Color ID: 0
Name: off White
Hex: #ece5d3


Color ID: 1
Name: off black
Hex: #1c2123


Color ID: 2
Name: Navy
Hex: #0a2540


Color ID: 3
Name: Blue
Hex: #1e4a7c


Color ID: 4
Name: Dark Grey
Hex: #747472


Color ID: 5
Name: Light Grey
Hex: #babbb8


Color ID: 6
Name: paper white
Hex: #eef0ea


Color ID: 7
Name: Gray1
Hex: #eceeef


Color ID: 8
Name: Gray3
Hex: #cfd3d7


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


Color ID: 10
Name: Gray9
Hex: #374047



Color Scheme




Loop through Global Colors

Color: off White
Color: off black
Color: Navy
Color: Blue
Color: Dark Grey
Color: Light Grey
Color: paper white
Color: Gray1
Color: Gray3
Color: Gray8
Color: Gray9
ct Global Settings

fonts

  • Text: Open Sans
  • Display: Open Sans

fontsOptions

  • Display:
    • 800: true
    • 500italic: true
    • 600italic: false
  • Text:
    • regular: true

scripts

  • scroll_to_hash: true
  • scroll_to_hash_time: 300
  • scroll_to_hash_offset:

indicateParents

true

classSuggestionsLimit

5

headings

  • H1:
    • font-size-unit: px
    • font-size: 36
    • font-weight: 700
    • color: color(28)
    • line-height: 1
  • H2:
    • font-size-unit: px
    • font-size: 30
    • font-weight:
    • color: color(28)
    • line-height: 1
  • H3:
    • font-size-unit: px
    • font-size: 24
    • font-weight:
    • color: color(28)
    • line-height: 1
  • H4:
    • font-size-unit: px
    • font-size: 20
    • font-weight:
    • color: color(28)
    • line-height: 1
  • H5:
    • font-size-unit: px
    • font-size: 18
    • font-weight:
    • color: color(28)
    • line-height: 1
  • H6:
    • font-size-unit: px
    • font-size: 16
    • font-weight:
    • color: color(28)
    • line-height: 1

body_text

  • font-size-unit: px
  • font-size: 16
  • font-weight: 400
  • line-height: 1.6
  • color: color(28)

links

  • all:
    • color: color(29)
    • font-weight: 500
    • text-decoration: none
    • hover_color: color(30)
    • hover_text-decoration: none
  • text_link:
    • color: color(29)
    • font-weight: 500
    • text-decoration: none
    • hover_color: color(30)
    • hover_text-decoration: none
  • link_wrapper:
    • color: color(29)
    • font-weight: 500
    • text-decoration: none
    • hover_color: color(30)
    • hover_text-decoration: none
  • button:
    • border-radius-unit: px
    • font-weight: 500
    • border-radius: 0

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: fade-up
  • duration: 450
  • easing: ease-in
  • offset:
  • delay:
  • anchor-placement:
  • once:
  • mirror:
  • disable:
  • refresh_on_page: true

max-width

1120

breakpoints

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

FontsOptions

Display

  • 800: true
  • 500italic: true
  • 600italic: false

Text

  • regular: true

Headings

H1

  • font-size-unit: px
  • font-size: 36
  • font-weight: 700
  • color: color(28)
  • line-height: 1

H2

  • font-size-unit: px
  • font-size: 30
  • font-weight:
  • color: color(28)
  • line-height: 1

H3

  • font-size-unit: px
  • font-size: 24
  • font-weight:
  • color: color(28)
  • line-height: 1

H4

  • font-size-unit: px
  • font-size: 20
  • font-weight:
  • color: color(28)
  • line-height: 1

H5

  • font-size-unit: px
  • font-size: 18
  • font-weight:
  • color: color(28)
  • line-height: 1

H6

  • font-size-unit: px
  • font-size: 16
  • font-weight:
  • color: color(28)
  • line-height: 1

links

all

  • color: color(29)
  • font-weight: 500
  • text-decoration: none
  • hover_color: color(30)
  • hover_text-decoration: none

text_link

  • color: color(29)
  • font-weight: 500
  • text-decoration: none
  • hover_color: color(30)
  • hover_text-decoration: none

link_wrapper

  • color: color(29)
  • font-weight: 500
  • text-decoration: none
  • hover_color: color(30)
  • hover_text-decoration: none

button

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

Headings H1:

font-size: 36px
font-weight: 700
color: color(28)
line-height: 1

Headings H2: 30px font-weight: color: color(28) line-height: 1

Headings H3: 24px font-weight: color: color(28) line-height: 1

Headings H4: 20px font-weight: color: color(28) line-height: 1

Headings H5: 18px font-weight: color: color(28) line-height: 1

Headings H6: 16px font-weight: color: color(28) line-height: 1

ct Global Settings 

array(13) {
  ["fonts"]=>
  array(2) {
    ["Text"]=>
    string(9) "Open Sans"
    ["Display"]=>
    string(9) "Open Sans"
  }
  ["fontsOptions"]=>
  array(2) {
    ["Display"]=>
    array(3) {
      [800]=>
      string(4) "true"
      ["500italic"]=>
      string(4) "true"
      ["600italic"]=>
      string(5) "false"
    }
    ["Text"]=>
    array(1) {
      ["regular"]=>
      string(4) "true"
    }
  }
  ["scripts"]=>
  array(3) {
    ["scroll_to_hash"]=>
    string(4) "true"
    ["scroll_to_hash_time"]=>
    string(3) "300"
    ["scroll_to_hash_offset"]=>
    string(0) ""
  }
  ["indicateParents"]=>
  string(4) "true"
  ["classSuggestionsLimit"]=>
  string(1) "5"
  ["headings"]=>
  array(6) {
    ["H1"]=>
    array(5) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "36"
      ["font-weight"]=>
      string(3) "700"
      ["color"]=>
      string(9) "color(28)"
      ["line-height"]=>
      string(1) "1"
    }
    ["H2"]=>
    array(5) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "30"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(9) "color(28)"
      ["line-height"]=>
      string(1) "1"
    }
    ["H3"]=>
    array(5) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "24"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(9) "color(28)"
      ["line-height"]=>
      string(1) "1"
    }
    ["H4"]=>
    array(5) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "20"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(9) "color(28)"
      ["line-height"]=>
      string(1) "1"
    }
    ["H5"]=>
    array(5) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "18"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(9) "color(28)"
      ["line-height"]=>
      string(1) "1"
    }
    ["H6"]=>
    array(5) {
      ["font-size-unit"]=>
      string(2) "px"
      ["font-size"]=>
      string(2) "16"
      ["font-weight"]=>
      string(0) ""
      ["color"]=>
      string(9) "color(28)"
      ["line-height"]=>
      string(1) "1"
    }
  }
  ["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(9) "color(28)"
  }
  ["links"]=>
  array(4) {
    ["all"]=>
    array(5) {
      ["color"]=>
      string(9) "color(29)"
      ["font-weight"]=>
      string(3) "500"
      ["text-decoration"]=>
      string(4) "none"
      ["hover_color"]=>
      string(9) "color(30)"
      ["hover_text-decoration"]=>
      string(4) "none"
    }
    ["text_link"]=>
    array(5) {
      ["color"]=>
      string(9) "color(29)"
      ["font-weight"]=>
      string(3) "500"
      ["text-decoration"]=>
      string(4) "none"
      ["hover_color"]=>
      string(9) "color(30)"
      ["hover_text-decoration"]=>
      string(4) "none"
    }
    ["link_wrapper"]=>
    array(5) {
      ["color"]=>
      string(9) "color(29)"
      ["font-weight"]=>
      string(3) "500"
      ["text-decoration"]=>
      string(4) "none"
      ["hover_color"]=>
      string(9) "color(30)"
      ["hover_text-decoration"]=>
      string(4) "none"
    }
    ["button"]=>
    array(3) {
      ["border-radius-unit"]=>
      string(2) "px"
      ["font-weight"]=>
      string(3) "500"
      ["border-radius"]=>
      string(1) "0"
    }
  }
  ["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(10) {
    ["type"]=>
    string(7) "fade-up"
    ["duration"]=>
    string(3) "450"
    ["easing"]=>
    string(7) "ease-in"
    ["offset"]=>
    string(0) ""
    ["delay"]=>
    string(0) ""
    ["anchor-placement"]=>
    string(0) ""
    ["once"]=>
    string(0) ""
    ["mirror"]=>
    string(0) ""
    ["disable"]=>
    string(0) ""
    ["refresh_on_page"]=>
    string(4) "true"
  }
  ["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] => 38
    [setsIncrement] => 4
    [colors] => Array
        (
            [0] => Array
                (
                    [id] => 27
                    [name] => off White
                    [value] => #ece5d3
                    [set] => 0
                )

            [1] => Array
                (
                    [id] => 28
                    [name] => off black
                    [value] => #1c2123
                    [set] => 0
                )

            [2] => Array
                (
                    [id] => 29
                    [name] => Navy
                    [value] => #0a2540
                    [set] => 0
                )

            [3] => Array
                (
                    [id] => 30
                    [name] => Blue
                    [value] => #1e4a7c
                    [set] => 0
                )

            [4] => Array
                (
                    [id] => 31
                    [name] => Dark Grey
                    [value] => #747472
                    [set] => 0
                )

            [5] => Array
                (
                    [id] => 32
                    [name] => Light Grey
                    [value] => #babbb8
                    [set] => 0
                )

            [6] => Array
                (
                    [id] => 34
                    [name] => paper white
                    [value] => #eef0ea
                    [set] => 0
                )

            [7] => Array
                (
                    [id] => 35
                    [name] => Gray1
                    [value] => #eceeef
                    [set] => 4
                )

            [8] => Array
                (
                    [id] => 36
                    [name] => Gray3
                    [value] => #cfd3d7
                    [set] => 4
                )

            [9] => Array
                (
                    [id] => 37
                    [name] => Gray8
                    [value] => #606e79
                    [set] => 4
                )

            [10] => Array
                (
                    [id] => 38
                    [name] => Gray9
                    [value] => #374047
                    [set] => 4
                )

        )

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

            [1] => Array
                (
                    [id] => 4
                    [name] => composite-elements
                )

        )

)
Color ID: 0, Hex: #ece5d3, Name: off White
Color ID: 1, Hex: #1c2123, Name: off black
Color ID: 2, Hex: #0a2540, Name: Navy
Color ID: 3, Hex: #1e4a7c, Name: Blue
Color ID: 4, Hex: #747472, Name: Dark Grey
Color ID: 5, Hex: #babbb8, Name: Light Grey
Color ID: 6, Hex: #eef0ea, Name: paper white
Color ID: 7, Hex: #eceeef, Name: Gray1
Color ID: 8, Hex: #cfd3d7, Name: Gray3
Color ID: 9, Hex: #606e79, Name: Gray8
Color ID: 10, Hex: #374047, Name: Gray9
Secret Link