Calvin Klein

Overview

Calvin Klein is a global luxury fashion brand that epitomizes architectural minimalism and understated sophistication. The design system reflects a "Refined Monochromatic" aesthetic—a deliberate embrace of black, white, and grayscale as the foundation, punctuated by strategic use of deep crimson and navy accents that signal editorial moments and calls-to-action. The brand serves discerning consumers who value precision, clarity, and timeless design over ornament. The UI evokes a sense of calm authority: clean grids, generous whitespace, and restrained typography create an environment where product and message take center stage without distraction. Voice: direct, confident, and intellectually precise. The brand speaks in declarative sentences with measured pacing—never rushed, never casual. Example sentence: "Modern essentials. Engineered for life."

Colors

The Calvin Klein color system operates on a principle of hierarchical restraint. Primary (#000000) anchors all interactive elements—buttons, links, and focus states—establishing visual authority through pure black. On-primary (#ffffff) ensures maximum contrast and legibility at 18:1 WCAG AAA compliance. Secondary (#d4194c), a deep crimson, is reserved for promotional moments, sale indicators, and secondary CTAs; it appears sparingly to maintain impact. Tertiary (#00174f), a midnight navy, supports data visualization and secondary information layers. The surface stack (white #ffffff down to #cccccc) provides subtle depth without sacrificing the minimalist aesthetic. On-surface (#1a1b1e) is used for body text and secondary content, while on-surface-variant (#696969) handles tertiary informat

Typography

The Klein typeface family (Klein, KleinBold, KleinLight, KleinRegular) forms the backbone of the system, paired with Helvetica and Arial as fallbacks. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments and campaign headlines. Headline-lg (40px, 600 weight) anchors section titles and major content blocks. Headline-md (28px, 600 weight) structures subsections with -0.01em tracking for visual tightness. Title-lg (20px, 600 weight) labels cards and component headers. Body-lg (18px, 400 weight) handles long-form content and editorial text. Body-md (16px, 500 weight, the system default) is applied to all body copy, form labels, and UI text. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons, badges, and small interactive elements. Label-sm (12px, 500 weight,

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px (container-max-width: 1280px), centered on the viewport. Gutter spacing is 24px (md spacing token), applied consistently across all breakpoints. Section separation uses lg spacing (40px) for major content blocks, creating a rhythm that guides the eye through the page. Container widths scale responsively: 991px on tablet, 1120px on desktop, with 24px horizontal padding on mobile. Whitespace is treated as a design element—negative space around product imagery and CTAs prevents visual fatigue and emphasizes content hierarchy. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied systematically: buttons use md padding (24px horizontal, 12px vertical), cards use md padding (24px), and form inputs u

Elevation & Depth

Depth in the Calvin Klein system is achieved through subtle shadow and layering rather than dramatic elevation. Level 1 (Base): flat surfaces at rgba(255, 255, 255, 1) with no shadow, establishing the primary plane. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a barely-perceptible lift for interactive surfaces like product cards and input fields. Level 3 (Modals & Overlays): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to modal dialogs and dropdown menus to separate them from the base layer. Level 4 (Floating Elements): box-shadow: 0 16px 40px rgba(0

Shapes

The shape philosophy is "Architectural Precision"—a commitment to minimal, functional border-radius values that echo the brand's design heritage. Buttons use 2px (0.25rem / sm radius) for a crisp, technical appearance that feels engineered rather than organic. Cards and containers use 4px (0.5rem / DEFAULT radius) for subtle definition without softness. Modals and elevated surfaces use 8px (1rem / lg radius) to signal importance and separation. Input fields use 2px (sm radius) to align with button styling and create visual cohesion in forms. Badges and pills use 9999px (full radius) for circul

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#000000), textColor: {colors.on-primary} (#ffffff), padding: 12px 32px, height: 48px, rounded: 2px, and typography: {typography.label-md} (14px, 600 weight). Hover state (button-primary-hover) shifts backgroundColor to {colors.primary-container} (#222222) with a 200ms transition (cubic-bezier(0.4, 0, 0.2, 1)). Active state (button-primary-active) uses {colors.primary-fixed-dim} (#1a1b1e). Button-secondary uses transparent background with a 1px solid border at {colors.outline} (#808080), maintaining the same padding and height. Secondary buttons on hover shift to {colors.surface-container-high} (#d9d9d9) background. All buttons apply font-weight: 500 and letter-spacing:

Do's and Don'ts

**Do**

• Do use primary (#000000) for all CTAs, focus states, and interactive elements—it is the system's anchor color and must remain visually dominant.
• Do apply 24px (md spacing) as the default gutter and section separator; it creates the rhythm that defines the Calvin Klein layout grid.
• Do use Klein typeface at 600 weight for headlines and 500 weight for body text; this pairing creates the brand's signature architectural precision.
• Do apply 2px border-radius to buttons and inputs; this technical sharpness is core to the brand identity and must not be softened.
• Do use secondary (#d4194c) sparingly—only for promotional moments, sale badges, and secondary CTAs—to maintain its impact and distinctiveness.

**Don't**

• Don't use rounded corners larger than 8px on any component; the brand's aesthetic rejects organic softness in favor of architectural clarity.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12); excessive elevation contradicts the minimalist philosophy.
• Don't mix typefaces; Klein is the exclusive family. Helvetica and Arial are fallbacks only, never intentional design choices.
• Don't use color outside the defined palette—no custom hex values, no brand colors not listed in the color token system.
• Don't apply text-shadow or text-stroke effects except on label-sm over busy backgrounds; the system prioritizes clarity and legibility.