Title: Design system · EthSystems

URL Source: https://ethsystems.org/design/

Markdown Content:
---
description: Tokens and components used across the EthSystems guide.
title: Design system · EthSystems
image: https://ethsystems.org/og.png
---

[Skip to content](#main-content) 

## 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

Text

`--color-text` `#1a202c` 

Text secondary

`--color-text-secondary` `#4a5568` 

Text muted

`--color-text-muted` `#718096` 

Text faint

`--color-text-faint` `#a0aec0` 

### Surfaces & borders

Bg

`--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

Fraunces for display headings, Geist for sans/body, Geist Mono for code and small meta.

Page H1

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

PageHeader title

EthSystems

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

Geist 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 

×

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://ethsystems.org/#organization","name":"EthSystems","url":"https://ethsystems.org/","logo":"https://ethsystems.org/icon-maskable.png","sameAs":["https://x.com/eth_systems","https://www.linkedin.com/company/ethsystems/","https://github.com/ethsystems"]},{"@type":"WebSite","@id":"https://ethsystems.org/#website","url":"https://ethsystems.org/","name":"EthSystems","publisher":{"@id":"https://ethsystems.org/#organization"}}]}
```