Lighter

Overview

Lighter is a decentralized perpetuals exchange built on Ethereum L2, engineered for institutional-grade trading with zero fees and verifiable matching via custom ZK circuits. The design system embodies 'Technical Minimalism'—a philosophy that strips away decorative elements to expose pure function, using a dark canvas (#06060c) as the foundation for high-contrast, precision-focused interactions. The brand personality is uncompromising and technical: every pixel serves the trader's need for speed, clarity, and trust. The UI evokes the aesthetic of a command-line interface meets modern fintech—monospace accents, minimal ornamentation, and a vivid cyan accent (#0099ff) that signals actionable moments without distraction. Voice: direct, data-driven, never casual. Example: 'Execute perpetuals with zero slippage. Verify every trade on-chain.'

Colors

The color system is built around a near-black surface (#06060c) that maximizes contrast and reduces eye strain during extended trading sessions. Primary (#0099ff) is the signature cyan accent used exclusively for call-to-action buttons, active states, and critical interactive elements—it commands attention without aggression. Secondary (#5fe0ac) provides a soft, approachable green for success states and positive indicators, while tertiary (#ff6072) signals warnings and error states with a muted coral. The on-surface palette (#aebce5 for primary text, #9eb6ff for secondary text) is calibrated for WCAG AAA compliance over the dark background. Borders use white at 5–14% opacity (rgba(255, 255, 255, 0.05) to rgba(255, 255, 255, 0.14)) to create subtle visual separation without introducing new

Typography

The type system pairs Inter Display (400 weight, 42px, -0.015em tracking) for hero headlines with Inter (600 weight, 20px) for section titles, creating a visual rhythm that balances display-scale impact with readable body copy. Body text uses Inter at 16px with 24px line-height and 0.01em tracking, ensuring legibility at any zoom level. Monospace accents (Geist Mono, 14px, 500 weight, 0.02em tracking) are reserved for technical labels, data values, and code snippets—reinforcing the precision-engineering brand voice. All interactive labels use Geist Mono at 12–14px with 0.02–0.03em letter-spacing to create a 'command' aesthetic. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) on small labels (12px) when placed over busy backgrounds or glass surfaces to maintain legibility without increasing

Layout

The layout operates on a 12-column grid with a max-width of 1600px, using 24px gutters for desktop and 12px for tablet. The spacing scale (4px unit, 12px sm, 24px md, 40px lg, 64px xl) is applied semantically: section separation uses lg spacing (40px), component padding uses md (24px), and internal element spacing uses sm (12px). The hero section spans full-width with a centered content container, using 64px vertical padding (xl spacing) to create breathing room around the primary CTA. Cards and glass surfaces use 24px padding (md) with 12px internal gaps between elements. White-space is treated as a design material—negative space around the primary button (#0099ff) is never less than 40px to ensure it remains the focal point. Container queries are preferred over media breakpoints to maint

Elevation & Depth

Depth is conveyed through a combination of backdrop-filter blur, border opacity, and subtle shadows rather than heavy drop-shadows. Level 1 (Base): the background is a solid #06060c with optional grain texture (opacity 2–3%) to add tactile quality. Level 2 (Standard Card/Glass): backdrop-filter: blur(12px), background: rgba(0, 0, 0, 0.3), border: 1px solid rgba(255, 255, 255, 0.08), box-shadow: 0 2.28853px 0.915413px -1.66667px rgba(6, 6, 12, 0.25). Level 3 (Modal/Elevated): backdrop-filter: blur(20px), background: rgba(0, 0, 0, 0.4), border: 1px solid rgba(255, 255, 255, 0.12), box-shadow: 0

Shapes

The shape philosophy is 'Architectural Precision'—sharp, minimal corner radii that evoke technical tooling and command-line interfaces. Buttons and inputs use 2px radius (sm), creating a subtle softness without compromising the technical aesthetic. Cards and glass surfaces use 8px radius (md) to provide visual distinction from interactive elements while remaining geometric. Modals and large containers use 12px radius (lg) to signal importance and containment. The full radius (9999px) is reserved for badges and micro-interactions (e.g., avatar circles, toggle switches). This hierarchy ensures t

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use background: {colors.primary} (#0099ff), padding: 12px 24px, height: 44px, border-radius: 2px, and typography: Geist Mono 14px 500 weight. On hover, shift to #0066cc and add box-shadow: 0 0 16px rgba(0, 153, 255, 0.3) with a 200ms transition. Secondary buttons use a transparent background with border: 1px solid rgba(255, 255, 255, 0.1) and on-hover shift to rgba(255, 255, 255, 0.05) background with border: 1px solid rgba(255, 255, 255, 0.2). Ghost buttons (minimal CTAs) use no background, no border, and text-color: {colors.primary}, with underline appearing on hover. All buttons must have a minimum touch target of 44px height and 44px width to meet accessibility standa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0099ff) exclusively for primary CTAs and active states—it is the brand's signature accent and must never be diluted or overused.
• Do apply 24px (md spacing) padding to all cards and containers; this creates consistent visual rhythm and breathing room.
• Do use Geist Mono for all technical labels, data values, and monospace accents to reinforce the precision-engineering brand voice.
• Do maintain a minimum 44px touch target for all interactive elements to meet WCAG accessibility standards.
• Do layer glass surfaces with backdrop-filter: blur(12px) and a 1px border at rgba(255, 255, 255, 0.08) to create depth without relying on shadows.
• Do use the surface container stack (surface-container-low, surface-container, surface-container-high) to create a 6-step visual hierarchy for nested components.

**Don't**

• Don't use primary (#0099ff) for non-interactive elements, backgrounds, or decorative accents—reserve it exclusively for actionable moments.
• Don't apply border-radius: 0 (hard corners) to any interactive element; use 2px (sm) minimum to maintain the technical-minimalist aesthetic.
• Don't exceed 20px blur on backdrop-filter; values above this reduce legibility and create a 'frosted' effect that conflicts with the precision brand voice.
• Don't use drop-shadows (box-shadow with large blur and spread) as the primary depth mechanism; rely on border opacity, backdrop-filter, and background opacity instead.
• Don't mix typefaces within a single component; use Inter for body/headlines and Geist Mono for labels/data, never both in the same text block.
• Don't apply opacity changes to primary (#0099ff) for hover states; instead, shift to the darker variant (#0066cc) and add a glow effect for visual feedback.