Lede Docs

Brand Appearance: Colors, Fonts, & Logos

The below is a deep dive into how your selected brand colors, fonts, and logos are used across your Lede site.

Logos

Logos for your site are configured by navigating in your WordPress Admin to: Appearance > Customize > Site Identity

  • Logo: This logo displays in your site header and can also display in your site footer, unless an Alt Logo has been uploaded.
  • Alt Logo: This logo displays in your site footer and in the simple header on login & payment related pages.
    • This is only required if your default logo has white in it.
  • This is only required if your default logo has white in it.
  • Dark Theme Logo: This logo displays in place of your Logo/Alt Logo when dark theme is active.
  • Site Icon: This logo displays as your favicon which is the small icon that displays on browser tabs, in the browser bookmark bar, in browser history, and in search results for your site.

Colors

Brand colors for your site are configured in the Publisher App under Settings > Appearance, in the “Colors” group

  • Primary Color: Your primary color is used by default in many locations including: the category eyebrow of posts, the comment icon (if you have commenting on your site), links in content, on your registration wall, on your paywall, in the cards on your Products page, on various buttons, as the background color of the value proposition on your Log In page, and as the text color of the value proposition on your Products page.
  • Secondary Color: Your secondary color is not used by default anywhere. It is available for use in various Appearance settings, along with in color palettes in the WordPress Editor on numerous Blocks.
  • Accent Color: Your accent color is not used by default anywhere. It is available for use in various Appearance settings, along with in color palettes in the WordPress Editor on numerous Blocks.
  • Global Background Color: This (optional) color displays as your site’s global background color. This color only applies to light theme and must stand out against dark text. The default is white (no background color).

Dark Theme

Dark Theme is also supported on Lede. Ensure the colors you choose stand out against a dark background.

  • Dark Theme Primary Color: Used in place of your primary color when dark theme is active.
  • Dark Theme Secondary Color: Used in place of your secondary color when dark theme is active.

Fonts

Fonts for your site are configured in the Publisher App under Settings > Typography

  • Primary Font: Your primary font is used in the majority of places across your site including, but not limited to, article content, the cards on the Products page, deks in post cards (optional display), menus, site header, and site footer.
  • Secondary Font: Your secondary font is used in page titles, section headings, and the article page headline.
  • Font Weight: You can adjust the font weights for both normal font and bold font on your site. Bold font is used by default in headings, bylines, CTAs, and pagination button text. Be sure to select a font weight that your font supports.
  • Article Typography. You can adjust the font color and font size of your article typography as well as the size of headings in articles. See the Article Typography page for details.

Was this article helpful?