Documentation/  

UI.X 2

Color Palette

The Color Palette in UI.X 2 has been simplified to allow for ease of branding. All default XenForo color values have been used to control basic components. These colors are used to highlight important parts of components.

Color 1-5 are intended for background colors.

  • Light themes start with lightest as 1, and darkest at 5 (with 5 being an optional colored background)
  • Dark themes start from darkest at 1 to lightest at 5 (5 here still being an optional accented)

Accent colors 1-3 are intended for branding.

Accent 1 - Primary color

  • Used mostly for highlighting important content

Accent 2 -Secondary brand color

  • Used much more sparingly than primary brand color. Also used to highlight important information.

Accent 3 - Tertiary color

  • Generally used for “state”
  • Hover states, active tabs, etc..

Neutral colors are intended for text

  • For light themes, neutral 1 being the lightest and 3 being darkest
  • For dark themes, darkest neutral 3 - lightest neutral 3
  • Note: The default color function input for these fields does not ever need to change. It ensures that your font colors will always have maximum legibility, and be thematically consistent. They are based Color Palette 2.

A note on text colors:

  • We suggest using the material design spec to maximize legibility
  • https://material.io/guidelines/style/color.html#color-usability
Copyright © 2024 Audentio, LLC. All Rights Reserved.