F7 Media

Overview

F7 Media is a certified TYPO3 agency brand that embodies corporate authority tempered with technical innovation. The visual system employs a "Corporate-Technical Minimalism" aesthetic—combining deep navy (#032357) as the foundational trust color with vibrant orange (#ff7b00) as the innovation accent. The brand serves enterprise and mid-market clients seeking strategic digital transformation, and the UI conveys precision, reliability, and forward-thinking expertise. Every interface element reinforces the message: "We understand your complexity and deliver clarity."

The tone is direct, confident, and consultative—never breathless or casual. The brand speaks in concrete outcomes rather than abstract promises. Example voice: "We've guided 200+ enterprises through TYPO3 migrations, reducing time-to-market by 40% on average." The vocabulary favors technical credibility ("certified," "strategic," "implementation") paired with human-centered language ("inspire," "convince," "partner"). Manrope headlines convey modern professionalism; Lato body text ensures accessibility at all sizes.

Colors

The F7 Media color system is built on a three-tier hierarchy: primary navy (#032357) anchors all trust-critical interactions and brand identity; secondary orange (#ff7b00) signals innovation, CTAs, and forward momentum; tertiary blue (#4669a3) provides supporting emphasis and data visualization. The surface stack progresses from pure white (#ffffff) through cool grays (#f8fafc → #eaeff4 → #e9ecef) to near-black (#1e293b), ensuring sufficient contrast for WCAG AA compliance across all text sizes. Primary (#032357) is used exclusively for primary CTAs ("Contact us now"), navigation, and hero backgrounds—it appears on 16px+ text at minimum 4.5:1 contrast. Secondary orange (#ff7b00) highlights accent buttons, feature callouts, and animated state changes; it never appears as body text. The inve

Typography

The type system pairs Manrope (geometric, modern, high-contrast) for all headlines and display text with Lato (humanist, warm, highly legible) for body and label text. This pairing creates visual hierarchy through both weight and family: display-lg (96px, 700 weight) commands attention on hero sections, while body-lg (20px, 400 weight) maintains readability in dense content blocks. Headline-md (32px, 700 weight) is the workhorse for section titles; title-lg (24px, 600 weight) bridges headlines and body. Letter-spacing is tightened on display text (-0.04em) to reinforce authority, while body text uses 0em spacing for maximum legibility. Line-height scales with size: display uses 104px (1.08x), headlines use 1.25x, body uses 1.6x. On small labels over busy backgrounds, apply text-shadow: 0 2

Layout

F7 Media uses a 12-column fluid grid with a fixed max-width of 1280px, centered on viewport. The gutter is consistently 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 8px (xs spacing) on mobile. Container padding follows the gutter rule: 24px on desktop, 16px on tablet, 12px on mobile. Section separation uses lg spacing (40px) between major content blocks; subsection separation uses md spacing (24px). The hero section spans full-width with 80px vertical padding and rounded corners (1.5rem), creating a contained-yet-expansive feel. Cards and content containers use 24px internal padding (md) with 12px gaps between stacked elements. The layout philosophy prioritizes breathing room: never allow text to touch container edges, and maintain minimum 40px separation betw

Elevation & Depth

Depth in the F7 Media system is achieved through a three-level shadow hierarchy combined with subtle background color shifts. Level 1 (Base/Surface): no shadow, background #ffffff or surface-container-lowest (#f8fafc). Level 2 (Cards/Containers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background #f8fafc or #eaeff4. Level 3 (Modals/Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background #ffffff with 1px border at rgba(0, 0, 0, 0.06). Hover states elevate by one level: a card at Level 2 becomes Level 3 on hover. The primary CTA button uses a subtle 4px shadow (0 4px 12px rgba(3,

Shapes

The F7 Media shape language follows "Architectural Precision with Approachability"—combining sharp, geometric forms for buttons and inputs with generous rounding for hero sections and cards. Primary CTAs use full rounding (border-radius: 9999px, creating pill-shaped buttons at 56px height), signaling warmth and invitation. Secondary buttons use 1.5rem (24px) rounding, a softer alternative that maintains geometric clarity. Cards and containers use 1.5rem (24px) rounding, balancing modern minimalism with approachability. Input fields use 0.5rem (8px) rounding, maintaining technical precision. Th

Components

Action Elements Primary buttons (button-primary) use the full primary color (#032357) with white text, 56px height, 16px vertical / 32px horizontal padding, and full rounding (9999px). On hover, the background shifts to primary-container (#1c407b) with a subtle shadow (0 4px 12px rgba(3, 35, 87, 0.15)). On active/pressed, use primary-fixed-dim (#011c47). Transition all color changes over 200ms using ease-out timing. Secondary buttons (button-secondary) use orange (#ff7b00) with white text, 48px height, 12px vertical / 32px horizontal padding, and full rounding. On hover, shift to secondary-fixed-dim (#e66a00) with the same shadow treatment. Tertiary buttons are transparent with a 1px border in outline color (#64748b), 44px height, and 12px vertical / 24px horizontal padding. On hover,

Do's and Don'ts

**Do**

• Do use primary navy (#032357) exclusively for primary CTAs, hero backgrounds, and trust-critical interactions—it is the brand's signature color and must never be diluted or overused.
• Do apply full rounding (9999px) to all primary buttons to signal approachability and reduce decision friction; this is a core brand signature.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; this breathing room is essential to the refined aesthetic.
• Do pair Manrope headlines with Lato body text in every design; this combination is non-negotiable and defines the brand's visual voice.
• Do use the three-level shadow hierarchy (0 4px 12px, 0 16px 40px) consistently; shadows are the primary depth cue, not color shifts.
• Do ensure all text meets WCAG AA contrast minimums (4.5:1 for body, 3:1 for large text); test with a contrast checker before shipping.

**Don't**

• Don't use orange (#ff7b00) for body text or large background areas—it is an accent color reserved for CTAs and highlights; overuse dilutes its impact.
• Don't apply sharp corners (0px border-radius) to any interactive element; it reads as harsh and contradicts the brand's approachable professionalism.
• Don't mix Manrope and Lato within a single text element; maintain clear family separation between headlines (Manrope) and body (Lato).
• Don't use the inverse-surface color (#01173b) for anything other than dark-mode backgrounds; it is too dark for general use and creates accessibility issues.
• Don't add drop shadows to text; use text-shadow only on small labels over busy backgrounds, and only at 0 2px 4px rgba(0, 0, 0, 0.15).
• Don't reduce padding below 12px (sm spacing) inside containers; white-space is a design tool, not a constraint to minimize.