MEFA Strategic Communication

Overview

MEFA is a strategic communication agency that transforms complex organizational narratives into precise, impactful visual and verbal strategies. The brand embodies Architectural Minimalism—a design philosophy that strips away ornament to reveal essential structure, using stark contrasts and geometric precision to command attention. The aesthetic is deliberately austere: pure black backgrounds (#000000) meet pure white typography (105px Modernica at 800 weight), creating an almost confrontational visual presence that conveys authority, clarity, and intellectual rigor. The emotional response is one of confidence and sophistication—users encounter a brand that refuses compromise and speaks with unwavering conviction.

The voice is direct, strategic, and unapologetically German in its efficiency. MEFA's language avoids flourish; every word serves a purpose. The tone is consultative yet commanding, treating clients as strategic partners rather than passive audiences. Vocabulary emphasizes methodology, precision, and outcomes: 'Strategie,' 'Kommunikation,' 'Ergebnis.' Example sentence in brand voice: 'Wir transformieren komplexe Botschaften in präzise, messbare Ergebnisse.'

Colors

The color system operates on a principle of extreme contrast and functional hierarchy. Primary (#ffffff) is pure white, deployed on all interactive elements—buttons, links, focus states—and as the dominant text color against the black surface. This creates maximum legibility and visual pop; white text on #000000 achieves 21:1 contrast ratio, exceeding WCAG AAA standards. Secondary (#73859f) is a cool, muted blue-gray used for supporting text, metadata, and secondary navigation; it provides visual rest without competing for attention. Tertiary (#ff6900) is a vivid, warm orange reserved for accent moments—call-to-action highlights, status indicators, and brand moments that demand urgency. Error (#cf2e2e) is a deep red used exclusively for destructive actions and validation failures. The surf

Typography

The type system centers on Modernica, a geometric sans-serif that reinforces the brand's architectural identity through its clean, rational letterforms. Display (105px, 800 weight, -0.03em letter-spacing) is reserved for hero headlines and brand moments; its massive scale and tight tracking create visual dominance. Headline-lg (56px, 700 weight) anchors section introductions, while headline-md (40px, 600 weight) structures subsections. Title-lg (28px, 600 weight) introduces card content and modal headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle primary and secondary content; both use 0.01–0.02em letter-spacing to maintain the brand's geometric precision. Label-md (14px, 600 weight, 0.03em tracking) and label-sm (12px, 500 weight, 0.04em tracking) are used for butto

Layout

The layout operates on a 12-column grid with a maximum container width of 1400px, providing flexibility for both desktop and responsive scales. The spacing scale uses semantic tokens: unit (8px) as the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) for progressive separation. Section rhythm is governed by lg spacing (40px) between major content blocks, creating generous white space that reinforces the minimalist aesthetic. The gutter (24px) is applied to left/right margins on all containers, ensuring consistent breathing room. Header padding is 80px top / 90px horizontal / 35px bottom, establishing a commanding presence. Cards and content containers use md (24px) internal padding. The grid is fluid on mobile (single column, md gutter) and expands to full 12-column layo

Elevation & Depth

Depth in this system is achieved through subtle shadow and border treatments rather than layered colors. The elevation scale uses three levels: sm (0 1px 5px rgba(0, 0, 0, 0.15)) for interactive elements like buttons and input fields, md (0 4px 12px rgba(0, 0, 0, 0.25)) for cards and popovers, and lg (0 16px 40px rgba(0, 0, 0, 0.4)) for modals and overlays. All shadows use pure black with varying opacity to maintain the monochromatic aesthetic. Borders (1px solid) in outline (#737373) or outline-variant (#4a4a4a) define container edges and create visual separation without relying on color. Foc

Shapes

The shape philosophy is Geometric Precision—corners are either sharp (0px radius) or subtly rounded to support usability without introducing visual softness. Buttons and inputs use DEFAULT (0.5rem / 8px) border-radius, providing a slight visual softness that improves touch targets without compromising the austere aesthetic. Cards and containers use md (0.75rem / 12px) radius for a more pronounced but still restrained curve. Modals and elevated surfaces use lg (1rem / 16px) radius. Full (9999px) radius is applied only to badges and pill-shaped elements. The rationale is functional: sharp corner

Components

Action Elements Buttons are the primary interaction mechanism and must maintain visual hierarchy through color and weight. Button-primary uses white background (#ffffff) with black text, 12px vertical / 20px horizontal padding, 44px height, and a 1px black border for definition. On hover, the background shifts to primary-container (#e8e8e8) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. Button-secondary uses transparent background with white text and a 1px outline, shifting to surface-container-high (#2b2b2b) on hover. Button-tertiary uses the tertiary accent (#ff6900) for urgent actions, with on-tertiary text (#ffffff). All buttons use label-md typography (14px, 600 weight, 0.03em tracking) and DEFAULT (8px) border-radius. Focus states add a 2px white border and 0 0 0 2px rgba(

Do's and Don'ts

**Do**

• Do use pure white (#ffffff) for all primary interactive elements and headlines to maximize contrast and visual impact against the black surface.
• Do maintain the 8px base unit throughout spacing; use multiples (12px, 24px, 40px, 64px) to create rhythm and predictability.
• Do apply Modernica exclusively for all typography; the geometric letterforms are essential to the architectural minimalism aesthetic.
• Do use the tertiary accent (#ff6900) sparingly—only for urgent CTAs, status indicators, and brand moments that demand attention.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use the full elevation shadow (0 16px 40px rgba(0, 0, 0, 0.4)) exclusively for modals and overlays; reserve md shadow for cards and popovers.

**Don't**

• Don't use colors outside the defined palette; the monochromatic + accent system is intentional and must be preserved.
• Don't apply border-radius greater than lg (16px) to any component; excessive rounding contradicts the architectural minimalism.
• Don't use system fonts or fallback typefaces; Modernica is non-negotiable for brand consistency.
• Don't apply shadows to text, icons, or small interactive elements; shadows are reserved for containers and elevated surfaces.
• Don't use opacity or transparency for primary text; on-surface (#ffffff) and on-surface-variant (#b0b0b0) must be opaque for legibility.
• Don't exceed 1400px container max-width; the layout must maintain visual control and prevent content sprawl on ultra-wide displays.