ABC da Construção

Overview

ABC da Construção is Brazil's premier destination for construction materials and finishing products, serving both professionals and DIY enthusiasts. The brand embodies a 'Vibrant Pragmatism' aesthetic—combining energetic, action-oriented visual language with clean, functional e-commerce design. The interface celebrates the joy of home improvement through bold accent colors (vivid green #0fa848 and striking red #e30613) paired with a calm, neutral foundation, creating an experience that feels both exciting and trustworthy. The emotional response is one of empowerment: users feel confident they can find quality materials at competitive prices, supported by a brand that understands their projects.

The brand voice is direct, encouraging, and solution-focused. ABC speaks in active imperatives ('Quer ganhar R$100,00 de desconto?', 'Cadastre-se para receber seu cupom') and celebrates customer wins with celebratory language and visual flourishes (animated badges, pulsing buttons, confetti-inspired color palettes). The vocabulary is accessible—avoiding jargon while maintaining professionalism. Example sentence in brand voice: 'Ganhe desconto agora e comece seu projeto com economia.'

Colors

The color system is built on a high-contrast, energetic foundation designed to drive action and build trust in a competitive e-commerce environment. Primary (#0fa848, a vibrant green) is reserved exclusively for affirmative CTAs, success states, and positive reinforcement—it appears on the 'Quero meu cupom' button, confirmation badges, and benefit highlights. Secondary (#e30613, a bold red) is used for urgency, dismissal alternatives, and secondary CTAs like 'Continuar sem desconto'—it commands attention without overshadowing primary actions. Tertiary (#0092ff, a bright blue) supports interactive states, focus indicators, and hover effects on form fields.

The surface stack uses a clean white (#ffffff) as the primary canvas with carefully calibrated grays for depth: surface-container-low (

Typography

The type system uses Satoshi, a geometric sans-serif from Google Fonts, throughout—creating a modern, friendly personality that feels contemporary without sacrificing readability. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures page sections; Headline-md (28px, 600 weight) introduces subsections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and form labels, while Label-sm (12px, 800 weight, 0.05em tracking) is reserved for high-emphasis micro-copy like button text and badge labels. The weight hierarchy is deliberate: 800-weight labels on primary buttons create visual 'pop' and draw the eye to conversion points, while 400-weight body copy remains approachable and s

Layout

The page uses a fluid 12-column grid with a max-width container of 1300px, allowing the design to breathe on desktop while remaining compact on mobile. Section separation follows the lg spacing token (40px) between major content blocks, creating a rhythm that guides users through the page without overwhelming them. The gutter (24px) is applied consistently to horizontal padding, ensuring content never touches the viewport edge. The modal dialog (max-width: 400px, min-width: 0 to prevent overflow) is centered both horizontally and vertically using flexbox, with a 12px padding on the overlay to prevent edge-touching on small screens. Form fields use md spacing (24px) between input rows and 8px between tightly related fields (e.g., first name and last name in a single row). The newsletter pop

Elevation & Depth

Depth is conveyed through a three-tier shadow system and strategic use of backdrop-filter. Level 1 (Base): the page background is pure white (#ffffff) with no shadow. Level 2 (Standard Cards & Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) lifts elements slightly, used on product cards, input dropdowns, and form containers. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 24px 52px rgba(2, 6, 23, 0.24) creates dramatic separation for modal dialogs and overlays. The newsletter modal additionally uses a radial-gradient overlay (radial-gradient(circle at top right, rgba(255, 240, 188, 0

Shapes

The shape philosophy is 'Friendly Precision'—combining rounded corners that feel approachable with strategic use of sharp geometry to maintain clarity. Buttons use full radius (999px) to create pill-shaped affordances that feel inviting and modern; this is applied to all primary and secondary CTAs, badges, and toggle elements. Form inputs use a moderate radius (8px, the DEFAULT token) to balance softness with a sense of structure—this prevents inputs from feeling too organic while avoiding the sterile appearance of sharp corners. Cards and containers use lg radius (12px) for a subtle roundness

Components

Action Elements Buttons are the primary conversion drivers and receive the most visual emphasis. The primary button (button-primary) uses background: {colors.primary} (#0fa848), text color: {colors.on-primary} (white), height: 40px, padding: 8px 14px, border-radius: 999px, and typography: label-sm (12px, 800 weight, 0.05em tracking). Critically, primary buttons include animation: abcNewsletterPrimaryPulse 6s cubic-bezier(0.4, 0, 0.2, 1) infinite—a pulsing box-shadow that grows from 0 0 0 0 rgba(15, 168, 72, 0.28) to 0 0 0 7px rgba(15, 168, 72, 0) over 6 seconds, creating a subtle 'breathing' effect that draws attention without feeling aggressive. On hover (button-primary-hover), the background shifts to #8eefa9 (a lighter green) and the animation pauses, giving tactile feedback. Disabl

Do's and Don'ts

**Do**

• Do use the primary green (#0fa848) exclusively for affirmative actions and success states—it is the brand's signature accent and must remain distinctive.
• Do apply the pulsing animation (abcNewsletterPrimaryPulse) to primary CTAs in high-stakes contexts (modals, checkout) to draw attention without being jarring.
• Do maintain the 999px border-radius on all buttons to create the brand's signature pill-shaped affordance.
• Do use the Satoshi typeface at 800 weight for button labels and micro-copy to create visual emphasis and modern personality.
• Do layer shadows and backdrop-filters (blur: 10px) on modals to create atmospheric depth and focus user attention.
• Do group related form fields with 8px gaps and separate field groups with 16px gaps to create visual hierarchy and reduce cognitive load.

**Don't**

• Don't use the secondary red (#e30613) for primary CTAs—reserve it for dismissal, urgency, or secondary actions only.
• Don't apply rounded corners smaller than 8px (DEFAULT) to interactive elements; the brand's approachable personality requires at least moderate softness.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use the on-* color tokens to maintain the warm, accessible palette.
• Don't remove the box-shadow from cards or modals—the three-tier elevation system is critical to visual hierarchy and must be preserved.
• Don't use system fonts or generic sans-serif fallbacks; Satoshi is integral to the brand's modern, friendly identity.
• Don't apply the pulsing animation to secondary buttons or non-critical UI; reserve it for primary CTAs to avoid visual noise.