Design System Inspired by Itaú

This design system reflects a corporate, security-conscious digital environment emphasizing clarity and trust. The aesthetic is minimalist and utilitarian, designed to communicate authority and precision through restrained typography and monochromatic color treatment. The visual language prioritizes readability and straightforward information hierarchy, characteristic of financial and institutional interfaces. Error states and access denial messaging are presented with unflinching directness, reinforcing the seriousness of security protocols.

Key Characteristics

• Monochromatic foundation with pure black text on white backgrounds

• Sans-serif typography hierarchy built on proven legibility

• Minimal visual decoration; content-driven layout

• High contrast for accessibility and institutional credibility

• Functional, no-nonsense presentation suitable for sensitive transactions

• Clear information hierarchy through size and weight differentiation

### Buttons

Primary Button

• Background: #000000

• Text Color: #FFFFFF

• Padding: 12px 24px

• Font Size: 16px

• Font Weight: 700

• Border Radius: 4px

• Border: 1px solid #000000

• Hover State: Background #333333, Border 1px solid #333333

• Active State: Background #1A1A1A, Border 1px solid #1A1A1A

Secondary Button

• Background: #FFFFFF

• Text Color: #000000

• Padding: 12px 24px

• Font Size: 16px

• Font Weight: 700

• Border Radius: 4px

• Border: 1px solid #000000

• Hover State: Background #F5F5F5, Border 1px solid #000000

• Active State: Background #E8E8E8, Border 1px solid #000000

Ghost Button

• Background: transparent

• Text Color: #000000

• Padding: 12px 24px

• Font Size: 16px

• Font Weight: 700

• Border Radius: 4px

• Border: 1px solid #000000

• Hover State: Background #F9F9F9, Border 1px solid #000000

### Cards & Containers

Standard Card

• Background: #FFFFFF

• Border: 1px solid #CCCCCC

• Border Radius: 4px

• Padding: 24px

• Box Shadow: 0px 1px 3px rgba(0, 0, 0, 0.08)

• Text Color: #000000

Error/Denial Card

• Background: #FFFFFF

• Border: 1px solid #000000

• Border Radius: 4px

• Padding: 24px

• Box Shadow: 0px 2px 4px rgba(0, 0, 0, 0.12)

• Text Color: #000000

• Heading Font Size: 32px

• Heading Font Weight: 700

• Body Font Size: 16px

• Body Font Weight: 400

### Inputs & Forms

Text Input

• Background: #FFFFFF

• Border: 1px solid #CCCCCC

• Border Radius: 4px

• Padding: 12px 16px

• Font Size: 16px

• Font Weight: 400

• Text Color: #000000

• Placeholder Color: #999999

• Focus State: Border 2px solid #000000, Outline none

• Focus Box Shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1)

Label

• Font Size: 14px

• Font Weight: 700

• Color: #000000

• Margin Bottom: 8px

### Navigation

Header Navigation

• Background: #FFFFFF

• Text Color: #000000

• Font Size: 16px

• Font Weight: 700

• Border Bottom: 1px solid #CCCCCC

• Padding: 16px 24px

• Link Hover: Text Color #333333, Background transparent

• Link Active: Border Bottom 3px solid #000000, Padding Bottom 13px

Breadcrumb

• Font Size: 14px

• Font Weight: 400

• Color: #666666

• Separator: / in #999999

• Link Active: Color #000000, Font Weight 700

### Spacing System

Base unit: 8px

• XS: 4px — micro spacing, inline elements

• S: 8px — component internal spacing

• M: 16px — section spacing, moderate gaps

• L: 24px — container padding, major sections

• XL: 32px — layout margins, full-width spacing

• XXL: 48px — hero and maximum separation

Usage Context

• Button padding: 12px vertical, 24px horizontal (M + L)

• Card padding: 24px (L)

• Section margins: 32px top/bottom (XL)

• Container gutters: 24px (L)

### Grid & Container

• Max Width: 1200px for centered content layouts

• Column Strategy: 12-column flexible grid for responsive scaling

• Section Patterns: Full-width containers with centered max-width children; margin-based flow

• Horizontal Margins: 24px on left/right at desktop; scale down on tablet/mobile

### Whitespace Philosophy

Generous whitespace creates breathing room and emphasizes content hierarchy. Spacing uses the 8px base unit to maintain rhythm. Error messages and sensitive content are surrounded by elevated whitespace to draw focus. Minimal visual elements rely on thoughtful spacing rather than decorative borders.

### Border Radius Scale

• None (Square): 0px — for strict institutional alignment

• Subtle: 2px — minimal softening of input states

• Standard: 4px — default component rounding for cards, buttons, inputs

• Generous: 8px — accent containers, secondary surfaces

• Full (Pill): 9999px — circular badges and avatar containers

### Breakpoints

| Name | Width | Key Changes |

|------|-------|-------------|

| Mobile | <640px | Single-column layout; padding 16px; font sizes reduced by 2px (body 14px); container max-width 100%; buttons full-width |

| Tablet | 640px–1024px | Two-column grid where applicable; padding 20px; font sizes nominal; container max-width 90% |

| Desktop | 1024px–1200px | Full 12-column grid; padding 24px; container max-width 1200px; sidebars introduce |

| Large | >1200px | Centered layout with max-width enforcement; horizontal margins scale to 40px; navigation expanded |

### Touch Targets

• Minimum Height: 44px for all interactive elements (buttons, inputs, links)

• Minimum Width: 44px for circular or square buttons

• Minimum Tap Area: 8px padding around all clickable elements

• Spacing Between Targets: Minimum 8px horizontal and vertical gap to prevent accidental interaction

### Collapsing Strategy

• Navigation: Collapse to hamburger menu at <1024px; vertical stack all nav items

• Cards: Stack to single column at <640px; adjust padding from 24px to 16px

• Typography: Scale headings by 2–4px at tablet breakpoint; maintain hierarchy ratios

• Containers: Remove max-width constraints on mobile; full-width with 16px gutters

• Error Cards: Expand to full viewport width on mobile with 16px margins; maintain 24px internal padding

• Button Width: Full-width stacking for secondary actions on mobile; primary remains full-width

### Quick Color Reference

• Primary CTA: Black (#000000)

• Secondary CTA: White with Black border (#FFFFFF, #000000)

• Background: White (#FFFFFF)

• Heading Text: Black (#000000)

• Body Text: Black (#000000)

• Error/Denial Text: Black (#000000), emphasized via weight and size

• Borders/Dividers: Subtle Gray (#CCCCCC)

• Placeholder/Meta: Medium Gray (#999999)

### Iteration Guide

1. Monochromatic First: All content uses black text on white; no additional colors introduced. Hierarchy achieved through typography size and weight exclusively.

2. Typography Precision: Display and Heading 1 are exactly 32px and 28px respectively, with 700 weight. Body text is 16px/400 weight with 1.5 line height. Code and references are monospace 13px.

3. Spacing is Base-8: All spacing values must be multiples of 8px (4px, 8px, 16px, 24px, 32px, 48px). Card padding is always 24px; button padding is 12px vertical × 24px horizontal.

4. Border Radius Consistency: Buttons, inputs, and cards use 4px radius; no mixing of radius values within similar component types.

5. Elevation Through Shadow Only: Layering is communicated via subtle shadows (L1: 0px 1px 3px rgba(0, 0, 0, 0.08) for standard; L2: 0px 2px 4px rgba(0, 0, 0, 0.12) for emphasis). No color shifts or borders create depth.

6. Error/Denial Emphasis: Access denied messaging uses Display size (32px) at L2 shadow elevation. Content is centered on page. Internal card uses white background with black border and black text.

7. Accessibility Priority: Maintain 7:1 contrast ratio (black on white achieves 21:1). All interactive elements are minimum 44px height. Font sizes never drop below 14px for body text.

8. Responsive Collapse: Mobile layouts are single-column at 16px padding. Tablet introduces two-column at 20px padding. Desktop enforces max-width 1200px with 24px container padding.

9. Component Variants: Buttons have Primary (black BG, white text), Secondary (white BG, black border), and Ghost (transparent, black border) states. All share 4px radius, 12×24px padding, and 16px font weight 700.

10. Serif Font Stack: Always Times New Roman primary with Georgia and serif fallbacks; no sans-serif substitution. Monospace (Courier New) reserved for codes, URLs, and technical identifiers only.