Brand Palette

    Colors

    The following colors and shades are available for this project.

    Primary

    Secondary

    Tertiary

    Accent

    Base

    Neutral

    Headings & Text

    Typography

    The quick brown fox jumps over the lazy dog

    h1

    The quick brown fox jumps over the lazy dog

    h2

    The quick brown fox jumps over the lazy dog

    h3

    The quick brown fox jumps over the lazy dog

    h4

    The quick brown fox jumps over the lazy dog

    h5

    The quick brown fox jumps over the lazy dog

    h6

    The quick brown fox jumps over the lazy dog

    h1 & L

    This is large placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

    The quick brown fox jumps over the lazy dog

    h2 & m

    This is default placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

    The quick brown fox jumps over the lazy dog

    h3 & s

    This is small placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

    Color Relationships

    Text

    Aa
    Dark
    Aa
    Dark Muted
    Aa
    Light
    Aa
    Light Muted

    Auto Color Relationships

    Sample heading

    This is what text will look like on ultra light background areas. You can also control link color relationships and there's an example button below.

    Button

    Sample heading

    This is what text will look like on light background areas. You can also control link color relationships and there's an example button below.

    Button

    Sample heading

    This is what text will look like on dark background areas. You can also control link color relationships and there's an example button below.

    Button

    Sample heading

    This is what text will look like on ultra dark background areas. You can also control link color relationships and there's an example button below.

    Button

    Buttons & Links

    Action elements

    Primary
    Button

    Primary

    Button

    Primary Outline

    Button

    Primary Light

    Button

    Primary Light Outline

    Button

    Primary Dark

    Button

    Primary Dark Outline

    SEcondary
    Button

    Secondary

    Button

    Secondary Outline

    Button

    Secondary Light

    Button

    Secondary Light Outline

    Button

    Secondary Dark

    Button

    Secondary Dark Outline

    Tertiary
    Button

    Tertiary

    Button

    Tertiary Outline

    Button

    Tertiary Light

    Button

    Tertiary Light Outline

    Button

    Tertiary Dark

    Button

    Tertiary Dark Outline

    Accent
    Button

    Accent

    Button

    Accent Outline

    Button

    Accent Light

    Button

    Accent Light Outline

    Button

    Accent Dark

    Button

    Accent Dark Outline

    Base
    Button

    Base

    Button

    Base Outline

    Button

    Base Light

    Button

    Base Light Outline

    Button

    Base Dark

    Button

    Base Dark Outline

    Neutral
    Button

    Neutral

    Button

    Neutral Outline

    Button

    Neutral Light

    Button

    Neutral Light Outline

    Button

    Neutral Dark

    Button

    Neutral Dark Outline

    Links
    Example link
    Custom
    Button
    btn--custom--black-prim
    Button
    btn--custom--black-neutral
    Button
    btn--custom--white-prim
    Button
    btn--custom--white-neutral

    Cards & Icons

    Light Cards

    Icon Card

    This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

    Text link

    Media Card

    Here goes your text ... Select any part of your text to access the formatting toolbar.

    Call to action

    Avatar Card

    Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.

    dark cards

    Icon Card

    This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

    Text link

    Media Card

    Here goes your text ... Select any part of your text to access the formatting toolbar.

    Call to action

    Avatar Card

    Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.

    Large Icons

    Medium Icons

    small Icons

    Icon List

    • This is a list item.
    • This is a list item.
    • This is a list item.
    • This is a list item.
    • This is a list item.

    Content Width & Spacing

    General Spacing

    Content Width

    Grid Gap

    Card Gap

    Content Gap

    Default Section Padding

    Container Gap