Riven Spine
LiveThe shared shell every surface is built on: navigation, brand tokens, auth session, and the component library that makes the platform feel like one product.
- Service
- surfaces_spine
Spine is the reason Chat, Console, Studio, and Docs look and behave like one platform rather than four applications that happen to share a logo. It is infrastructure for the front end: the shell, the tokens, and the session.
What Spine owns#
- Global navigation — the surface switcher and sidebar, so moving between products does not mean re-orienting.
- Brand tokens — the canonical palette and type scale, consumed as CSS custom properties rather than copied hex values.
- Session — silent single sign-on across surfaces: authenticate once and every surface knows who you are.
- Component library — shared primitives so a button, table, or dialog behaves identically everywhere.
- Theme — light and dark, resolved before first paint to avoid a flash of the wrong theme.
Brand tokens#
| Token | Value | Use |
|---|---|---|
| Primary background | #0C1528 — navy | Dark-theme canvas |
| Primary surface | #DDE9ED | Light-theme canvas; no pure white |
| Primary accent | #EC008C — magenta | Calls to action, links, brand mark |
| Secondary accent | #20BEC6 — teal | Secondary actions and supporting text |
| Display / mono type | JetBrains Mono | Headings and code |
| Body type | Satoshi | Running text |
The scale deliberately excludes pure black and pure white — every neutral sits inside a bounded lightness band, which is what keeps surfaces layered and readable in both themes.
Consuming Spine#
Surfaces import the shell rather than reimplementing it, so a navigation or token change propagates without a per-surface migration. Tokens are always referenced indirectly, which is what allows a theme switch to be a single class change on the document root.
/* Correct: reference the token */
.cta { background: var(--primary); color: var(--primary-foreground); }
/* Wrong: hardcodes one theme and breaks the other */
.cta { background: #EC008C; color: #fff; }