Color System

Overview

This semantic color system was designed so that a single class makes sense for themes that go from lighter to darker colors, as well as themes that go from darker to lighter colors. This is why Chimera does not use the 100-900 scale for colors, since those signify a fixed light->dark scale.

The choices for the semantic color names came from studying the color/element patterns on many websites. It allows for a lot of flexibility but at the same time, but makes it really easy to change specific groups of colors on your site.

This color system was heavily inspired by DaisyUI's color system (opens in a new tab).

Color Modifiers

1-3 (prominence) (e.g., base-2 or base-3)

1 being the most prominent color and 3 being least prominent color Used for backgrounds, text, or other elements where you need to create subtle contrast.

Prominence Example

So why don't we use 100-900 for these colors too? Let's say your background is base-100 and a card on the background is base-200. This makes total sense in light mode, where white is the background and a light grey layers on top of that. It no longer makes sense if you want to switch to a dark mode where the background is black and the card is supposed to be dark grey.

100-900 (light to dark) (e.g., primary-100, secondary-800)

100 is the lightest color and 900 is the darkest color. This is the scale that Tailwind uses for colors. The components in Chimera do not use these for default styles, but they are available for use from the default Tailwind theme. I suggest keeping these in your arsenal for when you really need to use a color that is not in the color system!

Fun thing I stumbled upon while researching, this is the Tweet thread (opens in a new tab) Adam Wathan started when he was researching the same thing!

100-900 Example From Tailwind's Customizing Colors (opens in a new tab)

content (e.g., primary-content, text-base-content-)

This is used for text or other content that is on top of a background color. On background colors like base and overlay, a content modifier can be used with either the prominence modifier.

Examples:

base-content
base-content-2

Content Example

focus (e.g., secondary-focus, success-focus)

Focus colors are used for elements like buttons, alerts, icons, etc. They are used when the element is focused or hovered.

subtle (e.g., hover:bg-secondary-subtle)

Subtle colors are used for elements like buttons, alerts, icons, etc. They are often used for background colors when the element is hovered or focused. Subtle Example

Colors

This system was designed to work for themes that go from lighter background colors to darker foreground colors, as well as themes that do the inverse. This is why Chimera does not use the 100-900 scale for colors, since those signify a fixed light->dark scale.

You'll notice there are a LOT of colors in this color system. Don't be afraid! Most of these colors, you won't need to change. A lot of these colors will also be the same. For example, you might use the same color for primary-content and secondary-content.

Base

Base colors are used for backgrounds.

Name & Usage

Description

CSS Variable

base

bg-base

base is your main background color. It's recommended to use a color with luminosity of >90 or <20.

--base

base-focus

bg-base-focus

base-focus is used to provide a focus/hover states for elements using a base background.

--base-focus

base-2

bg-base-2

base-2 is used to provide another layer on top of base, like a card or a section. Use it to create height/depth.

--base-2

base-2-focus

bg-base-2-focus

base-2-focus is used to provide a focus/hover states for elements using a base background.

--base-2-focus

base-content

bg-base-content

Main text color to be used on top of base. This is the most commonly used color on your site.

--base-content

base-content-2

bg-base-content-2

Text color used to provide contrast from base-content, usually for headers or labels

--base-content-2

base-content-3

bg-base-content-3

Text color used to provide contrast from base-content and 2, usually for small details. Should be rarely used

--base-content-3

Overlay

Overlay colors are used for background colors of floating elements like modals, dropdowns, menus, etc. They should be similar but distinct from base colors that they will be on top of.

Name & Usage

Description

CSS Variable

overlay

bg-overlay

The main overlay color. Used for modals, popovers, menus. Anything in the foreground.

--overlay

overlay-focus

bg-overlay-focus

Overlay color used for focus/hover states

--overlay-focus

overlay-2

bg-overlay-2

The second overlay color. Used for modals, popovers, menus. Provides a second layer of contrast to overlay.

--overlay-2

overlay-2-focus

bg-overlay-2-focus

Overlay color used for focus/hover states on overlay-2

--overlay-2-focus

overlay-content

text-overlay-content

The main overlay text color. This is the most prominent color on your overlay.

--overlay-content

overlay-content-2

text-overlay-content-2

The second overlay text color. This is the second most prominent color on your overlay. Often used for labels.

--overlay-content-2

overlay-content-3

text-overlay-content-3

The third overlay text color. Used for very small details, less important information that needs to be visually distinguished from content or content-2.

--overlay-content-3

Input

Input colors are used for input elements like text inputs, textareas, etc. They should be similar but distinct from base colors that they will be on top of.

Name & Usage

Description

CSS Variable

input

bg-input

The main background color for inputs.

--input

input-focus

bg-input-focus

The background color for inputs in focus/hover states.

--input-focus

input-content

bg-input-content

Input content color. Used for input values.

--input-content

input-content-2

bg-input-content-2

Secondary input color. Generally used for placeholders.

--input-content-2

Line

Line colors are used for borders, dividers, etc. They should be similar but distinct from base colors that they will be on top of.

Name & Usage

Description

CSS Variable

line

divide-y-line

Used for borders, dividers, or any other thin lines

--line

line-focus

divide-y-line-focus

Used for borders, dividers, or any other thin lines in focus/hover states

--line-focus

Primary

Primary colors are used for the main actions in your interface, think call to action buttons, links, etc. Primary should be distinct, and is most likely one of your brand colors.

Name & Usage

Description

CSS Variable

primary

bg-primary

Primar color used for buttons, links, etc. This is most likely your main brand color. Can be used for backgrounds, borders, or text.

--primary

primary-focus

bg-primary-focus

Primary color in focus/hover states.

--primary-focus

primary-subtle

bg-primary-subtle

Subtle primary color. Used for backgrounds, borders, or text. This is always lighter than primary regardless of a light or dark theme.

--primary-subtle

primary-content

bg-primary-content

The text color for content on bg-primary

--primary-content

primary-subtle-content

text-primary-subtle-content

Used for content on bg-primary-subtle.

--primary-subtle-content

Secondary

Secondary colors are used for actions of lower priority than primary. Secondary is also good for other elements that you want to highlight, such as tags, less important buttons, icons, etc.

Name & Usage

Description

CSS Variable

secondary

bg-secondary

Secondary color. Used for buttons, links, etc.

--secondary

secondary-focus

bg-secondary-focus

Secondary color in focus/hover states.

--secondary-focus

secondary-subtle

bg-secondary-subtle

Subtle secondary color. Used for backgrounds, borders, or text. This is always lighter than secondary regardless of a light or dark theme.

--secondary-subtle

secondary-subtle-content

text-secondary-subtle-content

Used for content on bg-secondary-subtle.

--secondary-subtle-content

secondary-content

bg-secondary-content

The text color for content on bg-secondary

--secondary-content

Info

Info colors are used for informational elements, such as alerts, icons, etc.

Name & Usage

Description

CSS Variable

info

bg-info

Info color. Used for alerts, badges, etc. Usually a shade of blue.

--info

info-focus

bg-info-focus

Info color in focus/hover states. Usually a shade of blue and darker than info.

--info-focus

info-subtle

bg-info-subtle

Subtle info color. Used for backgrounds, borders, or text. Usually a shade of blue and is always lighter than info regardless of a light or dark theme.

--info-subtle

info-subtle-content

text-info-subtle-content

Used for content on bg-info-subtle.

--info-subtle-content

info-content

bg-info-content

The text color for content on bg-info

--info-content

Success

Success colors are used for success elements, such as alerts, icons, etc.

Name & Usage

Description

CSS Variable

success

bg-success

Success color. Used for alerts, badges, etc. Usually a shade of green.

--success

success-focus

bg-success-focus

Success color in focus/hover states. Usually a shade of green and darker than success.

--success-focus

success-subtle

bg-success-subtle

Subtle success color. Used for backgrounds, borders, or text. Usually a shade of green and is always lighter than success regardless of a light or dark theme.

--success-subtle

success-subtle-content

text-success-subtle-content

Used for content on bg-success-subtle.

--success-subtle-content

success-content

bg-success-content

The text color for content on bg-success

--success-content

Error

Error colors are used for error elements, such as alerts, icons, etc.

Name & Usage

Description

CSS Variable

danger

bg-danger

Danger color. Used for alerts, badges, errors, etc. Usually a shade of red.

--danger

danger-focus

bg-danger-focus

Danger color in focus/hover states. Usually a shade of red and darker than danger.

--danger-focus

danger-subtle

bg-danger-subtle

Subtle danger color. Used for backgrounds, borders, or text. Usually a shade of red and is always lighter than danger regardless of a light or dark theme.

--danger-subtle

danger-subtle-content

text-danger-subtle-content

Used for content on bg-danger-subtle.

--danger-subtle-content

danger-content

bg-danger-content

The text color for content on bg-danger

--danger-content

Warning

Warning colors are used for warning elements, such as alerts, icons, etc.

Name & Usage

Description

CSS Variable

warning

bg-warning

Warning color. Used for alerts, badges, etc. Usually a shade of yellow.

--warning

warning-focus

bg-warning-focus

Warning color in focus/hover states. Usually a shade of yellow and darker than warning.

--warning-focus

warning-subtle

bg-warning-subtle

Subtle warning color. Used for backgrounds, borders, or text. Usually a shade of yellow and is always lighter than warning regardless of a light or dark theme.

--warning-subtle

warning-subtle-content

text-warning-subtle-content

Used for content on bg-warning-subtle.

--warning-subtle-content

warning-content

bg-warning-content

Warning content contrast color

--warning-content

Theme Generator Themeing