Layer V

Overview

Layer V is an institutional-grade decentralized options exchange built for precision and scale. The design system embodies 'Technical Minimalism'—a philosophy that strips away visual noise to expose pure functionality, using a deep navy canvas (#010514) as the foundation and electric blue (#0270a8, #93c5fd) as the signature accent that signals actionable intelligence. The interface serves professional traders and protocol developers who demand clarity, speed, and self-custody; every pixel is intentional, every interaction is reversible, and every color choice maps to a specific semantic meaning (primary for CTAs and active states, secondary for critical alerts, tertiary for neutral metadata). The emotional response is one of calm confidence: the dark background reduces cognitive load, the monospace typography (Geist Mono) reinforces technical credibility, and the minimal use of glass-morphic surfaces (backdrop-filter: blur(12px), rgba backgrounds at 0.4–0.6 opacity) creates depth without distraction.

The brand voice is precise, unadorned, and unapologetic. Vocabulary favors technical terms ('liquidity layer', 'protected leverage', 'self-custodial') over marketing flourish. Tone is direct and matter-of-fact—no breathless enthusiasm, no unnecessary adjectives. Example sentence in brand voice: 'Execute options with 1:1 leverage protection, earn premium upfront, or hedge with institutional-grade instruments—all without intermediaries.'

Colors

Color strategy in Layer V follows a 'Signal-First' hierarchy: the primary accent (#0270a8 and its lighter variant #93c5fd) is reserved exclusively for call-to-action buttons, active navigation states, and focus indicators—it is the color users learn to click. The deep navy surface (#010514, rgb(1, 5, 20)) serves as the immersive canvas, reducing eye strain during extended trading sessions and creating a premium, technical aesthetic. Secondary blue (#0000d1) is deployed for critical alerts, status badges, and secondary CTAs to create visual separation without competing for attention. The surface stack is deliberately minimal: surface-container-lowest (#050809) for the deepest recesses, surface-container (#151b2a) for standard card backgrounds, and surface-container-highest (#2a3040) for ele

Typography

The type system pairs Saira (a geometric, high-contrast sans-serif) for display and headline scales with Geist (a humanist sans-serif) for body and interface text, and Geist Mono for labels and technical metadata. This pairing creates a visual hierarchy that guides the eye: Saira's 60px display weight (300 font-weight, -0.02em letter-spacing) commands attention on hero sections, while Geist's 16px body-md (400 weight, 24px line-height) ensures readability during rapid scanning of trading data. Geist Mono at 14px (label-md) reinforces the technical nature of the product—users subconsciously associate monospace with code, precision, and institutional credibility. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) to small labels (label-sm, 12px) when placed over busy backgrounds or glass surfac

Layout

Layer V uses a 12-column grid with a 1280px container max-width, maintaining a fluid layout on mobile (100vw with 24px gutter) and fixed on desktop. The spacing scale is semantic: xs (4px) for micro-interactions and icon padding, sm (12px) for input fields and tight component spacing, md (24px) for section padding and card interiors, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to all horizontal edges, creating a breathing room that prevents the interface from feeling cramped despite the dark background. White-space is aggressive: sections are separated by lg spacing (40px) minimum, and cards within sections use md spacing (24px) for internal padding. This rhythm reinforces the 'Technical Minimalism' aesthe

Elevation & Depth

Depth in Layer V is achieved through a restrained glass-morphic layer stack, not through traditional shadows. Level 1 (Base) is the raw navy surface (#010514) with optional subtle grain texture (opacity 0.02–0.04). Level 2 (Standard Card) applies backdrop-filter: blur(12px), background: rgba(34, 38, 57, 0.4), and a 1px border at rgba(127, 141, 155, 0.1), paired with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal) increases blur to 20px, raises background opacity to 0.6, and applies box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2). Hover states on cards transition the background to

Shapes

The shape philosophy is 'Architectural Precision'—sharp, intentional, and minimal. Buttons use a 3.2px border-radius (a non-standard value that feels precise and technical, avoiding the 'rounded' cliché of 8px or 16px). Cards and elevated surfaces use 1rem (16px) for a subtle softness that prevents the interface from feeling austere. Input fields use the DEFAULT radius (0.5rem / 8px) for a neutral, functional appearance. The full radius (9999px) is reserved for badges and pill-shaped elements to create visual distinction. This graduated approach—sharp buttons, slightly rounded cards, fully rou

Components

Action Elements Buttons are the primary interaction mechanism and must be visually distinct. Primary buttons use background: {colors.primary} (#0270a8), text-color: white, and a 3.2px border-radius with padding: 12px 24px and height: 40px. On hover, transition the background to {colors.primary-fixed-dim} (#5a9fd4) over 200ms using cubic-bezier(0.2, 0, 0.38, 0.9). On active/pressed, shift to {colors.secondary} (#0000d1) to signal a state change. Secondary buttons are transparent with a 1px border at {colors.primary}, text-color: {colors.primary}, and the same padding/height. On hover, fill the background with {colors.surface-container-high} (#1f2535) while maintaining the border. All buttons must have a visible focus state: a 3px ring at rgba(2, 112, 168, 0.1) offset by 2px.

Contai

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0270a8) exclusively for CTAs, active states, and focus indicators—it is the brand's signature accent and must remain visually distinct.
• Do apply glass-morphic surfaces (backdrop-filter: blur(12px), rgba backgrounds at 0.4–0.6 opacity) only to elevated cards and modals; keep the base surface flat and dark.
• Do maintain the 24px gutter on all horizontal edges and use lg spacing (40px) for major section separation to create breathing room.
• Do use Geist Mono (monospace) for labels, badges, and technical metadata to reinforce institutional credibility and precision.
• Do transition all interactive elements over 200ms using cubic-bezier(0.2, 0, 0.38, 0.9) to create a smooth, professional feel.

**Don't**

• Don't use rounded corners larger than 1rem on cards or surfaces—the aesthetic is architectural precision, not soft and approachable.
• Don't apply shadows larger than 0 8px 16px rgba(0, 0, 0, 0.2)—Layer V uses glass-morphism and subtle depth, not dramatic drop shadows.
• Don't use colors outside the defined palette for CTAs or interactive elements; secondary blue (#0000d1) is reserved for alerts and critical states only.
• Don't apply text-shadow or text-stroke to body text; reserve these effects for small labels over busy backgrounds only.
• Don't use font-weight above 600 for any text; the system relies on size and spacing for hierarchy, not weight.