The Kitcheners

Overview

The Kitcheners embodies Editorial Romanticism—a design aesthetic that merges high-fashion photography presentation with intimate, unguarded moments. The brand serves engaged couples and elopement seekers who value cinematic storytelling over conventional wedding photography. The visual language is deliberately restrained: cream and charcoal surfaces (#f6f5f1 and #1a202c) provide a gallery-like canvas, while serif typography (Cormorant Garamond at 72px for display, Times New Roman for body) evokes editorial magazines and fine art books. The emotional response is one of quiet confidence and timeless elegance—users feel they are browsing a curated collection rather than a commercial portfolio.

The brand voice is poetic yet grounded. Vocabulary leans toward 'cinematic,' 'emotive,' 'story,' and 'moment'—never 'package' or 'deal.' Tone is warm but never casual; sentences are measured and deliberate. Example: 'We capture the breath before the kiss, the light through the trees, the way you look at each other when no one else is watching.' The personality is that of a thoughtful artist who understands that elopements are deeply personal, not transactional.

Colors

Color philosophy centers on restraint and authenticity. The primary palette is a near-monochrome foundation (surface #f6f5f1, on-surface #2d3748, primary #1a202c) that mirrors the tonal range of film photography and allows imagery to dominate. Secondary accent (#ff6900, a warm luminous orange) is reserved for CTAs and key interactive moments—it appears sparingly but with intention, drawing the eye to 'Contact' buttons and booking pathways without overwhelming the editorial aesthetic. Tertiary (#0693e3, a cool cyan-blue) supports secondary actions and highlights, creating visual rhythm through complementary warmth and coolness.

Usage rules: Primary (#1a202c) is applied to navigation text, body copy, and button backgrounds for primary actions. On-primary (#ffffff) ensures legibility on dark

Typography

The type system reflects a dual personality: display and headline levels use Cormorant Garamond (a high-contrast serif with elegant proportions) at weights of 400 only, reinforcing editorial sophistication and avoiding heaviness. Display is set at 72px with -0.02em letter-spacing to tighten the letterforms; headline-lg at 48px with -0.01em. Body text defaults to Times New Roman (a universally trusted serif) at 16–18px with 0.01–0.02em letter-spacing to add breathing room and improve readability on screens. Label and small text use 600–500 font-weight with 0.05–0.08em letter-spacing to create visual distinction and ensure legibility at small sizes. When displaying testimonials or poetic copy over hero images, apply text-shadow 0 2px 8px rgba(0, 0, 0, 0.4) to ensure contrast against photogra

Layout

Page rhythm follows a 12-column grid with a fixed max-width of 1280px, centered on viewport. The design uses a fluid-to-fixed breakpoint strategy: on mobile (< 750px), columns collapse to single-column or 2-column layouts; on desktop, full 12-column grid is active. White-space is generous: section separation uses lg spacing (40px) vertically, gutter spacing (24px) horizontally for content padding. Hero sections span full viewport width with 64px (xl spacing) padding on sides; card grids use md spacing (24px) between items. Container padding is consistently 24px on desktop, 12px on mobile. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied semantically: xs for micro-interactions (icon spacing), sm for input padding, md for card padding and section margins, lg for

Elevation & Depth

Depth is conveyed through subtle shadow layering and surface color shifts rather than dramatic drop-shadows. Level 1 (Base): flat surface at #f6f5f1 with no shadow. Level 2 (Standard Card): background #ffffff with 1px border at #c4c7c8 and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15)—this creates a gentle lift from the page. Level 3 (Elevated/Modal): background #f0ede7 with box-shadow 0 8px 24px rgba(0, 0, 0, 0.12) and optional 1px border at #abb8c3. Hero overlays use rgba(26, 32, 44, 0.3) with backdrop-filter blur(2px) to soften text over photography without creating harsh contrast. Interactive e

Shapes

The shape philosophy is 'Refined Minimalism'—rounded corners are used sparingly and consistently to soften hard edges without introducing playfulness. Buttons and inputs use rounded DEFAULT (0.5rem / 8px) for a subtle, professional appearance. Cards and containers use rounded md (0.75rem / 12px) to create gentle definition. Modals and full-width overlays use rounded lg (1rem / 16px) at top corners only, maintaining a grounded, architectural feel. The full radius (9999px) is reserved for badge components and small accent elements. No element uses sharp 0px radius; the minimum is DEFAULT (8px).

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background #1a202c, text #ffffff, height 48px, padding 12px 32px, rounded 8px) are used for main CTAs like 'Contact' or 'Book Now.' On hover, background transitions to #2d3748 (primary-container) over 200ms. Secondary buttons (transparent background, 1px border #1a202c, text #1a202c) are used for alternative actions; on hover, background becomes #ebe8e2 (surface-container-low). Accent buttons (background #ff6900, text #ffffff) are reserved for high-priority CTAs; hover state is #e55a00 with no shadow change. All buttons use label-md typography (14px, 600 weight, 0.05em letter-spacing) and disable state applies opacity 0.5 with cursor not-allowed.

Containers & Surfaces Cards are the primary content cont

Do's and Don'ts

**Do**

• Do use Cormorant Garamond (400 weight only) for all display and headline text to maintain editorial elegance and consistency.
• Do apply generous white-space (lg spacing: 40px) between major sections to create a gallery-like, unhurried browsing experience.
• Do reserve the secondary accent color (#ff6900) exclusively for primary CTAs and key interactive moments—overuse dilutes its impact.
• 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 states to create subtle, refined depth.
• Do apply text-shadow 0 2px 8px rgba(0, 0, 0, 0.4) to body text overlaid on hero photography to ensure legibility without harsh contrast.
• Do maintain 200ms ease transitions on all interactive state changes (hover, focus, active) to preserve the refined, unhurried brand feel.

**Don't**

• Don't use rounded corners sharper than 8px (DEFAULT) or apply 0px radius—the brand requires gentle, refined edges throughout.
• Don't apply heavy shadows (> 0.4 opacity) or multiple layered shadows—the aesthetic is editorial, not dimensional or playful.
• Don't mix serif and sans-serif typefaces in the same hierarchy level; Cormorant Garamond and Times New Roman are the only approved families.
• Don't use the secondary accent (#ff6900) on non-interactive elements or as a background color—it is reserved for CTAs and hover states only.
• Don't reduce padding below 12px (sm spacing) on cards or containers; the brand relies on breathing room to feel luxurious and intentional.
• Don't apply more than one text-shadow or use blur values > 8px; excessive effects undermine the clean, editorial aesthetic.