Foundations
Color
Two directions, shown side by side. Ratios below are measured live from the CSS variables.
Gradients
Art Deco
Sunrise
Palettes, measured
Art Deco
Ground and surface
Text on the ground
Action and lines
Paper panels
Fill only
Sunrise
Ground and surface
Text on the ground
Action and lines
Paper panels
Fill only
Sunrise brand palette
The Sunrise colors, for the interface and for the logo, patterns, print, social, merch and event graphics. Cream and dark brown carry every piece. Marigold and plum lead. Coral is the accent, and teal, rose and mist support. The site and the prototype use the same colors: Marigold is the action fill, Deep Plum the emphasis text, Dusty Teal and Warm Rose the secondary fills, and Mist the panel ground.
The ground. Pages, paper, cards and the light side of every layout.
On cream 1.0:1 · On dark brown 14.7:1
Text, the logo in one color, and dark grounds.
On cream 14.7:1 · On dark brown 1.0:1
The optimism. Buttons, highlight bands, badges and sunrise shapes. Ink text sits on it.
On cream 1.9:1 · On dark brown 7.6:1
Weight and authority. Headlines, links, the logo on cream, and dark feature grounds.
On cream 8.1:1 · On dark brown 1.8:1
Warmth and urgency. Advocacy calls to action, key shapes and event graphics.
On cream 4.2:1 · On dark brown 3.5:1
For small text use #B84728: 4.9:1 on cream.
Calm counterweight. Pattern fields, illustration, charts and secondary shapes.
On cream 2.8:1 · On dark brown 5.3:1
A softer warmth. Pattern fields, illustration and social backgrounds.
On cream 2.7:1 · On dark brown 5.5:1
A pale teal panel between cream and color: quiet bands, table stripes and form grounds.
On cream 1.2:1 · On dark brown 12.6:1
How much of each
The logo in one color
Do not use
- Marigold on cream. The logo would be pale on pale.
- Dusty Teal or Warm Rose on cream. Too soft for a logo at small sizes.
- Burnt Coral on plum. The two are close in lightness and vibrate.
- Any two brand colors on each other. Only the four combinations above are approved. The logo is always one color.
Gradient rules
Each direction has one gradient, measured from a reference image and fitted as a radial gradient. Page heroes, the Act screen and the gradient sections (the featured event, Impact and Act now) all use it, so they match.
| Direction | Runs from | Type sits | Text colors on it |
|---|---|---|---|
| Art Deco | Near-black olive through deep green and sage to a pale-lime glow in the bottom-right corner. | On the dark side, along the top and the left. | Champagne. Muted #EBE6E0. Emphasis in Celery. |
| Sunrise | Plum and rose at the top-right through apricot and marigold to cream at the bottom-left. The reference is mirrored so the light side is the left. | On the light side, along the left. | Ink. Muted #4A3A26. Emphasis in ink. |
- Type goes only where the gradient reads: light text on Art Deco's dark side, ink on Sunrise's light side. The sage and pink mid-tones, where neither dark nor light text reaches 4.5:1, stay behind photos, cards and buttons.
- On a phone the type runs the full width of a tall box, so the gradients reshape: Art Deco's glow shrinks to the extreme corner and Sunrise stretches so only marigold and apricot fall in the box.
- Contrast was measured for every text element over the gradients, in both directions at desktop and phone widths.
- A section on the gradient gives its text --gradient-muted and --gradient-accent in place of the usual muted and emphasis colors.
Usage rules
- Text uses the text tokens only: --fg, --fg-muted, --accent-text, and on paper grounds --paper-fg and --paper-accent.
- --accent, --hot and --calm are fills and rules. They never carry small text.
- --gold is reserved for the 50th Biennial in Art Deco.
- Control borders use --line-strong, which needs 3:1 (WCAG 1.4.11).
- Focus rings need 3:1 against the surface they sit on (--focus).
- Never use color as the only signal. Pair it with text or a symbol.
- The reference sets body copy in #EC5A2A on blush, which is 3.1:1 and fails for small text. This build replaced it with #CC361F (4.6:1), and now uses Burnt Orange (#B8420F, 4.9:1 on blush) for body and keeps the brighter orange for display sizes only.
Sunrise: two layers of color
Sunrise is warm and grounded: cream and dark brown carry the page, marigold is the optimism, deep plum the weight, and dusty teal and warm rose the calm. The interface and the brand materials share these colors. Burnt Coral is the one brand color that is not an interface token; it is kept for print, social, merch and event graphics, and for large type. Small text always uses a color measured against its ground.
| Surface | Leads | Supports | Sparingly |
|---|---|---|---|
| Website | Warm Cream and Dark Brown | Marigold for actions, Deep Plum for headlines and links | Burnt Coral, Dusty Teal, Warm Rose |
| Marketing materials | Warm Cream, Deep Plum, Burnt Coral | Marigold and Dark Brown | Dusty Teal, Warm Rose, Mist |
- Never give every color equal weight. Cream and dark brown are more than half of any piece; no more than three brand colors appear at once besides them.
- The logo is always one color, in one of the four combinations shown below.
- Marigold, Dusty Teal, Warm Rose and Mist are fills only. They never carry small text on cream.
- Burnt Coral (#C65332) is 4.2:1 on cream: fine for large type, shapes and calls to action with a large label, but small text uses the darker #B84728 (5.0:1).
- Avoid the tropical, childish and SaaS looks: no rainbow rows of the accents, no saturated cyan, and no candy pink.
Art Deco palette
| Name | Hex | Role |
|---|---|---|
| Dark Velvet | #151D1B | Page ground |
| Velvet Green | #223631 | Cards and raised surfaces |
| Orange Glaze | #E2683A | Button rules and emphasis; fill and rule only, never text |
| Celery | #E8FDA6 | Primary action, display accents, the color band |
| Gold Foil | #B38540 | Reserved for the 50th Biennial only |
| Champagne | #F1EEEC | Body text on dark |
| Blush | #FAF1EA | Paper surface for panels, carrying Forest #1F4D40 text and Burnt Orange #B8420F accents |
Measured against Dark Velvet: Champagne 14.9:1, Celery 15.6:1, Orange Glaze 5.1:1, Gold Foil 5.2:1. On Velvet Green, Orange Glaze drops to 3.8:1.
Gold Foil is deliberately scarce. It appears on the 50th Biennial title, its rule and its date plate, and nowhere else. A golden anniversary is the one thing in this brand that earns gold.
Typefaces are open-licence: Art Deco sets display type in Bodoni Moda, a high-contrast face.