Seven core colors, five families, and the pairings that work
The palette is cream and navy holding a burst of color. Cream is the ground, navy is the voice, magenta is the signature, and orange, green, teal, and purple are the community, used generously in pattern and photography and sparingly in type.
The core seven
Use these firstEvery color carries a name from the region: its springs, rivers, blooms, stone, and fiestas. Names are proposed; the hex values are approved.
Proportion
60 vibrant · 40 steadyAcross a piece, not on every surface. A poster can be all magenta; the annual report is mostly cream. Read the balance at the level of the whole.
A typical page: cream ground, navy for reading, magenta as the signature accent, the other four in pattern, charts, and photography.
The five families
Six steps eachEvery family runs from a deep 900 to a pale 100. The 500 in the middle is the core. Orange turns gold and yellow as it lightens, which is intentional: the family carries warmth, not just one hue.
Neutrals: Caliche (sand), Limestone (cream), Mission White (ivory). Navy is Cypress.
What each step is for
Proposed900 and 700 · depth
Text and small type on tints, the darkest pieces in a mosaic, chart series that need weight. Every 900 clears AA on cream for body copy; the 700s are for headlines.
500 · core
Fills, backgrounds, pattern pieces, the logo on color. Cream type on a 500 background is the default. Navy holds on green at any size, and on the other four only at headline size. Body copy set in a 500 is out; magenta headlines on cream are fine.
300 to 100 · light
Mosaic tints, callout backgrounds, table stripes, and soft grounds for navy type. Navy passes on every 300, 200, and 100. Never set type in these steps.
Pairings and contrast
WCAG 2.1, computed liveType color across the row, background down the column. Ratios are computed from the token values on this page, so they stay honest if a value changes.
Do and don't
- Navy is the reading color. Body copy is navy on cream, ivory, white, or a 100 tint. On navy and the 900s, body copy is cream.
- Magenta signs, it doesn't narrate. Headlines, the "San Antonio" line, a single highlight, a button. Never paragraphs.
- One or two accents per composition. Cream, navy, magenta, plus one more family. The full spectrum belongs to the mosaic and to photography.
- Cream over white. White is for one-color reproduction and for photography that needs it. The brand ground is cream.
- Don't invent tints. Opacity and screens produce colors that aren't on the palette. Use the 34 values.
- Don't set body copy in navy on magenta, orange, teal, or purple. Headlines pass, paragraphs don't. Use cream, or navy on green, which clears AA.
- Don't run families as gradients. The steps are discrete. A 900 next to a 300 is a mosaic; a smooth fade between them is not.
- Don't use color to mean something it hasn't been assigned. Families aren't mapped to programs or counties. That flexibility is deliberate.
Print values
Core sevenCMYK values below are derived mathematically from the RGB tokens and will shift on press. Before any print run, proof against a physical swatch and record the Pantone match here.
Pantone matches are left open on purpose. They're chosen under a printer's light booth, not by formula. Once SAAF's print vendor confirms them, they belong in this table and in the token file.
Files
DownloadsThe palette lives in one place: the SAAF Color variable collection in Figma, exported to tokens/tokens.json, which generates the CSS on this site. Design, code, and this page read the same 34 values.