Skip to main content

Ring4 Brand Color Guidelines

Living reference - all colors rendered dynamically from the centralized color system.

Component Colors (Tailwind Classes)

orange

bg-orange-50

Card Background

bg-orange-100

Button Background

hover:bg-orange-200

Hover State

border-orange-300

Border

text-orange-600

Text Color

blue

bg-sky-50

Card Background

bg-sky-100

Button Background

hover:bg-sky-200

Hover State

border-sky-200

Border

text-sky-600

Text Color

sky

bg-sky-50

Card Background

bg-sky-100

Button Background

hover:bg-sky-200

Hover State

border-sky-200

Border

text-sky-600

Text Color

green

bg-emerald-50

Card Background

bg-emerald-100

Button Background

hover:bg-emerald-200

Hover State

border-emerald-200

Border

text-emerald-600

Text Color

indigo

bg-indigo-50

Card Background

bg-indigo-100

Button Background

hover:bg-indigo-200

Hover State

border-indigo-200

Border

text-indigo-600

Text Color

cyan

bg-cyan-50

Card Background

bg-cyan-100

Button Background

hover:bg-cyan-200

Hover State

border-cyan-200

Border

text-cyan-600

Text Color

teal

bg-teal-50

Card Background

bg-teal-100

Button Background

hover:bg-teal-100

Hover State

border-teal-200

Border

text-teal-600

Text Color

purple

bg-violet-50

Card Background

bg-violet-100

Button Background

hover:bg-violet-200

Hover State

border-violet-200

Border

text-violet-600

Text Color

pink

bg-pink-50

Card Background

bg-pink-100

Button Background

hover:bg-pink-200

Hover State

border-pink-200

Border

text-pink-600

Text Color

amber

bg-amber-50

Card Background

bg-amber-100

Button Background

hover:bg-amber-200

Hover State

border-amber-200

Border

text-amber-600

Text Color

gray

bg-gray-50

Card Background

bg-gray-100

Button Background

hover:bg-gray-200

Hover State

border-gray-300

Border

text-gray-600

Text Color

dark-blue

bg-gray-800

Card Background

bg-gray-700

Button Background

hover:bg-gray-600

Hover State

border-gray-600

Border

text-white

Text Color

dark-gray

bg-gray-900

Card Background

bg-gray-800

Button Background

hover:bg-gray-700

Hover State

border-gray-700

Border

text-white

Text Color

Semantic Colors (Error/Success)

Used for problem/solution cards, validation states, and feedback UI. These map to red (error) and emerald (success) Tailwind palettes.

Error (Red)

bg-red-50

Card BG

bg-red-100

Button BG

hover

Hover

border

Border

text

Text

✗

Error Card Example

Used for problem identification, validation errors

Success (Emerald)

bg-emerald-50

Card BG

bg-emerald-100

Button BG

hover

Hover

border

Border

text

Text

✓

Success Card Example

Used for solution cards, confirmation states

Section Gradients

Error Section Gradient

#FEF2F2 → #FFFFFF

Success Section Gradient

#ECFDF5 → #FFFFFF

Section Gradients (Background + Border)

Used for full-section backgrounds with subtle gradients. Uses partial:utilities/section-gradient

orange Section

Start: #FFFCF8

End: #FFFFFF

Border: #FDBA74

blue Section

Start: #FAFCFF

End: #FFFFFF

Border: #0EA5E9

green Section

Start: #F0FFF4

End: #FFFFFF

Border: #10B981

indigo Section

Start: #EEF2FF

End: #FFFFFF

Border: #6366F1

cyan Section

Start: #ECFEFF

End: #FFFFFF

Border: #06B6D4

teal Section

Start: #F0FDFA

End: #FFFFFF

Border: #14B8A6

purple Section

Start: #F5F3FF

End: #FFFFFF

Border: #8B5CF6

pink Section

Start: #FDF2F8

End: #FFFFFF

Border: #EC4899

error Section

Start: #FEF2F2

End: #FFFFFF

Border: #FCA5A5

success Section

Start: #ECFDF5

End: #FFFFFF

Border: #6EE7B7

Gradient Directions + Border Position

Gradient direction determines both the gradient flow AND the border position. Uses partial:utilities/section-border-class

direction: to_bottom (default)

Border on TOP (border-t)

Top to Bottom

direction: to_top

Border on BOTTOM (border-b)

Bottom to Top

direction: to_right

Border on TOP (border-t)

Left to Right

direction: to_left

Border on TOP (border-t)

Right to Left

All Colors with Direction Variants

Orange shown with all 4 directions:

to bottom
to top
to right
to left

Testimonial Card Gradients

Vertical gradients for testimonial card accent areas.

orange

rgb(253, 186, 116)

rgb(251, 146, 60)

blue

rgb(56, 189, 248)

rgb(2, 132, 199)

purple

rgb(167, 139, 250)

rgb(139, 92, 246)

Dark Section Gradients

For dark mode sections and footers. Requires light_bg="true" for buttons and light text classes.

dark-blue

Light text for dark backgrounds

Start: #1f2937

End: #1a303d

Border: #475467

dark-gray

Light text for dark backgrounds

Start: #111827

End: #1f2937

Border: #374151

Dark Gradient with Components

Full example showing dark gradient with light text and buttons:

DARK-BLUE SECTION

Dark Blue Gradient

This demonstrates the dark-blue gradient with proper light text classes for contrast.

DARK-GRAY SECTION

Dark Gray Gradient

This demonstrates the dark-gray gradient with proper light text classes for contrast.

Dark Gradients with Direction Variants

to bottom
to top
to right
to left

Solid Color Backgrounds

For background_style: solid. Uses partial:utilities/color-classes variant="card"

Light Backgrounds (dark text)

orange

Solid color background

blue

Solid color background

sky

Solid color background

green

Solid color background

indigo

Solid color background

cyan

Solid color background

teal

Solid color background

purple

Solid color background

pink

Solid color background

amber

Solid color background

gray

Solid color background

Dark Backgrounds (light text required)

Dark colors require heading-*-light, text-body-*-light, and light_bg="true" for buttons

DARK-BLUE SOLID

Dark Blue Solid Background

For solid dark backgrounds, use light text classes

DARK-GRAY SOLID

Dark Gray Solid Background

For solid dark backgrounds, use light text classes

Solid vs Gradient Comparison

Side-by-side comparison of background_style options:

solid + orange

Solid Orange

Flat color, no gradient

gradient + orange

Gradient Orange

Subtle top-to-bottom gradient

image

Image Background

Uses uploaded asset

solid + dark-blue

Solid Dark Blue

Requires light text

gradient + dark-blue

Gradient Dark Blue

Requires light text

image (dark)

Dark Image

With overlay

Button/Pill Examples

Interactive buttons using the color-classes utility partial.

Solid Buttons

Outline Buttons

Card Background Examples

Content cards using the color-classes utility partial (variant="card").

orange Card

Card content goes here...

blue Card

Card content goes here...

green Card

Card content goes here...

indigo Card

Card content goes here...

cyan Card

Card content goes here...

teal Card

Card content goes here...

purple Card

Card content goes here...

pink Card

Card content goes here...

amber Card

Card content goes here...

gray Card

Card content goes here...

dark-blue Card

Card content goes here...

dark-gray Card

Card content goes here...

Alternating-Steps Component Patterns

Component styles used in partials/sections/alternating-steps/

Step Badges (variant="pill")

Step 0 Step 1 Step 3 Step 4 Step 5 Step 6 Step 7 Step 8 Step 9 Step 10 Step 14 Step 15

Icon Containers (variant="icon")

Feature Cards with Border (variant="border")

✨

orange

✨

blue

✨

green

✨

indigo

✨

cyan

✨

teal

✨

purple

✨

pink

✨

amber

✨

gray

✨

dark-blue

✨

dark-gray

Icon List Items (icon + border variants)

Feature: orange Style

Combined icon container + border styling

Feature: blue Style

Combined icon container + border styling

Feature: green Style

Combined icon container + border styling

Feature: indigo Style

Combined icon container + border styling

Feature: cyan Style

Combined icon container + border styling

Feature: teal Style

Combined icon container + border styling

Feature: purple Style

Combined icon container + border styling

Feature: dark-blue Style

Combined icon container + border styling

Feature: dark-gray Style

Combined icon container + border styling

Image Containers (variant="bg" + "border")

orange bg
blue bg
green bg
indigo bg
cyan bg
teal bg
purple bg
pink bg
amber bg
gray bg
dark-blue bg
dark-gray bg

Gradient Text (variant="gradient_text")

orange
blue
green
indigo
cyan
teal
purple
pink
amber
gray
dark-blue
dark-gray

Dark Testimonial Gradient

Used in _layout-testimonial.antlers.html

JD

"This is the dark gradient testimonial style with a beautiful gradient background."

John Doe

CEO, Example Company

Typography Classes

Dark Text (Light Backgrounds)

.eyebrow - SAMPLE TEXT
.eyebrow-brand - SAMPLE TEXT

.heading-1

.heading-2

.heading-3

.heading-4

.text-body-lg - Large body text

.text-body - Standard body text

.text-body-sm - Small body text

.text-body-xs - Extra small body

.text-helper - Helper/hint text

.text-error - Error message text

Light Text (Dark Backgrounds)

.eyebrow-light - SAMPLE TEXT

.heading-1-light

.heading-2-light

.heading-3-light

.heading-4-light

.text-body-lg-light - Large body

.text-body-light - Standard body

.text-body-sm-light - Small body

.text-body-xs-light - Extra small

Quick Reference Table

Color Name Card BG Card Border Button BG Text Hover
orange bg-orange-50 border-orange-300 bg-orange-100 text-orange-600 hover:bg-orange-200
blue bg-sky-50 border-sky-200 bg-sky-100 text-sky-600 hover:bg-sky-200
green bg-emerald-50 border-emerald-200 bg-emerald-100 text-emerald-600 hover:bg-emerald-200
indigo bg-indigo-50 border-indigo-200 bg-indigo-100 text-indigo-600 hover:bg-indigo-200
cyan bg-cyan-50 border-cyan-200 bg-cyan-100 text-cyan-600 hover:bg-cyan-200
teal bg-teal-50 border-teal-200 bg-teal-100 text-teal-600 hover:bg-teal-100
purple bg-violet-50 border-violet-200 bg-violet-100 text-violet-600 hover:bg-violet-200
pink bg-pink-50 border-pink-200 bg-pink-100 text-pink-600 hover:bg-pink-200
amber bg-amber-50 border-amber-200 bg-amber-100 text-amber-600 hover:bg-amber-200
gray bg-gray-50 border-gray-300 bg-gray-100 text-gray-600 hover:bg-gray-200
dark-blue bg-gray-800 border-gray-600 bg-gray-700 text-white hover:bg-gray-600
dark-gray bg-gray-900 border-gray-700 bg-gray-800 text-white hover:bg-gray-700

Ring4 Brand Color Guidelines - Living reference from centralized color system

Colors defined in: content/globals/theme_colors.yaml