Por Exemplo

Overview

Por Exemplo is a B2B corporate education platform that bridges the gap between inspirational knowledge and practical implementation. The brand serves enterprise clients seeking transformative training in innovation, AI, and business strategy—connecting strategic lectures to hands-on workshops through expert practitioners. The aesthetic is "Architectural Minimalism with Precision Accents": a deep black canvas (rgb(0,0,0)) paired with a vivid red accent (#d90429) that pulses with urgency and signals actionable transformation. The UI evokes clarity through restraint—every element earns its space, and the red acts as a visual call-to-action that commands attention without noise.

The brand voice is direct, pragmatic, and grounded in results. Tone: confident without arrogance, precise without coldness. Vocabulary favors concrete action verbs ("transform," "connect," "implement") over abstract aspirations. The brand rejects motivational clichés; instead, it speaks to C-suite pragmatism: "Inspiration is important, but it's daily application that generates results." Example sentence in brand voice: "We don't just inspire—we architect the path from knowledge to execution."

Colors

The color system is built on a high-contrast, minimalist foundation optimized for B2B credibility and digital clarity. **Primary (#d90429)** is the signature accent—used exclusively on call-to-action buttons ("Discutir meu Projeto"), active states, accent bars on cards, and timeline highlights. It commands 22% of visual frequency on the page, making it unmistakable. On hover, primary shifts to #ff2a55 (a lighter, more energetic red) with a shadow intensification (0 8px 25px rgba(217,4,41,0.4)) to signal interactivity. **Surface stack**: The base is pure black (#000000) for the page background, with elevated surfaces at #0a0a0a (surface-container-lowest, used for hero and card backgrounds) and #121212 (surface-container, used on hover states). This 18px separation in luminance creates subtl

Typography

The type system centers on Inter (self-hosted via @font-face with font-display: swap for performance) across a 300–700 weight range, creating a sophisticated hierarchy that balances readability with visual distinction. **Display (64px, weight 300, line-height 68px, letter-spacing -0.03em)** is reserved for hero headlines like "Palestras e treinamentos que transformam conhecimento em prática"—the light weight conveys confidence and modernity, while the tight negative letter-spacing (-0.03em) creates a premium, editorial feel. **Headline-lg (40px, weight 600)** is used for section titles and card headings; the heavier weight provides contrast against body text. **Body-lg (18px, weight 300, line-height 28px)** is the primary copy size for hero paragraphs and supporting text, maintaining legib

Layout

The layout system uses a fluid, 12-column grid with a max-width of 1440px and responsive padding of 5vw (clamp(64px, 5vw, 80px)) on left/right, ensuring content breathes on mobile while maintaining structure on desktop. **Section rhythm** is governed by clamp(4rem, 10vw, 8rem) vertical padding (64px–128px depending on viewport), creating a breathing space that scales with screen size. The hero section spans 80vh minimum height, anchoring the page with visual weight. **Container max-width** is 1440px, referenced in the CSS as max-width: 1440px on .container elements. **Spacing scale**: xs (4px) for micro-interactions, sm (12px) for tight grouping, md (24px) for standard component padding, lg (40px) for section separation, xl (64px) for major layout breaks. The manifesto grid uses a 4fr/6fr

Elevation & Depth

Depth in this system is achieved through **luminance shifts and shadow precision**, not through layering or blur. The elevation model has three distinct levels: **Level 1 (Base)**: The pure black background (rgb(0,0,0)) with a subtle SVG noise texture (opacity 0.03, baseFrequency 0.85) applied via body::before pseudo-element. This creates micro-texture without visual noise, grounding the interface. **Level 2 (Standard Card)**: Surfaces at #0a0a0a or #121212 with a 1px border of rgba(255,255,255,0.18) and a soft shadow of 0 4px 14px rgba(217,4,41,0.2). This shadow is red-tinted, reinforcing bra

Shapes

The shape philosophy is **"Architectural Precision"**—sharp, minimal corners that signal professionalism and technical rigor, with selective use of full-radius for specific interactive elements. **Border-radius scale**: sm (4px, 0.25rem) is the default for buttons, inputs, and small interactive elements, creating a subtle softness without compromising the geometric aesthetic. md (8px, 0.75rem) is used for card corners and larger containers, providing visual breathing room while maintaining structure. lg (16px, 1rem) is reserved for the architectural metaphor container and hero sections, creati

Components

Action Elements **Button-Primary** (background: #d90429, text: #ffffff, padding: 20px 40px, height: 56px, border-radius: 4px, font-size: 14.4px, font-weight: 600, letter-spacing: 0.1em, text-transform: uppercase) is the primary call-to-action, used for "Discutir meu Projeto" and high-intent actions. The button includes a shadow of 0 4px 14px rgba(217,4,41,0.2) and a transition of all 0.5s cubic-bezier(0.16, 1, 0.3, 1). On hover, the background shifts to #ff2a55, shadow intensifies to 0 8px 25px rgba(217,4,41,0.4), and the button scales to 1.03 with a -2px vertical translate, creating a tactile "lift" effect. On disabled state, opacity drops to 0.7 and transform is reset to none. **Button-Secondary** (background: transparent, border: 1px solid rgba(255,255,255,0.18), text: #ffffff, padd

Do's and Don'ts

**Do**

• Do use the red accent (#d90429) exclusively on interactive elements (buttons, active states, hover effects) to maintain visual hierarchy and guide user attention.
• Do apply the breathing light animation (radial-gradient rgba(217,4,41,0.15) with 80px blur, 12s infinite) in hero sections to create energy without overwhelming content.
• Do maintain the 4px border-radius default on buttons and inputs—it signals precision and professionalism while remaining approachable.
• Do use the full Inter weight range (300–700) to create typographic contrast: light (300) for body text and headlines, semi-bold (600) for interactive elements.
• Do layer shadows with red tints (0 4px 14px rgba(217,4,41,0.2)) to reinforce brand identity while signaling elevation.
• Do use the grid pattern overlay (20px × 20px, rgba(255,255,255,0.03)) on large containers to evoke architectural/blueprint aesthetics.

**Don't**

• Don't use the red accent on non-interactive elements (backgrounds, borders, body text)—it dilutes the signal and reduces CTA effectiveness.
• Don't introduce rounded corners (border-radius > 4px) on section dividers or major layout elements; keep these sharp to maintain the minimalist, architectural feel.
• Don't apply multiple shadows or blur effects in sequence; keep shadows tightly controlled (max 25px blur) to preserve the high-fidelity aesthetic.
• Don't use system-ui or generic sans-serif fallbacks—Inter is the sole typographic voice; ensure @font-face is self-hosted with font-display: swap for performance.
• Don't exceed 18px luminance separation between surface levels; the black-to-dark-gray palette must remain cohesive and premium.
• Don't animate elements with transitions longer than 0.6s; use cubic-bezier(0.16, 1, 0.3, 1) (Apple easing) for all motion to maintain the brand's snappy, confident feel.