Exchain

Overview

Exchain is a cryptographic control layer for autonomous agents managing real capital. It serves fintech platforms, trading firms, and AI infrastructure companies that need to grant agents spending authority while maintaining absolute loss ceilings enforced by mathematics, not policy. The aesthetic is "Techno-Minimalist Brutalism"—a fusion of austere, high-contrast typography (88px Inter 900 headlines, monospace labels in Fira Code), deep blacks (#0a0a0a canvas, #050505 accents), and a vivid purple-to-magenta accent gradient (#b47fff to #d150ec) that signals cryptographic precision and high-stakes control. The UI evokes a command-line interface reimagined for modern web: grid backgrounds at 40px intervals, single-pixel borders, and glowing accent halos that suggest mathematical certainty rather than softness.

The brand voice is terse, technical, and unapologetic. Sentences are short and declarative: "Agents should not control money. Math should." "One prompt injection. The whole balance." The vocabulary is drawn from cryptography, systems design, and formal verification—"enclave," "quorum," "fail-closed," "co-sign." There is no hedging, no marketing softness. The tone assumes the reader understands the stakes: autonomous agents with real money require absolute guarantees, not promises. Example sentence in brand voice: "Your agent proposes. The math decides. The most it can ever lose is a number you set—and not even Exchain can exceed it."

Colors

The color system is built around a single, dominant accent: the primary purple (#b47fff) and its deeper sibling, the secondary magenta (#d150ec). These are not decorative—they are the only warm colors on the page and appear exclusively on CTAs, focus states, and brand-critical UI elements. They signal cryptographic authority and machine precision. The primary (#b47fff) is used for button borders, glowing halos (box-shadow: 0 0 20px rgba(180, 127, 255, 0.2)), and the gradient text on the hero headline. The secondary (#d150ec) is reserved for the deepest accent states and animated gradients. The surface stack is a strict grayscale: #0a0a0a (base canvas), #050505 (dim, used for fixed backgrounds), #111111 (container, cards and sections), #1a1a1a (high, hover states), #222222 (highest, pressed

Typography

The type system uses two distinct families to create a visual hierarchy that mirrors the brand's dual nature: rational and human. Inter (100–900 weights) is used for all body copy and headlines, providing a clean, geometric foundation. Fira Code (monospace) is reserved for UI labels, navigation items, and technical metadata—reinforcing the command-line aesthetic. The display tier (88px, weight 900, line-height 92px, letter-spacing -0.03em) is used only for hero headlines and sets an aggressive, high-contrast tone. Headline-lg (64px, weight 900) is used for section titles. Body-lg (17px, weight 400, line-height 28px) is the primary reading size for hero copy and long-form content. Label-md (13px, Fira Code, weight 500, letter-spacing 0.02em) is used for all button text, navigation, and UI c

Layout

The page uses a fixed 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with 48px horizontal padding (gutter), creating a 1184px content area. Sections are separated by lg spacing (40px) vertically, with the hero itself consuming 100vh minus the 72px fixed header. The background features a subtle grid pattern (repeating-linear-gradient at 40px intervals with rgba(180, 127, 255, 0.04) opacity) that reinforces the technical aesthetic without overwhelming the content. The stat block section uses a 4-column grid (grid-template-columns: repeat(4, 1fr)) with 1px borders between columns, creating a table-like structure that emphasizes data hierarchy. Container padding uses the gutter token (48px) consistently, and internal card padding uses md

Elevation & Depth

Depth is achieved through borders and subtle glows rather than shadows. The primary elevation mechanism is the 1px solid border in {colors.surface-container-high} (#1a1a1a), which separates cards and sections from the background. On hover, this border transitions to {colors.primary} (#b47fff) with a concurrent glow: box-shadow: 0 0 16px rgba(180, 127, 255, 0.1). The hero CTA button uses a dual-layer shadow: box-shadow: 0 0 20px rgba(180, 127, 255, 0.2), inset 0 0 20px rgba(180, 127, 255, 0.03), creating a frosted-glass effect with an internal glow. Standard cards use box-shadow: 0 3px 8px rgba

Shapes

The shape philosophy is "Architectural Minimalism"—sharp, precise, and functional. Border-radius is used sparingly and consistently: buttons and inputs use DEFAULT (0.5rem / 8px), cards use md (0.75rem / 12px), and full-width elements use no radius. The stat blocks and section dividers use 1px borders with no radius, emphasizing the grid-like, technical nature of the interface. The only exception is the badge component, which uses full radius (9999px) to create a pill shape for status indicators. This creates a visual distinction: rounded elements signal status/metadata, while sharp elements s

Components

Action Elements Buttons are the primary interaction surface and use a consistent 48px height with 14px vertical padding and 32px horizontal padding. The primary button (button-primary) has a 1px border in {colors.primary} (#b47fff) with a transparent background and white text. On hover, the background becomes {colors.primary} with a glow (box-shadow: 0 0 32px rgba(209, 80, 236, 0.4)). The secondary button (button-secondary) has a 1px border in {colors.outline} (#555555) with transparent background and gray text (#888888). On hover, the border and text transition to {colors.on-surface} (#ededed) over 0.15s. All buttons use Fira Code at 13px with 0.02em letter-spacing for a technical feel. Transitions are cubic-bezier(0.4, 0, 0.2, 1) with 0.15s duration.

Containers & Surfaces Cards

Do's and Don'ts

**Do**

• Do use the primary purple (#b47fff) exclusively for CTAs, focus states, and brand-critical interactive elements—never on backgrounds or secondary UI.
• Do maintain the 1px border aesthetic for all cards and sections; borders are the primary elevation mechanism, not shadows.
• Do use Fira Code monospace for all UI labels, navigation, and technical metadata to reinforce the command-line aesthetic.
• Do apply glow effects (box-shadow with 0.2–0.4 opacity) to all accent-colored elements to signal cryptographic precision.
• Do preserve the high-contrast dark palette (#0a0a0a background, #ededed text) for maximum readability and technical authority.
• Do use the 40px grid background pattern sparingly and only in hero/section backgrounds; never on cards or contained elements.

**Don't**

• Don't use rounded corners (border-radius > 1rem) on buttons, inputs, or primary content areas—sharp edges signal precision.
• Don't apply shadows as the primary depth mechanism; use borders and glows instead.
• Don't mix Inter and Fira Code in the same UI element; use Inter for content, Fira Code for controls.
• Don't soften the color palette with grays or neutrals; the stark black-and-white contrast with purple accents is the brand identity.
• Don't animate transitions longer than 0.2s; the UI should feel responsive and machine-like, not leisurely.
• Don't use the tertiary green (#28c840) for anything other than live/active status indicators—it is reserved for system health signals.