TIVIT

Overview

TIVIT is a Brazilian enterprise technology and digital transformation leader serving Fortune 500 companies across cloud infrastructure, cybersecurity, and digital solutions. The brand embodies 'Corporate Dynamism'—a visual language that balances institutional gravitas with forward momentum. The UI evokes confidence and innovation through a clean, light-dominant palette punctuated by a vivid red accent that signals action, urgency, and brand authority. The emotional response is one of clarity and capability: users feel guided toward solutions by a trusted, energetic partner.

The brand voice is professional yet approachable, direct without being cold. TIVIT speaks in concrete business outcomes, not abstract promises. Vocabulary favors action verbs (impulsionar, transformar, conectar) and measurable results. The tone is consultative—offering expertise without condescension. Example sentence in brand voice: 'Soluções digitais que transformam sua operação em vantagem competitiva.'

Colors

The TIVIT color system is anchored by a bold, high-saturation red (#e50022) that serves as the primary accent—deployed on all call-to-action buttons, interactive states, and brand-critical moments. This red is not decorative; it is the visual embodiment of urgency and decision-making. The surface stack is built on a cool, light gray (#f2f5f8) that provides breathing room and legibility, with a white (#ffffff) container layer for elevated content. Secondary accent orange (#ff6900) supports energy in illustrations and secondary CTAs. Tertiary blue (#0693e3) is reserved for informational elements, links, and data visualization. The outline color (#32373c) is a near-black used sparingly for borders and dividers, maintaining contrast without harshness. All surfaces use rgba-based shadows (0 3px

Typography

The type system is built on Montserrat, a geometric sans-serif that conveys modernity and precision—essential for a technology brand. The hierarchy spans from display (60px, 700 weight) for hero statements down to label-sm (12px, 500 weight) for metadata. Headlines use a -0.04em letter-spacing to create visual tightness and authority; body text uses 0.01em for readability at smaller sizes. The weight distribution is deliberate: headlines at 600–700 weight create visual dominance, while body copy at 400 weight ensures legibility in long-form content. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm) placed over photographic backgrounds to maintain legibility. Line-height is set at 1.5x the font size for body text (24px for 16px body-md) to support comfortable readi

Layout

The page layout follows a 12-column grid with a max-width of 1280px, providing a fixed container that scales gracefully on desktop and tablet. The spacing scale uses semantic tokens: lg (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element spacing. The hero section uses 80px vertical padding with gutter-width horizontal margins (24px) to create a breathing, expansive entry point. White-space is treated as a design material—sections are separated by at least 40px of breathing room, and card interiors use 24px padding to avoid visual crowding. The grid is fluid on mobile (single column with 12px gutters) and expands to 2–3 columns on tablet and desktop. Container max-width is enforced at 1280px to prevent line-length from exceeding 75 characters o

Elevation & Depth

Depth in TIVIT is conveyed through a restrained shadow system that avoids the heavy, dramatic shadows of skeuomorphic design. Level 1 (base surfaces) uses no shadow—the light gray background (#f2f5f8) provides sufficient visual separation. Level 2 (cards and contained elements) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that suggests interactivity without visual drama. Level 3 (modals, popovers, and elevated overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer, more diffuse shadow that conveys floating above the page. Hover states on cards transiti

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are used strategically to soften the corporate aesthetic without sacrificing precision. Buttons use 4px border-radius (rounded.md) to signal interactivity while maintaining a professional edge. Cards use 6px border-radius (rounded.md) to create visual softness without appearing playful. Input fields use 30px border-radius (rounded.full) to create a pill-shaped container that feels modern and approachable. The full-radius treatment on inputs is intentional: it signals a conversational, user-friendly interaction model. Badges and tags u

Components

Action Elements Buttons are the primary interaction primitive. The primary button (button-primary) uses background-color: #e50022, color: #ffffff, padding: 8px 16px, height: 40px, border-radius: 4px, and font-weight: 600. On hover, the background transitions to #cc0019 (a darker red) over 200ms with no shadow change. On active/pressed, the background becomes #990017. The secondary button (button-secondary) uses a transparent background with a 2px solid border in primary red, allowing it to sit alongside primary buttons without visual competition. Hover state applies background-color: #f0f3f7 (surface-container-high) to signal interactivity. All buttons use Montserrat 600 weight at 14px (label-md) to ensure text clarity and visual weight.

Containers & Surfaces Cards (card component

Do's and Don'ts

**Do**

• Do use primary red (#e50022) exclusively for primary CTAs, active states, and brand-critical moments—never for decorative elements or backgrounds.
• Do maintain 40px of vertical spacing between major sections to create visual breathing room and support cognitive processing.
• Do apply Montserrat 600 weight to all interactive labels (buttons, links, form fields) to signal clickability and create visual hierarchy.
• Do use the full-radius (30px) border-radius on input fields to create a modern, approachable interaction model that differentiates from traditional rectangular inputs.
• Do transition hover states over 200ms using ease-in-out timing to create smooth, professional interactions that feel responsive without being jarring.

**Don't**

• Don't use primary red (#e50022) for body text, backgrounds, or non-interactive elements—reserve it for moments that demand user action.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use blur-radius greater than 24px, as this violates the light, airy aesthetic and creates visual heaviness.
• Don't mix typefaces—Montserrat is the sole brand typeface. Avoid system fonts, serif fonts, or secondary sans-serifs in the UI.
• Don't use border-radius: 0 (sharp corners) on interactive elements; this creates an institutional, cold feeling that contradicts the brand's approachable positioning.
• Don't apply background-color changes on card hover—only shadow elevation should change. Background color shifts create visual instability and distract from content.