MAS Safety

Overview

MAS Safety is a German manufacturer of premium personal protective equipment (PSA) and fall protection systems, serving construction, industrial, and safety-critical sectors. The design aesthetic is **Industrial Pragmatism**—a no-nonsense, confidence-driven visual language that prioritizes clarity, durability, and trust over decoration. The UI evokes the precision of German engineering: clean grids, bold primary accents (deep red #e3060f), and generous whitespace that communicates professionalism and reliability. The brand personality is authoritative yet approachable: direct, fact-based, and solution-oriented. Voice example: "Our harnesses meet DIN EN 361 standards and ship within 48 hours—safety without compromise."

Colors

The color system balances industrial confidence with accessibility. **Primary (#e3060f)** is a deep, saturated red used exclusively for call-to-action buttons, critical alerts, and brand moments—it signals urgency and trust simultaneously, reflecting the life-safety nature of the product. **Secondary (#0088cc)** is a professional blue deployed for secondary actions, links, and informational elements; it provides visual relief and hierarchy without competing for attention. **Tertiary (#f1e5ab, #e8c0c2)** are warm, muted accent tones used sparingly in data visualizations, badges, and decorative backgrounds to humanize the otherwise austere palette. **Surface stack** ranges from pure white (#ffffff) for primary content areas to light grays (#dddddd, #e6e6e6) for container backgrounds and subt

Typography

The type system pairs **Oswald** (geometric, bold, authoritative) for all headlines and display text with **Helvetica Neue** (neutral, legible, industrial) for body and interface text. This pairing communicates precision without coldness: Oswald's geometric forms evoke technical drawings and engineering blueprints, while Helvetica Neue's ubiquity and clarity ensure universal legibility across devices and print collateral. **Display (60px, 700 weight, -0.04em tracking)** is reserved for hero statements like "Safety. Made in Germany." **Headline-lg (40px, 700 weight)** anchors section headers; **headline-md (28px, 600 weight)** breaks up content blocks. **Body-lg (18px, 400 weight, 28px line-height)** is used for introductory paragraphs and product descriptions; **body-md (16px, 400 weight,

Layout

The layout uses a **fixed 12-column grid at 1200px max-width**, with responsive breakpoints at 960px (tablet) and 480px (mobile). The grid is anchored by a **24px gutter** (spacing.gutter) between columns, creating a rhythm that feels spacious without wasting real estate. **Section separation** uses lg spacing (40px) vertically to create breathing room between hero, product cards, and footer regions. **Container padding** is consistently 24px on desktop, reducing to 12px on tablet and 8px on mobile. The whitespace philosophy is **generous but purposeful**: empty space is used to emphasize product photography, technical specifications, and CTAs rather than as filler. Hero sections occupy 60–70% of viewport height with centered, large typography (60px+) and a single, prominent CTA button. Pr

Elevation & Depth

Depth is achieved through **subtle, consistent shadows** rather than layering or glassmorphism. **Level 1 (Base)**: flat white background (#ffffff) with no shadow; used for primary content areas and card backgrounds. **Level 2 (Standard Cards & Dropdowns)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px border in {colors.outline-variant} (#cccccc); applied to product cards, input fields, and dropdown panels. **Level 3 (Modals & Elevated Surfaces)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with 1px border in {colors.surface-container-highest} (#dddddd); used for modal overlays, tooltips

Shapes

The shape philosophy is **Geometric Precision**—sharp, minimal corner radii that reflect technical accuracy and manufacturing standards. **Buttons and inputs** use 4px border-radius ({rounded.DEFAULT}), a subtle softening that prevents harsh corners while maintaining a technical appearance. **Cards and containers** use 6px ({rounded.md}) for slightly more breathing room and visual distinction from interactive elements. **Modals and elevated surfaces** use 8px ({rounded.lg}) to create clear hierarchy and separation from the base layer. **Badges and pills** use 9999px ({rounded.full}) for a soft

Components

Action Elements **Button-primary** (#e3060f background, black text, 44px height, 12px 24px padding, 4px radius) is the dominant CTA for product purchases, form submissions, and primary navigation. On hover, background shifts to #c41e3a (darker red) with a 200ms transition; no shadow change on button itself, but parent container may elevate. **Button-secondary** (#0088cc background, white text) is used for secondary actions like "Learn More" or "View Details"; hover state darkens to #005fa3. **Button-ghost** (transparent background, red text, red 1px border) is deployed for tertiary actions and cancel buttons; hover fills background with {colors.primary-container} (#f5d5d3) while maintaining red text. All buttons use {typography.label-md} (14px, 600 weight) for crisp, scannable text.

#

Do's and Don'ts

**Do**

• Do use primary red (#e3060f) exclusively for high-priority CTAs and safety-critical alerts—never dilute its impact with decorative use.
• Do maintain 24px gutters and 40px section spacing to create the spacious, confident rhythm that defines the brand.
• Do pair Oswald headlines with Helvetica Neue body text to balance technical authority with universal legibility.
• Do apply 4px border-radius to buttons and inputs, 6px to cards, and 8px to modals to communicate functional hierarchy through subtle shape progression.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for standard cards and 0 8px 24px rgba(0, 0, 0, 0.12) for elevated surfaces to maintain consistent, technical depth.
• Do ensure all interactive elements have a 200ms transition on hover states (background-color, box-shadow) to signal responsiveness without feeling sluggish.

**Don't**

• Don't use primary red for decorative elements, backgrounds, or non-critical UI—it must remain a signal of urgency and trust.
• Don't apply border-radius greater than 8px to any component except badges and pills; excessive rounding undermines the industrial precision aesthetic.
• Don't mix Oswald and Helvetica Neue weights arbitrarily; use Oswald 700 for headlines, Helvetica Neue 400 for body, and 600 for labels to maintain hierarchy.
• Don't use soft shadows (blur > 24px) or multiple-layer shadows; the system relies on single, sharp shadows at 3px or 8px blur for clarity.
• Don't reduce padding or spacing below {spacing.sm} (12px) in cards or containers; whitespace is a core brand asset, not a constraint to minimize.
• Don't apply color overlays or gradients to hero photography; use solid black overlays at 0.5 opacity (rgba(0, 0, 0, 0.5)) to maintain legibility of white headline text.