C&A Brasil

Overview

C&A Brasil is a high-energy, trend-conscious fashion retailer that celebrates Brazilian culture and inclusivity through a bold, digitally-native aesthetic. The brand serves style-conscious consumers across all demographics—women, men, kids, and beauty enthusiasts—with a design language rooted in "Vibrant Minimalism": a clean white canvas punctuated by electric blue accents (#0d66d0), emerald highlights (#1eceac), and warm orange callouts (#ff5630) that create visual rhythm and guide users toward key actions. The interface evokes confidence, accessibility, and joy—reflecting the brand's tagline "A gente se encontra na moda, a gente se encontra na C&A" (We meet in fashion, we meet at C&A).

The voice is conversational, energetic, and locally rooted. C&A speaks in Portuguese with warmth and directness—never corporate or distant. Tone examples: "Frete grátis exclusivo com C&A Pay" (Free shipping exclusive with C&A Pay), "Cupons ativos" (Active coupons), "Personal Shopper: Te ajudou a procurar produtos, montar looks e encontrar presentes" (Personal Shopper: Helped you search products, build looks, and find gifts). The brand avoids jargon, embraces emoji sparingly (the red dot on "Ofertas" signals urgency), and prioritizes clarity over cleverness. Every interaction should feel like a friend helping you discover your next favorite piece.

Colors

The C&A color system balances a pristine white foundation (#ffffff) with a carefully curated accent palette that drives conversion and emotional engagement. Primary (#0d66d0) is the signature electric blue used exclusively on CTAs, links, and interactive states—it commands attention without aggression, appearing on the skip-to-content link (box-shadow: 2px 2px 8px rgba(0,0,0,0.2)), primary buttons (padding: 12px 24px, border-radius: 32px), and focus states. Secondary (#0176d3) provides a cooler, deeper blue for supporting elements and secondary navigation. Tertiary (#1eceac) is the vibrant emerald reserved for success states, badges, and promotional highlights—it appears in the notification toast (background-color: #12805c, color: #fff, border-radius: 8px) and badge components. Error (#ff5

Typography

The type system pairs Roboto for body and display text with Inter for labels and UI copy, creating a hierarchy that guides users through discovery and conversion. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and brand moments; Headline-lg (40px, 600 weight) introduces major sections; Headline-md (28px, 600 weight) breaks up content; Title-lg (20px, 600 weight) labels card titles and subsections; Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and longer-form content; Body-md (16px, 400 weight, 24px line-height) is the default body text and input placeholder; Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, badges, and interactive labels; Label-sm (12px, 600 weight, 0.05em letter-spacing) is reserved for small UI

Layout

The page uses a fluid, mobile-first grid system with a max-width container of 1127px (defined in .cea-store-ds-0-x-seo-home__content and .cea-store-ds-0-x-brackets-banner__wrapper), centered via margin: 0 auto. The 12-column grid adapts from single-column on mobile (padding: 18px horizontal) to multi-column on desktop (padding: 32px horizontal at 1025px+). Section spacing follows the semantic scale: lg spacing (40px) separates major sections (hero, product grids, footer); md spacing (24px) is used for card padding and internal section gaps; sm spacing (12px) is applied to list items and compact components. The hero banner occupies 100vh on mobile and adapts to max-height: none on tablet+ (min-width: 767px). Carousel dots are positioned at bottom: min(92.42%, calc(100% - 44px)) on mobile, s

Elevation & Depth

Depth in C&A's design is achieved through a restrained shadow system and subtle layering, avoiding heavy drop shadows that would feel dated. The elevation scale consists of three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for subtle dividers and inactive states; md (0 4px 12px rgba(0,0,0,0.08)) for cards, buttons, and interactive elements; lg (0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)) for modals and floating elements like the back-to-top button. The skip-to-content link uses box-shadow: 2px 2px 8px rgba(0,0,0,0.2), a slightly heavier shadow to ensure visibility and focus. C

Shapes

C&A's shape language is "Soft-Technical Pragmatism"—rounded corners are used strategically to soften the interface without sacrificing clarity or brand authority. Buttons and primary CTAs use border-radius: 32px (rounded.full) to create a friendly, approachable feel (e.g., the banner CTA with padding: 12px 16px, border-radius: 32px). Input fields and search boxes use border-radius: 50px (rounded.full) to signal interactivity and encourage engagement. Cards and containers use border-radius: 8px (rounded.md) or 0.75rem, providing subtle rounding that feels modern without being playful. Carousel

Components

Action Elements Buttons are the primary drivers of conversion and must command attention without overwhelming the interface. The primary button uses backgroundColor: {colors.primary} (#0d66d0), textColor: {colors.on-primary} (#ffffff), typography: {typography.label-md} (14px, 600 weight), rounded: {rounded.lg} (1rem), padding: 12px 24px, height: 48px, and boxShadow: {elevation.md} (0 4px 12px rgba(0,0,0,0.08)). On hover, the background shifts to #0a4fa8 with a 200ms ease-out transition, providing tactile feedback. The secondary button mirrors the primary structure but uses backgroundColor: transparent, textColor: {colors.primary}, and border: 1px solid {colors.outline}, allowing it to sit harmoniously alongside primary actions. The ghost button (used in carousels and overlays) employs

Do's and Don'ts

**Do**

• Do use the primary blue (#0d66d0) exclusively on CTAs, links, and interactive focus states—never on backgrounds or passive text.
• Do apply the full rounded scale: 32px for buttons, 50px for inputs, 8px for cards, and 100px for circular elements, maintaining visual consistency across all interactive surfaces.
• Do pair Roboto (body/display) with Inter (labels/UI) to create a clear typographic hierarchy that guides users through discovery and conversion.
• Do use the elevation scale (sm/md/lg) with specific box-shadow values (0 4px 12px rgba(0,0,0,0.08) for md) to create subtle depth without visual clutter.
• Do implement 200ms ease-out transitions on all interactive state changes (hover, focus, active) to provide smooth, responsive feedback.
• Do maintain 7:1+ contrast between on-surface (#201e1e) and surface (#ffffff) for WCAG AA compliance across all text.
• Do use emerald (#1eceac) and orange (#ff5630) as supporting accents for success states, badges, and promotional urgency—never as primary text or backgrounds.

**Don't**

• Don't use near-black (#201e1e) as a primary color or CTA—it's reserved for body text and structural elements only.
• Don't apply rounded corners larger than 32px to buttons or cards; excessive rounding reads as playful rather than professional.
• Don't hardcode colors inside component blocks—always reference the token system ({colors.primary}, {colors.surface}, etc.) to maintain consistency.
• Don't use shadows heavier than 0 4px 12px rgba(0,0,0,0.08) for standard components; excessive shadows create visual noise and reduce perceived lightness.
• Don't mix Roboto and Inter within a single text element; maintain clear separation between body/display (Roboto) and UI/labels (Inter).
• Don't apply backdrop-filter: blur() without a semi-transparent background (rgba with 0.4–0.7 opacity); blur alone creates illegibility.
• Don't use the secondary blue (#0176d3) or tertiary emerald (#1eceac) on primary CTAs—reserve these for supporting elements and status indicators only.