Branding
this site, not the packageA rebrand, not a redesign: corner rounding, spacing, type and motion carry over unchanged, and what moves is hue. The full manual is docs/BRANDING.md.
Switch it live
Four registered themes, applied by flipping data-theme and
data-variant on <html> for the rest of this site.
Forest moves both halves, brand and base ramp; Cobalt moves the
brand only; Graphite the base only. A brand hue landing within ~15° of a
semantic family has to move that family — which is why Forest also moves go and
Cobalt moves orbit.
Recolours instantly
The same six things every page on this site is built from. Watch the card under Forest and Graphite: its fill, its border and the page behind it all come from the theme's own base ramp.
<div class="card">
<div class="card-head">
<strong>Checkout API — v2 rollout</strong>
<span class="badge badge-go">On track</span>
</div>
<div class="card-body">
<p class="form-hint" style="margin-bottom:10px">
Promoting to every region takes about four minutes.
</p>
<!-- .prose, because a link inside a sentence must be distinguishable without
colour: a bare <a> is undecorated until hover, and Orbit Blue against Dust
Gray measures 1.3:1. .prose a underlines it. -->
<p class="prose" style="margin-bottom:10px">
<a href="#">Read the rollout notes</a> first.
</p>
<div class="sedna-row-wrap">
<button class="btn btn-primary">Promote</button>
<button class="btn btn-go"><i class="ri-check-line"></i> Approve</button>
<button class="btn btn-danger"><i class="ri-delete-bin-line"></i> Roll back</button>
</div>
</div>
</div>The mark, drawn three times
An elliptical orbit resolving into an S, with a coral focal body and a small blue
satellite. Pick a PNG by size and the right drawing comes out — the ladders in
assets/brand/ already switch tier, so never scale one to stand in for another.
Two ladders, and the tile
Navy for light backgrounds, Ice White for dark ones. Only the diagonal reads.
Top row: sedna-ui-icon-*, the navy ladder. Bottom row:
sedna-ui-icon-on-dark-*, the Ice White ladder. Left column: a light surface. Right
column: a dark one.
sedna-ui-tile-* — carries its own Deep Space field, for a background you do not
control. The NuGet package icon and this site's favicon both come from it at 128×128.
Clear space, minimum sizes, misuse
| Rule | Value |
|---|---|
| Clear space, all four sides | The radius of the focal body |
| Minimum size, standalone icon | 20px — below that, the micro tier |
| Minimum width, horizontal lockup | 96px |
| Misuse | Never rotate, recolour or add an effect. Never rebuild the wordmark in another face. |
sedna-ui-wordmark*.svg and
sedna-ui-logo-*.svg set live <text> in Outfit, so on a machine
without that font they silently fall back to a generic sans. For a wordmark or a lockup on the
web use the PNG, as the two lockups above do. Mark and tile SVGs are pure
geometry and safe anywhere.
The palette, read live
The seven core colours the rest of the palette is generated from, read from the stylesheet the browser actually loaded — so they follow whichever theme is selected above.
Keeping an exact brand colour
SednaRamp.FromAnchor takes the anchor's hue and chroma and reads its
lightness off the curve every family shares, so the step you anchored comes back a
different colour — close, deliberate, and wrong for a corporate design that mandates a hex.
exactAnchor: true keeps that one step verbatim and still generates the rest around
it.
exactAnchor
Step 600 above is the anchor itself; its neighbours are the ordinary generated steps. Use it for the one colour a brand guide names, not for a whole ramp — pinning every step by hand is what the dictionary constructor is for.
// A brand whose hex is mandated. exactAnchor keeps it at its step, unrounded and
// unmoved; every other step is still generated from the shared curve around it.
var brand = SednaRamp.FromAnchor("#D62828", anchorStep: 600, exactAnchor: true);
// brand[600] is "#d62828" exactly — what --brand resolves to.
// Without exactAnchor, step 600 takes the curve's lightness instead, so the anchor
// contributes its hue and chroma and the ramp comes back a different colour.
// The anchor has to fit where it is pinned: lighter than the step below it and
// darker than the step above. One that does not is rejected, naming the step it
// does fit, rather than shipping a ramp whose hover state is lighter than its
// resting state.Three decisions that shaped the system
Places the palette could not be applied literally. Each is encoded as a ramp relationship rather than a hard-coded value, so it holds for every theme above.
| Decision | Why |
|---|---|
| Sedna Red cannot be a button |
White on Sedna Red measures 2.82:1, short of the 4.5:1 a filled control's label
needs. --brand takes ramp step 600 instead, solved for the contrast
floor, which reaches 4.55:1.
|
| The accent is Orbit Blue |
A second coral would make a link and a button the same colour, so
--accent takes Orbit Blue.
|
| Danger cannot stay red | The old danger red sat 7° from the brand in OKLCH. Danger moves to crimson, 32° away, so a destructive action and the brand separate on hue as well as on fill. |