VISUAL DESIGN
An OKLCH color system for dark Confluence surfaces. 21 hue families, 11 perceptually uniform shades each, gamut-mapped to sRGB. Schemes assign identity. Functions assign meaning. Components render the result.
Color flows through seven stages. Each narrows the space — from the continuous OKLCH cylinder to the single RGB value a border renders.
17 chromatic hues arranged by OKLCH hue angle. Red starts at H=25°, walks the warm arc through amber and yellow, crosses into cool greens and blues, climbs through violet and fuchsia, and returns to rose at H=0°. Each hue generates 11 shades from near-white to near-black at perceptually uniform lightness steps.
Four neutral families — cool slate, true gray, warm stone, balanced neutral. Same 11-shade scale, near-zero chroma. Just enough tint to feel intentional without competing with chromatic content.
Confluence renders on white by default. Every page in this system overrides that with a four-level dark surface hierarchy. Depth creates structure — the deepest surfaces frame, the raised ones carry content.
Hero blocks. Section labels. Closings. The outermost frame that wraps the page.
Page canvas. Gaps between elements. The negative space that gives everything room to breathe.
Prose containers. Table striping. The reading surface where body text lives.
Card faces. Interactive elements. The foreground layer where colored borders land.
A scheme is five hues on dark surfaces. Components draw colors in sequence — first card gets orange, second amber, third teal, fourth azure, fifth violet. Most pages only use the first two or three.
Brand anchor. Primary identity. The color of action.
Warmth and continuity. The brand's gold accent.
Cool complement. Balance against the warm anchor.
Depth and infrastructure. The color of systems.
Craft and drama. The color of something built with care.
Say the intent, not the hue. Semantic roles map to hues through the active scheme — switch schemes and every role re-resolves. "danger" is vermillion under cloudflare but could be red under another.
Brand identity. Main actions. The default emphasis.
Healthy. Complete. Affirmative.
Degraded. Pending. Needs attention.
Error. Destructive. Stop.
Context. Guidance. Navigation.
Five strategies for assigning hues to items. Each function encodes a different relationship — the choice of function IS the design decision. It tells the reader how items relate before they read a word.
| Function | Syntax | Encodes | Use When |
|---|---|---|---|
| **mono** | mono:sky | Graduated intensity | Items share identity but vary in weight or emphasis |
| **grad** | grad:orange:azure | Spectrum walk | Items form a journey between two states or domains |
| **div** | div:emerald:vermillion | Opposing poles | Items diverge from a neutral center toward extremes |
| **pair** | pair:sky:vermillion | Binary alternation | Items belong to exactly two categories, interleaved |
| **accent** | accent:azure:orange | Terminal emphasis | A pipeline converges on a single highlighted endpoint |
One hue, many shades. First item is lightest, last is deepest. Reads as "more of the same, getting stronger."
A walk between two hues on the OKLCH ring. Chroma-weighted spacing biases toward vivid hues. Shade-400 backgrounds maximize saturation across the entire arc — even amber and yellow pop.
Two extremes diverging from a neutral center. The middle item is the pivot — everything else spreads outward toward the poles.
Two hues alternating. A/B structure — request/response, client/server, question/answer.
Everything uniform except the last item. The pipeline converges — the accent marks the destination.
Palette, scheme, function, and component combine into pages. Here are the same three services rendered four different ways — each color strategy tells a different story about identical data.
Default scheme assignment. Each card gets a distinct hue. Items are peers with different identities.
Plan lifecycle. Schedule management. Stripe synchronization.
Feature flags. Zone provisioning. Access control.
Event routing. Retry backoff. Dead letter queues.
Palette walk from orange to violet. Items form a visual progression from warm commerce through cool infrastructure to dramatic delivery.
Plan lifecycle. Schedule management. Stripe synchronization.
Feature flags. Zone provisioning. Access control.
Event routing. Retry backoff. Dead letter queues.
Each card colored by what it means, not what it is. Primary for the main system, info for the supporting infrastructure, danger for the failure-prone delivery layer.
Plan lifecycle. Schedule management. Stripe synchronization.
Feature flags. Zone provisioning. Access control.
Event routing. Retry backoff. Dead letter queues.
Not three systems but seven steps in one process. The gradient traces the data path from zone creation to entitlement.
The palette is the vocabulary. Schemes are dialects. Functions are grammar. Every page speaks the same language.