WAT Wydział Cybernetyki

Overview

WAT Wydział Cybernetyki (Cybernetics Faculty of Poland's Military University of Technology) employs a disciplined, high-contrast institutional aesthetic rooted in Technical Formalism—a design movement that prioritizes clarity, precision, and authoritative presence through bold color blocking and geometric simplicity. The visual language combines military institutional gravitas with contemporary technological sophistication, evoking trust, competence, and forward-thinking innovation. The interface serves academic and professional audiences who demand immediate information hierarchy and unambiguous navigation. Voice: direct, authoritative, precise. Example: 'Quantum Computing—New Specialization in Second-Cycle Studies. Enroll now.'

Colors

The color system anchors on two institutional primaries: a bold crimson-red (#b30039) for calls-to-action, alerts, and brand emphasis, and a deep navy-blue (#194282) for secondary actions and academic framing. The crimson drives urgency and visibility on white backgrounds (contrast ratio 8.2:1), while the navy provides institutional weight and calm authority. Tertiary surfaces use near-black (#0f1a27) for hero overlays and depth layering. The neutral stack—from #ffffff (surface) through #e9ecef (container) to #505050 (outline)—ensures legibility across all text sizes and maintains the high-contrast, no-nonsense aesthetic. Primary (#b30039) is reserved exclusively for CTAs, hover states on interactive elements, and brand-critical accents; it appears sparingly to maximize impact. Secondary (

Typography

The type system uses Rubik (Google Fonts, weights 400/500/700) across all scales, establishing a unified, modern-technical voice. Display (60px, 700, -0.04em letter-spacing) anchors hero sections and major announcements; Headline-lg (40px, 400) frames primary page titles like 'WYDZIAŁ CYBERNETYKI'; Headline-md (28px, 600) organizes section breaks; Title-lg (20px, 600) labels subsections and card headers; Body-lg (20px, 400) is the default body text, matching the rendered DOM's 20px base; Body-md (16px, 400) supports secondary content and form labels; Label-md (14px, 500, 0.01em) is used for buttons and interactive labels; Label-sm (12px, 500, 0.05em) applies to badges, metadata, and small UI text. The 400-weight body text conveys institutional calm without appearing weak, while 600–700 wei

Layout

The layout follows a 12-column grid with a fixed max-width of 991px, centered on the viewport. This constraint ensures readability on desktop while maintaining a compact, focused presentation suitable for institutional content. The page rhythm uses lg spacing (40px) for section separation, md spacing (24px) for component padding and card gutters, and sm spacing (12px) for internal element spacing within cards and form groups. The header is sticky (position: sticky; top: 0; z-index: 988) to maintain navigation access during scroll. Hero sections occupy full viewport height with a dark overlay (rgba(0, 0, 0, 0.4)) over background imagery, ensuring text contrast and visual hierarchy. Container padding is consistently {spacing.gutter} (24px) on desktop, reducing to {spacing.md} (24px) on table

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of dark overlays rather than glassmorphism. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards & Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a subtle shadow that lifts elements 4–8px above the base, used on cards, input fields, and dropdown panels. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a deeper shadow suggesting 12–16px elevation, applied to modals and prominent overlays. Hero sections use a semi-transparent dark

Shapes

The shape philosophy is Architectural Sharpness—minimal rounding that conveys precision and technical authority while remaining approachable. Buttons use {rounded.full} (9999px) for primary CTAs, creating a pill-shaped form that draws the eye and signals interactivity; secondary buttons use {rounded.lg} (1rem / 16px) for a softer but still defined edge. Cards and containers use {rounded.DEFAULT} (0.5rem / 8px) or {rounded.md} (0.75rem / 12px), providing subtle definition without softness. Input fields use {rounded.DEFAULT} (8px) to align with card styling and maintain visual cohesion. Dropdown

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles. Primary buttons (#b30039 background, white text, 18px vertical padding, 30px horizontal padding, {rounded.full}) are reserved for critical CTAs like 'ZOBACZ WIĘCEJ' (View More) and form submissions. On hover, the background darkens to #a00030 (200ms transition), and on active/press, it darkens further to #8b0028. Secondary buttons (#194282 background, white text, 48px height, {rounded.lg}) support alternative actions and navigation; hover state shifts to #153a6a. Ghost buttons have transparent backgrounds with a 1px primary-colored border, inverting to solid primary on hover. All buttons use {typography.label-md} (14px, 500 weight) and include a 150ms transition for smooth state changes.

Con

Do's and Don'ts

**Do**

• Do use primary red (#b30039) exclusively on CTAs, focus states, and brand-critical accents—never as background for large content areas.
• Do maintain the 991px container max-width on desktop to preserve focus and readability for institutional audiences.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive surfaces (cards, dropdowns, modals) for consistent depth cueing.
• Do use Rubik 400 for body text and 600–700 for headlines to create decisive visual hierarchy without introducing multiple typefaces.
• Do include a 3px focus ring at rgba(179, 0, 57, 0.1) on all interactive elements for accessibility and keyboard navigation clarity.
• Do layer dark overlays (rgba(0, 0, 0, 0.4)) over hero imagery to ensure white text legibility and maintain institutional gravitas.

**Don't**

• Don't use primary red as a background for body text or large content blocks—it reduces legibility and dilutes brand impact.
• Don't apply rounding greater than {rounded.full} (9999px) to any component; the aesthetic is architectural, not organic.
• Don't use glassmorphism, blur effects, or semi-transparent overlays on UI components—maintain sharp, high-contrast surfaces.
• Don't mix typefaces; Rubik is the sole font family across all scales and weights.
• Don't exceed {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) shadow depth; deeper shadows undermine the institutional clarity.
• Don't reduce spacing below {spacing.xs} (4px) or increase padding beyond {spacing.xl} (64px) without explicit design rationale.