# Persa London · Design System ## CF Studio · May 2026 --- ## Brand Identity **Name:** Persa London **Tagline:** Persian heritage. London craft. **Voice:** Precise, unhurried, honest. Never corporate. Never breathless. Specific over general. Earned confidence, not bravado. **Founder:** the studio **Studio:** London N1 --- ## Colour Tokens ```css :root { /* Core */ --pl-ink: #1a1208; /* Near-black with warmth. Used for body text. */ --pl-cream: #f5f0e8; /* Warm off-white. Page background. */ --pl-linen: #ede6d6; /* Slightly darker cream. Section backgrounds. */ --pl-gold: #b8860b; /* Dark goldenrod. Accent, highlights, foil stamping. */ --pl-gold-lt: #d4a843; /* Light gold. Hover states, icon fills. */ --pl-rose: #9b3a3a; /* Deep Persian rose. Brand accent. CTAs. */ --pl-rose-lt: #c76b5a; /* Lighter rose. Hover on CTAs. */ --pl-stone: #8c7b6a; /* Mid-tone warm grey. Secondary text, borders. */ --pl-stone-lt: #c4b5a4; /* Light stone. Dividers, disabled states. */ --pl-white: #ffffff; /* Semantic */ --pl-bg: var(--pl-cream); --pl-surface: var(--pl-linen); --pl-text: var(--pl-ink); --pl-text-2: var(--pl-stone); --pl-accent: var(--pl-gold); --pl-cta: var(--pl-rose); --pl-border: var(--pl-stone-lt); } ``` --- ## Typography ```css /* Load in */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap'); :root { /* Display — Cormorant Garamond: editorial, heritage, Persian elegance */ --font-display: 'Cormorant Garamond', Georgia, serif; /* Body — Jost: clean, geometric, modern without being cold */ --font-body: 'Jost', system-ui, sans-serif; /* Scale (fluid clamp) */ --text-xs: clamp(0.65rem, 1vw, 0.75rem); --text-sm: clamp(0.8rem, 1.2vw, 0.9rem); --text-base: clamp(0.9rem, 1.4vw, 1rem); --text-md: clamp(1rem, 1.6vw, 1.15rem); --text-lg: clamp(1.1rem, 2vw, 1.35rem); --text-xl: clamp(1.4rem, 3vw, 1.9rem); --text-2xl: clamp(1.8rem, 4vw, 2.6rem); --text-3xl: clamp(2.4rem, 6vw, 3.8rem); --text-hero: clamp(3rem, 8vw, 5.5rem); } /* Usage */ body { font-family: var(--font-body); font-weight: 300; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; } .label { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; } .italic-em { font-family: var(--font-display); font-style: italic; } ``` --- ## Spacing ```css :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --section-gap: clamp(64px, 10vw, 128px); --page-pad: clamp(20px, 5vw, 80px); --content-max: 1200px; } ``` --- ## Motion ```css :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-reveal: 900ms; } /* Fade-up reveal (apply to elements entering viewport) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } ``` --- ## Components ### Nav ``` - Logo: "PERSA · LONDON" in Cormorant 300, tracking wide - Links: Jost 300, uppercase, 0.12em tracking, 14px - Active: gold underline 1px - Mobile: hamburger → full-screen overlay with fade ``` ### Button — Primary (CTA) ```css .btn-primary { background: var(--pl-rose); color: var(--pl-white); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 32px; border: none; cursor: pointer; transition: background var(--duration-base) var(--ease-out); } .btn-primary:hover { background: var(--pl-rose-lt); } ``` ### Button — Ghost ```css .btn-ghost { background: transparent; color: var(--pl-ink); border: 1px solid var(--pl-ink); /* same padding/font as primary */ } .btn-ghost:hover { background: var(--pl-ink); color: var(--pl-cream); } ``` ### Section divider ```css .divider { width: 40px; height: 1px; background: var(--pl-gold); margin: var(--space-6) 0; } ``` ### Label / Eyebrow ``` Jost 300 · 11px · 0.15em tracking · uppercase · --pl-stone colour Appears above section headings to orient the reader. ``` ### Card (product) ``` Background: --pl-linen Image: full-bleed top, 4:3 ratio Title: Cormorant 400 · 20px Price: Jost 300 · 14px · --pl-stone Hover: image scales 1.02 over 400ms ease-out ``` --- ## Photography Art Direction **Hero images:** Warm natural light. Stone, linen, or wood surfaces. Never clinical studio white on website — that's for eBay. Slight shadows. Warm temperature (5500–6000K). **Detail shots:** Macro, shallow depth of field. Bokeh background. Leather grain, stitching, painted motif sharp. **Lifestyle:** Natural settings. Arms, hands visible. No full-face model shots required. Candid feel. **Colour grading:** Slightly warm, slightly desaturated. Not Instagram-filtered. Film-like. Consistent across all shots. **Format:** 2400px wide minimum. WebP preferred. Aspect ratios: 4:3 hero, 1:1 square for social, 3:4 portrait for mobile hero. --- ## Page Templates ### Standard page structure ```