Data Axle

Overview

Data Axle is a B2B/B2C data intelligence and marketing solutions platform that empowers enterprises to transform raw customer insights into measurable business outcomes. The brand operates in the intersection of pragmatic data science and human-centered marketing—helping companies acquire, retain, and understand their customers at scale. The aesthetic is "Confident Pragmatism": a clean, modern interface that prioritizes clarity and actionability over decoration. The visual language combines a vibrant golden-yellow primary accent (#fdb913) with a cool secondary blue (#00a0dc) against a crisp white canvas, creating a sense of optimism and forward momentum. The typography pairing of Poppins (headlines, CTAs) and Roboto (body, data) reinforces the brand's dual nature: creative strategy meets technical precision.

The brand voice is direct, authoritative, and solution-focused—never hype-driven or vague. Data Axle speaks to business leaders and marketing practitioners who demand concrete results. The tone avoids jargon where possible, favoring clear, outcome-oriented language. Example: "Turn data into meaningful connections" (not "leverage synergies" or "unlock potential"). The visual hierarchy and component design reflect this ethos: every element serves a function, every color choice signals intent, and every interaction feels responsive and trustworthy.

Colors

The color system is built on a foundation of trust and energy. Primary (#fdb913) is the brand's signature accent—a warm, optimistic golden-yellow used exclusively on call-to-action buttons, key interactive elements, and brand moments that demand attention. It appears on the "Contact sales" button in the header and the "Start growing" CTA in the hero, signaling forward momentum and opportunity. Secondary (#00a0dc) is a cool, professional cyan-blue that supports the primary and is used for links, secondary CTAs, hover states, and data visualization accents. It provides visual contrast and conveys technical sophistication. Tertiary (#3c4456) is a muted slate-gray used for supporting text, icons, and secondary UI elements—it grounds the palette and prevents the design from feeling too bright.

Typography

The type system reflects Data Axle's dual identity: Poppins (300–900 weights) handles all headlines, labels, and CTAs, bringing warmth and approachability to brand moments. Roboto (300–500 weights) carries body copy, data labels, and interface text, providing clarity and technical credibility. Display (60px, Poppins 700, -0.04em letter-spacing) is reserved for hero headlines and major page titles; it commands attention without shouting. Headline-lg (40px, Poppins 600, -0.02em) is used for section headers and key messaging. Body-lg (18px, Roboto 400, 0.01em) and body-md (16px, Roboto 400, 0.01em) carry narrative content and form descriptions. Label-md (14px, Poppins 600, 0.01em) is applied to button text, form labels, and badge content—the weight ensures legibility at smaller sizes. All bod

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing flexibility for both desktop and tablet layouts. The gutter is set to 24px, creating breathing room between columns and sections. Spacing follows a semantic scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for compact component padding, md (24px) for standard section margins and card padding, lg (40px) for major section separation, and xl (64px) for hero and full-width section spacing. The hero section uses lg spacing (40px) for vertical rhythm, with the headline and supporting copy stacked at 24px intervals. Container padding is consistently md (24px) on tablet and lg (40px) on desktop, ensuring content never feels cramped. White-space is treated as a first-class design element—sections are sep

Elevation & Depth

Depth in the Data Axle system is achieved through subtle layering and shadow, not through dark overlays or extreme contrast shifts. The elevation scale uses three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for resting state cards and input fields, md (0 4px 12px rgba(0,0,0,0.08)) for hovered cards and modals, and lg (0 16px 40px rgba(0,0,0,0.12)) for floating elements like sticky headers or dropdown menus. Cards at rest use sm elevation and a 1px border in outline-variant (#cccccc) to define their boundary without visual weight. On hover, cards transition to md elevation (200ms ease-out) and thei

Shapes

The shape philosophy is "Soft Technical"—rounded corners are used strategically to soften the interface while maintaining a professional, data-driven aesthetic. Buttons use full rounding (border-radius: 9999px) to create a pill shape that feels friendly and clickable; this applies to both primary (#fdb913) and secondary (transparent with border) buttons. Cards and panels use md rounding (0.75rem / 12px) to provide subtle definition without appearing overly playful. Input fields use DEFAULT rounding (0.5rem / 8px) to balance usability (easier to tap on mobile) with a clean, modern appearance. B

Components

Action Elements Buttons are the primary interaction mechanism and must be highly visible. The primary button uses {colors.primary} (#fdb913) with {colors.on-primary} text (#221f20), Poppins 500 at 16px, full rounding (9999px), and padding of 9.5px 19px. On hover, the background transitions to {colors.primary-fixed-dim} (#e6a300) over 200ms with ease-out timing. The secondary button uses a transparent background with a 2px border in {colors.secondary} (#00a0dc), Poppins 500 at 16px, lg rounding (1rem), and md padding (24px). On hover, the background fills with {colors.secondary-container} (#b3d9f0) and text shifts to {colors.on-secondary-container} (#003d5c). Both button variants include a focus state with a 3px outline in rgba(0, 160, 220, 0.2) for keyboard navigation accessibility.

#

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fdb913) exclusively on primary CTAs and brand-defining moments—it should feel rare and valuable, not ubiquitous.
• Do maintain at least 24px of vertical spacing (md or lg) between major sections to allow content to breathe and improve scannability.
• Do apply Poppins 600+ weights to all interactive elements (buttons, links, form labels) to signal clickability and hierarchy.
• Do use the full rounding (9999px) on all buttons and badges to create visual consistency and reduce cognitive load.
• Do test all color combinations against WCAG AA contrast standards (4.5:1 for body text, 3:1 for large text) to ensure accessibility.
• Do use the secondary blue (#00a0dc) for hover states, focus rings, and secondary CTAs to create a cohesive interactive language.

**Don't**

• Don't use {colors.primary} (#fdb913) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and brand moments only.
• Don't apply shadows heavier than lg elevation (0 16px 40px rgba(0,0,0,0.12)) as it creates visual clutter and reduces clarity.
• Don't mix Poppins and Roboto weights arbitrarily; use Poppins for headlines/labels and Roboto for body/data to maintain the dual-identity aesthetic.
• Don't use sharp corners (0px radius) on interactive elements or cards—the brand uses soft technical rounding (md or full) to feel approachable.
• Don't reduce padding below sm (12px) on buttons or cards; the brand values breathing room and clear visual definition.
• Don't apply color overlays darker than rgba(0,0,0,0.3) on hero images—maintain image legibility and avoid a heavy, oppressive feel.