Brutalist Framework

Flavors

Color Classes Library


Add a little flavor with these useful pre-defined color classes.

Core Colors

Use these classes to apply a color background.

  • .white / .vanilla
  • .cream
  • .coconut
  • .rice
  • .platinum
  • .mushroom
  • .silver
  • .smoke
  • .grey / .gray
  • .fossil
  • .fog
  • .ash
  • .charcoal
  • .black
  • .grapefruit
  • .strawberry
  • .rose
  • .cherry
  • .apple
  • .cranberry
  • .red / .tomato
  • .blood / .maroon
  • .blood-orange
  • .chili
  • .scarlet
  • .punch
  • .sangria
  • .mahogany
  • .bubblegum
  • .salmon
  • .taffy
  • .pink
  • .blush
  • .cotton-candy
  • .raspberry
  • .fuchsia
  • .lilac
  • .lavender
  • .mauve
  • .purple
  • .eggplant
  • .grape
  • .plum
  • .blackberry
  • .indigo
  • .sky
  • .water
  • .poolwater
  • .pastel
  • .olympic
  • .sapphire
  • .blue
  • .cornflower
  • .azure
  • .blueberry
  • .denim
  • .navy
  • .midnight
  • .peach
  • .mango
  • .fire
  • .tangerine
  • .squash
  • .yam
  • .carrot
  • .orange
  • .pumpkin
  • .papaya
  • .rust
  • .bbq
  • .wheat
  • .sand
  • .peanut
  • .cappuccino
  • .coffee
  • .brown
  • .steak
  • .cider
  • .cinnamon
  • .spice
  • .cocoa
  • .chocolate
  • .mint
  • .kiwi
  • .pistachio
  • .sage
  • .pear
  • .lime
  • .slime
  • .green / .cucumber
  • .spinach
  • .green-tea
  • .olive
  • .grass
  • .pickle
  • .seaweed
  • .butter
  • .yellow / .lemon
  • .cheddar
  • .caramel
  • .corn
  • .pineapple
  • .banana
  • .honey / .amber
  • .beer / .gold
  • .mustard
  • .flaxen
  • .dijon

Text Color

Simply apply -t after a core color class to change the text color.

EXAMPLES:

.green-t .apple-t .blue-t

Text Shadow

Simply apply -t-s (text-shadow) after a core color class to change the text shadow color.

EXAMPLES:

.green-t-s .apple-t-s .blue-t-s

Border & Outline Color

Simply apply -b (border) or -o (outline) after a core color class to change the border or outline color. See "Basic Borders" and "Outlines" under BUTCH on how to apply borders.

EXAMPLES:

Solid Thick Water Border
.water-b

Dashed Thick Green border with Fat Plum Outline
.plum-o .green-b

Double Fat Cheddar Border
.cheddar-b

.red-o

Dashed Thin Black Cherry Border
.black-cherry-b

.green-b .green-o

Color Combos: Mixed Flavors

Mixed flavors are color combinations, where a solid background and text color are pre-defined. Apply these classes to any element.

.success

.info

.warning

.alert

.ready

.disabled

.mono

.mono-inv

.plush

.sweden

.blueprint

.greek

.strawberry-banana

.orange-cream

.lemon-lime

.raspberry-bubblegum

.honey-blueberry

.steak-beer

.seaweed-slime

.pear-blueberry

.chocolate-pb

.chocolate-strawberry

.cherry-vanilla

.pool-party

.pumpkin-butter

.vanilla-chocolate

.mint-chocolate

.peach-plum

.pb-pickle

.navy-fire

.sapphire-sky

.midnight-sky

.silver-blood

.mango-cherry

.spinach-carrot

.bbq-fire

To override a combo text color, apply a text color class directly to the element.

<p class="orange-cream">Orange
  <span class="blueberry-t">Blueberry</span>
</p>

Output:

Orange Blueberry

Gradients

Use these classes to apply a pre-defined gradient background to any element.


.monogradient


.cherry-delight


.happiness


.pina-colada


.deep-desire


.sprite


.aqua


.fresh


.vanilla-chip


.mint-chip


.vampire


.passion


.neapolitan


.pride


.watermelon


.dragonfruit


.oreo


.peppermint


.bacon


.swedish


.octoberfest


.halloween


.caramel-apple


.ireland


.autumn


.winter


.spring


.summer


.lush


.evergreen


.viking


.violence


.emptiness


.clean


.socialize


.river


.dusk


.sunset


.hottie


.virgin


.shades


.liminal

Brutalist Flavors
Back to Top ↑

Download
version 2.4
×