Vogue

Overview

Vogue is the definitive global authority on fashion, beauty, and culture, serving as the arbiter of style for discerning audiences worldwide. The design system embodies "Editorial Minimalism"—a refined aesthetic that prioritizes content hierarchy, typographic elegance, and restrained use of color to create an authoritative, magazine-quality digital experience. The interface evokes the precision and sophistication of high-end print editorial, where every element serves the narrative and photography is paramount. The emotional response is one of aspiration tempered by accessibility: users feel they are reading the most important fashion and culture stories, delivered with the authority of a century-old institution.

Vogue's voice is authoritative yet conversational, opinionated without being didactic. The brand speaks in declarative statements about what matters in fashion and culture, using precise vocabulary drawn from fashion criticism, art history, and contemporary discourse. Tone is never breathless or hyperbolic; instead, it is measured, informed, and occasionally witty. Example: "The oversized blazer isn't a trend—it's a permanent fixture in the modern wardrobe, worn by everyone from investment bankers to art directors."

Colors

The color palette is anchored in a sophisticated black-and-white foundation (#000000 and #ffffff) that creates maximum contrast and editorial clarity, with a single vibrant accent: Vogue Red (#d92f20). This red functions as the primary brand color, appearing exclusively on call-to-action buttons ("Subscribe Now", "Confirm My Choices"), active navigation states, and key interactive elements. It is never used for backgrounds or large surface areas—only for moments that demand user action. The secondary color is the brand's signature black (#1f1f1f), used for body text, navigation, and structural elements. A tertiary accent, Vogue Gold (#ffd700), appears sparingly on editorial highlights and premium content badges. The surface stack uses a refined grayscale: #ffffff (primary surface), #f8f8f8

Typography

The type system is built on a dual-font strategy that reflects Vogue's editorial heritage: Adobe Garamond Pro (serif, 400–700 weights) for all editorial content—headlines, body copy, and display text—and Vogue Avant Garde (sans-serif, 400–700 weights) for interface elements, navigation, and labels. This pairing creates a clear visual distinction between editorial narrative and functional UI. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and cover-style moments; Headline-lg (40px, 700 weight) anchors section introductions; Body-lg (20px, 400 weight, 32px line-height) is the primary reading size for feature articles and long-form content. Body-md (16px, 400 weight) is used for captions, bylines, and secondary editorial text. Label-md (13px, 600 weight, Vog

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1024px, centered on the viewport. This width balances the immersive scale of editorial photography with the readability of text-heavy content. The grid is fluid below 768px, stacking to single-column layouts on mobile. Spacing follows a semantic scale: 8px unit base, with md (24px) used for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The homepage rhythm alternates between full-bleed imagery (hero, featured stories) and contained card grids (article teasers, rubrics). White space is generous—never cramped—with minimum 24px padding around all content blocks. Container margins use the gutter token (24px) on desktop, reducing to 16px on tablet and 12p

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows, maintaining the refined, editorial aesthetic. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background (#ffffff). Level 2 (Card/Container): 0 1.3px 2.7px rgba(0, 0, 0, 0.25) applied to article cards, modals, and interactive containers on hover; this creates a gentle lift without visual heaviness. Level 3 (Modal/Overlay): 0px -3px 30px rgba(0, 0, 0, 0.4) used for full-screen modals, dropdowns, and premium overlays; the negative y-offset creates a sense of the element floating abov

Shapes

The shape philosophy is "Architectural Precision"—minimal, sharp corners that reflect the geometric clarity of modern editorial design. Border-radius is used conservatively: buttons and input fields use 4px (DEFAULT) for subtle definition without softness; cards use 0px (no radius) to align with the grid structure and maintain a print-like appearance; badges and icon buttons use 50% (full) for circular elements only. This restraint ensures the interface feels authoritative and structured, never playful or organic. The 4px radius on interactive elements provides just enough visual softness to s

Components

Action Elements Buttons are the primary call-to-action mechanism and must be visually distinct. Primary buttons use {colors.primary} (#d92f20) background with {colors.on-primary} (#ffffff) text, 13px Vogue Avant Garde 600 weight, 48px height, 0–16px horizontal padding, and 4px border-radius. On hover, the background shifts to {colors.inverse-primary} (#f98076) with a smooth 200ms transition (cubic-bezier(0.37, 0, 0.63, 1)). Secondary buttons use {colors.secondary} (#1f1f1f) background with white text, 5px vertical and 8px horizontal padding, and no border-radius (0px). All buttons must include a focus state with a 3px inset shadow (0 0 3px 2px #5e9ed6) for keyboard accessibility. Navigation links use {colors.on-surface} (#000000) text with no background; on hover, they transition to {c

Do's and Don'ts

**Do**

• Do use Adobe Garamond Pro for all editorial headlines and body copy to maintain the magazine aesthetic; reserve Vogue Avant Garde exclusively for UI elements, buttons, and navigation.
• Do apply Vogue Red (#d92f20) only to call-to-action buttons, active navigation states, and interactive focus indicators; never use it for backgrounds, decorative elements, or body text.
• Do maintain generous white space (minimum 24px padding) around all content blocks and between sections to create breathing room and emphasize editorial hierarchy.
• Do use 4px border-radius on buttons and inputs only; keep cards, modals, and large containers at 0px radius to maintain the architectural precision of the design.
• Do apply subtle shadows (0 1.3px 2.7px rgba(0, 0, 0, 0.25)) on card hover states and modals to create depth without visual heaviness; avoid drop shadows on primary surfaces.

**Don't**

• Don't use Vogue Red (#d92f20) for large surface areas, backgrounds, or decorative elements; it is reserved exclusively for interactive moments and CTAs.
• Don't apply border-radius greater than 4px to buttons, inputs, or standard cards; the design system prioritizes sharp, architectural corners over rounded softness.
• Don't mix serif and sans-serif fonts within a single text block; use Adobe Garamond Pro for editorial content and Vogue Avant Garde for UI labels, never both in the same line.
• Don't use more than 3 columns of content cards in a grid layout; wider layouts dilute the editorial focus and reduce readability of article teasers.
• Don't apply text-shadow or other effects to body copy; reserve text-shadow (0 1px 2px rgba(0, 0, 0, 0.08)) only for white text overlaid on photography to ensure legibility.