Cavepaint logo

This page is running Cavepaint, the no-workflow, no-CSS, custom-property-powered modern CSS framework. Customize it here.

  base color (#2d95d8)

    padding (1 rem)

A A A font size (16 px)

abc line height (1.8)

            page width (48 rem)

      ambience (95%)

  ->   lighten (20%)

  ->   darken (20%)

Untangle your bootstraps. Break out of your tailspin.

Cavepaint is a CSS framework for devs and teams who want to spend way less time on CSS

Use this CSS
or put this in <head>
or compile this Less
<div class="card two-column golden reverse margin-auto gutter">
  <img src="caveman.svg" alt="The Cavepaint caveman">
  <div>
    <h4 class="no-margins">Cavepaint</h4>
    <p class="text-crunch">
      Do CSS <em>without writing CSS</em>.
    </p>
  </div>
</div>
Example markup
The Cavepaint caveman

Cavepaint

Do CSS without writing CSS.

Example output 
<section class="inner-card-width text-center gutter">
  <div class="three-column light yellow padding">
    <div class="green rounded">&check;</div>
    <div class="green rounded">&check;</div>
    <div class="red rounded">&cross;</div>
  </div>
</section>
Example markup
✓
✓
✗
Example output

No workflow, no worries

No gzipping. No tree-shaking. No stress. Simply use the CSS file.

Over 500 colors

Breathe life into your pages with hundreds of easy-to-remember, easy-to-master color names.

Stone-age simplicity

Simple class names, taken mostly from CSS, with no abbreviations or numbers.

» See the Github » Read the docs

The Cavepaint CSS cheatsheet

two-column
two-column
two-column golden
two-column golden reverse
three-column
three-column
three-column golden
three-column golden leading
three-column golden trailing
Color helpers
warm red
neutral red
cool red
dull red
Color alternates
light red
dark red
bright red
dim red
Gradient alternates
vertical red gradient
horizontal red gradient
Wheel colors
base-color
triad
complement
third triad
accent
second accent
split
second split
tetrad
second tetrad
third tetrad
fourth tetrad
Palette colors
red
orange
yellow
green
teal
cyan
blue
purple
magenta
white
gray
black
text-color (composes with any color)
text-color red
text-color orange
text-color yellow
text-color green
text-color teal
text-color cyan
text-color blue
text-color purple
text-color magenta
text-color base-color
text-color gray
text-color black
Widths
Inner widths
Shadows
  • box-shadow
  • inset
  • shallow box-shadow
  • deep box-shadow
Border helpers
  • current-color border
  • thick border
  • dashed border
  • dotted border
Font families
sans-serif
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
serif
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
monospace
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Font sizes
small

Hello, world.

big

Hello, world.

huge

Hello, world.

Spacing
padding
margin
gutter
Grid child classes

grid-width-

one
eleven
two
ten
three
nine
four
eight
five
seven
six
six
twelve
Centering
text-align-center

This is centered text.

margin-auto
div
vertical-center

Center vertically with the .vertical-center composable on an element that has children.

div
Two-column, three-column and grid responsive helpers

(no classes)

✓
✓
✓

mobile

✓
✗
✗

tablet

✗
✓
✓

mobile tablet

✓
✓
✗

desktop

✗
✗
✓
hide visibility helpers

hide

✗
✗
✗

hide mobile

✗
✓
✓

hide tablet

✓
✗
✗

hide mobile tablet

✗
✗
✓

hide desktop

✓
✓
✗
Placeholder helpers
(no other class)
four-to-three
sixteen-to-nine
square
bright accent
light accent
accent
dark accent
dim accent
cool bright accent
cool light accent
cool accent
cool dark accent
cool dim accent
neutral bright accent
neutral light accent
neutral accent
neutral dark accent
neutral dim accent
warm bright accent
warm light accent
warm accent
warm dark accent
warm dim accent
dull bright accent
dull light accent
dull accent
dull dark accent
dull dim accent
bright second accent
light second accent
second accent
dark second accent
dim second accent
cool bright second accent
cool light second accent
cool second accent
cool dark second accent
cool dim second accent
neutral bright second accent
neutral light second accent
neutral second accent
neutral dark second accent
neutral dim second accent
warm bright second accent
warm light second accent
warm second accent
warm dark second accent
warm dim second accent
dull bright second accent
dull light second accent
dull second accent
dull dark second accent
dull dim second accent
bright split
light split
split
dark split
dim split
cool bright split
cool light split
cool split
cool dark split
cool dim split
neutral bright split
neutral light split
neutral split
neutral dark split
neutral dim split
warm bright split
warm light split
warm split
warm dark split
warm dim split
dull bright split
dull light split
dull split
dull dark split
dull dim split
bright second split
light second split
second split
dark second split
dim second split
cool bright second split
cool light second split
cool second split
cool dark second split
cool dim second split
neutral bright second split
neutral light second split
neutral second split
neutral dark second split
neutral dim second split
warm bright second split
warm light second split
warm second split
warm dark second split
warm dim second split
dull bright second split
dull light second split
dull second split
dull dark second split
dull dim second split
bright triad
light triad
triad
dark triad
dim triad
cool bright triad
cool light triad
cool triad
cool dark triad
cool dim triad
neutral bright triad
neutral light triad
neutral triad
neutral dark triad
neutral dim triad
warm bright triad
warm light triad
warm triad
warm dark triad
warm dim triad
dull bright triad
dull light triad
dull triad
dull dark triad
dull dim triad
bright second triad
light second triad
second triad
dark second triad
dim second triad
cool bright second triad
cool light second triad
cool second triad
cool dark second triad
cool dim second triad
neutral bright second triad
neutral light second triad
neutral second triad
neutral dark second triad
neutral dim second triad
warm bright second triad
warm light second triad
warm second triad
warm dark second triad
warm dim second triad
dull bright second triad
dull light second triad
dull second triad
dull dark second triad
dull dim second triad
bright third triad
light third triad
third triad
dark third triad
dim third triad
cool bright third triad
cool light third triad
cool third triad
cool dark third triad
cool dim third triad
neutral bright third triad
neutral light third triad
neutral third triad
neutral dark third triad
neutral dim third triad
warm bright third triad
warm light third triad
warm third triad
warm dark third triad
warm dim third triad
dull bright third triad
dull light third triad
dull third triad
dull dark third triad
dull dim third triad
bright complement
light complement
complement
dark complement
dim complement
cool bright complement
cool light complement
cool complement
cool dark complement
cool dim complement
neutral bright complement
neutral light complement
neutral complement
neutral dark complement
neutral dim complement
warm bright complement
warm light complement
warm complement
warm dark complement
warm dim complement
dull bright complement
dull light complement
dull complement
dull dark complement
dull dim complement
bright tetrad
light tetrad
tetrad
dark tetrad
dim tetrad
cool bright tetrad
cool light tetrad
cool tetrad
cool dark tetrad
cool dim tetrad
neutral bright tetrad
neutral light tetrad
neutral tetrad
neutral dark tetrad
neutral dim tetrad
warm bright tetrad
warm light tetrad
warm tetrad
warm dark tetrad
warm dim tetrad
dull bright tetrad
dull light tetrad
dull tetrad
dull dark tetrad
dull dim tetrad
bright second tetrad
light second tetrad
second tetrad
dark second tetrad
dim second tetrad
cool bright second tetrad
cool light second tetrad
cool second tetrad
cool dark second tetrad
cool dim second tetrad
neutral bright second tetrad
neutral light second tetrad
neutral second tetrad
neutral dark second tetrad
neutral dim second tetrad
warm bright second tetrad
warm light second tetrad
warm second tetrad
warm dark second tetrad
warm dim second tetrad
dull bright second tetrad
dull light second tetrad
dull second tetrad
dull dark second tetrad
dull dim second tetrad
bright third tetrad
light third tetrad
third tetrad
dark third tetrad
dim third tetrad
cool bright third tetrad
cool light third tetrad
cool third tetrad
cool dark third tetrad
cool dim third tetrad
neutral bright third tetrad
neutral light third tetrad
neutral third tetrad
neutral dark third tetrad
neutral dim third tetrad
warm bright third tetrad
warm light third tetrad
warm third tetrad
warm dark third tetrad
warm dim third tetrad
dull bright third tetrad
dull light third tetrad
dull third tetrad
dull dark third tetrad
dull dim third tetrad
bright fourth tetrad
light fourth tetrad
fourth tetrad
dark fourth tetrad
dim fourth tetrad
cool bright fourth tetrad
cool light fourth tetrad
cool fourth tetrad
cool dark fourth tetrad
cool dim fourth tetrad
neutral bright fourth tetrad
neutral light fourth tetrad
neutral fourth tetrad
neutral dark fourth tetrad
neutral dim fourth tetrad
warm bright fourth tetrad
warm light fourth tetrad
warm fourth tetrad
warm dark fourth tetrad
warm dim fourth tetrad
dull bright fourth tetrad
dull light fourth tetrad
dull fourth tetrad
dull dark fourth tetrad
dull dim fourth tetrad
bright red
light red
red
dark red
dim red
cool bright red
cool light red
cool red
cool dark red
cool dim red
neutral bright red
neutral light red
neutral red
neutral dark red
neutral dim red
warm bright red
warm light red
warm red
warm dark red
warm dim red
dull bright red
dull light red
dull red
dull dark red
dull dim red
bright orange
light orange
orange
dark orange
dim orange
cool bright orange
cool light orange
cool orange
cool dark orange
cool dim orange
neutral bright orange
neutral light orange
neutral orange
neutral dark orange
neutral dim orange
warm bright orange
warm light orange
warm orange
warm dark orange
warm dim orange
dull bright orange
dull light orange
dull orange
dull dark orange
dull dim orange
bright yellow
light yellow
yellow
dark yellow
dim yellow
cool bright yellow
cool light yellow
cool yellow
cool dark yellow
cool dim yellow
neutral bright yellow
neutral light yellow
neutral yellow
neutral dark yellow
neutral dim yellow
warm bright yellow
warm light yellow
warm yellow
warm dark yellow
warm dim yellow
dull bright yellow
dull light yellow
dull yellow
dull dark yellow
dull dim yellow
bright green
light green
green
dark green
dim green
cool bright green
cool light green
cool green
cool dark green
cool dim green
neutral bright green
neutral light green
neutral green
neutral dark green
neutral dim green
warm bright green
warm light green
warm green
warm dark green
warm dim green
dull bright green
dull light green
dull green
dull dark green
dull dim green
bright teal
light teal
teal
dark teal
dim teal
cool bright teal
cool light teal
cool teal
cool dark teal
cool dim teal
neutral bright teal
neutral light teal
neutral teal
neutral dark teal
neutral dim teal
warm bright teal
warm light teal
warm teal
warm dark teal
warm dim teal
dull bright teal
dull light teal
dull teal
dull dark teal
dull dim teal
bright cyan
light cyan
cyan
dark cyan
dim cyan
cool bright cyan
cool light cyan
cool cyan
cool dark cyan
cool dim cyan
neutral bright cyan
neutral light cyan
neutral cyan
neutral dark cyan
neutral dim cyan
warm bright cyan
warm light cyan
warm cyan
warm dark cyan
warm dim cyan
dull bright cyan
dull light cyan
dull cyan
dull dark cyan
dull dim cyan
bright blue
light blue
blue
dark blue
dim blue
cool bright blue
cool light blue
cool blue
cool dark blue
cool dim blue
neutral bright blue
neutral light blue
neutral blue
neutral dark blue
neutral dim blue
warm bright blue
warm light blue
warm blue
warm dark blue
warm dim blue
dull bright blue
dull light blue
dull blue
dull dark blue
dull dim blue
bright purple
light purple
purple
dark purple
dim purple
cool bright purple
cool light purple
cool purple
cool dark purple
cool dim purple
neutral bright purple
neutral light purple
neutral purple
neutral dark purple
neutral dim purple
warm bright purple
warm light purple
warm purple
warm dark purple
warm dim purple
dull bright purple
dull light purple
dull purple
dull dark purple
dull dim purple
bright magenta
light magenta
magenta
dark magenta
dim magenta
cool bright magenta
cool light magenta
cool magenta
cool dark magenta
cool dim magenta
neutral bright magenta
neutral light magenta
neutral magenta
neutral dark magenta
neutral dim magenta
warm bright magenta
warm light magenta
warm magenta
warm dark magenta
warm dim magenta
dull bright magenta
dull light magenta
dull magenta
dull dark magenta
dull dim magenta
bright white
light white
white
dark white
dim white
cool bright white
cool light white
cool white
cool dark white
cool dim white
neutral bright white
neutral light white
neutral white
neutral dark white
neutral dim white
warm bright white
warm light white
warm white
warm dark white
warm dim white
dull bright white
dull light white
dull white
dull dark white
dull dim white
bright gray
light gray
gray
dark gray
dim gray
cool bright gray
cool light gray
cool gray
cool dark gray
cool dim gray
neutral bright gray
neutral light gray
neutral gray
neutral dark gray
neutral dim gray
warm bright gray
warm light gray
warm gray
warm dark gray
warm dim gray
dull bright gray
dull light gray
dull gray
dull dark gray
dull dim gray
bright black
light black
black
dark black
dim black
cool bright black
cool light black
cool black
cool dark black
cool dim black
neutral bright black
neutral light black
neutral black
neutral dark black
neutral dim black
warm bright black
warm light black
warm black
warm dark black
warm dim black
dull bright black
dull light black
dull black
dull dark black
dull dim black

Which projects are good for Cavepaint?

Tiny sites will benefit from the full feature set. Easily add updates/features/content when you come back and make an update months later.

Razor-thin CSS files will leave you writing more CSS later. Cavepaint lets you express your design in the HTML.

Medium-sized sites are a great match for Cavepaint, since it acts like a central repository of design information for a project.

Cavepaint lets you fashion your website on-the-fly to adjust to changing requirements. It's as flexible as HTML and CSS because it is HTML and CSS.

Huge, complicated apps are the best for Cavepaint. The flexibility of the no-workflow approach lets you spin up small projects quickly, without tons of overhead for something as simple as CSS.

When you do need to finally write a substantial portion of your own CSS, you can use the Less preprocessor version of Cavepaint to organize your style codebase.

Some sites using Cavepaint