SEPLAG Suite

Overview

SEPLAG Suite is a Brazilian government administrative portal designed with austere, utilitarian minimalism—a design philosophy rooted in 'Institutional Clarity,' where every visual element serves a functional purpose without ornamentation. The interface prioritizes accessibility and legibility for public servants navigating complex workflows, with a neutral grayscale palette (whites, light grays, charcoal) that conveys authority, stability, and impartiality. The emotional response is one of calm efficiency: users encounter a clean, uncluttered canvas where information hierarchy is achieved through typography weight and subtle surface layering rather than color drama. This is not a consumer brand; it is a tool.

The voice is formal, precise, and procedurally rigorous—never casual, never playful. Vocabulary leans toward administrative terminology: 'access', 'authorize', 'submit', 'confirm'. The brand personality is that of a trusted civil servant: competent, discreet, and focused on the task at hand. Example sentence: 'Access denied. Contact your administrator to request authorization.'

Colors

The color system is deliberately restrained, employing a monochromatic hierarchy anchored in grays and whites. Primary (#505050) is a mid-tone charcoal used sparingly for interactive elements and disabled states—it signals authority without aggression. Surface colors range from pure white (#ffffff) at the brightest level to #e9ecef (a cool light gray) for container backgrounds, creating subtle visual separation without contrast shock. The secondary palette (#6c757d, a cooler gray-blue) is reserved for supplementary text and hover states, while the tertiary (#d0d0d0, a neutral light gray) provides the softest container backgrounds for low-emphasis content. Error states use a restrained red (#d32f2f) only when necessary to signal critical failures. Hover and focus states employ the secondary

Typography

The type system uses Times New Roman serif throughout, a deliberate choice that evokes institutional formality and printed government documents—reinforcing the brand's connection to official, legally-binding administrative processes. Display and headline weights (700) are reserved for error messages and critical page titles, rendered at 32px–48px with tight line-height (40px–56px) to maximize impact in minimal space. Body text (14px–16px, 400 weight) is set with 20px–24px line-height to ensure comfortable reading of dense administrative content. Labels and form text use 12px–14px with 0.02em–0.03em letter-spacing to add precision and reduce ambiguity in critical UI labels. When small labels appear over busy backgrounds or in dropdown menus, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08)

Layout

The layout follows a fixed 12-column grid with a 1200px container max-width, centered on the viewport. Page rhythm is governed by a 4px base unit, with semantic spacing increments (8px, 12px, 16px, 24px) applied to margins and padding. Sections are separated using lg spacing (16px) to create breathing room without excessive white space. The gutter between grid columns is 12px, maintaining tight horizontal rhythm appropriate for data-dense administrative interfaces. Form elements and select dropdowns use md spacing (12px) for internal padding, with sm spacing (8px) between stacked form fields. The philosophy is 'compact efficiency'—every pixel of white space is intentional, never decorative. Container max-width of 1200px ensures that even on large displays, text remains scannable and the in

Elevation & Depth

Depth is conveyed through subtle shadow and surface color shifts rather than dramatic layering. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for minor UI elements like form labels, md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdown panels and modal overlays, and lg (0 8px 16px rgba(0, 0, 0, 0.12)) for critical modals or floating panels that demand visual separation. Dropdown panels (.bb-custom-select-panel) use md elevation with a 1px border in #d0d0d0 to create a crisp, defined edge. The base surface (#ffffff) has no shadow; elevation is achieved by layering surface

Shapes

The shape philosophy is 'Institutional Sharpness'—minimal rounding that signals precision and formality without the softness of consumer design. All interactive elements use a 4px border-radius (DEFAULT), applied consistently to select openers, dropdown panels, and form inputs. This modest rounding softens hard edges just enough to feel contemporary while maintaining the geometric rigor of government interfaces. Buttons and larger containers may use 6px–8px rounding (md–lg) for slightly more visual breathing room, but never exceed 12px (xl) as that would undermine the formal aesthetic. The rea

Components

Action Elements Select droppers (.bb-custom-select-opener) are 36px tall with 12px horizontal padding, using background-color #e9ecef and a 1px border in #666666. On hover, the background shifts to #e0e0e0 and border to #505050, signaling interactivity. Disabled selects show background #e9ecef with border #505050 and text color #6c757d, with cursor: not-allowed. The dropdown arrow is a pure CSS triangle (border-left: 5px solid transparent, border-right: 5px solid transparent, border-top: 5px solid #666) positioned 8px from the right edge, rotating 180deg when the panel opens.

Containers & Surfaces Dropdown panels (.bb-custom-select-panel) appear 4px below the opener (margin-top: 4px) with background #ffffff, border 1px #d0d0d0, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). The pa

Do's and Don'ts

**Do**

• Do use Times New Roman serif for all typography to reinforce institutional authority and legal formality.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to dropdown panels and modals to create crisp visual separation.
• Do maintain 4px border-radius on all interactive elements—no softer, no sharper—to balance modernity with formality.
• Do use the secondary-container color (#f0f9fa) for hover states on options and form elements to signal interactivity subtly.
• Do set line-height to 1.5 (24px) on body text and 1.5 on dropdown options to ensure legibility in dense administrative content.

**Don't**

• Don't use rounded corners larger than 12px (xl)—the aesthetic demands geometric precision, not consumer softness.
• Don't apply color to convey state; use background-color shifts and border-color changes instead to maintain the monochromatic palette.
• Don't exceed 16px font size for body text in forms and dropdowns—administrative interfaces prioritize density and scannability over large, spacious type.
• Don't add decorative shadows or gradients; every shadow must serve a functional purpose (elevation, focus, depth separation).
• Don't use sans-serif fonts; Times New Roman is non-negotiable for this brand's institutional identity.