The Lede Design System allows publishers to customize the color palette that is used throughout the site.
Publishers can select
- 3 brand colors: primary, secondary, and accent
- 1 global background color
- 2 dark-theme colors: primary and secondary
Those colors are configured in the Lede menu and can be changed by publishers at any time.
Additionally, 4 neutral colors -- white, black, light gray, and dark gray -- are available.
How Colors Are Used
Site Elements
Once brand colors are configured, they can be used to set the color of elements across the site, such as the buttons in the global header and the background and text colors of the popout menu.
Editor Palette
The brand colors plus the 4 neutral colors make up the color palette in the post editor.
Programmatically
Colors such as the global background color and the dark theme colors are used programmatically throughout the site. For example, when a user selects dark mode, the dark theme colors populate in select components across the site automatically.
Examples
In dark mode, the color selections will display with white text on a medium gray background.
Primary Color with Accent Color Background
Secondary Color with Black Background
White Text with Dark Gray Background
Accent Color with Light Gray Background
