How to customize your colors

Less offers a color system designed to help you establish a recognizable and cohesive color scheme to create a beautifully branded website.

Navigate to Thesis → Design to get started.

Exploring the Brand Palette

The Brand Palette provides a flexible and organized way to define your website’s color scheme.

It consists of an Accent color and up to 12 additional colors, letting you create a cohesive brand identity.

Default Design Options

Exploring the Tonal Palette

The Tonal Palette provides a range of 16 neutral shades from black to white for text, backgrounds, and creating contrast.

Default Design Options

Exploring the Utility Palette

The Utility Palette provides a set of 20 pre-defined colors for specific purposes like alerts, success messages, and warnings.

Default Design Options

Assigning custom color names

Less lets you customize color names to match your brand. For example, instead of using generic names, hex codes, or trying to remember variables, you can use more descriptive terms that resonate with your brand, like “gremlin green” or “very violet.”

To customize color names, simply enter your preferred labels in the input field. These personalized names will then appear in color selection dropdowns throughout the Design Dashboard, replacing the default labels.

Using colors in your design

Once you’ve selected your Brand Accent and any additional colors, you can easily apply them to design different elements of your website.

The Design Dashboard offers options to modify the colors for various elements. Empty Color values default to Accent, Black, or White.

• Body
  • Text Color
  • Background Color
• Header
  • Text Color
  • Background Color
• Site Title
  • Text Color
  • Link Color Hovered
• Tagline
  • Text Color
• Banner
  • Text Color
  • Background Color
• Bar Menu
  • Background Color
• Content
  • Background Color
• Bylines
  • Text Color
  • Background Color
• Headlines
  • Link Color Hovered
• Pagination
  • Text Color
• Sequential Pagination
  • Link Color
  • Link Color Hovered
  • Background Color
  • Background Color Hovered
• Numerical Pagination
  • Link Color
  • Link Color Hovered
  • Background Color
  • Background Color Hovered
• Current Page Number
  • Text Color
  • Background Color
• Descriptions
  • Background Color
• Footer
  • Text Color
  • Background Color
• Button (Default)
  • Text Color #FFFFFF
  • Link Color Hovered
  • Background Color #0000FF
  • Background Color Hovered
• Button (Action)
  • Link Color
  • Link Color Hovered
  • Background Color #0049DB
  • Background Color Hovered
• Button (Delete)
  • Link Color
  • Link Color Hovered
  • Background Color #B30000
  • Background Color Hovered
• Button (Save)
  • Link Color
  • Link Color Hovered
  • Background Color #006600
  • Background Color Hovered
• Button (Update)
  • Link Color #000000
  • Link Color Hovered
  • Background Color #FFEE00
  • Background Color Hovered
• Inputs (Labels)
  • Text Color
• Inputs (Texts)
  • Text Color
  • Background Color
• Inputs (Textareas)
  • Text Color
  • Background Color
• Inputs (Selects)
  • Text Color
  • Background Color
• Inputs (Submits)
  • Link Color
  • Link Color Hovered
  • Background Color
  • Background Color Hovered
• Links (Default)
  • Link Color #0000FF
• Links (Active)
  • Link Color
• Links (Hovered)
  • Link Color Hovered
• Links (Visited)
  • Link Color Visited
• Menus
  • Link Color
  • Link Color Hovered
  • Link Color Current
• Badges (Default)
  • Text Color #FFFFFF
  • Background Color #0000FF
• Badges (Drop)
  • Text Color
  • Background Color #B30000
• Badges (Edit)
  • Text Color
  • Background Color #0049DB
• Badges (Feat)
  • Text Color
  • Background Color #006600
• Badges (Fix)
  • Text Color #000000
  • Background Color #FFEE00
• Blockquotes
  • Text Color
• Captions
  • Text Color #0000FF
• Code (Inline Code)
  • Text Color #0000FF
  • Background Color #EEEEEE
• Code (Keyboard Input)
  • Text Color #0000FF
  • Background Color #EEEEEE
• Code (Preformatted)
  • Text Color #0000FF
  • Background Color #EEEEEE
• Drop Caps
  • Text Color #0000FF
• Eyebrows
  • Text Color #0000FF
• Headings
  • Text Color
• Highlights
  • Text Color
  • Background Color #FFEE00
• Impacts
  • Text Color #0000FF
• Signposts
  • Text Color #0000FF
• Superscripts and Subscripts
  • Text Color
• Callouts (Default)
  • Text Color #FFFFFF
  • Background Color #FFEE00
• Callouts (Alert)
  • Text Color #B30000
  • Background Color #FFCCCC
• Callouts (Note)
  • Text Color #000000
  • Background Color #FFEECC
• Callouts (Info)
  • Text Color #0049DB
  • Background Color #CCDDFF
• Callouts (Tip)
  • Text Color #006644
  • Background Color #CCFFEE
• Footnotes
  • Text Color
• Frames
  • Text Color
  • Background Color
• Pops
  • Shadow Color #0000FF
• Tables (Header)
  • Text Color #FFFFFF
  • Background Color #0000FF
• Tables (Body)
  • Background Color Row (Even) #EEEEEE
  • Background Color Row (Odd)
  • Background Color Col (Even)
  • Background Color Col (Odd)
• Tables (Footer)
  • Background Color
• Bars
  • Text Color #FFFFFF
  • Background Color #0000FF
• Breakouts
  • Text Color #FFFFFF
  • Background Color #0000FF
• Pullouts
  • Text Color #FFFFFF
  • Background Color #0000FF
• Bleeds (Bleed 1)
  • Text Color #FFFFFF
  • Background Color #0000FF
• Bleeds (Bleed 2)
  • Text Color
  • Background Color
• Bleeds (Bleed 3)
  • Text Color
  • Background Color
• Bleeds (Bleed 4)
  • Text Color
  • Background Color
• Bleeds (Bleed 5)
  • Text Color
  • Background Color