# Color Rules

## Quick Answer

The main color is deep violet **#201748**.
Four core colors: deep violet **#201748** · mid violet **#3D2683** · surface blue **#36A9E1** · foam **#EEF9FF**.
Use mid violet for buttons and links, deep violet for dark backgrounds, and surface blue for light accents.
**Surface Blue #36A9E1 is the default emphasis color.** Reserve **Highlight Yellow #FFE55C** for the strongest emphasis in **only 1–2 focal spots across a complete page or a single standalone content asset**. Omit yellow when unnecessary.
Copy exact values from the table below or [`design-tokens.json`](../../_system/tokens/design-tokens.json). Never eyeball an approximate color.

## Full Palette

| Name | HEX | CSS Variable | Where to Use |
| --- | --- | --- | --- |
| Deep violet | `#201748` | `--dv-color-deep-violet` | Main color. Dark backgrounds, logo backgrounds, primary brand color |
| Dark violet | `#18143D` | `--dv-color-dark-violet` | Slightly raised surface on dark screens (cards) |
| Mid violet | `#3D2683` | `--dv-color-mid-violet` | Buttons, links, selected states — interactive elements |
| Light violet | `#67509C` | `--dv-color-light-violet` | Secondary color, subtle emphasis |
| Surface blue | `#36A9E1` | `--dv-color-surface-blue` | Default emphasis behind key copy, labels and brief callouts; secondary buttons and depth data |
| Foam | `#EEF9FF` | `--dv-color-foam` | Very light backgrounds, info panels |
| Highlight Yellow | `#FFE55C` | `--dv-color-highlight-yellow` | Optional strongest-emphasis accent in only 1–2 focal spots across a complete page or standalone content asset |
| Mark purple | `#863BFF` | `--dv-color-mark-purple` | Logo and campaign accents only |
| Mark violet | `#7E14FF` | `--dv-color-mark-violet` | Logo only |
| Mark sky | `#47BFFF` | `--dv-color-mark-sky` | Logo only |
| Mark lavender | `#EDE6FF` | `--dv-color-mark-lavender` | Links and accents on dark backgrounds only |
| Kelp (green) | `#2DBE7E` | `--dv-color-kelp` | Success/complete signals (dark text variant: `#177552`) |
| Coral (red) | `#FF6B5A` | `--dv-color-coral` | Error/danger signals (dark text variant: `#B6382E`) |
| Sun (yellow) | `#F4B942` | `--dv-color-sun` | Warning signals (dark text variant: `#8A5A00`) |
| White–black | `#FFFFFF`–`#07131C` | `--dv-color-neutral-0`–`950` | Backgrounds, text, borders. Default light body text: `#10212E`, canvas: `#F6FAFC` |

## Combination Rules

- Light background text: `#10212E` (default). Links and primary CTAs: mid violet `#3D2683`. For everyday editorial emphasis, pair a Surface Blue `#36A9E1` background with Deep violet or Ink text.
- Mark lavender `#EDE6FF` and foam `#EEF9FF` must not be used as text on light backgrounds — they are invisible. Dark backgrounds only.
- Mark purple, mark violet, and mark sky must not fill entire backgrounds. Logo and brief accent moments only.
- Kelp green, Coral red and Sun yellow `#F4B942` communicate status (success, error, warning), supported by text or an icon. Highlight Yellow `#FFE55C` follows the separate emphasis guidance below.
- Do not create new colors. If you need a color not in this table or the full token file, ask jay.

## Emphasis Hierarchy — Blue by Default, Yellow in the Most Important 1–2 Spots

**#FFE55C** is the yellow used on the [DIVEROID Press page](https://diveroid.ai/press/). Its source is `--bk-flag: #ffe55c` in [`brutalist.css`](https://diveroid.ai/press/brutalist.css). **The brand owner approved it for emphasis on 2026-10-22.**

- **Surface Blue `#36A9E1` is the default emphasis color.** Use it consistently for recurring emphasis behind key words, labels and brief callouts.
- **Highlight Yellow is optional and reserved for the most important message.** When used, select **only 1–2 focal spots total across the complete page or a single standalone content asset**. The allowance does not reset in each section. Using no yellow is valid.
- Keep yellow localized to a short key phrase or a small label. Avoid broad yellow hero or section backgrounds, and repeated yellow card or button backgrounds.
- Pair blue and yellow surfaces with **Deep violet `#201748`** or **Ink `#10212E`** text. Keep the same pairings in dark mode.
- Convey meaning through wording, labels or icons too. Primary CTAs retain the existing violet palette; logos and product colors follow their approved rules.
- Use existing **Sun `#F4B942`** and `signal.warning` tokens for warnings. Highlight Yellow provides exceptional editorial emphasis.

| Pairing | Contrast | Application |
| --- | --- | --- |
| Deep violet text + Highlight Yellow background | **13.00:1** | Exceptional-emphasis pairing, sufficient for body text |
| Ink text + Highlight Yellow background | **12.99:1** | Emphasis that continues the body-text color |
| White text + Highlight Yellow background | **1.26:1** | Insufficient text contrast; use either dark-text pairing above |

Yellow against white also has a 1.26:1 contrast ratio. Add a Deep violet border when a label or callout boundary itself conveys meaning. For the selected yellow focal spots, use dark lettering over a small yellow background.

For default emphasis, use `color.semantic.light.highlight` / `color.semantic.dark.highlight`. Apply CSS background `--dv-color-highlight-bg` (Surface Blue), text `--dv-color-highlight-text`, and optional border `--dv-color-highlight-border` as a matched set.

For the exceptional 1–2 yellow focal spots, explicitly opt in to `color.brand.diveroid.highlightYellow` and `color.semantic.light.highlightStrong` / `color.semantic.dark.highlightStrong`. Use the CSS set `--dv-color-highlight-strong-bg`, `--dv-color-highlight-strong-text`, and `--dv-color-highlight-strong-border`.

## Dark Mode

Dark mode uses defined pairings, not arbitrary inversions. Canvas: `#07131C`. Card surfaces: deep violet `#201748` and dark violet `#18143D`. Text: white `#FFFFFF`. Links: mark lavender `#EDE6FF`. Buttons: light purple `#828FFF`. Meanings stay the same — only brightness changes. Full pairings are in [`design-tokens.json`](../../_system/tokens/design-tokens.json) under `semantic.dark`.

## Print (CMYK / Pantone)

There are **no confirmed official print values yet** for printed materials (business cards, banners, packaging). The values below are archive references; the actual color is settled by printer conversion plus a proof.

> ⚠️ The Pantone/CMYK values below are from archive sources and **have not been verified [verification needed]**. In particular, PANTONE 295C mapped to deep violet is a navy shade that may differ from the violet. Do not enter them on a print order as final.

The ordering procedure (hand over HEX → printer converts to CMYK with their profile → confirm with a proof) is laid out step by step in [print.md](print.html). A PDF saved from the browser is RGB (screen color), so it is not print-ready data on its own.

| Name | HEX | Pantone (archive, unverified) | CMYK (archive, unverified) |
| --- | --- | --- | --- |
| Deep violet | `#201748` | PANTONE 295c `[verification needed]` | C100 M100 Y20 K50 `[verification needed]` |
| Mid violet | `#3D2683` | PANTONE 2118c `[verification needed]` | C95 M100 Y0 K0 `[verification needed]` |
| Light violet | `#67509C` | PANTONE 2118c (75%) `[verification needed]` | C71 M75 Y0 K0 `[verification needed]` |
| Surface blue | `#36A9E1` | PANTONE 299c `[verification needed]` | C70 M15 Y0 K0 `[verification needed]` |

The remaining colors (foam, mark colors, signal colors, etc.) have no archive values at all [verification needed]. If you must print them, provide the HEX value and follow the same procedure (printer conversion + proof). Do not invent new Pantone numbers or CMYK mixes yourself.

## Gradients

Do not create background gradients from scratch. Use the six approved SVGs from [`diveroid-gradient-abyss-signal.svg`](../../brand-kit/graphics/gradients/diveroid-gradient-abyss-signal.svg) as-is. Three static — `abyss-signal` (hero background), `reef-intelligence` (AI/data screens), `memory-current` (dive memories/sharing) — and three animated — `motion-current-flow`, `motion-sonar-sweep`, `motion-memory-drift`. When placing text over gradients, position it on the dark areas and add a deep violet underlay if readability is poor.

## When to Check

Are you creating or modifying the official logo? / Claiming safety or AI capability? / Does legal/licensing apply? If any answer is "yes," check with jay. Otherwise, publish.