AutoU

Overview

AutoU is a B2B AI implementation and enablement consultancy serving enterprise clients globally. The brand embodies a 'Technical Optimism' aesthetic—combining the precision of enterprise software with the warmth and accessibility of a trusted advisor. The visual language uses deep navy and teal as grounding colors, punctuated by vibrant amber-orange accents that signal energy, transformation, and forward momentum. The UI evokes confidence and clarity: complex AI concepts are rendered as approachable, human-centered experiences. The emotional response is one of capability and partnership—users feel they're working with experts who understand both technology and business outcomes.

AutoU's voice is direct, results-oriented, and grounded in real-world impact. The brand avoids hype; instead, it speaks in concrete outcomes: 'Implementação e capacitação por quem gera resultados nos maiores negócios do mundo' (Implementation and enablement by those who deliver results in the world's largest businesses). Vocabulary patterns emphasize partnership ('consultoria que direciona'), tangible delivery ('tecnologia que resolve'), and scalable knowledge ('educação que multiplica'). Example sentence: 'Sua empresa pronta para a era da Inteligência Artificial'—a statement of readiness, not aspiration.

Colors

The color system is built on a foundation of deep, sophisticated neutrals anchored by the dark navy surface (#031a2b, #071a28) that dominates hero sections and creates visual depth. This is paired with a bright, clean white (#ffffff) for content areas, establishing a high-contrast, professional aesthetic. The primary accent color is amber-orange (#e69a29 for primary, #fd9800 for primary-container), used exclusively on call-to-action buttons ('Agendar conversa', 'Aceitar todos') and interactive highlights. This warm, energetic hue signals transformation and urgency without aggression. Secondary accent is a vibrant, sky blue (#05a2f2, #21b4ff, #88d7ff), deployed in gradients for headings and as a focus state color (outline: 2px solid #21b4ff). Tertiary accent is a deep burnt orange (#d4541a,

Typography

The type system uses Figtree (a geometric, humanist sans-serif from Google Fonts) exclusively, loaded via @font-face with weights 400, 500, 600, 700, and 800. The hierarchy is built on fluid scaling using CSS clamp() to ensure responsive typography without breakpoint-based jumps: display scales from 40px to 74px (clamp(40px, 5.15vw, 74px)), headline-lg from 30px to 52px, and body-md from 16px to 18px. Display and headline levels use tighter letter-spacing (-0.04em to -0.01em) to reinforce authority and visual impact, while body text maintains 0em spacing for legibility. Font-weight progression is deliberate: headlines use 600 (semi-bold) for clarity, body text uses 400 (regular) for approachability, and labels use 600 with 0.1em letter-spacing for emphasis. Line-height is set to 120% for h

Layout

The layout uses a fixed 12-column grid with a max-width of 1280px and symmetric padding of 80px on desktop (reduced to 24px on tablets and mobile via @media max-width: 768px). The hero section spans the full viewport height (min-height: 100svh) with a dark navy background (#071a28) and layered background imagery (blue glow SVG, planet WebP). Content sections use the container pattern with padding-inline: var(--container-padding) to maintain consistent gutters. White-space is generous: section separators use clamp(48px, 8vw, 120px) for vertical rhythm, and gap between grid items is typically 40px. The spacing scale is semantic: 'unit' (8px) for micro-adjustments, 'sm' (12px) for tight grouping, 'md' (24px) for standard component padding, 'lg' (40px) for section separation, and 'xl' (64px) f

Elevation & Depth

Depth is conveyed through a carefully calibrated shadow system that avoids flat design while maintaining sophistication. The elevation scale uses three primary levels: standard (0 12px 28px rgba(3, 26, 43, 0.24)), elevated (0 16px 34px rgba(3, 26, 43, 0.30)), and subtle (0 8px 8px rgba(3, 26, 43, 0.22)). Cards and interactive elements use the standard shadow by default, transitioning to elevated on hover (box-shadow: 0 16px 34px #031a2b4d). The floating action button (FAB) uses the elevated shadow and lifts further on hover with transform: translateY(-2px). Buttons do not use shadows; instead,

Shapes

The shape philosophy is 'Approachable Precision'—combining geometric clarity with human warmth. Button border-radius is set to 12px (--radius-button), a moderate value that feels modern without being overly rounded; this applies to all interactive elements (buttons, inputs, badges). Card border-radius is 32px (--radius-card), a larger, more generous curve that softens container edges and invites interaction. Icon containers use 16px (--radius-icon) for subtle definition. The pill shape (border-radius: 320px or 50%) is reserved for the floating action button and full-width rounded elements, sig

Components

Action Elements Buttons are the primary interactive component. The primary button uses background: {colors.primary} (#e69a29), color: {colors.on-primary} (#101010), padding: 16px 20px, height: 48px, border-radius: 12px, and font-size: 18px, font-weight: 600. On hover, apply filter: brightness(0.95) with a 0.2s ease transition. Focus state applies outline: 2px solid {colors.secondary} (#21b4ff) with outline-offset: 2px. Secondary buttons use background: {colors.surface} (#ffffff), border: 1px solid {colors.outline-variant}, and the same padding and height. Link buttons are transparent with text-decoration: underline and text-underline-offset: 3px; on hover, reduce opacity to 0.7. All buttons use transition: filter 0.2s ease, background-color 0.2s ease, opacity 0.2s ease for smooth state

Do's and Don'ts

**Do**

• Do use the amber-orange primary (#e69a29) exclusively on high-priority CTAs like 'Agendar conversa' and 'Aceitar todos'—it signals transformation and urgency.
• Do apply the blue gradient (linear-gradient(90deg, #031a2b 0%, #05a2f2 100%)) to section headings to create visual interest and brand recognition.
• Do use Figtree font-weight 600 with letter-spacing -0.02em for all headlines to reinforce authority and modern precision.
• Do maintain the 80px container padding on desktop and reduce to 24px on mobile to preserve readability and breathing room.
• Do apply filter: brightness(0.95) on button hover states with 0.2s ease transitions for smooth, professional interactivity.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text on dark backgrounds—use the brand's on-surface colors (#ffffff for dark surfaces, #101010 for light).
• Don't apply shadows to buttons; rely on color contrast and hover filters instead to maintain visual clarity.
• Don't mix border-radius values—use 12px for buttons, 32px for cards, 16px for icons, and 9999px for pills consistently.
• Don't use system fonts; Figtree must be loaded via @font-face with weights 400, 500, 600, 700, and 800 for full typographic control.
• Don't apply focus outlines in any color other than the secondary blue (#21b4ff) with 2px width and 2px offset to ensure WCAG AA compliance and brand consistency.