UNICRED

Overview

UNICRED is a cooperative financial institution that reimagines banking through a philosophy of institutional warmth and human-centered trust. The design system embodies 'Cooperative Modernism'—a movement that balances the authority and stability of traditional finance with the accessibility and emotional resonance of contemporary digital design. The brand serves individuals and cooperatives seeking financial solutions that feel personal, transparent, and genuinely aligned with their values. The visual language uses a rich, earthy palette anchored by a vibrant teal-green primary (#018b6a) that signals trust and growth, paired with a sophisticated gold accent (#bba756) that conveys prosperity and heritage. Every interface element is designed to reduce friction and build confidence: clean typography hierarchies, generous whitespace, and purposeful color transitions guide users through complex financial decisions without overwhelming them.

The brand voice is conversational yet authoritative, warm yet professional. UNICRED speaks in Portuguese with clarity and respect, avoiding jargon while maintaining credibility. The tone is optimistic about financial empowerment—never patronizing, never breathless. Example sentence in brand voice: 'Precisamos saber um pouco mais sobre você para lhe oferecer o melhor atendimento' (We need to know a bit more about you to offer you the best service).

Colors

The UNICRED color system is built on three foundational pillars: trust (primary teal-green), heritage (tertiary gold), and institutional stability (secondary deep forest). Primary (#018b6a) is the signature accent used exclusively for call-to-action buttons, active navigation states, and key interactive elements that demand user attention. It appears on the hero CTA buttons ('SOU VISITANTE', 'SOU COOPERADO') and all primary form submissions. Secondary (#1b3b2c) anchors the brand's institutional authority, appearing in headers, modal overlays, and deep-background elements that establish visual hierarchy. Tertiary (#bba756) is the heritage accent—a warm gold that highlights category labels, active navigation indicators, and premium service badges. The surface stack progresses from pure white

Typography

The typography system uses Montserrat for headlines and labels (conveying modern confidence and cooperative solidarity) and Roboto for body text (ensuring legibility and approachability). Display (60px, 700 weight) is reserved for hero statements and major section breaks, while headline-lg (40px, 700) anchors page sections like 'SEJA BEM-VINDO'. Headline-md (32px, 600) and title-lg (24px, 600) create a clear visual hierarchy for subsections and card titles. Body-lg (18px, 400) and body-md (16px, 400) are the workhorses for descriptive copy and form labels, with generous 28px and 24px line heights respectively to maximize readability. Label-md (14px, 600) and label-sm (12px, 500) are used for button text, badges, and metadata. Letter-spacing is subtle but intentional: headlines use -0.02em

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing content to breathe on large screens while remaining focused on mobile (750px viewport). The spacing scale is semantic: unit (8px) is the atomic baseline, xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero and full-width spacing. Gutter spacing is consistently 24px, creating a rhythm that feels neither cramped nor wasteful. The hero section uses full-viewport height with a semi-transparent overlay (rgba(0,0,0,0.3)) to ensure text legibility over the background image. Card-based layouts use md (24px) padding internally, with lg (40px) margins between card groups. Form

Elevation & Depth

Depth in UNICRED is achieved through a restrained shadow system that avoids the 'floating card' aesthetic in favor of subtle, grounded elevation. Level 1 (Base) uses no shadow—elements sit flush with the surface. Level 2 (Standard Cards) applies elevation.sm (0 1px 2px rgba(0,0,0,0.06)), creating barely perceptible separation for card containers and input fields. Level 3 (Elevated/Modals) uses elevation.md (0 4px 12px rgba(0,0,0,0.08)) for modal overlays, dropdown menus, and hover states on interactive elements. Level 4 (Deep Modals/Popovers) applies elevation.lg (0 6px 16px rgba(27,59,44,0.3)

Shapes

The shape philosophy is 'Institutional Softness'—a balance between the sharp precision of traditional banking and the approachability of modern design. Buttons use sm (0.25rem / 4px) border-radius, creating a subtle softness that feels contemporary without sacrificing professional credibility. Cards and containers use md (0.75rem / 12px) for a more pronounced roundness that invites interaction. Input fields use sm (4px) to maintain visual consistency with buttons and form cohesion. Modals and full-width overlays use lg (1rem / 16px) for a softer, more welcoming appearance. Badges and pills use

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#018b6a) background with white text, 2px solid border, 12px 24px padding, and 48px height for touch-friendly targets. On hover, the background shifts to primary-container (#094d38) with elevation.md shadow and a 0.2s transition. Button-secondary uses transparent background with primary text and a 2px primary border; on hover, the background becomes surface-container-high (#e8e8e8). Button-tertiary is reserved for secondary actions and uses the tertiary gold (#bba756) with uppercase text-transform and 0.05em letter-spacing for emphasis. All buttons use Montserrat label-md typography and disable text-decoration on hover to maintain visual clarity.

Containers & Surfaces Cards use surface-contain

Do's and Don'ts

**Do**

• Do use primary (#018b6a) exclusively for CTAs and active states—it's the brand's most precious color and loses impact through overuse.
• Do maintain the 24px gutter and md spacing scale across all layouts to preserve the cooperative rhythm and breathing room.
• Do apply text-shadow: 1px 1px 2px rgba(0,0,0,0.1) on small labels over image backgrounds to ensure accessibility without compromising aesthetics.
• Do use Montserrat for headlines and labels to reinforce institutional confidence; reserve Roboto for body text to maximize legibility.
• Do transition interactive elements between elevation levels (Level 1 → Level 2) with 0.2s ease-in-out timing to signal interactivity without jarring motion.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text—use on-surface (#555555) and surface (#ffffff) instead to reduce eye strain and maintain brand warmth.
• Don't apply shadows deeper than elevation.lg (0 6px 16px rgba(27,59,44,0.3))—deeper shadows feel disconnected from the grounded, institutional aesthetic.
• Don't mix Montserrat and Roboto weights arbitrarily; follow the typography scale strictly to maintain hierarchy and predictability.
• Don't use tertiary (#bba756) for primary CTAs or interactive elements—it's a heritage accent and loses its signaling power when overused.
• Don't round corners beyond lg (16px) on cards or containers—extreme roundness undermines the institutional credibility that UNICRED's cooperative mission requires.