Skip to main content

Design system preview

Tokens & samples

Live swatches from app/globals.css. Source of truth: docs/DESIGN_TOKENS.md. Default experience remains dark-first.

EHX semantic tokens

  • ehx-brand

    text-ehx-brand · bg-ehx-brand/20

    Primary EHX emphasis, success-adjacent highlights

  • ehx-brand-muted

    bg-ehx-brand-muted

    Subtle brand tint for panels and rings

  • ehx-red

    text-ehx-red · bg-ehx-red/15 · border-ehx-red/40

    Attention callouts — red gradient bar for critical notes (checkout, safety)

  • ehx-risk

    text-ehx-risk · border-ehx-risk/50

    Payments, irreversible actions, checkout warnings

  • ehx-info

    text-ehx-info

    Progress, RPC status, neutral system signals

shadcn core

  • primary
  • muted
  • destructive

Attention callout

Use ehx-red only for notes that need immediate user attention — not for category cards or decorative accents.

Example: important safety note

The API does not create a real wallet. Do not send real tokens to stub addresses.

Radius scale

  • rounded-sm

  • rounded-md

  • rounded-lg

  • rounded-xl

  • rounded-2xl

Typography

Heading — system sans

Mono — API: GET /api/v1/templates/catalog

Body — used on marketing pages and checkout helper copy.