IEQROO Electoral Registration Portal

Overview

IEQROO Electoral Registration Portal is a civic engagement platform serving Mexico's Quintana Roo electoral authority, designed to streamline candidate registration for municipal councils with clarity and institutional authority. The aesthetic is 'Institutional Clarity'—a design movement that prioritizes legibility, accessibility, and trustworthiness through clean typography, generous whitespace, and strategic use of accent colors that signal action without overwhelming the user. The brand personality is professional yet approachable: formal enough to convey governmental legitimacy, warm enough to welcome first-time candidates. The interface evokes a sense of procedural transparency and civic participation, transforming bureaucratic workflows into guided, human-centered experiences.

The voice is direct, instructional, and respectful of the user's time. Sentences are active and unambiguous: 'Ingresa tu solicitud ahora' rather than 'Se puede ingresar.' The vocabulary avoids jargon where possible, using 'Consejos Municipales' (familiar term) over technical abbreviations. Brand personality: methodical, inclusive, and solution-oriented. Example sentence in brand voice: 'Completa los lineamientos en tres pasos—cada sección toma menos de 10 minutos.'

Colors

The color system balances institutional authority with civic warmth. Primary (#f27474, a warm coral-red) is the signature accent used on all call-to-action buttons, links, and interactive states—it signals 'act now' without aggression, evoking both urgency and approachability. Secondary (#2778c4, a confident blue) anchors the navigation bar and secondary actions, providing a stable, trustworthy counterpoint. Tertiary (#6f5196, a deep purple) appears in elevated card backgrounds and section headers, reinforcing the brand's governmental heritage while maintaining visual sophistication.

The surface stack uses a clean white (#ffffff) as the primary canvas, with carefully calibrated grays for depth: surface-container-highest (#d9d9d9) for subtle dividers, surface-container (#e9ecef) for second

Typography

The type system uses a single sans-serif family (Segoe UI / Roboto / Helvetica Neue stack) across all scales, creating visual cohesion and reducing cognitive load. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 700 weight) is reserved for primary section headings like 'Reclutamiento de las Presidencias.' Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, instructions, and body copy—set at 16px to ensure readability on mobile devices without zooming. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form field labels, with a subtle letter-spacing that improves scannability. For small labels over busy backgrounds (e.g., badge text on colored containers),

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The header spans full-width with a light gray background (rgb(248, 249, 250)) and 8px vertical padding, creating a subtle visual separation from the hero. The main content area uses 24px gutters (md spacing) between columns and 40px (lg spacing) for section separation. Cards and form containers are padded with 24px (md spacing) internally, with 12px (sm spacing) between form fields. The hero section uses a two-column layout: left column (60%) for headline and CTA, right column (40%) for the illustrative image of diverse candidates. Whitespace is treated as a design element—the background behind the hero is intentionally light and spacious, allowing the coral-red CTA button to command attention with

Elevation & Depth

Depth is conveyed through subtle shadows and background color shifts rather than dramatic layering. Level 1 (Base): white background (rgb(255, 255, 255)) with no shadow, representing the primary content plane. Level 2 (Cards & Inputs): 1px solid border in #d9d9d9 with box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), creating a gentle lift from the base. Level 3 (Elevated Containers & Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a background color shift to #ede7f6 (tertiary-container), signaling modal or high-priority content. The tertiary-colored card sections (LINEAMIENTOS, CONVOCATORIA

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used consistently but conservatively to balance approachability with institutional formality. Buttons use 6px border-radius (DEFAULT), creating a subtle softness that feels modern without appearing playful. Cards and containers use 12px (lg), providing slightly more visual breathing room for larger content blocks. Input fields use 6px (DEFAULT) to align with button styling, creating a cohesive form language. The full-radius (9999px) is reserved for badges and pill-shaped elements like the 'Envíenos un mensaje' floating button (which

Components

Action Elements Buttons are the primary interactive component and come in three variants. Button-primary (background: #f27474, text: white, 44px height, 12px 24px padding, 6px radius) is used for main CTAs like 'ENTRAR AL SISTEMA' and 'INGRESAR SOLICITUD.' On hover, the background darkens to #e85555 with a 200ms transition. On focus, a 3px ring (rgba(242, 116, 116, 0.5)) appears around the button. Button-secondary (transparent background, 2px border in #f27474, text: #f27474) is used for secondary actions and maintains the same 44px height and 6px radius. Button-tertiary (background: #6f5196, text: white) is reserved for elevated or modal actions. All buttons use label-md typography (14px, 600 weight) and include a transition: all 200ms ease-out to smooth state changes.

Containers

Do's and Don'ts

**Do**

• Do use the coral-red (#f27474) exclusively for primary CTAs and error states—this color trains users to recognize actionable elements.
• Do maintain 24px gutters and 40px section spacing to create breathing room; dense layouts undermine the institutional clarity aesthetic.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.
• Do use the 12-column grid with full-width sections for navigation and hero, then constrain content to 1280px max-width for readability.
• Do test all interactive elements with keyboard navigation; focus rings (3px rgba rings) must be visible at all times per WCAG AA.
• Do use body-md (16px, 400 weight, 24px line-height) for all body copy and form instructions to ensure accessibility on mobile without zooming.

**Don't**

• Don't use the purple (#6f5196) or blue (#2778c4) as primary CTAs—these are supporting colors and will dilute the coral-red's signal strength.
• Don't apply shadows deeper than 0 4px 12px rgba(0,0,0,0.08); the design relies on subtle elevation, not dramatic depth.
• Don't use border-radius smaller than 4px or larger than 16px outside of full-radius badges; this breaks the soft-technical hierarchy.
• Don't mix font families; the entire system uses Segoe UI / Roboto / Helvetica Neue stack to maintain visual cohesion.
• Don't reduce padding below 12px (sm spacing) in form fields or cards; this creates cramped, inaccessible layouts.
• Don't use color alone to convey status; always pair color with text labels or icons so colorblind users can understand the interface.