AdaLink

Overview

AdaLink is a Web3-native affiliate marketing platform purpose-built for the Cardano ecosystem, enabling SPOs (Stake Pool Operators), NFT leaders, influencers, and whales to collaborate transparently and earn ADA rewards. The design aesthetic is "Gradient-Forward Modernism"—a bold, energetic visual language that combines vibrant linear gradients (orange-to-purple spectrum) with a deep navy-black canvas, creating a sense of motion, growth, and technological sophistication. The UI evokes the feeling of a high-performance trading or analytics dashboard, but warmed by the optimistic energy of a Web3 community platform. Every interaction feels intentional and rewarding, reflecting the platform's core mission: connecting stakeholders to drive real delegation growth.

The brand voice is confident, direct, and community-oriented. AdaLink speaks in the language of partnerships and results—no hype, no empty promises. Vocabulary leans toward action verbs (Connect, Collaborate, Grow, Launch, Promote) and concrete metrics (ADA earned, campaigns active, transactions on-chain). The tone is professional yet approachable, never condescending. Example sentence in brand voice: "Launch your campaign in minutes, track real-time results, and earn ADA for every delegation you drive."

Colors

AdaLink's color system is built on a high-contrast, gradient-driven philosophy designed to maximize visual hierarchy and emotional resonance in a dark-mode-first environment. The primary accent is a vibrant electric purple (#6557f9), used exclusively for primary CTAs, focus states, and key interactive elements—this is the brand's signature accent and the most clickable color on the page. The secondary accent is a warm, energetic orange (#fb770b), deployed for secondary actions, highlights, and status indicators to create visual rhythm and prevent monotony. A tertiary magenta (#d04aa7) provides additional accent depth for special states, badges, and decorative elements. The surface stack is anchored in a near-black navy (#111721) for the base, with carefully calibrated container layers (sur

Typography

The typography system is anchored in Gilroy, a geometric sans-serif that conveys modernity and precision while remaining highly legible at all sizes. The type hierarchy is aggressive and intentional: display sizes (60px, 700 weight) are reserved for hero headlines and major section breaks, creating immediate visual impact; headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) establish section structure and card titles; body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle descriptive copy and data labels with generous line-height (28px and 24px respectively) to ensure readability over the dark background; label-md (14px, 600 weight) and label-sm (12px, 600 weight) are used for UI labels, badges, and micro-copy. Letter-spacing is tightened on display and headline siz

Layout

AdaLink uses a fluid 12-column grid with a max-width container of 1280px, allowing the design to breathe on large screens while maintaining focus on medium and small viewports. The page rhythm is driven by the lg spacing token (40px) for major section separation, creating clear visual breaks between hero, stats, features, and footer. The gutter (24px) is used consistently for horizontal padding within containers and between grid columns, ensuring a cohesive rhythm. The hero section occupies full viewport height with a vibrant gradient background, anchoring the user's attention immediately. Stat cards below the hero are arranged in a 4-column grid on desktop, collapsing to 2 columns on tablet and 1 column on mobile, with md spacing (24px) between cards. All body copy uses a max-width of 65-

Elevation & Depth

Depth in AdaLink is conveyed through a layered shadow and border system that creates visual separation without relying on darkness alone. The elevation scale uses three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and micro-interactions; md (0 4px 12px rgba(0, 0, 0, 0.15)) for standard cards, buttons, and interactive elements; lg (0 16px 40px rgba(0, 0, 0, 0.25)) for modals, dropdowns, and elevated surfaces. All cards and containers include a 1px solid border at outline-variant (#4b5563) to define edges and create visual structure. Interactive elements (buttons, input

Shapes

AdaLink employs a "Geometric Precision" shape philosophy, balancing sharp, technical corners with subtle rounding to convey both sophistication and approachability. Buttons and primary interactive elements use lg rounding (1rem / 16px), creating a modern, friendly appearance while maintaining clear affordance. Cards and containers use xl rounding (1.5rem / 24px) for a softer, more inviting feel that encourages exploration. Input fields and form elements use DEFAULT rounding (0.5rem / 8px), striking a balance between technical precision and usability. Badges and micro-components use full roundi

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent height of 48px with padding of 12px 24px to ensure comfortable touch targets on mobile (minimum 44px) and desktop. Primary buttons (button-primary) use the primary purple (#6557f9) background with white text, lg rounding (16px), and md shadow (0 4px 12px rgba(101, 87, 249, 0.3)). On hover, the background elevates to primary-container (#7a6dff) with increased shadow (0 6px 16px rgba(101, 87, 249, 0.4)) and a 200ms ease-out transition. Active/pressed state reduces shadow to sm (0 2px 8px rgba(101, 87, 249, 0.2)) and darkens the background to inverse-primary (#5a4fd9), creating tactile feedback. Secondary buttons use a transparent background with a 2px border in secondary orange (#fb770b) and orange text, w

Do's and Don'ts

**Do**

• Do use the primary purple (#6557f9) exclusively for primary CTAs and focus states—it is the brand's most recognizable accent and should never be diluted or overused.
• Do apply the gradient (orange → magenta → purple) to hero sections and major visual moments to create energy and forward momentum.
• Do maintain the dark surface stack (#111721 base, container layers) for all backgrounds to ensure the brand's sophisticated, Web3-native aesthetic.
• Do use Gilroy at 700 weight for all headlines and 400 weight for body copy to maintain the geometric, modern character of the brand.
• Do apply md or lg shadows (0 4px 12px or 0 16px 40px) to cards and elevated surfaces to create clear visual hierarchy without relying on color alone.
• Do use the full rounded pill shape (9999px) for badges and micro-components to create a lightweight, contemporary feel.

**Don't**

• Don't use the secondary orange (#fb770b) or tertiary magenta (#d04aa7) as primary CTAs—reserve these for secondary actions and accents only.
• Don't apply shadows lighter than sm (0 1px 2px) to primary interactive elements; the platform requires clear visual separation and depth.
• Don't use system fonts or generic sans-serifs; Gilroy is the brand's typographic anchor and must be used for all headings and UI labels.
• Don't reduce border-radius below DEFAULT (8px) on cards or containers; the brand's geometric precision requires consistent, intentional rounding.
• Don't apply text-shadow or blur effects to body copy; maintain legibility by using high-contrast color pairs (white on dark surfaces) and generous line-height.
• Don't mix light and dark mode surfaces in the same layout; AdaLink is dark-mode-first and should never default to light backgrounds for primary content.