Colors

Primary Colors

The primary palette uses a warm-hued high contrast combination of red, off black, and off white. The palette is warm and energetic to inspire action.

Moloch 800

#29100A

Moloch 500

#BD482D

Scroll 100

#F9F7E7

Scroll 700

#534A13

Secondary Palette

The secondary colors expand on the primary brand colors to add depth to UI elements, layouts, and illustrations.

Moloch Color Scale

Moloch 100

#FAEEEB

Moloch 200

#EFC5BB

Moloch 300

#E39B8B

Moloch 400

#D25C41

Moloch 500

#BD482D

Moloch 600

#8B3521

Moloch 700

#5C2316

Moloch 800

#29100A

Scroll Color Scale

Scroll 100

#F9F7E7

Scroll 200

#ECE5AC

Scroll 300

#DCCD6A

Scroll 400

#D2C141

Scroll 500

#B5A22C

Scroll 600

#837820

Scroll 700

#534A13

Scroll 800

#211E07

Neutral Palette

Neutral 100

#F1EFEE

Neutral 200

#D5CECD

Neutral 300

#B9AEAC

Neutral 400

#9E8E8A

Neutral 500

#806F6B

Neutral 600

#645754

Neutral 700

#433937

Neutral 800

#221D1C

Neutral White

#FAFAFA

Neutral Black

#0D0D0D

For Developers

Where to Find the Colors

All brand colors are defined as CSS custom properties in src/app/globals.css. The color variables are defined in the :root selector and mapped to Tailwind utilities in the @theme inline block.

View global.css:

View on GitHub

Usage Example

Once configured, you can use the colors with Tailwind utility classes:

// Example: Using Moloch 400
<div className="bg-moloch-400 text-scroll-100 p-4 rounded-lg">
  <h2 className="type-heading-md">Call to Action</h2>
  <p className="text-body-base">
    This button uses the primary brand color.
  </p>
</div>