CERCIFAF

Overview

CERCIFAF (Centro de Formação e Emprego) is a Portuguese vocational training and employment center dedicated to professional development and community integration. The design system embodies 'Institutional Dynamism'—a visual language that balances institutional authority with forward momentum through bold geometric shapes, a confident blue-and-white palette, and strategic use of accent colors. The aesthetic evokes trust, professionalism, and opportunity: users should feel that their career development is in capable, progressive hands. The brand personality is direct, optimistic, and action-oriented—never patronizing, always solution-focused. Voice example: 'Your future starts here—enroll in a course that matches your ambitions and market demand.'

Colors

The color system centers on Primary Blue (#127fc3) as the signature institutional accent, deployed on CTAs, navigation highlights, and interactive focus states. This blue conveys professional competence and forward-thinking energy. The surface stack uses pure white (#ffffff) as the dominant background with carefully calibrated grays (surface-container #e9ecef, surface-container-high #dfe2e6) to create subtle depth without visual noise. On-surface text is a deep navy (#162744), ensuring legibility and institutional gravitas. Secondary Orange (#ffa500) is reserved for promotional badges and 'Bolsa até 349€' callouts, creating visual urgency. Tertiary Green (#234423) supports success states and positive feedback (alert-success-background #d9e6d9). The alert system uses semantic colors: danger

Typography

The type system pairs Cinzel (serif, 400 weight) for display and headline-lg contexts—lending institutional gravitas and visual distinction to hero statements like 'Inscreve-te' (34.4px, Cinzel, 400 weight). Montserrat (sans-serif, 400–600 weight) handles all body and label scales, providing clarity and modern accessibility. Display-level text uses -0.02em letter-spacing to tighten the serif's natural rhythm; body text maintains 0em spacing for neutral readability. Line-height is set to 1.5x the font size for body copy (28px on 18px base) to ensure comfortable scanning in dense content blocks. Headlines use tighter line-height (1.2x) to reinforce hierarchy. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on photographic backgrounds (e.g., hero section h1) to maintai

Layout

The layout uses a 12-column grid with a max-width of 1320px (enforced at 1400px+ breakpoints), creating a fluid yet bounded container. Section padding is generous—75px top/bottom for major sections (padding-top: 75px, padding-bottom: 75px)—establishing clear visual rhythm and breathing room. The gutter between columns is 24px (md spacing). White-space philosophy prioritizes clarity: sections are separated by lg spacing (40px) or larger (margin-top: 4rem, margin-bottom: 2rem observed in hero transitions). Container-max-width scales responsively: 1320px at desktop, 1200px at 1199.98px breakpoint, 992px at tablet, and 100% at mobile. Margin-top: 4rem and margin-bottom: 2rem create breathing room between major content blocks. Image overlays use rgba(31, 125, 219, 0.25) to subtly tint photograp

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle color shifts rather than aggressive drop shadows. Level 1 (Base): flat white background with no shadow. Level 2 (Cards/Containers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background-color: #e9ecef (surface-container), creating a gentle lift. Level 3 (Modals/Elevated Cards): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background-color: #dfe2e6 (surface-container-high). Hover states transition to Level 3 with a 200ms ease curve. Image containers use a 1.2x scale transform on hover (transform: scaleX(1.2) scaleY(1.2), transitio

Shapes

The shape philosophy is 'Geometric Clarity'—sharp, intentional angles paired with minimal rounding. Buttons and inputs use border-radius: 6px (0.375rem), a subtle softness that feels contemporary without sacrificing precision. Cards and containers use border-radius: 0.5rem (8px DEFAULT), maintaining visual consistency. Larger containers and modals use border-radius: 1rem (16px lg), creating a gentle frame. The hero section features bold diagonal shapes (observed as 0px border-radius on section elements, with CSS transforms creating angled overlays)—these are brand-distinctive geometric accents

Components

Action Elements Buttons are the primary interaction vehicle. button-primary uses background-color: {colors.primary} (#127fc3), color: white, padding: 16px 24px, height: 48px, border-radius: 6px, with font-weight: 600 (label-md). On hover, background shifts to #0d47a1 (darker blue) with transition: background-color 200ms ease. button-secondary uses a transparent background with a 2px solid border in primary blue, inverting the color hierarchy for secondary actions. Focus state adds box-shadow: 0 0 0 3px rgba(18, 127, 195, 0.1) to all buttons, providing accessible visual feedback.

Containers & Surfaces card components use background-color: #e9ecef (surface-container), border: 1px solid {colors.outline-variant} (#bdbdbd), border-radius: 8px, padding: 24px, and box-shadow: 0 4px 12px

Do's and Don'ts

**Do**

• Do use Primary Blue (#127fc3) exclusively for CTAs, focus states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain 75px vertical padding on major sections and 24px gutters between columns to preserve the generous, professional rhythm.
• Do apply Cinzel serif only to display and headline-lg contexts (h1, hero statements); use Montserrat sans-serif for all body and label text to ensure accessibility and clarity.
• Do add box-shadow: 0 0 0 3px rgba(18, 127, 195, 0.1) on all interactive focus states (buttons, inputs, links) to meet WCAG AAA contrast and keyboard navigation standards.
• Do use the alert color system (success #d9e6d9, warning #fcefdc, danger #f7dddc) consistently across all feedback messages and status indicators.
• Do transition all hover states within 200ms ease to signal responsiveness without feeling sluggish or jarring.

**Don't**

• Don't use border-radius > 1rem (16px) on buttons or standard cards—excessive rounding undermines institutional credibility.
• Don't apply Primary Blue as a background fill for large areas; reserve it for accents, CTAs, and focus indicators only.
• Don't mix Cinzel and Montserrat weights arbitrarily—Cinzel is 400 weight only; Montserrat ranges 400–600 for hierarchy.
• Don't omit focus states or rely on color alone to signal interactivity; always include box-shadow or border changes for keyboard users.
• Don't use shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12); aggressive shadows conflict with the clean, institutional aesthetic.
• Don't apply secondary colors (Orange, Green) to primary CTAs or navigation—reserve them for badges, alerts, and supporting UI only.