LP Centro Integrado

Overview

LP Centro Integrado's design system embodies 'Institutional Minimalism'—a refined aesthetic that prioritizes clarity, accessibility, and user reassurance during critical security moments. The interface serves as a transparent intermediary between user and institution, employing a clean white canvas (rgb(255, 255, 255)) with a single accent color—a vibrant indigo (#6366f1)—to guide attention and signal trustworthiness. The brand personality is calm, professional, and direct: it never apologizes, never overwhelms, and always explains what is happening in plain language. Voice example: 'Checking your browser before accessing lpcentrointegrado.com.br. Please wait for up to 5 seconds.' The tone is matter-of-fact, reassuring without being patronizing, and grounded in institutional authority.

Colors

The color system is deliberately restrained, using a neutral foundation with a single accent. Primary (#6366f1) is the indigo accent applied to the spinner's leading edge and interactive focus states—it signals progress and brand presence without aggression. Surface colors form a tight stack: white (#ffffff) as the base, with subtle grays (#e9ecef, #f0f9fa) reserved for hover states and disabled elements. On-surface text is near-black (#1a1a1a) for maximum legibility at 16px body size. Secondary grays (#666666, #6c757d) are used for supporting text and disabled states. The primary-container (#e5e4ff) provides a soft background for the spinner's outer ring, creating visual depth through color contrast rather than shadow. Error states use #dc2626 for critical alerts. All interactive elements

Typography

The type system uses DM Sans exclusively—a geometric sans-serif that conveys both institutional credibility and modern accessibility. Display and headline weights (600) are reserved for primary messaging (h1 at 24px, lineHeight 1.4), while body text (400 weight) remains at 14–16px for comfortable reading. The hierarchy is shallow by design: there are only three typographic levels on the security check page (headline, body, label), preventing cognitive overload during a moment of uncertainty. Letter-spacing is minimal (0em to 0.03em) to maintain the geometric precision of DM Sans. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased on all text to ensure crisp rendering at small sizes. The 1.5 line-height on body text (14px) provides breathing room without excess

Layout

The layout is a single-column, centered container (max-width: 600px) vertically centered within the viewport (min-height: 100vh, display: flex, justify-content: center, align-items: center). This creates a focal point that draws the eye to the security message and spinner. Padding is 20px on all sides, providing a safe margin on mobile devices. The spacing scale follows a 8px base unit: the spinner sits 32px above the heading (margin: 0 auto 32px), the heading has 16px margin-bottom, and the body text sits directly below with no additional margin. This creates a tight, cohesive composition that feels intentional rather than scattered. The grid is effectively 1 column; the container-max-width of 600px ensures readability on tablets and desktops without excessive line length. Responsive brea

Elevation & Depth

Elevation is achieved through color and border rather than shadow, reflecting the institutional minimalism aesthetic. The spinner uses a two-tone border (outer ring: #e5e4ff, leading edge: #6366f1) to create a sense of motion and depth without relying on blur or shadow. Dropdown panels (select-panel) employ a single 1px border (#d0d0d0) and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to separate them from the background—this is the only shadow in the system, reserved for floating elements that must appear above the page. Hover states are conveyed through background-color shifts (#f0f9fa fo

Shapes

The shape philosophy is 'Technical Clarity'—sharp enough to feel precise and institutional, rounded just enough to avoid harshness. Buttons and interactive elements use border-radius: 4px (0.25rem), a subtle rounding that suggests refinement without softness. The spinner uses border-radius: 50% (full circle) to emphasize its role as a loading indicator—the circular form is universally recognized as 'in progress.' Dropdown panels and select options use the same 4px radius for consistency. This conservative rounding strategy reflects the brand's institutional nature: the UI is not playful or org

Components

Loading & Feedback The spinner-ring component is the visual anchor of the security check experience. It consists of a 64px × 64px circle with a 4px border: the outer ring is #e5e4ff (primary-container), and the top border is #6366f1 (primary), creating a visual indicator of progress. The animation spins continuously (animation: spin 1s linear infinite) without pause, signaling active processing. On tablets (768px breakpoint), the spinner reduces to 56px; on mobile (480px), it becomes 48px with a 3px border to maintain visual proportion. The spinner-ring-small and spinner-ring-mobile variants ensure the component scales gracefully across devices.

Typography & Messaging The heading-primary component (h1) uses headline-md typography (24px, 600 weight, lineHeight 1.4) in near-black (#

Do's and Don'ts

**Do**

• Do use the primary indigo (#6366f1) exclusively for interactive focus states, spinner leading edges, and brand-critical CTAs—never dilute it with secondary uses.
• Do maintain the centered, single-column layout (max-width: 600px) for all security and verification flows to create a focused, reassuring experience.
• Do apply the 4px border-radius consistently across all interactive elements (buttons, dropdowns, inputs) to maintain the 'Technical Clarity' aesthetic.
• Do use DM Sans 600 weight for all headings and labels; reserve 400 weight for body text to create clear typographic hierarchy without excessive variation.
• Do test spinner and heading sizes at 480px, 768px, and 1024px breakpoints to ensure visual proportion remains consistent across devices.

**Don't**

• Don't use shadows for elevation except on floating panels (select-panel); rely instead on border and background-color shifts to maintain the flat, institutional aesthetic.
• Don't introduce secondary accent colors or gradients; the system's power comes from its restraint—white canvas + indigo accent + neutral grays.
• Don't apply border-radius greater than 4px to form controls or buttons; the sharp-but-refined 4px radius is essential to the 'Technical Clarity' brand voice.
• Don't exceed 600px container width or deviate from the centered, single-column layout; the focused composition is critical to user reassurance during security checks.
• Don't use system fonts or fallback stacks; always load DM Sans from Google Fonts to ensure consistent brand presentation across all browsers and devices.