Pelican Design System
Agency Theming
Agency Theming
Agencies have opportunity to reflect their own brand using Pelican.
On this page:
Using Your Agency Colors
Pelican 2 comes with the flexibility to apply themes. Themes could be based upon the agency’s brand standards or a subset of a brand for some specific need. To help create themes, Pelican 2 has a companion project, the Pelican 2 Themer available for download at Github. Running that project and updating CSS variables will generate a CSS file to apply them theme you create.
- Get the Pelican 2 Themer repo
- Use NPM instructions in the README
- Follow the instructions for assigning colors
- Use the resulting CSS file in your Pelican-based project
The Pelican 2 Figma library file at Figma Community has corresponding theming flexibility. Instructions for it can be found in the Figma file.
Be sure to consider the guidance in Color Contrast.
Themeable Parts
All of the components in Pelican 2 have themeable parts. Themeable parts include text color, background colors, button colors, and even the font. Here’s an example using the Alerts.
--theme-alert-success-text-color: var(--theme-success-900);controls the text color for the Success Alert--theme-alert-success-bg-color: var(--theme-success-100);controls the background color--theme-alert-success-border-color: var(--theme-success-900);controls the border color
You’ll find the full list of themeable parts for Pelican 2 in the Pelican 2 Themer.
Color Warning
Consider Color Contrast while adjusting any set of colors. Be aware when certain Brand Color changes may work best on light or dark backgrounds. It may even be advisable to use specific versions of Brand Colors optimized for usability in digital products.