Fear of God — Design System Reference

1. Visual Theme & Atmosphere

The Fear of God official store (Shopify, Spain storefront) is a luxury-fashion catalogue disguised as a web shop: a white canvas, black type, and almost no ornament, so the product photography and the brand name do all the work. The typographic signature is a pairing of Optima, a humanist flared sans associated with quiet luxury, for the headline and paragraph voice, and HelveticaNeueLTPro Condensed for navigation, labels and body, set in uppercase with generous tracking. The result feels like a printed lookbook: restrained, wide-spaced, and deliberately minimal. Collections such as “Essentials Fall 2026” are featured as full links rather than decorated banners.

2. Color Palette & Roles

Foundation

• rgb(255, 255, 255) — page canvas
• rgb(0, 0, 0) — text, borders, header
• rgb(105, 105, 105) — h3 secondary gray

Neutral surfaces

• rgb(248, 248, 248) — grouped content panels
• rgb(244, 244, 244) — footer-logo strip
• rgba(0, 0, 0, 0.5) — modal dark filter

Consent/UI utility (OneTrust cookie panel, not brand)

• rgb(39, 69, 92), rgb(70, 130, 84), rgb(56, 96, 190) — slate, green and blue seen only in the cookie banner controls
• rgb(249, 255, 250) — opt-out signal tint

The brand itself is strictly black and white. Color only appears in third-party consent chrome.

3. Typography Rules

Principles

• Two voices: Optima for the editorial headline and paragraph text, condensed Helvetica for everything functional.
• Links, buttons and H2 labels are uppercase and tracked out (0.7px to 1.8px); wide spacing on a condensed face gives the luxury feel.
• Bold (700) is reserved for H3/H4; everything else is 400.
• Fallbacks are Gill Sans and Helvetica/Arial.

4. Component Stylings

Links and navigation

• Uppercase condensed 14px, 0.7px tracking, black on white
• Skip-to-content link gains a white fill and a 2.8px white ring on focus

Buttons

• Uppercase 14px, 1.8px tracking, transparent background by default

Inputs

• Optima 16px, uppercase

Border radius

• 2px, 17px, 50px, 50% — near-square for most UI, round for icon buttons and toggles.

Shadows

• rgba(0, 0, 0, 0.15) 0px 4px 20px 0px — soft lifted shadow for floating panels
• 1px inset black ring used as an outline treatment

Hover tokens (theme variables)

• --hover-lift-amount: 4px, --hover-scale-amount: 1.03, --hover-subtle-zoom-amount: 1.015, with 0.25s ease-out timing.

5. Layout Principles

• Page widths: narrow 90rem, normal 120rem, wide 150rem; content widths 36 / 42 / 46rem.
• Sidebar width 25rem; section heights small 15rem, medium 25rem, large 35rem, so imagery is given tall, cinematic blocks.
• Left-aligned text by default.
• Body, main, header and footer have zero padding; spacing is set inside sections and image blocks.
• A very dense set of breakpoints (320 up to 1600) reflects the Shopify theme’s heavy responsive tuning.

6. Depth & Elevation

Mostly flat. The surface ladder is white rgb(255, 255, 255) to rgb(248, 248, 248) to rgb(244, 244, 244). Elevation is added only with the single soft shadow (0 4px 20px at 15% black) and the 50% black modal backdrop. Interaction depth comes from the hover lift (4px) and zoom (1.015 to 1.03) tokens with 0.25s ease-out; submenus open over 0.36s with cubic-bezier(.25, .1, .25, 1), and surfaces transition over 0.3s.

7. Do’s and Don’ts

Do

• Keep the page white and the type black.
• Pair Optima (headlines, paragraphs) with a condensed Helvetica (UI).
• Track out uppercase labels (0.7px to 1.8px).
• Let photography occupy tall section blocks.
• Use subtle hover lift and zoom with ease-out timing.

Don’t

• Don’t add brand colors; color belongs to product imagery.
• Don’t use heavy shadows or large radii on content.
• Don’t bold body copy; reserve 700 for small sub-headings.
• Don’t set long text in uppercase.

8. Responsive Behavior

Over 30 breakpoints from 320px to 1600px, with key steps near 480, 600, 768, 900, 1024, 1200 and 1440. Content widths are capped by named page-width tokens (90 / 120 / 150rem), so very wide screens keep a controlled measure while the sidebar stays at 25rem. Type sizes stay compact (11 to 16px).

9. Agent Prompt Guide

Build a UI that matches Fear of God’s design language.

Use a white canvas and black text, with gray rgb(105, 105, 105) only for secondary headings. Set the main headline and paragraphs in Optima (32px headline, 14px paragraph, weight 400) and all navigation, labels, buttons and body in HelveticaNeueLTPro-Cn: 14px with 0.7px tracking, uppercase links, uppercase buttons with 1.8px tracking, 11px uppercase labels with 1.1px tracking. Use bold 700 only on 14-16px sub-headings. Keep radii at 2px for UI and 50% for round controls. Use a single soft shadow (0 4px 20px rgba(0, 0, 0, 0.15)) for floating panels, a 4px hover lift with 0.25s ease-out, and tall full-bleed imagery blocks (15 / 25 / 35rem). No brand colors; let the product carry the color.

Generated by Sparkbites — extracted from live CSS analysis