DexHunter

Overview

DexHunter is a real-time DEX aggregator built for Cardano traders who demand precision, speed, and transparency. The design system embodies a "Technical Clarity" aesthetic: a dark canvas (#080808) with high-contrast overlays, vibrant accent colors (#007dff primary, #4ade80 success, #ff6b6b error), and a dense information hierarchy that surfaces critical data—prices, volumes, spreads, and execution status—without visual noise. The brand personality is direct, data-driven, and uncompromising: every pixel serves the trader's decision-making process. Voice: precise, urgent, never decorative. Example: "Swap 15 NIGHT for 2.1 ADA at 0.136526 — 0.44% slippage, 120K liquidity, execute now."

Colors

The color system is built on a deep dark foundation (surface #080808, surface-dim #050505) that reduces eye strain during extended trading sessions and provides maximum contrast for real-time data visualization. Primary (#007dff) is the brand's signature accent—used exclusively for CTAs ("Buy", "Swap", "Connect Wallet"), active states, and focus indicators. It appears at rgba(0, 125, 255, 0.2) on button backgrounds and rgba(0, 125, 255, 0.1) on input focus states, creating a layered depth without sacrificing legibility. Secondary (#4ade80) and its darker variant (#3cc96e) are reserved for positive outcomes: successful transactions, bullish price movements, and buy signals. Error (#ff6b6b) and its container (#e55a5a) flag losses, failed swaps, and sell signals. Tertiary (#fbbf24) and orange

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that conveys technical precision and modern efficiency. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and token pair headers. Headline-lg (32px, 600 weight) titles major sections like "Trade History" and "Order Book". Body-md (16px, 400 weight, 24px line-height) is the workhorse for transaction details, prices, and descriptions. Label-md (14px, 500 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) are used for badges, timestamps, and UI chrome. All text over busy backgrounds (charts, gradients) receives a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) to ensure readability. Font weights are strictly enforced: 400 for body copy, 500 for labels and secondary CTAs, 600 for sectio

Layout

The layout uses a 12-column grid with a max-width of 1440px, accommodating both desktop trading terminals and responsive tablet views. The primary trading interface is split into a left sidebar (navigation, token search, 200px fixed width) and a main content area (charts, order book, swap panel). Spacing follows a strict 8px unit system: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section separation, lg (40px) for major layout divisions, and xl (64px) for page-level margins. The swap panel (right sidebar, 360px) uses md spacing (24px) for card padding and sm (12px) for input field margins. Container max-width of 1440px ensures readability on ultra-wide displays without excessive line lengths. White-space is minimal but intentional: every gap

Elevation & Depth

Depth is conveyed through a three-level shadow system and border definition, not through color gradients or opacity shifts. Level 1 (Base): no shadow, 1px solid outline at #27292c. Level 2 (Cards, Inputs): box-shadow 0 4px 12px rgba(0, 0, 0, 0.16), 1px solid outline. Level 3 (Modals, Dropdowns): box-shadow 0 8px 24px rgba(0, 0, 0, 0.2), 1px solid outline. Focus states add an additional layer: input-field-focus receives a 3px inset box-shadow at rgba(0, 125, 255, 0.1) to signal interactivity without breaking the dark aesthetic. Hover states shift the background color (surface-container to surfa

Shapes

The shape philosophy is "Functional Geometry": rounded corners are used sparingly and purposefully to signal interactivity and reduce visual harshness without introducing organic softness. Buttons use lg radius (1rem / 16px) to create a modern, approachable CTA feel. Cards and modals use lg (1rem) for consistency. Input fields use DEFAULT radius (0.5rem / 8px) to maintain a technical, grid-aligned appearance. Badges and pills use full radius (9999px) to create visual distinction from rectangular containers. Chart elements and list items use md radius (0.75rem / 12px) as a middle ground. No ele

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (backgroundColor: #007dff, height: 40px, padding: 8px 16px, rounded: 1rem) is used exclusively for primary CTAs: "Buy", "Swap", "Connect Wallet". On hover, the background shifts to primary-container (#0066cc) with a 150ms ease transition. Button-secondary (backgroundColor: rgba(0, 125, 255, 0.2), border: 1px solid #27292c) is used for secondary actions like "Cancel" or "View Details". Button-ghost (backgroundColor: transparent, textColor: #007dff) is used for tertiary actions and inline links. All buttons enforce a minimum height of 40px and use label-md typography (14px, 500 weight). Focus states add a 3px outline at primary color.

Containers & Surfaces Cards (backgroundColor: #1e1f26, rounded: 1rem, pa

Do's and Don'ts

**Do**

• Do use primary (#007dff) exclusively for CTAs and active states—never for decorative elements or backgrounds.
• Do maintain a minimum contrast ratio of 7:1 between text and background for all body copy, per WCAG AAA standards.
• Do apply the 8px spacing unit consistently: never use arbitrary pixel values like 13px or 18px for margins and padding.
• Do use Montserrat at 400, 500, 600, or 700 weight only—no intermediate weights or font-family fallbacks.
• Do add a 1px solid outline at #27292c to all cards, inputs, and modals to define boundaries without relying on shadows alone.
• Do transition all interactive state changes (hover, focus, active) over 150ms using cubic-bezier(0.4, 0, 0.2, 1) easing.
• Do use secondary (#4ade80) and error (#ff6b6b) exclusively for status indicators—never for primary CTAs or backgrounds.

**Don't**

• Don't use near-black or near-white colors (#000000, #ffffff) for text or backgrounds—use the defined surface and on-surface tokens instead.
• Don't apply box-shadows to more than two layers of depth; use border and background color shifts instead to maintain visual clarity.
• Don't use rounded corners smaller than 0.5rem (8px) except for micro-UI elements like icon containers or close buttons.
• Don't mix font families or use system-ui, sans-serif, or inherit as fallbacks—Montserrat is the only permitted typeface.
• Don't create custom color values outside the defined palette; all colors must reference a token from the colors object.
• Don't use opacity or transparency for primary CTAs or critical data; use solid colors from the palette instead.
• Don't apply text-shadow or text-stroke to body copy; reserve these effects for text over busy backgrounds (charts, gradients) only.