Pelican Design System
Brand Colors
Brand Colors
Pelican uses Brand colors to help define your own brand.
On this page:
Brand Colors
Brand colors are the colors featured in an agency’s logo and other aspects of its visual identity. Pelican provides three default brand colors. These colors are based upon Louisiana’s official colors.
Primary
Hex Code: #00284d
SCSS Var: $primary
Secondary
Hex Code: #008282
SCSS Var: $secondary
Accent
Hex Code: #fe9903
SCSS Var: $accent
Using Brand Colors
Brand Colors are presented in these lists. These colors have been automatically assigned for you. If your digital product requires changing these colors, see Agency Themes for more information.
Primary
The Primary color is the color most recognized and associated with a brand. In Pelican, the Primary brand color, $primary, is often used for the following items:
- Text color for Page Title
- Background color for left sidebar
- Button background color for the main action button in a Button Container
Secondary
The Secondary color is used to support the primary color. In Pelican, ``, is often used for the following items:
- Supporting action buttons
- Translucent overlay background colors
- Background color of calls to action
Accent
The Accent color is the smallest supporting color associated with your brand. It’s used as supporting color when either the Primary or Secondary brand need to stand apart from each other but still need a supporting color to them. The Accent brand color, $accent, is often used in Pelican as:
- Button background color for the Back to Top Button
Brand Color Variations
Dark and light variants are available for all three Brand colors. Use them to ensure accessibility by providing better contrast in User Interface (UI) elements or as text and background colors.
Primary Brand Colors
Primary
Hex Code: #00284d
SCSS Var: $primary
Primary, Lighter
Hex Code: #e9f8ff
SCSS Var: $primary-100
Primary, Darker
Hex Code: #001646
SCSS Var: $primary-900
Secondary Brand Colors
Secondary
Hex Code: #008282
SCSS Var: $secondary
Secondary, Lighter
Hex Code: #c5fffa
SCSS Var: $secondary-100
Secondary, Darker
Hex Code: #0a5757
SCSS Var: $secondary-900
Accent Brand Colors
Accent
Hex Code: #fe9903
SCSS Var: $accent
Accent, Lighter
Hex Code: #fff2c5
SCSS Var: $accent-100
accent, Darker
Hex Code: #7c310b
SCSS Var: $accent-900
Brand Color Class List
You’ll change background and text colors by using the following classes. Consult Agency Themes for more information.
| Brand Color | Background Color | Background Color Class | Text Color | Text Color Class |
|---|---|---|---|---|
| Primary | bg-primary | bg-primary |
text-primary | text-primary |
| Primary-100 | bg-primary-100 | bg-primary-100 |
text-primary-100 | text-primary-100 |
| Primary-900 | bg-primary-900 | bg-primary-900 |
text-primary-900 | text-primary-900 |
| Secondary | bg-secondary | bg-secondary |
text-secondary | text-secondary |
| Secondary-100 | bg-secondary-100 | bg-secondary-100 |
text-secondary-100 | text-secondary-100 |
| Secondary-900 | bg-secondary-900 | bg-secondary-900 |
text-secondary-900 | text-secondary-900 |
| Accent | bg-accent | bg-accent |
text-accent | text-accent |
| Accent-100 | bg-accent-100 | bg-accent-100 |
text-accent-100 | text-accent-100 |
| Accent-900 | bg-accent-900 | bg-accent-900 |
text-accent-900 | text-accent-900 |