Axiom

Overview

Axiom is a high-velocity DeFi trading platform built for Solana, embodying a design philosophy of **Technical Minimalism**—where every pixel serves function, and visual noise is eliminated in favor of precision and speed. The brand aesthetic is deliberately austere: a near-black canvas (#06070b) paired with a vivid indigo accent (#526fff) that commands attention on CTAs and interactive states. The emotional response is one of confidence and control; users feel they are operating professional-grade infrastructure, not a consumer app. The voice is direct, technical, and unadorned—no marketing flourish, no reassurance. Example: "Solana perpetuals with sub-millisecond fills." The typography system uses Geist, a geometric sans-serif that conveys modernity without ornamentation, and the spacing is tight (12px gutters, 24px section breaks) to reflect the density and efficiency of a trading terminal.

Colors

The color system is built on a dark-first foundation with a single, powerful accent. **Primary (#526fff)** is the brand's signature indigo—used exclusively on Call-To-Action buttons (Login, Sign Up, Start Trading), focus states, and active indicators. It appears infrequently but with maximum impact, creating a visual hierarchy that guides users toward conversion. **Secondary (#97a8ff)** is a lighter, desaturated indigo used for supporting UI elements, hover states on secondary buttons, and secondary text callouts. **Tertiary (#2fbfac)** is a teal accent reserved for status indicators, success states, and accent highlights in data visualization. The **surface stack** progresses from the base background (#06070b) through increasingly lighter container layers (#1b1b1d → #22242d → #2d3449), cr

Typography

The type system uses Geist across all scales, a geometric sans-serif that balances technical precision with approachability. **Display (61px, 500 weight)** is reserved for hero headlines like "The Gateway to DeFi," set with -0.02em letter-spacing to tighten the letterforms and convey density. **Headline-lg (40px, 600 weight)** and **Headline-md (28px, 600 weight)** are used for section titles and modal headers, maintaining the -0.01em to -0.015em spacing to preserve the technical aesthetic. **Body-md (16px, 400 weight)** is the primary reading size for UI copy and descriptions, with 24px line-height (1.5x) for comfortable scanning. **Label-md (14px, 600 weight)** is applied to button text, form labels, and small UI callouts, with 0.01em letter-spacing to maintain clarity at small sizes. Wh

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with a 40px (lg spacing) margin on desktop, collapsing to 24px (md spacing) on tablet and 12px (sm spacing) on mobile. Section separation uses 64px (xl spacing) vertically, creating clear rhythm and allowing the eye to rest between content blocks. The gutter between grid columns is 24px (md spacing), and card padding is consistently 24px to create visual harmony. White-space is treated as a design material: negative space around CTAs is generous (40px minimum clearance), and form inputs are spaced 24px apart vertically. The container max-width of 1280px ensures content remains scannable on ultra-wide displays without forcing excessive line lengths. All spacing val

Elevation & Depth

Depth in Axiom is conveyed through **subtle layering and precise borders**, not dramatic shadows. The design avoids the soft, diffuse shadows of Material Design in favor of a flatter, more technical aesthetic. **Level 1 (Base)**: The background is a solid #06070b with no texture or gradient. **Level 2 (Standard Card)**: Cards use a 1px solid border at rgba(34, 36, 45, 1) (#22242d) and a background of #1b1b1d, with a minimal shadow of 0 1px 2px rgba(0, 0, 0, 0.06) for micro-separation. **Level 3 (Elevated/Modals)**: Modals and popovers use a 1px border at rgba(82, 111, 255, 0.3) (primary with 3

Shapes

The shape philosophy is **Functional Precision**: rounded corners are used sparingly and purposefully, never for decoration. **Buttons** use border-radius: 9999px (full), creating pill-shaped containers that feel modern and clickable while maintaining a technical edge. **Cards and containers** use border-radius: 1rem (16px), a moderate radius that softens the geometry without appearing playful or organic. **Input fields** use border-radius: 0.5rem (8px), a subtle radius that distinguishes them from cards while maintaining visual consistency. **Modals and popovers** use border-radius: 1.5rem (2

Components

Action Elements **Button-primary** (#526fff background, #fcfcfc text, 40px height, 12px 24px padding, 9999px radius) is the primary CTA. On hover, the background transitions to #6680ff (a 10% lighter shade) over 150ms, signaling interactivity without breaking the minimal aesthetic. On active/pressed, the background darkens to #3d4fb8 (primary-container), providing tactile feedback. The button uses label-md typography (14px, 600 weight) and no border. **Button-secondary** uses a transparent background with a 1px border at outline (#777d88), the same 40px height and padding, and primary text color. On hover, the background fills with surface-container-high (#22242d) and the border brightens to primary (#526fff), creating a clear state change. Both buttons use transition: background-color

Do's and Don'ts

**Do**

• Do use primary (#526fff) exclusively on CTAs and active states—it should feel rare and powerful, not decorative.
• Do maintain 24px (md spacing) as the default section separator and card padding to create visual rhythm.
• Do apply 1px borders at outline or outline-variant tokens to define card and input boundaries; avoid relying on shadows for separation.
• Do use Geist at 400 weight for body text and 600 weight for headings and labels; avoid intermediate weights.
• Do transition interactive states (hover, focus, active) over 150ms using ease-in-out timing to feel responsive without being jarring.
• Do use the full surface-container stack (#1b1b1d → #22242d → #2d3449) to create subtle depth without introducing new colors.

**Don't**

• Don't use soft, diffuse shadows (box-shadow: 0 8px 32px) to create depth—rely on borders and the surface-container stack instead.
• Don't apply border-radius: 0 to any interactive element; even inputs should use 0.5rem for visual softness.
• Don't mix Geist with system fonts or fallbacks in component styles; always specify the full font-family chain.
• Don't use secondary (#97a8ff) or tertiary (#2fbfac) on primary CTAs—these are supporting colors and will dilute the brand accent.
• Don't exceed 1280px container width on desktop; content becomes hard to scan and the technical aesthetic is lost.
• Don't animate state changes faster than 150ms or slower than 300ms; the interface should feel responsive but not frenetic.