CESAR

Overview

CESAR is Brazil's most comprehensive innovation and knowledge center, serving enterprises, startups, and educational institutions through integrated technology solutions, professional development, and business acceleration programs. The brand embodies a 'Technical Pragmatism' aesthetic—clean, purposeful, and grounded in real-world impact rather than decorative flourish. The visual language combines a deep indigo primary (#140075) with vibrant secondary accents (orange #F76004, green #68B631) against a bright, accessible white canvas, creating an interface that feels both authoritative and approachable. The emotional response is one of clarity and forward momentum: users encounter a system designed to cut through complexity and enable transformation.

The CESAR voice is direct, solution-oriented, and rooted in Portuguese-Brazilian business culture. Sentences are active and outcome-focused, avoiding jargon while maintaining professional credibility. The tone balances optimism with pragmatism—never breathless, always grounded in concrete capability. Example: 'Elevamos organizações a um novo patamar de competitividade' (We elevate organizations to a new level of competitiveness) demonstrates the brand's commitment to measurable, tangible advancement.

Colors

The CESAR color system operates on a principle of 'Purposeful Contrast': a neutral, light foundation (white #FFFFFF, surface grays at #F7F8F9 to #CBD5E0) provides clarity and accessibility, while three strategic accent colors drive interaction and meaning. Primary (#140075, deep indigo) is reserved exclusively for primary CTAs, active states, and brand-critical interactive elements—it commands attention without aggression. Secondary (#F76004, vibrant orange) energizes supporting actions, highlights, and accent elements, creating visual rhythm across the interface. Tertiary (#68B631, organic green) signals positive outcomes, success states, and sustainability-related content. The on-surface hierarchy uses charcoal (#1A202C) for primary text at 16px body weight, mid-gray (#4A5568) for second

Typography

The CESAR type system uses DM Sans exclusively—a geometric sans-serif that conveys both technical precision and human warmth. The hierarchy spans eight levels: Display (60px, 700 weight, -0.04em letter-spacing) for hero statements; Headline-lg (48px, 700) for section titles; Headline-md (32px, 600) for subsection headers; Title-lg (20px, 600) for card titles and form labels; Body-lg (18px, 400) for introductory copy; Body-md (16px, 400) for standard body text and UI labels; Label-md (14px, 600) for button text and badges; and Label-sm (12px, 500) for helper text and metadata. Line-height scales proportionally: Display uses 68px (1.13x), Headlines use 1.25x, Body uses 1.5x, and Labels use 1.33x, ensuring readability across sizes. On small labels (≤12px) placed over busy backgrounds or image

Layout

CESAR employs a fluid 12-column grid with a fixed max-width of 1280px, centered on the viewport. The gutter between columns is 24px (md spacing unit), and the container maintains 24px padding on tablet (768px–1023px) and 40px on mobile (<768px) to preserve readability. Section separation uses lg spacing (40px) vertically between major content blocks, creating a rhythm that feels neither cramped nor excessive. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for component internal padding, md (24px) for card padding and section gutters, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is treated as a design material—negative space around headlines and CTAs is never compressed below md (24px), ensuring vi

Elevation & Depth

CESAR uses a three-tier shadow system to convey depth and interaction state without relying on color shifts. Level 1 (sm elevation: 0 1px 2px 0 rgba(0, 0, 0, 0.05)) is applied to subtle UI elements like input fields and small cards, creating a barely-perceptible lift. Level 2 (md elevation: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) is the default for standard cards, modals, and interactive surfaces—it establishes clear separation from the background without visual drama. Level 3 (lg elevation: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))

Shapes

CESAR adopts a 'Geometric Minimalism' philosophy: rounded corners are used sparingly and purposefully, never decoratively. The rounded scale progresses from sm (0.125rem / 2px) for subtle softening on small UI elements, through DEFAULT (0.25rem / 4px) for buttons and form controls, md (0.375rem / 6px) for card corners and medium containers, lg (0.5rem / 8px) for standard cards and larger surfaces, xl (0.75rem / 12px) for hero sections and prominent containers, and full (9999px) for pill-shaped inputs, badges, and circular avatars. Buttons use DEFAULT (4px) radius to maintain a crisp, professio

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict three-tier hierarchy. Primary buttons (background: #140075, text: white, padding: 12px 24px, height: 44px, radius: 4px) are reserved for the most important action per screen—typically form submission or navigation to the next step. On hover, the background shifts to #0D0050 (10% darker) with a 200ms ease-out transition, providing clear feedback without color inversion. Secondary buttons (background: white, text: #140075, border: 2px solid #140075, padding: 12px 24px, height: 44px, radius: 4px) are used for alternative or cancel actions; on hover, the background becomes #E9D8FD (primary-container) while the text remains primary, creating a subtle fill effect. Tertiary buttons (background: #F76004, text: wh

Do's and Don'ts

**Do**

• Do use primary (#140075) exclusively for the single most important CTA per screen—typically a form submit or next-step button—to maintain visual hierarchy and prevent decision fatigue.
• Do maintain consistent 24px (md) padding inside all cards and containers to create a predictable, scannable layout rhythm across the interface.
• Do apply 200ms ease-out transitions to all color and shadow changes on interactive elements to provide smooth, professional feedback without feeling sluggish.
• Do use DM Sans at 16px (body-md) with 1.5x line-height (24px) for all body copy to ensure readability on screens and print at standard viewing distances.
• Do reserve full (9999px) border-radius exclusively for pill-shaped inputs, badges, and avatars to create a clear visual distinction for interactive elements.
• Do layer elevation using the three-tier shadow system (sm/md/lg) rather than color shifts to maintain a clean, accessible appearance across light and dark contexts.

**Don't**

• Don't use secondary (#F76004) or tertiary (#68B631) as primary CTAs—these are supporting accents and will dilute the visual hierarchy if overused on critical actions.
• Don't apply border-radius greater than lg (8px) to standard buttons, cards, or form controls; excessive rounding creates a playful tone that conflicts with CESAR's professional, pragmatic brand voice.
• Don't reduce padding below sm (12px) inside components or below md (24px) between major sections; white-space is a design material and compression reduces clarity.
• Don't use shadows with blur radii exceeding 15px or opacity exceeding 0.1 on the primary shadow layer; deep shadows feel dated and reduce the system's modern, clean aesthetic.