Design system

Colors

Semantic, not positional. Single CTA blue idles every interactive element; tonal palette is a three-step traffic light for status / quality signalling.

Brand

Primary

--color-primary #1a365d

Headlines, strong text

Primary light

--color-primary-light #2c5282

Subheadings

CTA

--color-cta #2257e9

Interactive blue — every link / button / hover idles here

CTA hover

--color-cta-hover #1a365d

Resolves to navy primary on hover

On CTA

--color-on-cta #ffffff

Locked white — text on blue surfaces

On primary

--color-on-primary #ffffff

Ink on navy surfaces (footer links, jurisdiction card active state)

CTA tints

CTA tint

--color-cta-tint rgba(34,87,233,0.08)

Pill background

CTA tint strong

--color-cta-tint-strong rgba(34,87,233,0.12)

Hover wash

CTA border

--color-cta-border rgba(34,87,233,0.25)

Soft blue border

Text

--color-text #1a202c

Text secondary

--color-text-secondary #4a5568

Text muted

--color-text-muted #718096

Text faint

--color-text-faint #a0aec0

Surfaces & borders

--color-bg #ffffff

Bg subtle

--color-bg-subtle #f7fafc

Bg muted

--color-bg-muted #edf2f7

Bg card

--color-bg-card #f4f5f6

Border

--color-border #e2e8f0

Border strong

--color-border-strong #cbd5e0

Tonal (success / warning / danger / neutral / violet)

Success

--color-success #10b981

Success strong

--color-success-strong #047857

Warning

--color-warning #f59e0b

Warning strong

--color-warning-strong #92400e

Danger

--color-danger #b91c1c

EntryFacts "Avoid when" criteria

Neutral

--color-neutral #94a3b8

Neutral strong

--color-neutral-strong #475569

Violet

--color-violet #6d28d9

Third step of the EntryFacts neutral rotation

Context coloring (I2I / I2U)

I2I

--color-i2i #4f46e5

Institution-to-institution context (indigo)

I2I tint

--color-i2i-tint rgba(99, 102, 241, 0.10)

I2U

--color-i2u #0d9488

Institution-to-user context (teal)

I2U tint

--color-i2u-tint rgba(20, 184, 166, 0.10)

Typography

Inter for sans, JetBrains Mono for code and small meta. Weights 400 / 500 / 600 / 700 / 800.

Page H1

sans clamp(2.25rem, 4.4vw, 3.05rem) w700

PageHeader title

Institutional Privacy Task Force

Section H2

sans clamp(2.15rem, 3.8vw, 2.85rem) w700

.section-head h2

Every entry began as a conversation

Prose H2

sans 1.5rem w700

.prose h2 (in-body section break)

Components

Prose H3

sans 1.2rem w600

.prose h3

Threat model

Prose H4

sans 1.05rem w600

.prose h4

Sub-section

Lede

sans 1.0625rem w400

PageHeader lede + section meta

A working knowledge base for institutions arriving at Ethereum with privacy requirements.

Body

sans 1rem w400

body + .prose p

Privacy on Ethereum means controlling what information is visible and to whom.

Small

mono 11.5px w400

meta-row, breadcrumb

Reviewed weekly · Last edit 2026-05-21

Eyebrow

mono 11px w600

.section-tag (uppercase, 0.16em tracking)

PRIVACY BASICS

Spacing & Radius

Four radius tiers. Container max 1200px with fluid horizontal padding clamping 1.25rem–2rem.

--radius-sm

4px

--radius-md

8px

--radius-lg

12px

--radius-xl

16px

Shadows

Four tiers mapped from prototype --shadow-1..4. Rest / hover / lift / overlay.

--shadow-sm

cards at rest

--shadow-md

card hover

--shadow-lg

modal / hover lift

--shadow-xl

overlays

Buttons

Two variants: primary (filled CTA blue) and ghost (CTA outline). Optional .lg bumps padding and font.

Primary→ Ghost→ Primary lg→ Ghost lg→

Cards

A single .card-base recipe (subtle border + shadow, lifts and gains CTA-blue border on hover). Listing cards across the site compose on top of this.

Pattern

Shielded ERC-20 transfers

Hide amounts and counterparties for compliant institutional transfers.

L2 production

Vendor

Aztec

Privacy-native rollup with Noir DSL and client-side proving.

L2 beta

Badges & Pills

A single .chip vocabulary with five tone modifiers — neutral, success, warning, muted, cta. Used wherever metadata sits inline on a card or row.

neutral production beta draft cta

Callouts

Tinted-background callouts mirror the tonal palette. Use sparingly — most signalling lives in chips on cards.

Note. CTA-tint background is reserved for blue brand callouts and pill backgrounds — not for arbitrary highlights.

Production. This component composes with the chip vocabulary above; success tone signals shipped state.

Beta. Warning tone signals draft or pre-production. Pair with a chip on the row, not just the callout.

Code

JetBrains Mono. Inline code gets a subtle muted background and border; block code uses subtle bg with no border colour shift.

Inline references look like --color-cta or renderMarkdown(body).

// src/lib/render.ts
marked.use({
  renderer: {
    link({ href, tokens }) {
      // ...
    },
  },
});

Table

Used inside prose for comparison rows. Header cells take a subtle background; row borders use the standard border colour.

Pattern	Layer	Maturity	Privacy
Shielded ERC-20	L2	production	amounts + counterparties
Noir private contracts	L2	beta	private fns, public state
Viewing keys	L1 / L2	production	selective disclosure

Prose

Markdown bodies render inside .prose. Constrained to ~70ch, with hairline section breaks above every H2 (suppressed when the first child of prose is itself an H2, on domain pages).

Privacy on Ethereum means controlling what information is visible and to whom. The spectrum ranges from anonymity to full confidentiality.

Components

Most institutional solutions sit between those poles, using selective disclosure to reveal specific data to authorized parties.

Shielded pool contracts store commitments and a nullifier set.
Hash-based commitments hide note contents.

The question is not whether Ethereum is private, but which privacy architecture fits your requirements.

Motion

One easing curve, three durations. Anything visual that transitions uses cubic-bezier(0.4, 0, 0.2, 1) — never bouncy easings. Respects prefers-reduced-motion.

--duration-fast 120ms hover state

--duration-base 180ms transition default

--duration-slow 280ms page reveal