CSS Selectors

Theme Colors

Colors are defined by CSS variables on :root.

Each color has three tints: the color, -light, and -dark variants.

Base Color

The base color appears in about 60% of the theme. This is the background, rules, borders, etc. This should be a neutral color to complement your brand colors.

--base-light
--base
--base-dark

Primary Color

The primary color appears in about 30% of the layout. It is used for buttons, highlights, form elements, etc.

--primary-light
--primary
--primary-dark

Accent Color

The accent color should appear sparingly, only in once or twice per page, to highlight calls to action.

--accent-light
--accent
--accent-dark

Error Color

Errors need to stand out, but are rarely used.

--error-light
--error
--error-dark

Forground Color

The forground color is used for text and icons.

--forground-light
--forground
--forground-dark

In addition to -light and -dark, there are also forground variants to control how that forground color should change when displayed over other color backgrounds.

--forground-on-primary-light
--forground-on-primary
--forground-on-primary-dark
--forground-on-accent-light
--forground-on-accent
--forground-on-accent-dark
--forground-on-error-light
--forground-on-error
--forground-on-error-dark

Contextual Colors

Variables are also defined for individual components and contexts. These include:

--rule

Fonts

There are two font variables:

Components

.button

Add .button to any element will give it the style of a button. There are a number of variations to buttons:

.tertiary.button
.secondary.button
.accent.button
.disabled.button

Containers

#app

The main application container. There are three child sections worth notiing: #app-left, #app-main and #app-right

#article

Pages outside of the app; this page, for example, have a containing column.

Extras

There are 10 extra divs to use as you like. These have class .extra and id's #extra-1 through #extra-10.