04Brand guidelines
Color
Violet, blue and mint against a black background. Covenant is designed for dark backgrounds only: there is no light theme, and nothing we make sits on white or light gray, on screen or in print.
On that background, the Covenant gradient carries all of the brand color. Because it is used sparingly, it always draws the eye to what matters most.
Color
Dark backgrounds
Every Covenant surface uses a dark background: the website, documentation, print, slides, share cards and wallet dialogs.
Where a platform defaults to light (email clients, document tools, operating systems), set the background to #000000.
- 01No white or light backgrounds. Not for a section, card, button, dialog or printed page.
- 02Light text only. Text colors are the only light colors, and they are never used as fills.
- 03Depth through tone, not shadows. Background, Inset and Surface sit a few steps apart, and borders separate one element from the next.
- 04Print stays dark. Print the background color, and proof the gradient on dark stock.
Color
Neutrals
Six neutrals. Background is pure black and is the page color; the other five have a slight violet tint and separate the elements placed on it.
The page color. Every screen and printed page starts here.
One step lighter than the background and one step darker than Surface: code, terminals and recessed areas.
One step lighter: cards, inputs and panels.
Quiet dividers inside a card.
The default border and divider.
Outlines that need to stand out: inputs and secondary buttons.
Surface · a card
Audit log
Inset · code inside it
Color
Text colors
Six light colors with a slight violet tint, so text never glares against the black background. Contrast ratios are measured against Background. Subtle text is the minimum for anything meant to be read.
Headlines, names and anything that must be read first.
Subheads and strong secondary text.
Running text in documentation and long reads.
Supporting copy, introductions and captions.
Labels and metadata. The minimum for anything meant to be read.
Decorative only: index numbers, arrows and markers.
Color
The gradient
The Covenant gradient runs from violet to blue to mint at 115°, across the element it fills, with two exceptions: in the mark it runs corner to corner, and in the bands between sections it runs straight across. The order of the colors never changes.
It has four uses and no others: the mark, the field, the primary action and one accent per view (a word in a headline, a line in a chart, a marker in a list).
The start of the gradient.
The middle of the gradient; link hover and selection.
The end of the gradient; focus rings and live states.
Try the sandbox
- Intent
- Grant
- Receipt
background-image: linear-gradient(115deg, #a03bf0, #4c7fde, #1de3ae);
/* as text, for one word */
background-image: linear-gradient(115deg, #a03bf0, #4c7fde, #1de3ae);
-webkit-background-clip: text;
background-clip: text;
color: transparent;Color
Status
Product states only: live, in progress, failed. Shown as a dot or a word, never as decoration.
Live, verified, passed.
In progress or needs attention.
Failed, refused or missing.
Color
Proportion
Lead with the background. The gradient always takes the smallest share of the screen; that restraint is what makes it recognizably Covenant.
- ~82%Background
- ~9%Surfaces & borders
- ~7%Text
- ~2%Gradient
Color
Contrast
WCAG 2 contrast of each color against Background (#000000). Body text needs AA (4.5:1); anything below 3:1 is decorative only.
| Sample | Color | Ratio | Level | Use for |
|---|---|---|---|---|
| Aa | Primary text #F3F1FA | 18.77:1 | AAA | Headlines, names and anything that must be read first. |
| Aa | Secondary text #DEDAEE | 15.37:1 | AAA | Subheads and strong secondary text. |
| Aa | Body text #C4BFD8 | 11.79:1 | AAA | Running text in documentation and long reads. |
| Aa | Muted text #A49EC0 | 8.23:1 | AAA | Supporting copy, introductions and captions. |
| Aa | Subtle text #8079A0 | 5.16:1 | AA | Labels and metadata. The minimum for anything meant to be read. |
| Aa | Faint text #5C5675 | 3.04:1 | Large text | Decorative only: index numbers, arrows and markers. |
| Aa | Violet #A03BF0 | 4.38:1 | Large text | The start of the gradient. |
| Aa | Blue #4C7FDE | 5.40:1 | AA | The middle of the gradient; link hover and selection. |
| Aa | Mint #1DE3AE | 12.65:1 | AAA | The end of the gradient; focus rings and live states. |
Color
Tokens
The palette as CSS custom properties. The brand assets download includes the same set as CSS and JSON, with every value in HEX, RGB, CMYK and OKLCH.
/* Covenant color tokens · https://opencovenant.org/brand/color
Designed for dark backgrounds. Text colors are for text only, never fills. */
:root {
/* Brand */
--covenant-violet: #a03bf0; /* Violet */
--covenant-blue: #4c7fde; /* Blue */
--covenant-mint: #1de3ae; /* Mint */
--covenant-gradient: linear-gradient(115deg, #a03bf0, #4c7fde, #1de3ae);
/* Neutrals */
--covenant-background: #000000; /* Background */
--covenant-inset: #08070e; /* Inset */
--covenant-surface: #14111f; /* Surface */
--covenant-border-subtle: #1d1a2b; /* Border subtle */
--covenant-border: #2a2640; /* Border */
--covenant-border-strong: #3d3757; /* Border strong */
/* Text */
--covenant-text: #f3f1fa; /* Primary text */
--covenant-text-secondary: #dedaee; /* Secondary text */
--covenant-text-body: #c4bfd8; /* Body text */
--covenant-text-muted: #a49ec0; /* Muted text */
--covenant-text-subtle: #8079a0; /* Subtle text */
--covenant-text-faint: #5c5675; /* Faint text */
/* Status */
--covenant-success: #1de3ae; /* Success */
--covenant-warning: #e0b968; /* Warning */
--covenant-error: #e18383; /* Error */
}Color
Misuse
Every agent runs under a signed grant, and every action leaves a receipt in the audit log.
Every agent runs under a signed grant, and every action leaves a receipt in the audit log.