Averto

Overview

Averto is a premium digital agency brand that transforms complex software and creative challenges into elegant, motion-forward digital experiences. The aesthetic combines high-contrast dark-to-light gradient compositions with vibrant neon accents (hot pink #ff1b6d and electric blue #0d6efd), creating a sophisticated yet energetic visual language that appeals to forward-thinking enterprises and innovative startups. The design philosophy—termed 'Gradient Maximalism'—uses dramatic color transitions and layered depth to convey transformation, creativity, and technical precision. The UI evokes a sense of premium craftsmanship: polished, intentional, and unapologetically bold.

The brand voice is confident, articulate, and solution-oriented. Averto speaks in clear, declarative statements without corporate jargon—favoring concrete outcomes over abstract promises. The vocabulary emphasizes partnership ('co-create,' 'collaborate'), craft ('craft,' 'build,' 'deliver'), and impact ('transform,' 'elevate'). Tone is warm yet professional, never casual or dismissive. Example sentence: 'We partner with you to craft digital products that don't just solve problems—they redefine what's possible.'

Colors

The Averto color system is built on a foundation of high-contrast surfaces (light #f5f5f5 to near-black #212529) paired with three bold accent colors that drive interaction and brand recognition. Primary (#ff1b6d, hot pink) is the signature accent used exclusively on call-to-action buttons, active states, and brand-critical interactive elements—it commands attention without overwhelming. Secondary (#0d6efd, electric blue) supports primary as a secondary accent for links, secondary buttons, and data visualization highlights. Tertiary (#ffc107, golden yellow) is reserved for warnings, highlights, and tertiary actions. The surface stack progresses from #f5f5f5 (surface) through #e9ecef (surface-container) to #ced4da (surface-container-highest), providing subtle visual separation without harsh

Typography

The typography system pairs DM Sans (serif, 600–700 weight) for headlines and display text with Instrument Sans (sans-serif, 400–500 weight) for body and interface copy. This pairing creates visual contrast: DM Sans conveys authority and craft through its geometric serif structure, while Instrument Sans ensures clarity and modernity in dense information contexts. Display (120px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (48px, 600 weight) breaks major sections; headline-md (32px, 600 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while body-md (16px, 400 weight, 24px line-height) handles standard body copy and form labels. Label-md (16px, 500 weig

Layout

The page layout uses a 12-column grid system with a maximum container width of 1320px, allowing for flexible responsive scaling from mobile (single column) to desktop (full-width multi-column layouts). The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Gutter spacing (24px) is applied between grid columns and around container edges. White-space philosophy prioritizes breathing room around primary CTAs and hero imagery—sections are separated by lg spacing (40px) minimum, with hero sections receiving xl spacing (64px) below to create visual pause before secondary content. Container max-width (1320px) ensures text remai

Elevation & Depth

Visual hierarchy in Averto is conveyed through a three-tier shadow and depth system that creates distinct layers without relying on darkness alone. Level 1 (Base/Surface) uses no shadow or a minimal 1px border (rgba(0, 0, 0, 0.05)) to define edges on light backgrounds. Level 2 (Standard Cards/Containers) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle lift and separation from the background. Level 3 (Elevated/Modals/Hover States) uses box-shadow: 0 9px 25px rgba(132, 128, 177, 0.28), a larger spread shadow with a purple tint that evokes the brand's gradient aesthetic and sig

Shapes

The shape philosophy is termed 'Soft-Technical Precision'—combining rounded corners with geometric clarity to balance approachability and sophistication. Buttons use full border-radius (50%, or 9999px in rem) to create pill-shaped forms that feel friendly and modern, contrasting with the technical nature of software development. Cards and containers use lg (1rem, 16px) border-radius for subtle softness without sacrificing definition. Input fields and form elements use DEFAULT (0.5rem, 8px) border-radius for a more restrained, functional appearance. Badges and small UI elements use full (9999px

Components

Action Elements Buttons are the primary interaction mechanism and use full border-radius (50%) to create distinctive pill shapes. Button-primary uses {colors.primary} (#ff1b6d) background with white text, 14px vertical padding, 32px horizontal padding, and a 48px minimum height. At rest, apply box-shadow: 0 4px 12px rgba(255, 27, 109, 0.3); on hover, darken to #ff0052, expand shadow to 0 8px 24px rgba(255, 27, 109, 0.4), and apply transform: translateY(-2px) over 300ms for tactile lift. Button-secondary uses transparent background with a 2px solid border in {colors.primary}, maintaining the same padding and height; on hover, fill the background with {colors.primary-container} (#ffe0ed) and apply the same shadow and transform. Button-ghost uses rgba(255, 255, 255, 0.1) background with a

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff1b6d) exclusively on primary CTAs and critical interactive states—never dilute its impact by overusing it on secondary elements.
• Do apply lg spacing (40px) between major sections and xl spacing (64px) between hero and body content to create visual breathing room and guide user attention.
• Do pair DM Sans headlines with Instrument Sans body copy to create visual contrast that reinforces information hierarchy without jarring the eye.
• Do use the three-tier shadow system (sm/md/lg) consistently: sm for subtle definition, md for standard elevation, lg for modals and hover states.
• Do apply full border-radius (50%) to all primary buttons and pill-shaped UI elements to create a signature, approachable visual language.
• Do include transform: translateY(-2px) and shadow expansion on button hover to provide tactile feedback and signal interactivity.

**Don't**

• Don't use secondary (#0d6efd) or tertiary (#ffc107) colors as primary CTAs—they dilute the brand's hot pink signature and confuse interaction hierarchy.
• Don't apply border-radius values smaller than 0.5rem (8px) to interactive elements; the brand requires softness to balance technical precision.
• Don't use body text smaller than 16px (body-md) or larger than 18px (body-lg) in standard content—maintain readability and visual consistency.
• Don't mix serif and sans-serif fonts within a single text block; use DM Sans for headlines and Instrument Sans for body, never the reverse.
• Don't apply shadows larger than 0 9px 25px rgba(132, 128, 177, 0.28) on standard cards—reserve Level 3 shadows for modals and elevated hover states only.
• Don't use near-black (#212529) text on dark backgrounds; always ensure on-surface text color meets WCAG AA contrast ratios (minimum 4.5:1 for body text).