1inch

Overview

1inch is a decentralized exchange aggregator that simplifies cross-chain token swaps across 13+ blockchain networks. The design system embodies "Precision Minimalism"—a philosophy that strips away visual noise to expose only what matters: clear information hierarchy, trustworthy interaction patterns, and frictionless transaction flows. The brand serves crypto-native users and institutional traders who demand speed, transparency, and control. The UI voice is direct and technical without being cold: confident, matter-of-fact, and occasionally playful. Example: "Zero gas fees. MEV protection. The best rates on your token swap."

Colors

The color palette is anchored in a near-monochromatic light foundation (surface #F7F7FA, on-surface #141417) that conveys institutional trust and clarity. Primary (#000000) is the signature action color—used exclusively on CTAs, active states, and critical interactive elements. It commands attention through contrast, not saturation. Secondary (#1F3DFE) is a vibrant blue reserved for accent highlights, status indicators, and secondary CTAs; it appears sparingly to maintain visual hierarchy. Tertiary (#F97000) is an energetic orange used for warnings, special promotions, and tertiary actions. The surface stack progresses from #FAFAFC (container-lowest) through #F7F7FA (base) to #DCDCE0 (container-highest), creating subtle depth without dark-mode complexity. Outline colors (#76777A for primar

Typography

The type system uses Suisse Intl exclusively, a geometric sans-serif that communicates precision and modernity. Display (72px, weight 500, line-height 72px) anchors hero sections with commanding presence. Headline-lg (32px, weight 500) and headline-md (24px, weight 500) structure page sections and modal titles. Body text uses two weights: body-lg (18px, weight 400, line-height 24px) for prominent copy and body-md (16px, weight 400, line-height 24px) for standard content. Labels are set at 14px (label-md, weight 500) for buttons and interactive elements, with a smaller 12px variant (label-sm) for badges and captions. Monospace (Suisse Int'l Mono, 16px, weight 400) is reserved for wallet addresses, transaction hashes, and numeric data in swap forms. All typography uses 0em letter-spacing (no

Layout

The layout system uses a 12-column grid with a max-width of 1260px, centered on the viewport. Spacing follows a 4px base unit: xs (4px), sm (8px), md (16px), lg (24px), xl (40px), xxl (64px). Horizontal gutters are set to 20px on desktop, collapsing to 8px on mobile. Section separation uses lg spacing (24px) for breathing room between major content blocks. The swap widget and form inputs are centered in a card container with 16px internal padding and 1px border in outline-variant (#C8C8CC). White-space is generous—avoid cramping elements; use md spacing (16px) as the minimum gap between interactive components. Container padding follows the gutter value (20px) on all sides, ensuring consistent margins from the viewport edge.

Elevation & Depth

Depth is achieved through subtle shadows and border definition rather than dramatic layering. Level 1 (Base): flat surfaces with no shadow, using only a 1px border in outline-variant (#C8C8CC) to define edges. Level 2 (Cards, Input Fields): box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), paired with a 1px border. Level 3 (Modals, Dropdowns): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), with a 1px border in outline-variant. Hover states elevate cards from Level 2 to Level 3 via shadow transition (150ms ease-out). Focus states on inputs add a 3px inset shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) to indicate

Shapes

The shape philosophy is "Technical Softness"—rounded corners are used strategically to soften the precision of the interface without sacrificing clarity. Buttons use xl radius (28px) to create pill-shaped affordances that feel approachable and clickable. Cards and modals use lg radius (20px) for a balanced, modern appearance. Input fields and smaller containers use DEFAULT radius (8px) to maintain visual consistency with form elements. Dividers and separators remain sharp (0px) to define structure crisply. The full radius (9999px) is reserved for badges, toggles, and circular indicators. This

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #000000 background with #FFFFFF text, 12px 24px padding, 44px height, and 28px border-radius. On hover, the background transitions to primary-container (#353538) with on-primary-container text (#F7F7FA) over 150ms ease-out. Disabled state reduces opacity to 50% and uses surface-container-high background. Button-secondary mirrors the primary structure but uses a white background (#FFFFFF) with a 1px border in outline-variant (#C8C8CC) and primary text (#000000). Button-ghost has transparent background with primary text and no border; on hover, it gains a surface-container-low background (#F7F7FA). All buttons use label-md typography (14px, weight 500) and include a 2px focus ring (0 0 0 2px {colors.primary}

Do's and Don'ts

**Do**

• Do use primary (#000000) exclusively for CTAs and critical interactive states—it is the brand's signature accent and must remain visually distinct.
• Do apply lg spacing (24px) between major sections and md spacing (16px) between components to maintain breathing room and visual hierarchy.
• Do use Suisse Intl for all typography; reserve Suisse Int'l Mono only for wallet addresses, transaction hashes, and numeric data in forms.
• Do transition all interactive states (hover, focus, active) over 150ms using ease-out timing to feel responsive without appearing jarring.
• Do pair buttons with secondary CTAs using button-secondary (white background, primary text, border) to create clear visual hierarchy without competing for attention.

**Don't**

• Don't use secondary (#1F3DFE) or tertiary (#F97000) as primary action colors—they are supporting accents and will dilute the brand's visual authority.
• Don't add drop shadows larger than lg elevation (0 8px 16px rgba(0, 0, 0, 0.12))—the design system prioritizes clarity over depth layering.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; this reduces affordance clarity and feels unfinished.
• Don't apply letter-spacing adjustments to any typography—Suisse Intl's metrics are optimized for 0em tracking and any deviation breaks the rhythm.
• Don't mix font families; system-ui fallbacks are acceptable only when Suisse Intl fails to load, never as a deliberate design choice.