Portal do Cidadão - Canoinhas

Overview

Portal do Cidadão is a municipal government service portal designed to provide transparent, accessible access to civic services, public records, and administrative functions for residents of Canoinhas, SC. The design aesthetic is 'Institutional Clarity'—a professional, trust-forward approach that prioritizes legibility, accessibility, and straightforward navigation over decorative flourish. The interface uses a cool-toned blue-gray palette (#4d7093 primary, #1891d0 secondary) paired with warm accent colors (orange #ffa600, yellow #fdd700) to signal actionable elements and status information. The emotional response is one of civic competence: users should feel confident that their data is secure, their transactions are legitimate, and their government is organized and responsive.

The brand voice is formal yet approachable, precise yet human. Vocabulary favors clarity over jargon; when technical terms are necessary, they are explained. Tone is never condescending, never breathless. Example sentence in brand voice: 'Consulte seu IPTU 2026 em tempo real — emissão de certidões disponível 24 horas.'

Colors

The color system is built on a foundation of institutional trust. Primary (#4d7093) is a muted slate-blue that conveys stability and government authority; it appears on all primary CTAs, navigation elements, and focus states. Secondary (#1891d0) is a brighter, more saturated cyan-blue reserved for highlights, links, and secondary actions—it draws attention without overwhelming. Tertiary (#ffa600 orange, #fdd700 yellow) are warm accent colors used sparingly for alerts, badges, and promotional content to create visual contrast against the cool primary palette.

The surface stack is deliberately neutral: body background is #fbfbfb (near-white with 4% gray), surface-container ranges from #f8f8f8 (lowest) to #e0e0e0 (highest), and on-surface text is #4f4f50 (dark neutral gray, not pure black, f

Typography

The type system uses Rubik, a humanist sans-serif from Google Fonts, across all scales. Rubik's open letterforms and generous spacing make it highly legible at small sizes (12px label-sm) and maintain personality at display scales (56px). Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines and major page titles; headline-lg (36px, 600 weight) anchors section breaks; headline-md (28px, 600 weight) introduces subsections. Body text uses 16px (body-md, 400 weight, 24px line-height) for standard paragraphs and 18px (body-lg, 400 weight, 28px line-height) for prominent content blocks. Labels use 14px (label-md, 500 weight) for button text and form labels, with 12px (label-sm, 500 weight, 0.02em tracking) for helper text and captions. All body copy applies a text-shadow o

Layout

The layout uses a 12-column responsive grid with a fixed max-width of 1280px, centered on viewport. On desktop, the grid maintains 24px gutters between columns; on tablet (768px–1199px), gutters reduce to 16px; on mobile (<768px), the grid collapses to a single column with 12px side padding. Container max-width is 1280px; content rarely exceeds 1024px to preserve comfortable line lengths (50–75 characters) for body text. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, xl (64px) for hero-to-content transitions. The header is fixed at 56px height with 12px vertical padding; the search bar sits 24px below the header with 24px horizontal margins. Cards and list items u

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through bright highlights or glassmorphism. Level 1 (Base): body background #fbfbfb with no shadow. Level 2 (Standard Card): surface-container-lowest (#f8f8f8) with box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) and 1px solid border in outline-variant (#d8d8d8). Level 3 (Hovered Card / Elevated Content): surface-container-low (#f5f5f5) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) and the same border. Level 4 (Modal / Overlay): surface-bright (#ffffff) with box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 1px solid outline-variant border, and

Shapes

The shape philosophy is 'Institutional Softness'—corners are rounded just enough to feel contemporary and approachable, but not so much that they undermine authority. Buttons and inputs use 4px radius (0.5rem / DEFAULT), creating a subtle softness without appearing toy-like. Cards and containers use 8px radius (1rem / lg) for slightly more visual warmth. Modals and dropdowns use 12px radius (1.5rem / xl) to distinguish them as elevated, focused surfaces. Badges and pills use full radius (9999px) to signal status or metadata. The rationale: 4px is the minimum radius that reads as 'intentional s

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary (#4d7093) background, white text, 44px height, 8px vertical / 16px horizontal padding, 4px border-radius, and label-md typography (14px, 500 weight). On hover, background shifts to #3b5671 (primary-fixed-dim) with a 200ms ease-in-out transition. On focus (keyboard navigation), a 3px box-shadow in rgba(77, 112, 147, 0.3) appears around the button boundary. Button-secondary uses transparent background, primary text, a 1px primary border, and the same dimensions; on hover, background becomes surface-container-high (#e8e8e8). The search button (paired with input-field) uses primary background, white text, and 0px 4px 4px 0px border-radius to align with the input's left-rounded corners.

Container

Do's and Don'ts

**Do**

• Do use primary (#4d7093) exclusively for primary CTAs, focus states, and navigation highlights—never for body text or backgrounds.
• Do apply 24px padding inside cards and 40px inside modals; whitespace is a design tool, not wasted space.
• Do use Rubik at 16px body-md with 24px line-height for all body copy; never go below 14px for readable text.
• Do add a 3px box-shadow in rgba(77, 112, 147, 0.3) to all focused interactive elements for keyboard-navigation accessibility.
• Do use 4px border-radius for buttons and inputs, 8px for cards, 12px for modals—consistency signals hierarchy.
• Do pair warm tertiary accents (orange #ffa600, yellow #fdd700) with cool primary for status badges and alerts to create visual pop.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for body text or backgrounds; use on-surface (#4f4f50) and surface (#fbfbfb) instead to reduce eye strain.
• Don't apply shadows larger than 12px blur radius; institutional design favors subtlety over drama.
• Don't mix border-radius values inconsistently (e.g., 4px on one button, 6px on another); stick to the defined scale (4px, 8px, 12px, full).
• Don't use secondary (#1891d0) for primary CTAs; reserve it for highlights, links, and secondary actions only.
• Don't render body text smaller than 14px or with line-height less than 1.5x font size; accessibility requires generous spacing.
• Don't apply color changes on hover without a transition; use 150ms–200ms ease-in-out to signal interactivity smoothly.