SIGAA

Overview

SIGAA is a comprehensive academic management system designed to serve Brazilian educational institutions with institutional-grade reliability and accessibility. The design aesthetic reflects early-2000s enterprise software conventions: structured, hierarchical, and optimized for information density rather than visual novelty. The system prioritizes clarity, predictability, and functional efficiency over contemporary design trends, creating a familiar interface that institutional users can navigate with confidence. The visual language is 'Institutional Formalism'—a deliberate embrace of conservative, grid-based layouts with clear typographic hierarchy and restrained color application.

The brand voice is formal, procedural, and reassuring. SIGAA communicates with precision and without flourish: instructions are direct, error messages are clear, and navigation is explicit. The tone avoids colloquialisms and maintains professional distance appropriate to an academic institution. Example sentence in brand voice: 'O sistema diferencia letras maiúsculas de minúsculas APENAS na senha, portanto ela deve ser digitada da mesma maneira que no cadastro.'

Colors

The SIGAA color system is built on a foundation of institutional blue (#003395) paired with warm institutional gold (#d99c44), creating a formal, trustworthy aesthetic rooted in Brazilian government and academic conventions. Primary (#003395) is the signature accent used on all interactive elements—links, buttons, and focus states—establishing a consistent call-to-action language throughout the system. Secondary (#d99c44) serves as a supporting accent for borders, dividers, and emphasis, creating visual rhythm without competing with primary. The surface stack is anchored in pure white (#ffffff) for maximum legibility, with carefully calibrated grays (#f7f7f7, #eff3fa, #c8d5ec, #dedfe3) creating subtle depth and container hierarchy without introducing visual noise. Error red (#ff0000) is re

Typography

The typography system uses Verdana as the primary typeface—a deliberate choice reflecting institutional web standards and screen legibility at small sizes (11.2px base body text). The type hierarchy is minimal and functional: display sizes (32px, bold) are reserved for page titles, headline-lg (24px, bold) for section headers, and body-md (12px, regular) for form labels and body copy. Font weights are binary—400 (regular) for body text and 600–700 (bold) for headers and labels—avoiding intermediate weights that can appear ambiguous at small sizes. Letter-spacing is kept at 0em for body text to maximize information density, with no additional tracking applied. Line-height is set conservatively (18–28px depending on size) to ensure readability in dense form layouts. Specific treatment: apply

Layout

The layout system is fixed-width and centered, with a container max-width of 984px (matching the #container width in CSS). The page is divided into three major zones: header (#cabecalho, 60px height), content area (#conteudo, fluid), and footer (#rodape, 40px height). The header uses a dark blue background (#404e82) with white text, establishing strong visual hierarchy. Content is organized in a single-column layout with nested tables for form structure—a deliberate choice reflecting the system's legacy architecture and institutional familiarity. Spacing follows a 4px base unit: form rows use 3px padding (cellpadding='3'), section separators use 12–24px margins, and major section breaks use 40px margins. The gutter between content and container edge is 12px on each side. White-space is use

Elevation & Depth

Depth in SIGAA is conveyed through subtle borders and minimal shadows rather than dramatic layering. The elevation system uses three levels: Level 1 (Base) is the white background (#ffffff) with no shadow; Level 2 (Cards/Panels) applies a 1px solid border in #cccccc (outline) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); Level 3 (Modals/Overlays) applies the same border with box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12). Form containers (.formulario, .caixaBranca) use a 1px solid border in #6a6a6a or #dedfe3 depending on context. Section headers (h2#title) have a bottom border (border-bottom: 1

Shapes

The shape philosophy is 'Minimal Geometric'—border-radius is applied sparingly and conservatively, with a maximum of 4px (rounded.md) used only on custom select dropdowns and specialized components. Most form elements (input, button, select) have border-radius: 0px, maintaining sharp corners that reinforce the institutional, grid-based aesthetic. The few rounded elements (bb-custom-select-panel, .bb-custom-select-option) use border-radius: 4px to distinguish them as enhanced UI components. This restraint reflects the system's heritage in early-2000s web standards and its target audience's pref

Components

Action Elements Buttons in SIGAA are minimal and functional. Primary buttons (button-primary) use background-color: #003395, color: #ffffff, padding: 4px 12px, height: 24px, border: 1px solid #003395, border-radius: 0px, and fontFamily: Arial. On hover, the background shifts to #6593cf (inverse-primary) with a 0ms transition (no animation). Secondary buttons use background-color: #eff3fa, color: #000000, border: 1px solid #cccccc, and the same padding/height. Submit buttons (input[type='submit']) apply the same styling as primary buttons. All buttons must have cursor: pointer and margin: 0 2px to maintain spacing in button groups.

Containers & Surfaces Cards and panels are the primary container elements. Standard cards (.caixaBranca) use background-color: #ffffff, border: 1px soli

Do's and Don'ts

**Do**

• Do use #003395 (primary) exclusively for interactive elements—links, button text, and focus states—to create a consistent call-to-action language.
• Do apply border-bottom: 3px solid #d99c44 to major section dividers and page headers to establish visual rhythm and institutional identity.
• Do maintain form input padding at 1px 2px and border at 1px solid #aaaaaa to preserve information density and institutional aesthetic.
• Do use Verdana 11.2px for body text and form labels; do not substitute with system-ui or sans-serif fallbacks that may render at different sizes.
• Do apply font-weight: bold and color: #003395 to all form labels (th.rotulo, label) to create clear visual hierarchy in dense layouts.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards and panels; do not use larger blur-radius values that soften the institutional aesthetic.

**Don't**

• Don't apply border-radius greater than 4px to any element; sharp corners reinforce institutional formality and grid-based alignment.
• Don't use rounded buttons or soft shadows that conflict with the early-2000s enterprise software aesthetic.
• Don't substitute Verdana with modern typefaces like Inter or Roboto; Verdana is integral to the institutional identity and screen legibility at small sizes.
• Don't add animations, transitions, or hover effects beyond color changes; the system prioritizes predictability and immediate feedback.
• Don't use color combinations outside the defined palette; every color serves a specific functional purpose (primary for action, secondary for emphasis, error for validation).
• Don't apply padding greater than 12px to form elements or containers; information density is a core design principle.