Adymize

Overview

Adymize is a performance-driven digital marketing agency brand system rooted in **Gradient Modernism**—a design philosophy that merges vibrant color transitions with precision typography to communicate expertise, energy, and trustworthiness. The visual language combines deep blues (#2e56a7), luminous purples (#bb6de5), and ethereal lavenders (#c4a2fc) in carefully orchestrated gradients that evoke both technical sophistication and creative dynamism. The brand serves ambitious e-commerce and SaaS companies seeking transparent, data-backed marketing strategies. The UI conveys calm confidence: every interaction feels intentional, every color choice deliberate. Voice: direct, results-oriented, never hyperbolic. Example sentence: "We've optimized 511+ brands' ad spend—let's audit yours in 20 minutes."

Colors

The Adymize color system is built on a **gradient-first hierarchy** where primary blue (#2e56a7) anchors trust and authority, while secondary purple (#bb6de5) and tertiary violet (#7f5bc4) create visual momentum and highlight key actions. Primary (#2e56a7) is deployed on all CTAs, active navigation states, and data-critical UI elements—it reads as professional and clickable. Secondary (#bb6de5) accents supporting features, testimonial highlights, and decorative underlines; it softens the primary's intensity without diluting brand recognition. Tertiary (#7f5bc4) bridges the two, used in badges, accent borders, and hover states. The surface stack ranges from near-white (#f8f7fc) for cards and containers to deep navy (#211f36) for inverse text on gradient overlays. Outline tokens (#9b90d6 sta

Typography

Golos Text (400, 500, 600, 700 weights) is the sole typeface, chosen for its geometric clarity and modern proportions—it conveys precision without coldness. The type hierarchy is strictly enforced: Display (60px, 700 weight, -0.04em tracking) anchors hero headlines with commanding presence; Headline-lg (40px, 600 weight, -0.02em) frames section titles; Body-lg (18px, 400 weight) ensures readability in long-form copy at 28px line-height. Label-sm (13px, 500 weight) is applied to all button text and form labels, with 0.02em letter-spacing to enhance legibility at small sizes. All headlines use negative letter-spacing (-0.02em to -0.04em) to tighten word spacing and increase visual impact; body copy uses 0em to maintain natural rhythm. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered with 24px gutters on desktop and 12px on mobile. Spacing follows a semantic scale: 8px unit base, with sm (12px) for tight component spacing, md (24px) for section padding and card internals, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section spans full viewport height (min-h-100vh) with centered content; subsequent sections use 40px vertical padding (lg spacing) to create rhythmic breathing room. Cards and containers maintain consistent 24px internal padding (md spacing) with 12px gaps between child elements (sm spacing). The gradient hero background uses a subtle 8% opacity overlay (rgba(46, 86, 167, 0.08) blending into rgba(187, 109, 229, 0.08)) to avoid over

Elevation & Depth

Depth is achieved through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base): flat surfaces at surface-bright (#ffffff) with no shadow, used for hero backgrounds and full-width sections. Level 2 (Standard Card): 0 3px 8px rgba(0, 0, 0, 0.15) shadow on cards, input fields, and modals—this is the workhorse elevation, creating clear separation from the background without visual heaviness. Level 3 (Elevated/Hover): 0 8px 16px rgba(0, 0, 0, 0.12) on card-hover and interactive overlays, signaling state change and focus. The header uses 0 2px 8px rgba(0, 0, 0, 0.0

Shapes

The shape language is **Precision Rounded**—a balance between geometric sharpness and approachability. Buttons use 4px border-radius (rounded.DEFAULT / 0.5rem) for a modern, slightly squared appearance that feels technical and trustworthy; this is tighter than Material Design's 8px default, reinforcing Adymize's performance-focused identity. Cards and containers use 16px (rounded.lg / 1rem) for softer, more inviting surfaces. Input fields match buttons at 4px to create visual cohesion in forms. Badges and pills use 9999px (rounded.full) for maximum softness, differentiating them as secondary U

Components

Action Elements Buttons are the primary interaction driver. Button-primary uses #2e56a7 background with white text, 13px Golos Text 500 weight, 12px vertical / 40px horizontal padding, and 4px border-radius. On hover, shift to button-primary-hover (#2e56a7 darkened to primary-fixed-dim) with a 120ms ease-out transition. Button-secondary is transparent with a 2px solid #2e56a7 border, same padding and typography; on hover, fill with primary-container (#60a3e6) background. Button-ghost uses rgba(255, 255, 255, 0.08) background for subtle, secondary actions; on hover, increase opacity to rgba(255, 255, 255, 0.16) over 120ms. All buttons maintain 48px minimum height for touch targets.

Containers & Surfaces Cards are the primary content container: surface-bright (#ffffff) background, 1

Do's and Don'ts

**Do**

• Do use primary blue (#2e56a7) on all CTAs and active states—it's the brand's signature and must be instantly recognizable.
• Do maintain 4px border-radius on buttons and inputs; this tight rounding is a distinctive brand marker that differentiates Adymize from softer competitors.
• Do apply negative letter-spacing (-0.02em to -0.04em) on all headlines to increase visual impact and reinforce the brand's precision-focused personality.
• Do layer gradient overlays (rgba(46, 86, 167, 0.08) to rgba(187, 109, 229, 0.08)) on hero sections to create depth while maintaining legibility.
• Do use Golos Text exclusively; its geometric clarity reinforces the technical, results-driven brand voice.
• Do enforce 48px minimum button height for touch accessibility and visual consistency across all interactive elements.

**Don't**

• Don't use secondary purple (#bb6de5) as a primary CTA color—it's a supporting accent only; primary blue is the only clickable color.
• Don't apply border-radius greater than 16px on cards or 4px on buttons; this dilutes the brand's precision aesthetic.
• Don't use pure black (#000000) or pure white (#ffffff) for text; always use on-surface (#454545) or on-surface-variant (#6a7a90) for better visual hierarchy.
• Don't exceed 0.15 opacity on shadows; the brand's luminous aesthetic requires subtle, refined depth cues.
• Don't mix typefaces; Golos Text is the sole font family—system fonts or serif alternatives break brand cohesion.
• Don't apply positive letter-spacing on headlines; use -0.02em to -0.04em to maintain the brand's tight, modern appearance.