Frontend Architecture

Next.js App Router, server-first, with client islands where interaction demands it.

txt

Directory layout

src/
  config/          protocol.ts, flags.ts, site.ts   — all changeable facts
  lib/
    protocol/      adapter interface, preview + live implementations
    format.ts      one place where a missing value becomes an em dash
    motion.ts      gsap context hook, easing and duration vocabulary
  components/
    ui/            Base UI primitives, restyled from tokens
    system/        design system: panels, stats, status, values, basket
    diagrams/      native SVG/CSS flow diagrams
    marketing/     landing sections
    app/           dapp shell and trade surfaces
    docs/          portal chrome and content renderer
  content/docs/    structured documentation content
  app/             routes

Server and client boundaries

Marketing sections are server components; only motion wrappers are client
The dapp shell is a client component because navigation state and wallet state are interactive
Trade surfaces are client components — they own form state
Docs pages are server-rendered from structured content; only navigation, search and the table of contents are client

Styling

Tailwind v4 with a single token block in `globals.css`. Colour, radius and type scale are CSS variables; components reference semantic names such as `bg-panel`, `text-fg-muted` and `border-line` rather than raw values. A rebrand is an edit to that block.