Kochfoto

Overview

Kochfoto is a professional creative services studio specializing in photography, video production, web design, and historical preservation. The brand embodies a "Technical Precision meets Artistic Vision" aesthetic—a sophisticated fusion of architectural minimalism and bold color accents that reflects the studio's mastery of both craft and storytelling. The visual language is deliberately high-contrast: a deep navy-black canvas (rgb(11, 26, 46)) serves as the foundation, punctuated by a vibrant golden accent (rgb(242, 203, 5)) that commands attention on CTAs and key interactive elements. This palette evokes professionalism, confidence, and creative energy—the UI feels like stepping into a high-end studio where every pixel has been intentionally placed.

The brand voice is direct, authoritative, and human-centered. Kochfoto speaks to clients as collaborators, not subjects. Vocabulary favors precision over flourish: "technical mastery," "visual storytelling," "content that informs and inspires." The tone is calm and assured, never breathless or trendy. Example sentence in brand voice: "Every frame is engineered for impact—we don't just capture moments, we architect experiences that move audiences to action."

Colors

The color system is built on a **high-contrast dark-light paradigm** designed to maximize readability and visual hierarchy while maintaining a premium, sophisticated aesthetic. The primary surface is a deep navy (surface: #0b1a2e, rgb(11, 26, 46)), which provides a neutral, professional canvas that allows photography and video content to breathe. The surface stack layers from surface-container-lowest (#030810) for the deepest backgrounds through surface-container-highest (#252f4a) for elevated interactive states, creating a 7-level depth hierarchy that guides visual focus without relying on shadows alone.

**Primary color (Golden Yellow, #f2cb05, rgb(242, 203, 5))** is the brand's signature accent and is used exclusively for Call-To-Action buttons, active navigation states, and key interac

Typography

The type system employs a two-family strategy: **Gilroy-Bold** for all display and headline levels (display through headline-md), and **Roboto** for body, label, and UI text. This pairing creates a clear visual hierarchy: Gilroy's geometric, bold personality commands attention at large sizes (240px for display, 56px for headline-lg), while Roboto's neutral, highly legible structure ensures readability at smaller scales (18px body-lg, 14px label-md). Letter-spacing is tightened on large headlines (-0.04em on display, -0.02em on headline-lg) to create visual density and sophistication, then normalized or slightly increased on body text (0.01–0.02em) for comfortable reading. Line-height follows a 1.2–1.4 ratio for headlines and 1.5–1.6 for body, ensuring adequate vertical breathing room. On s

Layout

The layout system uses a **12-column fluid grid** with a fixed container max-width of 1320px, ensuring responsive scaling on mobile (100% width with 24px horizontal gutter) while maintaining visual control on desktop. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Section separation uses the lg spacing token (40px) for major content blocks, md (24px) for subsections, and sm (12px) for component-level spacing. The hero section employs an asymmetric 5-7 column split (left text, right image carousel), leveraging the full viewport height with 170px top padding to account for the fixed header. White-space is treated as a design element: generous margins around photography and video content allow the media to command attention without competing visual nois

Elevation & Depth

Depth is conveyed through a **shadow-and-surface-color hybrid system** rather than relying on blur or transparency alone. Level 1 (Base) uses no shadow; elements sit flat on the surface (#0b1a2e). Level 2 (Standard Cards/Components) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts elements 4–6px off the base. Level 3 (Elevated/Modals/Hover States) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), creating a pronounced lift of 12–16px. Interactive hover states transition from Level 2 to Level 3 over 200ms (cubic-bezier(0.4, 0, 0.2, 1)), signaling interactivity wi

Shapes

The shape philosophy is **"Architectural Precision with Approachable Softness"**—a balance between sharp, engineered edges and subtle human warmth. Buttons and primary CTAs use the full rounded token (9999px / border-radius: 50%) to create pill-shaped forms that feel inviting and modern, softening the otherwise austere navy-and-gold palette. Secondary interactive elements (cards, input fields, modals) use lg (1rem / 16px) for a gentle, professional curve that avoids the clinical sharpness of sharp corners without the playfulness of full rounding. Tertiary elements (list items, badges, small co

Components

Action Elements Buttons are the primary interaction mechanism and are treated with utmost care. **button-primary** uses the full golden accent (#f2cb05) with dark text (#0b1a2e), full rounding (50%), and padding of 20px 48px, creating a 56px tall pill that dominates the visual hierarchy. On hover, the background shifts to primary-fixed-dim (#f2cb05 with 0.95 opacity) and applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), lifting the button 4px. On active/press, the button scales to 0.98 and the background darkens to #e6b800, providing tactile feedback. Transition timing is 150ms ease-out. **button-secondary** uses a transparent background with a 2px border in the primary color and the same text color, allowing secondary actions to coexist without visual competition. Hover state applies

Do's and Don'ts

**Do**

• Do use the golden primary (#f2cb05) exclusively on high-priority CTAs and active states—it is the brand's signature accent and loses impact if overused.
• Do maintain the 7-level surface stack (surface through surface-container-highest) to create visual hierarchy without relying on color alone; this ensures accessibility and clarity.
• Do apply full rounding (50%) only to buttons and primary interactive elements; use lg (16px) for cards and md (12px) for secondary components to maintain the architectural-precision aesthetic.
• Do pair Gilroy-Bold headlines with Roboto body text; never mix typefaces within a single hierarchy level, as this breaks the intentional two-family system.
• Do use the shadow elevation system (md for standard, lg for hover/elevated) consistently; never apply blur or glassmorphism effects, as these conflict with the brand's sharp, engineered personality.

**Don't**

• Don't use the primary gold (#f2cb05) for body text, backgrounds, or non-interactive elements—it is reserved for CTAs and active states only.
• Don't apply border-radius: 0 (sharp corners) to any component; the brand requires at least DEFAULT (8px) rounding to maintain approachability.
• Don't mix the navy surface (#0b1a2e) with the light off-white text (#f0f8ff) at contrast ratios below 16:1; always verify WCAG AAA compliance, especially on small text.
• Don't use system fonts or generic sans-serif fallbacks; always specify Gilroy-Bold or Roboto explicitly, with fallbacks to sans-serif only as a last resort.
• Don't apply multiple shadows or blur effects to a single element; the elevation system uses a single, consistent shadow per level to maintain visual clarity and performance.