Internal reference

Stables design system

Living styleguide for tokens, layouts, and components used across landing, app, and docs surfaces.

Foundations

Color tokens from globals.css and DESIGN.md.

--color-bg#fbfaf7
--color-surface#ffffff
--color-surface-soft#f8f6f1
--color-ink#06172d
--color-ink-muted#40546f
--color-ink-soft#5d6d7d
--color-primary#041428
--color-success#129b63
--tranche-minted#129b63
--tranche-usd#5267ff
--tranche-buffer#aeb7c3

Typography

Cormorant display, Manrope sans, mono numerics.

Display serif headline

Label / eyebrow

Body copy uses Manrope at 1rem with relaxed line-height for product notes and landing sections.

0.670252 · 12,000,000 · 171.3%

Layouts

Shell primitives shared across routes.

stables-site-shell
Landing, docs, design system — warm paper canvas, 70rem max width.
stables-app-shell
Swap and vault routes — grain gradient atmosphere behind product cards.
stables-docs-layout
Vocs sidebar navigation and focused reference pages.

Components

shadcn primitives with Stables token wrappers.

Buttons

Badges & alerts

DefaultOutline

Cards & inputs

Vault card
Isolated currency vault metrics.

Metric card

Vault TVL
$56.28M

Illustrative component data

+ 8.26% 24h

App patterns

Composed blocks from production surfaces.

Landing swap preview

Swap
1 AUD = 0.670252 EURLive rate
Swap Now

Risk waterfall

01Full exposure stake

Absorbs pro-rata losses first; receives surplus when shares exist

02Protocol buffer

Mint and redeem fees; first-loss layer on the stable side

03Stable stake

Buffered LP tranche with no upside participation

04Synthetic fiat holders

Senior claims on vault collateral; pro-rata only in extreme shortfall

Losses flow top to bottom. Surplus routes to full-exposure stake when shares exist; otherwise it accrues to the protocol buffer.

Tranche bar: full exposure · stable stake · protocol buffer