Almaviva Solutions

Overview

Almaviva Solutions is a 29-year-old Brazilian IT services enterprise serving 1,200+ certified professionals across public and private sectors. The design system embodies **Data-Driven Corporatism**—a visual language that merges enterprise authority with digital innovation, using a cool-toned palette (deep navy backgrounds, bright cyan/blue accents) to convey technical precision, trustworthiness, and forward momentum. The UI communicates complex IT solutions through clarity and hierarchy, never sacrificing legibility for decoration. The brand personality is confident yet approachable: authoritative in tone, data-literate in vocabulary, and solution-focused in every interaction. Example sentence in brand voice: "Our 1,200 certified professionals deliver measurable ROI through proven technologies—let's solve your business challenge today."

Colors

The color system balances corporate gravitas with digital energy. **Primary (#619ef3)** is the signature accent—a bright, saturated cyan used exclusively on CTAs, active states, and key interactive elements; it commands attention without aggression. **Secondary (#ff161f)** is a vivid red reserved for alerts, errors, and critical actions—it signals urgency and demands immediate recognition. **Tertiary (#007bff)** provides a deeper blue for supporting accents and secondary information hierarchies. The surface stack anchors the system: **surface (#ffffff)** is the default canvas, while **surface-container** variants (#dee2e6 to #cccccc) create subtle depth for cards, inputs, and grouped content. **On-surface (#252a2b)** is a near-black text color ensuring 18:1 contrast on white backgrounds. *

Typography

The type system uses **Nunito** (Google Fonts, wght 400–700) as the single typeface family, establishing visual unity across all scales. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) breaks major sections; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) flows narrative content; Body-md (16px, 400 weight, 24px line-height) is the default paragraph style. Label-md (14px, 600 weight, 0.01em tracking) marks buttons and form labels; Label-sm (12px, 500 weight, 0.05em tracking) annotates metadata and helper text. The weight progression (400 for body, 600 for labels/headings, 700 for display) creates clear hierarchy

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, centered via margin: 0 auto. The spacing scale is semantic: **unit (8px)** is the base increment; **xs (4px)** for micro-spacing (icon-to-text gaps); **sm (12px)** for compact component padding; **md (24px)** for standard card padding and section gutters; **lg (40px)** for major section separation; **xl (64px)** for hero-to-content breathing room. Container max-width of 1280px ensures readability on desktop while maintaining mobile responsiveness via breakpoints at 768px (tablet) and 480px (mobile). White-space philosophy: generous vertical rhythm (40–64px between sections) creates visual rest and emphasizes content hierarchy. Horizontal gutters use {spacing.gutter} (24px) on desktop, reducing to 12px on tablet and 8

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle color shifts, avoiding flat design while maintaining clarity. **Level 1 (Base)**: No shadow; surface elements sit flush on {colors.surface} (#ffffff). **Level 2 (Raised Cards & Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); background: {colors.surface-container-lowest} (#f0f4f8). This shadow is soft and spread, creating gentle separation without drama—ideal for cards, input fields, and list items. **Level 3 (Modals & Overlays)**: box-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); background: {colors.surface} with a semi-transparent

Shapes

The shape philosophy is **Measured Precision**—sharp corners with minimal rounding, reflecting the brand's technical, data-driven identity. **sm (0.25rem / 2px)** is used on buttons and small interactive elements, preserving their compact, decisive appearance. **DEFAULT (0.5rem / 4px)** applies to input fields, badges, and standard cards, balancing softness with formality. **md (0.75rem / 6px)** rounds larger cards and container blocks. **lg (1rem / 8px)** is reserved for modals and hero sections, adding subtle approachability without compromising authority. **full (9999px)** creates pill-shap

Components

Action Elements **Button-primary** uses {colors.primary} (#619ef3) background with {colors.on-primary} (#ffffff) text, {rounded.sm} (2px), padding 9px 24px, height 44px, and no border. On hover, background shifts to #4a8ae6 (darker blue) with a 200ms ease-in-out transition. **Button-secondary** is transparent with a 1px solid {colors.primary} border, same padding and height, text color {colors.primary}; on hover, background becomes {colors.primary-container} (#e1f0ff). **Button-danger** mirrors button-primary but uses {colors.secondary} (#ff161f) for destructive actions; hover state darkens to #e63946. All buttons apply {typography.label-md} (14px, 600 weight) and disable at 50% opacity with cursor: not-allowed.

Containers & Surfaces **Card** has {colors.surface} (#ffffff) backgro

Do's and Don'ts

**Do**

• Do use {colors.primary} (#619ef3) exclusively for primary CTAs and active/focus states—it's the brand's signature accent and must remain distinctive.
• Do apply {spacing.md} (24px) as the default padding inside cards and containers; it creates the visual rhythm that defines the system.
• Do use Nunito 600 weight for all labels, buttons, and headings; 400 weight for body text only—this weight contrast drives hierarchy.
• Do transition interactive states over 200ms with ease-in-out timing; it signals responsiveness without feeling sluggish.
• Do maintain {rounded.sm} (2px) on buttons to preserve the technical, decisive aesthetic—avoid over-rounding.
• Do layer shadows (Level 2 and Level 3) to create depth; never use flat design or glassmorphism in this system.

**Don't**

• Don't use {colors.secondary} (#ff161f) for non-critical UI; it's reserved for errors and destructive actions only—overuse dilutes urgency.
• Don't mix typefaces; Nunito is the sole family across all scales—introducing Georgia, Arial, or Helvetica breaks the system.
• Don't apply border-radius > 8px on standard components; it softens the corporate, technical identity and reads as consumer-grade.
• Don't hardcode colors inside component styles; always reference {colors.x} tokens so the system remains maintainable and themeable.
• Don't use opacity < 50% for disabled states; it becomes illegible—use {colors.outline} (#919191) at 60% opacity instead.
• Don't add drop-shadows > 12px blur radius; they create visual noise and obscure the clean, data-centric aesthetic.