02

Color

The core seven

Proportion

60 vibrant · 40 steady

Across a whole piece, use 60% color and 40% Limestone and Twilight. Keep Fiesta Pink under 25%.

60%
Vibrant

Color, pattern, photography, and voice. Energy and pride.

40%
Steady

Twilight, Limestone, and clear type. Trust and permanence.

Pink family
Orange family
Green family
Blue family
Purple family
LimestoneGround
TwilightType

Limestone and Twilight hold the steady 40%. The five families share the vibrant 60%, across all their steps, in pattern, charts, and photos.

The five families

Every family runs from a deep 900 to a pale 100. The 500 is the core. The orange family lightens into shades of yellow, on purpose.

Twilight and the three neutrals, Caliche, Limestone, and Mission White, lead the chart. CMYK values are converted for coated paper using the GRACoL 2006 press standard. Check Pantone specs against a physical guide; the full spec sheet is on the Downloads page.

What each step is for

Proposed

900 and 700 · depth

Type on tints, dark pattern pieces, heavy chart series. Every 900 passes as body copy on Limestone. Use the 700s for headlines.

500 · core

Highlights in small doses: a pattern piece, a band, a chart series, a headline. Too intense for full backgrounds. No body copy on a 500.

300 to 100 · light

Pattern tints, callouts, table stripes, soft grounds. Twilight body copy passes on all of them. Never a type color.

Color combinations

Proposed

The brand palette creates many color combination options. Pick a pair or a set and stick with it for a piece or series of pieces.

Type still follows the contrast chart below. Fiesta Pink stays under 25% of any piece.

Two colors
Three colors

Pairings and contrast

WCAG 2.1, computed live

Type color across, background down. Ratios are computed live from the tokens, so they stay honest if a value changes.

AA4.5 or better: any size textLarge3.0 to 4.5: headlines 24px and up onlyAvoidunder 3.0: decoration only

Dos and don'ts

  • Twilight is the reading color. Body copy is Twilight on Limestone, Mission White, white, or a 100 tint. On Twilight and the 900s, it's Limestone.
  • Use Fiesta Pink as a pop of color. Headlines, the "San Antonio" line, one highlight, a button. Never paragraphs, and never more than 25% of a piece.
  • One or two accents per piece. Limestone, Twilight, Fiesta Pink, plus one family. The full spectrum belongs to the mosaic and photos.
  • Limestone over white. White is for one-color work and photos that need it. The ground is Limestone.
  • Don't invent tints. Opacity and screens make colors that aren't ours. Use the 34 values.
  • Don't set body copy in Twilight on Fiesta Pink, Torch, River Walk, or Cenizo. Headlines pass, paragraphs don't. Use Limestone. Twilight on Nopal clears AA.
  • Don't run families as gradients. A 900 next to a 300 is a mosaic. A fade between them is not.
  • Don't assign meaning to color. Families aren't mapped to programs or counties. That freedom is deliberate.
Together for brighter futures
DefaultTwilight on Limestone. Most pages look like this.
Together for brighter futures
InverseLimestone body, Cascarón headline, on Twilight.
Together for brighter futures
SignatureA Fiesta Pink headline on Limestone. Pink stays a highlight.
Together for brighter futures
TintedComal Springs headline, Twilight body, on Cloud.

Files

Downloads

Figma, the token file, and this page read the same 34 values.

Adobe swatches

All 34 colors, named and grouped by family, for Illustrator, InDesign, and Photoshop. In the Swatches panel, choose Open Swatch Library, then Other Library.

ASE

Design tokens

Color, type, and names in one file, from the Figma variables. For developers and anyone building templates or tools.

JSON