Smart-Color System

AI-powered color compliance. Transform your brand colors into an accessable web palette that works seamlessly in light and dark mode.

WCAG 2.1 AA

Color Compliance, automated.

The zenCSS Smart-Color System automatically adheres to WCAG 2.1 AA best practices. Our software evaluates the necessary contrast ratios for your background color choices and automatically generates a light/dark & gradient palette for each color and all font colors with sufficient contrast to exceed current accessability standards.

Example: Your brand background colors

Primary

Secondary

CTA

Accent

Brand Palette

bg-primary-lightest

bg-primary-lighter

bg-primary-light

bg-primary

bg-primary-dark

bg-primary-darker

bg-primary-darkest

bg-primary-gradient

bg-cta-lightest

bg-cta-lighter

bg-cta-light

bg-cta

bg-cta-dark

bg-cta-darker

bg-cta-darkest

bg-cta-gradient

bg-secondary-lightest

bg-secondary-lighter

bg-secondary-light

bg-secondary

bg-secondary-dark

bg-secondary-darker

bg-secondary-darkest

bg-secondary-gradient

bg-accent-lightest

bg-accent-lighter

bg-accent-light

bg-accent

bg-accent-dark

bg-accent-darker

bg-accent-darkest

bg-primary-gradient

Example: Your Universal colors

Red

Orange

Yellow

Green

Blue

Purple

Universal Palette

bg-red-lightest

bg-red-lighter

bg-red-light

bg-red

bg-red-dark

bg-red-darker

bg-red-darkest

bg-red-gradient

bg-orange-lightest

bg-orange-lighter

bg-orange-light

bg-orange

bg-orange-dark

bg-orange-darker

bg-orange-darkest

bg-orange-gradient

bg-yellow-lightest

bg-yellow-lighter

bg-yellow-light

bg-yellow

bg-yellow-dark

bg-yellow-darker

bg-yellow-darkest

bg-yellow-gradient

bg-green-lightest

bg-green-lighter

bg-green-light

bg-green

bg-green-dark

bg-green-darker

bg-green-darkest

bg-green-gradient

bg-blue-lightest

bg-blue-lighter

bg-blue-light

bg-blue

bg-blue-dark

bg-blue-darker

bg-blue-darkest

bg-blue-gradient

bg-purple-lightest

bg-purple-lighter

bg-purple-light

bg-purple

bg-purple-dark

bg-purple-darker

bg-purple-darkest

bg-purple-gradient

Example: Your Grey colors

Grey 1

Grey 2

Grey 3

Grey 4

Grey 5

Grey 6

Shades of Grey Palette

bg-grey-1-light

bg-grey-1

bg-grey-1-dark

bg-grey-2-light

bg-grey-2

bg-grey-2-dark

bg-grey-3-light

bg-grey-3

bg-grey-3-dark

bg-grey-4-light

bg-grey-4

bg-grey-4-dark

bg-grey-5-light

bg-grey-5

bg-grey-5-dark

bg-grey-6-light

bg-grey-6

bg-grey-6-dark

bg-opaque

bg-blur

Note: bg-opaque sets a white opaque background. bg-blur can be used in conjunction with bg-opaque and will blur the background of anything it covers.

Code Example

<div class="bg-primary">bg-primary</div>

WCAG 2.1 AA ✓

Font Colors

The zenCSS Font Color System offers a variety of choices for styling text. By default, all colors pass accessability tests on black and white backgrounds. Whether you're aiming for brand consistency or need universal font colors, we've got you covered. Always ensure your font color has sufficient contrast with the background color.

Dark Font Colors

text-primary

text-primary-light

text-primary-dark

text-secondary

text-secondary-dark

text-cta

text-cta-dark

text-black

text-grey-5

text-grey-6

text-purple-dark

Light Font Colors

text-white

text-grey-1

text-grey-2

text-grey-3

text-grey-4

text-cta-light

text-secondary-light

text-accent

text-accent-light

text-accent-dark

text-orange

text-orange-light

text-orange-dark

text-yellow

text-yellow-light

text-yellow-dark

text-green

text-green-light

text-red

text-red-light

text-red-dark

text-green-dark

text-purple

text-purple-light

text-blue

text-blue-light

text-blue-dark

Note: Changing the base colors will require a 1 time recalibration for accessability purposes.

Code Example

<p class="text-red">This text is red</p>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.