Kochfoto

Overview

Kochfoto is a professional creative services studio specializing in photography, video production, web design, and historical preservation. The brand embodies a 'Technical Sophistication' aesthetic—a fusion of minimalist dark-mode elegance with vibrant accent colors that command attention. The visual language conveys precision, mastery, and creative ambition: a deep navy canvas (#0a0e27) provides the contemplative foundation, while a bold golden-yellow primary (#f2cb05) punctuates key interactions and calls-to-action, evoking both luxury and energy. The UI evokes a sense of professional confidence and artistic vision, inviting users to explore high-impact creative work.

The brand voice is direct, authoritative, and human-centered. Kochfoto speaks in declarative statements that emphasize technical mastery paired with emotional resonance: 'Technical mastery meets creative vision to deliver content that does not just inform it, inspires.' The vocabulary is precise and purposeful—words like 'capture,' 'connect,' 'deliver,' and 'experience' recur throughout. The tone avoids hyperbole; instead, it grounds claims in tangible outcomes. Example sentence in brand voice: 'Every frame tells a story; every project moves audiences to action.'

Colors

The Kochfoto color system is built on a dark-first philosophy, optimized for a premium, gallery-like presentation of visual content. The primary surface (#0a0e27) is a deep navy that reads as near-black on standard displays, providing maximum contrast for photography and video while maintaining visual sophistication. The primary accent color is a vibrant golden-yellow (#f2cb05), used exclusively on call-to-action buttons, active navigation states, and key interactive elements. This high-contrast pairing (primary on surface) achieves WCAG AAA compliance while creating a distinctive, memorable brand signature.

Secondary colors support specific functional roles: the secondary blue (#0d6efd) is reserved for informational elements, links, and secondary actions; the tertiary teal (#20c997) high

Typography

The typography system pairs two distinct typeface families to create visual hierarchy and emotional resonance. Gilroy-Bold (700 weight) serves as the display and headline family, delivering bold, geometric letterforms that command attention and convey technical precision. Roboto (400 weight) anchors body copy and descriptive text, providing excellent readability at 18px on dark backgrounds with a line-height of 28px (1.56x). Inter (600 weight) is used for labels and smaller UI text, offering clarity at smaller sizes with its open counters and generous spacing.

The display level (240px, Gilroy-Bold, -0.04em letter-spacing) is reserved for hero headlines like 'KOCHFOTO,' creating an imposing visual anchor. Headline-lg (56px, 700 weight) is used for section titles, while headline-md (40px) h

Layout

The page layout follows a 12-column grid system with a maximum container width of 1320px, allowing content to scale fluidly on smaller viewports while maintaining visual control on desktop. The gutter width is 24px (md spacing), creating consistent breathing room between columns. The hero section uses an asymmetric two-column split: the left column (col-xl-5) contains the text narrative and primary CTA, while the right column (col-xl-7) showcases a vertical carousel of portfolio imagery. This layout creates visual balance between storytelling and visual proof.

Whitespace is treated as a design element, not an afterthought. Section separation uses lg spacing (40px) to create distinct visual rhythm, while internal card padding uses md spacing (24px) to ensure content breathes. The container

Elevation & Depth

Depth in the Kochfoto system is achieved through subtle shadow layering and strategic use of the surface-container stack, avoiding the flat aesthetic while maintaining visual clarity against photography. The elevation system defines three primary levels:

Level 1 (Base): The surface (#0a0e27) with no shadow, used for the page background and recessed elements.

Level 2 (Standard Card): surface-container (#151b35) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), used for portfolio cards, input fields, and standard UI containers. This shadow has a 4px blur radius and 12px spread, creating a soft h

Shapes

The Kochfoto shape philosophy is 'Refined Geometry'—a balance between sharp technical precision and approachable softness. Buttons use a full rounded style (border-radius: 9999px), creating pill-shaped containers that feel modern and clickable while maintaining a premium aesthetic. This full-radius treatment is applied consistently to all primary and secondary buttons, creating a recognizable interaction pattern.

Cards and containers use a moderate border-radius of 1rem (16px), providing subtle rounding that softens the geometry without appearing overly organic. Input fields use the DEFAULT r

Components

Action Elements

Buttons are the primary interaction pattern and use a consistent 56px height with 20px vertical and 48px horizontal padding. The primary button (button-primary) uses the golden-yellow background (#f2cb05) with dark text (#0a0e27), creating maximum contrast and visual prominence. On hover, the background transitions to the darker primary-container (#d4a800) over 200ms, signaling state change without jarring animation. The secondary button uses a transparent background with a 2px solid border in the primary color, allowing for visual hierarchy when multiple actions are present. Both button variants use Gilroy-Bold at 18px (label-md) to ensure text weight matches the visual weight of the container.

Containers & Surfaces

Cards (card component) use surface-container (

Do's and Don'ts

**Do**

• Do use the golden-yellow primary (#f2cb05) exclusively on call-to-action buttons and active states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the dark surface (#0a0e27) as the dominant background to ensure photography and video content remains the visual focus.
• Do apply consistent 200ms transitions on all hover and focus states to signal interactivity without feeling sluggish.
• Do use Gilroy-Bold for headlines and labels to create visual hierarchy and convey technical precision.
• Do respect the 24px gutter spacing on desktop and 15px padding on mobile to maintain visual rhythm and readability.
• Do apply the full-rounded (9999px) border-radius exclusively to buttons to create unmistakable click targets.

**Don't**

• Don't use the primary yellow (#f2cb05) for body text or large background areas—it will create visual noise and reduce the impact of call-to-action elements.
• Don't apply shadows with vertical offsets (e.g., 0 8px 16px)—use blur and spread alone to maintain the flat, contemporary aesthetic.
• Don't mix typeface families within a single component (e.g., Gilroy-Bold for a headline and Inter for a subtitle in the same card)—use consistent family pairings.
• Don't reduce the contrast between text and background below WCAG AA standards, especially on dark surfaces where eye strain is a risk.
• Don't apply border-radius values between 0.5rem and 1rem to buttons—use either DEFAULT (8px) for inputs or full (9999px) for buttons to maintain visual clarity.
• Don't animate transitions faster than 150ms or slower than 300ms—speeds outside this range feel either jarring or sluggish.