Colors | Snyder Brand

Primary Palette

Our primary blue palette anchors the brand. Use these colors for primary actions, links, and key UI elements.

Primary 50

Primary 100

Primary 150

Primary 200

Primary 250

Primary 300

Primary 350

Primary 400

Primary 450

Primary 500 (Base)

Primary 550

Primary 600

Primary 650

Primary 700

Primary 750

Primary 800

Primary 850

Primary 900

Primary 950

Primary 50 oklch(0.97 0.02 250)

Primary 100 oklch(0.93 0.04 250)

Primary 200 oklch(0.88 0.06 250)

Primary 300 oklch(0.78 0.10 250)

Primary 400 oklch(0.68 0.14 250)

Primary 500 (Base) oklch(0.58 0.18 250)

Primary 600 oklch(0.48 0.16 250)

Primary 700 oklch(0.40 0.14 250)

Primary 800 oklch(0.32 0.10 250)

Primary 900 oklch(0.24 0.06 250)

Accent Colors

Eight accent colors provide visual variety and semantic meaning across the product.

Coral

Errors, warnings, destructive actions

oklch(0.70 0.18 25)

Amber

Warnings, highlights, attention

oklch(0.80 0.16 80)

Lime

Success, growth, positive

oklch(0.85 0.20 130)

Teal

Information, trust, calm

oklch(0.70 0.12 180)

Azure

Links, interactive, primary

oklch(0.65 0.15 250)

Violet

Premium, creativity, special

oklch(0.60 0.20 290)

Rose

Personality, delight, featured

oklch(0.70 0.18 350)

Slate

Neutral, subtle, secondary

oklch(0.50 0.02 250)

Grey Scale

A comprehensive grey scale for text, backgrounds, and borders.

100

200

300

400

500

600

700

800

900

950

Color Usage

Text

Primary text Secondary text Tertiary text

Backgrounds

Primary

Secondary

Tertiary

Status

Success Warning Error Info