AIR MATYÁŠ

Overview

AIR MATYÁŠ is a Czech HVAC and thermal systems specialist serving both residential and commercial markets with professional installation and maintenance services. The design system embodies "Technical Clarity with Human Warmth"—a visual language that projects engineering competence through structured navy blues and grays while maintaining approachability via a vibrant red accent and generous, breathing whitespace. The brand personality is direct, knowledgeable, and service-focused: users should feel confident they're consulting experts, not intimidated by complexity. The UI voice is conversational yet precise—example: "Your new heat pump arrives Tuesday; we'll handle the full installation and testing."

The aesthetic rejects both sterile minimalism and corporate coldness. Instead, it combines the authority of deep navy (#1055a3) with the warmth of action-red (#e2242e), grounded in a neutral, light gray canvas (#f2f2f2). Every interaction—from CTAs to form fields—is designed to feel responsive and trustworthy, reflecting the hands-on, reliable service the company delivers.

Colors

The color system operates on three tiers: a neutral foundation (grays and whites), a professional secondary accent (navy blue), and a bold primary accent (action red). **Primary (#e2242e)** is reserved exclusively for high-priority CTAs ('Stát se partnerem', 'Více o akci') and critical interactive states; it commands attention without aggression. **Secondary (#1055a3)** anchors the navigation header, form elements, and secondary buttons, establishing visual hierarchy and brand consistency. **Tertiary (#d48b0c)** is used sparingly for badges, highlights, or promotional callouts—it provides warmth without competing with primary red. The surface stack progresses from bright white (#ffffff) for primary content areas through light grays (#f2f2f2 base, #dddddd containers) to darker grays (#58585

Typography

The type system centers on Rubik, a geometric sans-serif that balances technical precision with approachability—ideal for a brand that must communicate both expertise and accessibility. Display (60px, 700 weight) and Headline-lg (43px, 700 weight) are reserved for hero sections and major page titles, establishing visual dominance. Headline-md (32px, 600 weight) and Title-lg (24px, 600 weight) structure content hierarchy within sections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) handle primary content and form labels, with 24px and 28px line-heights ensuring comfortable reading at typical viewing distances. Label-md (14px, 500 weight) and Label-sm (12px, 500 weight) are applied to buttons, badges, and UI chrome. Letter-spacing is tightened on display sizes (-0.04em) to enhan

Layout

The layout operates on a 12-column grid with a maximum container width of 1280px, ensuring content remains scannable on desktop while adapting fluidly to tablet and mobile viewports. The gutter spacing is consistently 24px (md unit), creating a breathing room that prevents visual clutter—critical for a B2B service site where users scan quickly for product categories and contact information. Section separation uses lg spacing (40px) vertically, establishing clear content blocks. The header occupies a fixed 72px height with 24px horizontal padding, anchoring navigation and the primary CTA ('STÁT SE PARTNEREM') in the top-right corner. Hero sections use full-width imagery with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility; content is centered and padded with x

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids dramatic drop-shadows in favor of subtle, realistic elevation. **Level 1 (Base)**: No shadow; elements sit flush on the surface (#f2f2f2). **Level 2 (Standard Cards & Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); used on cards, form fields, and secondary buttons to signal interactivity and separation from the background. **Level 3 (Modals & Elevated Surfaces)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); applied to modal overlays, dropdown panels, and hover states of cards. Form inputs also use an inset shadow (inset 0 1

Shapes

The shape philosophy is **Architectural Precision with Soft Edges**—a balance between technical sharpness and human approachability. Buttons and primary interactive elements use border-radius: 0.5rem (8px), creating a subtle roundness that feels modern without sacrificing legibility or appearing playful. Cards and containers use 0.75rem (12px) for slightly more breathing room, distinguishing them from buttons while maintaining visual cohesion. Modal dialogs and elevated surfaces use 1rem (16px) for a more pronounced softness, signaling their prominence and creating visual separation from the p

Components

Action Elements Buttons are the primary interaction mechanism and must signal their affordance clearly. **button-primary** (red, #e2242e) uses 16px vertical × 72px horizontal padding with 48px height, creating a substantial touch target. The label-md typography (14px, 500 weight) is centered and white (#ffffff). On hover, the background shifts to primary-container (#ff6b6f) with a 200ms ease-in-out transition, providing immediate feedback. **button-secondary** (navy, #1055a3) is slightly smaller (12px × 56px padding, 40px height) and uses label-sm typography (12px, 500 weight), appropriate for secondary actions like 'Nastavení' or form submissions. Ghost buttons (transparent background with navy border) are used for tertiary actions; they inherit the secondary color on hover and gain a

Do's and Don'ts

**Do**

• Do use primary red (#e2242e) exclusively for high-priority CTAs and critical interactive states—never for decorative elements or secondary information.
• Do maintain the 24px gutter spacing consistently across all sections to create visual rhythm and prevent content from feeling cramped.
• Do apply the three-tier shadow system (0 3px 8px, 0 8px 24px, inset shadows) to signal elevation and interactivity—avoid flat design or excessive drop-shadows.
• Do use Rubik at 43px (headline-lg) or larger for hero titles and 16px (body-md) for primary body text to ensure readability and hierarchy.
• Do test all interactive elements (buttons, inputs, cards) for 4.5:1 contrast ratio compliance, especially when overlaying text on images or colored backgrounds.

**Don't**

• Don't use secondary navy (#1055a3) or tertiary gold (#d48b0c) as primary CTAs—they lack the urgency and visual dominance of red.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii fragment the visual system.
• Don't use shadows larger than lg (0 8px 24px) on standard cards or buttons—reserve the strongest shadows for modals and elevated surfaces only.
• Don't mix font families or use weights outside the Rubik family (400, 500, 600, 700)—consistency is critical for a technical brand.
• Don't reduce padding or spacing below the sm unit (12px) on interactive elements; small touch targets frustrate users and reduce accessibility.