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. 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. Its source is --bk-flag: #ffe55c in 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 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. 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 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.

Editable source