Brand
Logo
The mark is five concentric arcs forming a “C” that opens toward the direction of flow. The colors run from red on the outside to yellow at the center, a nod to data moving through a conduit.
| File | Use |
|---|---|
ui/static/img/logo.svg |
The mark on light or dark backgrounds, at 24 px and up |
ui/static/img/favicon.svg |
The mark on a white rounded tile, for browser tabs and app icons |
Pair the mark with the word Conduit set in the UI’s sans-serif at 700 weight. Leave clear space of at least a quarter of the mark’s width around it. Don’t recolor, rotate, stretch or outline the mark.
Palette
| Hex | RGB | Role | |
|---|---|---|---|
 |
#ec0000 |
236, 0, 0 | Primary: links, primary buttons, errors |
 |
#ec2400 |
236, 36, 0 | Gradient and accents |
 |
#ec5300 |
236, 83, 0 | Accents, chart series |
 |
#ec9b00 |
236, 155, 0 | Waterfall bars, warnings, highlights |
 |
#ecca00 |
236, 202, 0 | Tags and highlights |
 |
#ffffff |
255, 255, 255 | Surfaces |
Supporting neutrals, needed for legible text since the palette has no dark color:
#1c1917ink, for body text and the nav bar#57534esecondary text#e7e5e4borders#fafaf9page background
The brand gradient runs through all five colors from left to right. Use it only for the nav rule, card accents and the logo, never behind text.
Accessibility rules
These come from measured contrast ratios (WCAG 2.1), and the UI follows them.
| Combination | Ratio | Rule |
|---|---|---|
#ec0000 on white |
4.6:1 | The only palette color allowed as body text on white. |
White on #ec0000 |
4.6:1 | OK for button labels |
#ec2400 / #ec5300 on white |
4.4 / 3.6:1 | Large text (18 px and up) and graphics only |
#ec9b00 / #ecca00 on white |
2.3 / 1.6:1 | Never for text. Use them as fills with ink text on top (7.7 / 10.8:1). |
Error text on the red tint #fef2f2 |
Use #b80000 (6.3:1). #ec0000 drops to 4.2:1 there. |
|
#57534e on white |
7.6:1 | Secondary text |
Never rely on color alone for status. Status badges always include a word
(OK, ERROR), and error rows also get a red edge.