Guardianseg

Overview

Guardianseg is a Brazilian insurance and financial services provider that bridges corporate credibility with modern digital accessibility. The design system embodies 'Institutional Modernism'—a movement that combines the gravitas and trust-building elements of traditional financial design with contemporary clarity, generous whitespace, and purposeful color accents. The brand serves individuals and businesses seeking insurance solutions with confidence, and the UI evokes a sense of security without coldness: professional yet approachable, structured yet human. The emotional response is one of calm assurance—users feel guided through complex financial decisions by a system that respects their intelligence and time.

The voice is direct, informative, and reassuring. Guardianseg avoids jargon when possible, explains options clearly, and uses warm language to demystify insurance. The vocabulary leans toward action-oriented clarity: 'Proteja seu futuro' (Protect your future), 'Cotação rápida' (Quick quote), 'Suporte 24/7' (24/7 support). Example sentence in brand voice: 'Sua proteção começa aqui—escolha o plano que faz sentido para você' (Your protection starts here—choose the plan that makes sense for you).

Colors

The color system is anchored by a deep, trustworthy primary blue (#1863dc) used for all primary CTAs, links, and interactive focus states. This blue conveys institutional reliability and is applied to buttons, form focus rings (0 0 0 3px rgba(24, 99, 220, 0.1)), and key navigation elements. The secondary accent is a warm, assertive red (#af3335) reserved for alerts, error states, and secondary CTAs that require distinction—it appears in error messages and validation feedback with a light container (#ffe8e8) for non-critical warnings. A supporting tertiary blue (#2ea3f2) provides visual rhythm in data visualizations, badges, and secondary highlights without competing with primary. The surface stack is anchored in clean white (#ffffff) for maximum readability of financial content, with caref

Typography

The type system pairs Montserrat (geometric, confident, modern) for headlines and display text with Open Sans (humanist, readable, warm) for body and label text. This pairing communicates both authority and accessibility: Montserrat's structured letterforms convey financial precision (headline-lg at 40px, 700 weight, -0.02em letter-spacing), while Open Sans's open counters and generous spacing ensure body copy remains legible even at 14px (label-md: 600 weight, 0.02em letter-spacing for emphasis on form labels). Display text (60px, 700 weight, -0.04em) is reserved for hero sections and major page titles. Headline-md (28px, 600 weight) anchors section headers. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and card descriptions; body-md (16px, 400 weight, 2

Layout

The layout system uses a 12-column grid with a max-width of 1080px, providing a balanced container that accommodates both desktop and tablet views without excessive horizontal scrolling. The gutter is consistently 24px (md spacing), creating a rhythm that feels neither cramped nor wasteful. Section separation uses lg spacing (40px) between major content blocks, while internal card padding uses md spacing (24px). Form fields and inputs use sm spacing (12px) for label-to-field distance and 8px (unit) for helper text below fields. The whitespace philosophy prioritizes breathing room around financial content: a single insurance product card should have 24px padding internally and 40px margin below before the next section. Container max-width of 1080px ensures that at 1920px displays, the layou

Elevation & Depth

Depth in Guardianseg is conveyed through a restrained shadow system that avoids the heavy drop-shadows of older financial design. The base elevation (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to all cards and input fields, providing subtle separation from the white background without visual weight. On hover, cards elevate to md (0 4px 12px rgba(0, 0, 0, 0.08)), signaling interactivity with a 200ms transition. Modals and overlays use lg (0 16px 40px rgba(0, 0, 0, 0.12)) to create clear visual hierarchy and focus. Form focus states apply a colored ring (0 0 0 3px rgba(24, 99, 220, 0.1)) rath

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are used strategically to soften the institutional feel while maintaining precision. Buttons and form inputs use rounded-md (0.75rem / 12px) for a modern, approachable appearance that still reads as professional. Cards and containers use rounded-lg (1rem / 16px) to create visual distinction from the background without appearing playful. Input fields use rounded-DEFAULT (0.5rem / 8px) for a tighter, more form-like appearance. Badges and chips use rounded-full (9999px) to signal secondary, non-critical information. The rationale: larger

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (solid #1863dc background, white text, 44px height, 12px 24px padding, rounded-md), secondary (transparent background, 2px solid #1863dc border, primary text, same dimensions), and ghost (transparent, no border, primary text, used for tertiary actions). All buttons use label-md typography (14px, 600 weight, 0.02em letter-spacing). Hover states transition background-color over 200ms ease-in-out: primary buttons darken to #0d4a7a, secondary buttons fill with primary-container (#e3f0ff), and ghost buttons fill with surface-container-high (#e0e0e0). Active/pressed states use #003388 for primary buttons. Focus states apply a 3px outline in primary-container color (rgba(24, 99, 220, 0.2)) with 2

Do's and Don'ts

**Do**

• Do use primary blue (#1863dc) exclusively for primary CTAs, form focus states, and key interactive elements—never use it for decorative elements or backgrounds.
• Do maintain 24px (md) gutter spacing and 40px (lg) section separation to ensure financial content breathes and remains scannable.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to provide tactile feedback without feeling sluggish.
• Do use Montserrat for all headlines and Open Sans for all body text—never mix or substitute fonts, as the pairing is core to brand recognition.
• Do apply the full M3 color token system in code (e.g., {colors.primary}, {colors.on-surface-variant}) so the design system remains maintainable and themeable.
• Do use rounded-lg (16px) for cards and rounded-md (12px) for buttons to establish clear visual hierarchy between containers and actions.
• Do include helper text (label-sm, on-surface-variant color) below form fields to guide users through financial decisions without overwhelming them.

**Don't**

• Don't use secondary red (#af3335) for primary CTAs or positive actions—reserve it exclusively for errors, alerts, and destructive actions.
• Don't apply shadows heavier than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12))—excessive depth contradicts the modern, flat aesthetic.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds outside of the defined color tokens; always use on-surface (#212121) or surface (#ffffff) from the system.
• Don't mix rounded-full (9999px) with buttons or primary containers—reserve it for badges and chips only to maintain visual distinction.
• Don't reduce font sizes below 12px (label-sm) for body text, even on mobile—financial content must remain legible and accessible.
• Don't apply multiple shadows or complex backdrop-filters to cards; keep elevation simple and predictable so users can quickly parse the visual hierarchy.
• Don't use outline-variant (#cccccc) or surface-container colors for interactive elements—they should always be primary, secondary, or tertiary to signal affordance.