Does Gap use its brand blue on the website?

Gap's cobalt brand blue (#031ba1) is declared as a CSS variable (--br1, --color-brands-gap-brand, --color-brands-gap-test-brand-1) but does not render on the captured marketing surface. Zero occurrences of the brand blue appear as text, background, or border in the extraction. The blue Gap square logo is visible in the top-left of the nav, but it functions as an image asset — the color is not applied to any interactive element, CTA, or UI chrome. Gap's homepage design philosophy appears to be: the logo is the brand statement; the rest of the chrome is monochrome to let the photography own the page.

What typeface does Gap use, and what should I use as a substitute?

Gap runs a proprietary custom typeface called Gap Sans (declared as 'Gap Sans v1' in CSS and 'Gap Sans' in the rendered stack) across every tier. Weight is uniformly 400 throughout the captured marketing surface — no 600 or 700 weight appears. Display sits at 60px with normal letter-spacing; body at 16px with 0.2–0.32px positive tracking; small labels at 12px with 0.2–0.32px tracking. The positive tracking at small sizes creates an airy, open register that distinguishes Gap from typical fashion brands. The closest open-source substitute is GT America or Aktiv Grotesk at weight 400; Inter with +0.3px letter-spacing applied at label sizes approximates the airy tracking. Preserve the weight-400-only discipline — the restraint is the system.

Is Gap's homepage more editorial or e-commerce in its design approach?

It operates as both simultaneously. The captured surface mixes editorial presentation (large single-image hero panels with sparse text, full-bleed photographer-style shots) with e-commerce infrastructure (product grid tiles, promotional banners, category navigation). The editorial sections — the 'Feel the linen' hero, the 'New for summer' full-bleed lifestyle shot — have the spare layout of a magazine spread. The e-commerce sections — the product grid with price + rating below each tile, the 'More new arrivals' section — are dense and informational. The two registers share the same typeface and chrome; the switch between them is made entirely by the photography style, not by any change in the surrounding typography or layout.

What is Gap's corner-radius approach?

Gap's e-commerce surface uses near-zero corner rounding. The extraction captures only four radius values: 20px on one panel (2.5px on one element, 2px on another, 1.5px on a third). The dominant UI element treatment is square-edged — product tiles, nav elements, most CTA buttons, input fields all use 0px or near-0px rounding. This is the opposite of Phantom's generous 24–32px card rounding and Cloudflare's small-step rounding — Gap reads as completely architectural in its edge treatment. The only rounded elements on the page are a single 20px-radius panel and minor sub-pixel edge softening on a few elements.

Can I use this DESIGN.md to build a fashion retail site?

Yes — the file is designed for Claude, Cursor, and similar AI tools. Feed it the spec and it will reproduce Gap's design moves: pure white canvas with black text chrome, Gap Sans-equivalent weight-400 typography across all tiers, positive 0.2–0.32px tracking at small sizes, near-zero corner rounding, and black-rectangle CTA buttons with white text. Token references resolve cleanly — {colors.ink} for all text, {colors.canvas} for the page floor, {colors.hairline} for the dominant border tone. One important caveat: this system is entirely dependent on product photography. Without strong editorial photography, the stripped-down chrome provides no visual interest and the page reads as blank.

Gap Design System

Gap's e-commerce homepage runs a monochrome black-on-white system with product photography as the only visual accent.

About Gap DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source gap.com

E-commerce & Retail

Gap's homepage does something that most e-commerce brands consider too risky: it removes itself. The page is a white canvas carrying black Gap Sans text at weight 400 and product photography — nothing else. No cobalt blue in the nav, no brand-color CTA button, no colored section bands. The top navigation is white with black text links; the "Shop Now" buttons are black rectangles with white text; the editorial headers are large, spare, and weight-400. The blue square logo sits in the top-left, but its brand blue does not appear anywhere else on the page. Where Zara also runs a stripped-down monochrome system, Zara uses editorial photography of models against white; Gap's homepage on the captured surface runs a more editorial magazine mix — linen-textured flat-lays, outdoor lifestyle shots, and a FIFA collaboration panel using full-color editorial photography.

The DESIGN.md packages the system for React and AI tools. Inside: 10 color tokens where pure black (410 total occurrences) and a border gray (410 occurrences) dominate, with white (48 occurrences) and a muted gray (20 occurrences) filling out the text tier. Typography is a single proprietary family — Gap Sans — running at weight 400 across every tier. Display sits at 60px with no letter-spacing; body at 16px with positive 0.2–0.32px tracking; small caps and links at 12–14px with 0.2–0.32px tracking. Gap's positive tracking at small sizes is unusual for a fashion brand: it creates an airy openness that contrasts with the tight tracking fashion brands typically use.

Feed this spec to an AI tool and it will reproduce Gap's signature restraint: pure black and white chrome, product photography as the only visual element, Gap Sans at weight 400 across all scales, sparse or zero corner rounding, and the editorial editorial layout rhythm of a magazine cover translated to an e-commerce page. The move worth borrowing selectively is zero-brand-color discipline — it only works when the product photography is strong enough to carry 100% of the visual interest. For most brands this is a high-risk position; for a heritage retailer with 50 years of brand equity in its logo, it lands.

What makes it distinct

Monochrome editorialno brand color renders in the marketing chrome; black text on white canvas, with product photography providing all color
Zero-weight variationGap Sans runs at weight 400 from 60px editorial display down to 12px label; no bold tier exists on the page
Positive letter-spacingGap Sans uses 0.2–0.32px positive tracking across small and body sizes, giving the type an airy, open register
Sparse corner roundingalmost no border-radius on the e-commerce surface; most tiles and buttons are sharp-edged or minimal (2–4px)
Photography as the design systemthe page's visual identity is entirely carried by full-bleed and editorial product photos; the surrounding chrome disappears

Live at gap.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

gap.com

Explore Gap

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Gap design system FAQ

Common questions about Gap's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Gap — official site

Gap's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.