Style Guide Carkella
Colors
Brand Colors
Brand Primary
.bg-primary-ck
$primary-ck: #12284B
Brand Secondary
.bg-secondary-ck
$secondary-ck: #AA806C;
accent One
.bg-accent-1
$accent-one: #A2B3BA;
accent two
.bg-accent-2
$accent-two: #E6CEB9;
accent three
.bg-accent-3
$accent-three: #6d6d6A;
accent four
.bg-accent-4
$accent-four: #99A596;
Brand Dark
.bg-dark
$dark: #222222;
Brand Light
.bg-light
$light: #F9F9F9;
Brand Info
.bg-info
$info: #43A090;
Brand Success
.bg-success
$success: #739E11;
Brand Danger
.bg-danger
$danger: #e6271a;
Brand Warning
.bg-warning
$warning: #C9C016;
Grays
Gray 1000
.bg-gray-1000
Gray 900
.bg-gray-900
Gray 800
.bg-gray-800
Gray 700
.bg-gray-700
Gray 600
.bg-gray-600
Gray 500
.bg-gray-500
Gray 400
.bg-gray-400
Gray 300
.bg-gray-300
Gray 200
.bg-gray-200
Gray 100
.bg-gray-100
Gray 50
.bg-gray-50
Brand Transparent
.bg-transparent
Typography
Font Styles
.font-family-sans-serif-ck
$font-family-sans-serif-ck
$font-family-base-ck
Used for:
Body Copy / Base Font Family
.tertiary-font-ck
$tertiary-font-ck
Used for:
Italics font glyphs are loaded
.headings-font-family-ck
$headings-font-family-ck
Used for:
Headings
.subheadings-font-family-ck
$subheadings-font-family-ck
Used for:
Sub Headings
Links
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display Headings
Display 1
.display-1
Display 2
.display-2
Display 3
.display-3
Display 4
.display-4
.display-3
Display 4
.display-4
Paragraph Styles
Lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
.lead
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Links
Text LinkDuis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.
Font Sizing
Font size base 16px
$font-size-base
.font-size-baseFont size small 14px
$font-size-sm
.font-size-smFont size large 18px
$font-size-lg
.font-size-lgReversed
use the class .reversed on the parent element to reverse a section
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display Headings
Display 1
.display-1
Display 2
.display-2
Display 3
.display-3
Display 4
.display-4
Paragraph Styles
Lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
.lead
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Links
Text LinkDuis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.
Font Sizing
Font size base 16px
$font-size-base
.font-size-baseFont size small 14px
$font-size-sm
.font-size-smFont size large 20px
$font-size-lg
.font-size-lg