--- version: alpha name: "Todd Snyder" description: "New York menswear brand balancing tailored refinement with downtown ease — Didot serif headlines on a white canvas, Trade Gothic condensed for navigation and labels, Gotham for legible body text, and a near-black monochrome palette that lets the photography carry all warmth" colors: # Surface / canvas background: "#ffffff" # clean white page — the camera-ready canvas surface: "#f5f5f5" # light secondary panels, input backgrounds, modal backgrounds surface-subtle: "#ededeb" # was rgba(245,245,245,0.9) — Google format requires hex; hover tints, announcement bar # Ink / text ink: "#242424" # near-black — primary headlines, navigation, body text ink-secondary: "#666666" # supporting copy, metadata, icon strokes, muted labels ink-muted: "#999999" # placeholder text, captions, disabled states /* estimated */ on-dark: "#ffffff" # text on dark surfaces # Brand — Todd Snyder uses charcoal as its sole action color primary: "#242424" # CTA fill, active states, button-primary background on-primary: "#ffffff" # white label on dark button # Borders border: "#ededed" # was rgb(237,237,237) — hairline dividers, input outlines, panel edges border-strong: "#242424" # bottom-only structural rules on nav and form fields # Focus & interaction focus-ring: "#242424" # keyboard outline on interactive elements # Shadow tints (opaque approximations) shadow-soft: "#000000" # was rgba(0,0,0,0.05) — Google format requires hex; ambient dropdown shadow shadow-medium: "#000000" # was rgba(0,0,0,0.2) — Google format requires hex; modal overlay shadow typography: display-hero: fontFamily: "didot, 'Bodoni MT', 'Book Antiqua', Palatino, serif" fontSize: 72px fontWeight: 500 lineHeight: 0.9 letterSpacing: 0px display: fontFamily: "didot, 'Bodoni MT', 'Book Antiqua', Palatino, serif" fontSize: 64px fontWeight: 400 lineHeight: 0.97 letterSpacing: -2px heading-section: fontFamily: "didot, 'Bodoni MT', 'Book Antiqua', Palatino, serif" fontSize: 45px fontWeight: 500 lineHeight: 1.44 letterSpacing: 0px heading-sub: fontFamily: "TradeGothicLTPro-BdCn20, 'TradeGothicLT-Bold', 'Arial Narrow', Arial, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-large: fontFamily: "Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0px body: fontFamily: "Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px nav-link: fontFamily: "TradeGothicLTPro-BdCn20, 'TradeGothicLT-Bold', 'Arial Narrow', Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.49 letterSpacing: 0.35px button-ui: fontFamily: "TradeGothicLTPro-BdCn20, 'TradeGothicLT-Bold', 'Arial Narrow', Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px label-upper: fontFamily: "TradeGothicLT-Bold, 'Arial Narrow', Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 1px caption: fontFamily: "TradeGothicLT-Bold, 'Arial Narrow', Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.6px spacing: xs: 5px sm: 10px md: 15px lg: 20px xl: 30px 2xl: 40px 3xl: 60px rounded: none: 0px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 11px 24px borderColor: "{colors.primary}" button-primary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.none}" padding: 11px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 11px 24px borderColor: "{colors.border-strong}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 11px 24px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 7px 15px button-ghost-hover: textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 7px 15px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 12px 0px card-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 12px 0px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 10px 12px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 12px 15px nav-item: textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px nav-item-hover: textColor: "{colors.ink-secondary}" padding: 0px badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label-upper}" rounded: "{rounded.pill}" padding: 4px 10px badge-sale: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-upper}" rounded: "{rounded.none}" padding: 4px 8px --- # Todd Snyder Design System ## Overview Todd Snyder's website is the digital extension of a store that feels simultaneously like a very good tailor's shop and a very carefully curated men's boutique in lower Manhattan. The page opens on pure white (`{colors.background}`) — the same white as a crisply pressed shirt, not the slightly warm or tinted white of luxury adjacent brands — and the typography announces immediately where this stands. Didot (`{typography.display-hero}`) arrives at 72px for the hero, its high-contrast thick-and-thin strokes carrying the old-world authority of a magazine front page or a menswear catalog from the 1970s. Beneath it, Trade Gothic Condensed (`{typography.nav-link}`, `{typography.button-ui}`) handles the entire navigation and action layer: the condensed sans-serif that streetwear labels love for their economy and visual punch, here deployed with a restraint that keeps it feeling uptown. The third voice is Gotham (`{typography.body}`) — round, clear, American, ideal for reading product descriptions and editorial copy without drawing attention to itself. Color is nearly absent in the strictest sense. The entire palette resolves to `{colors.ink}` charcoal (`#242424`) on `{colors.background}` white, with `{colors.ink-secondary}` mid-grey as a supporting note for icons and secondary labels. The CTA is charcoal. The navigation is charcoal. The borders are either a near-invisible light grey (`{colors.border}`) for input outlines and hairlines, or the same `{colors.border-strong}` charcoal as the ink for structural bottom-rules. There is no brand color in the chromatic sense — no signature green or burgundy or navy. Todd Snyder's identity is communicated entirely through the photography: warm lifestyle imagery of men in well-cut clothes against New York locations, which gives the page a richness that the typographic chrome is designed to support, not compete with. The motion vocabulary is lean and precise. Links transition at 0.1s linear, buttons at 0.2s. A 0.3s fadeIn is used for nav overlays. The fastest meaningful interaction — a color change on hover — fires in a tenth of a second. This is not the slow, lux hover of a prestige jewelry site; it is the quick, confident response of a well-made interface. **Key Characteristics:** - Didot as the editorial serif — high-contrast transitional cuts at display scale (`{typography.display-hero}`, `{typography.display}`), evoking classic American fashion publishing - Trade Gothic Condensed Bold (`{typography.nav-link}`, `{typography.button-ui}`) for all navigation and CTA labels — uppercase, tightly tracked, economical in width - Gotham (`{typography.body}`) for all body and secondary UI text — clean humanist geometric, the workhorse of American graphic design - `{colors.ink}` near-black (`#242424`) as the sole accent color — no chromatic brand hue, authority expressed through contrast - Zero border-radius on all buttons, cards, inputs, and product elements — square corners signal tailored precision, not consumer-app softness - Bottom-only `1px solid {colors.border-strong}` structural rules on navigation and form fields — the convention of a printed sartorial catalog - White canvas with generous vertical whitespace between sections — the luxury retail habit of letting the product breathe - Product photography occupying full-width hero positions, with lifestyle imagery mixing natural backgrounds, New York settings, and studio white - 0.1s link hover transition — immediate, taut feedback that reads as confident rather than animated - Uniform spacing base of 5px, scaling through 10–60px for a clean catalog-layout rhythm ## Colors ### Canvas - **Page White** (`{colors.background}`): The primary surface. Pure white, not cream or warm-tinted. The neutral ground that lets photography read true. - **Light Panel** (`{colors.surface}`): Secondary background for modals, announcement bars, and input contexts. A barely-there step above white (`#f5f5f5`). - **Subtle Tint** (`{colors.surface-subtle}`): Hover fills and announcement-bar backgrounds at the edge of visibility (`#ededeb`). ### Ink - **Near-Black** (`{colors.ink}`): Primary text, navigation, headlines, and the sole CTA color. `#242424` — the exact shade of good offset ink on coated stock. - **Mid-Grey** (`{colors.ink-secondary}`): Supporting copy, icon strokes, secondary metadata, and bag-count indicators. `#666666`. - **Muted** (`{colors.ink-muted}`): Placeholder text, disabled states, helper copy. Estimated at `#999999` — the next legible step below mid-grey. - **On Dark** (`{colors.on-dark}`): White text for inverted contexts. ### Interactive - **Primary CTA** (`{colors.primary}`): The charcoal fill on all primary actions. Subscribe, Add to Cart, Checkout. Same value as `{colors.ink}`. - **On Primary** (`{colors.on-primary}`): White label on the dark button. - **Focus Ring** (`{colors.focus-ring}`): Keyboard outline — matching `{colors.primary}` for strict contrast. ### Borders & Structure - **Hairline** (`{colors.border}`): Input outlines, panel separators, light dividers in filter drawers. `#ededed` — nearly invisible. - **Ink Rule** (`{colors.border-strong}`): Bottom-only structural rule on nav, inputs, and form rows. `1px solid #242424`. ## Typography ### Font Family - **Editorial / Display**: `didot`, with fallbacks: `'Bodoni MT'`, `'Book Antiqua'`, `Palatino`, `serif`. Self-hosted; closest Google Font: GFS Didot or EB Garamond (high-contrast serif). - **Navigation / UI Labels**: `TradeGothicLTPro-BdCn20` (Trade Gothic condensed variant), with fallbacks: `'TradeGothicLT-Bold'`, `'Arial Narrow'`, `Arial`, `sans-serif`. Self-hosted. - **Body / Product Text**: `Gotham`, with fallbacks: `'Helvetica Neue'`, `Helvetica`, `Arial`, `sans-serif`. Self-hosted; closest Google Font: Montserrat (geometric humanist). - No variable fonts detected. All fonts are self-hosted (.woff2). - **OpenType**: No explicit feature-settings detected. Didot renders with its natural high-contrast ink traps. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Hero campaign headlines — Didot 72px, weight 500, tight 0.9 line-height | | `display` | Secondary campaign heads, editorial feature titles — Didot 64px, weight 400, -2px tracking | | `heading-section` | Section titles, collection names — Didot 45px, weight 500 | | `heading-sub` | Sub-collection labels, uppercase product category heads — Trade Gothic 22px uppercase | | `body-large` | Editorial body paragraphs, brand story copy — Gotham 18px at 2.0 line-height | | `body` | Product descriptions, filter labels, form help text — Gotham 14px | | `nav-link` | Global navigation items, footer links — Trade Gothic Condensed 14px, 0.35px tracking | | `button-ui` | CTA labels (Subscribe, Add to Cart) — Trade Gothic Condensed 18px uppercase | | `label-upper` | Tags, size selectors, small category stamps — Trade Gothic Bold 12px, 1px tracking | | `caption` | Price lines, product metadata, image credits — Trade Gothic Bold 12px, 0.6px tracking | ### Principles - **Didot is editorial-only**: Its luxury serif authority is reserved for campaign and section heads. It never appears in navigation chrome, product UI, or CTA labels. - **Trade Gothic Condensed handles all action**: The compressed sans-serif runs navigation, buttons, and all-caps labels — its economy reads as decisiveness in small sizes, drama at display. - **Gotham as the reading voice**: Body, descriptions, and form text all run in Gotham at weight 400. It is never used in navigation or button labels. - **Uppercase transforms for labels**: Trade Gothic at small sizes (`{typography.label-upper}`, `{typography.caption}`) runs uppercase with positive tracking — the convention of a classic sartorial product tag. - **Line-height as editorial pacing**: Display Didot compresses to 0.9 for visual density; body Gotham opens to 1.6–2.0 for comfortable reading in longer descriptions. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 5px. The spacing vocabulary is catalog-precise. At the small end (5–15px), it governs product label padding, navigation item gutters, and form field insets. The mid range (20–30px) handles card content and section sub-heads. The generous end (40–60px) provides the breathing room between campaign image blocks and major section transitions — the blank air that signals quality retail. ### Grid & Container - Max content width: approximately 1400px, fluid within viewport - Navigation: full-width single bar, logo centered ("TODD SNYDER / NEW YORK"), Trade Gothic nav items spread horizontally - Product grid: 4-column on desktop, collapsing to 2 on tablet and 1 on mobile - Hero campaigns: full-bleed, full viewport width, no container constraint - Announcement bar at top: full width, small Gotham text, `{colors.surface}` or `{colors.surface-subtle}` background ### Whitespace Philosophy - **Campaigns breathe**: Hero images span the full container width; the text overlay or sub-title sits below, never competing. - **Product chrome stays compact**: Product name, price, and color-swatch metadata run at 10–15px spacing, matching catalog-page density. - **Section transitions are earned**: 40–60px vertical gaps between campaign sections create the page-turn rhythm of a printed lookbook. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | All product cards, campaign images, standard layout | | Subtle (Level 1) | `{colors.shadow-soft}` 0px 0px 1px 0px, near-invisible | Dropdown menus, search overlays | | Modal (Level 2) | `{colors.shadow-medium}` 0px 0px 25px 0px | Cart drawer, modal panels | | Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: The surface is essentially flat. Todd Snyder's design language has no use for lifted card surfaces or decorative shadows — product images float on white, their weight communicated through photography rather than CSS. Where a modal or cart drawer must layer over content, a soft ambient shadow establishes depth without dramatizing it. The focus ring is the only prescribed elevation-adjacent treatment in the interactive layer. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | All buttons, inputs, product cards, image containers, badges-sale — the entire brand system | | `pill` | 9999px | Filter chips, soft badge variants, newsletter confirmation tags | The system is binary: sharp corners for everything with structural identity, pill only for the occasional filter or tag element. The `50%` radius detected in the raw data belongs to carousel page dots and avatar circles — not a design language applied at component scale. Todd Snyder's interface is square-cornered: the precision of a tailored lapel, not the rounded approachability of a consumer app. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button variants - **`button-primary`** — Solid `{colors.primary}` charcoal fill with `{colors.on-primary}` white label. `{rounded.none}` corners, 11px 24px padding, Trade Gothic Condensed 18px uppercase. The standard Subscribe, Add to Cart, and checkout action — direct and unambiguous. - **`button-secondary`** — White background with `{colors.border-strong}` 1px solid frame. Used for alternative actions and ghost-outlined variants. Same square geometry, lighter visual weight. - **`button-ghost`** — Bare `{colors.background}` background, no border, `{colors.ink-secondary}` text in Trade Gothic. Used for navigation-adjacent links that function as buttons: "View All," "Shop Collection." Hover sharpens text to `{colors.ink}` in 0.1s. ### Cards Product cards sit on `{colors.background}` white with no shadow, no border-radius, and no card fill. The photograph and product details render on the page ground directly. Bottom padding (`12px 0px`) creates the row-gap rhythm of a catalog. Hover on a product image produces a subtle scale or secondary-image swap — not a surface color change. ### Inputs Email and search inputs use `{colors.border}` 1px all-around outline in default state, with `{colors.background}` fill and Gotham body text. On focus, the border tightens to `{colors.focus-ring}`. The newsletter modal input in the screenshot uses a soft `{colors.surface}` background variant — same no-radius, flat treatment. No border-radius at any state. ### Navigation Single horizontal bar. "TODD SNYDER / NEW YORK" wordmark centered in the bar; Trade Gothic Condensed nav items (`{typography.nav-link}`) at 14px spread horizontally left and right. Utility actions (Wishlist, Account, Cart) in smaller Gotham at the far right. Bottom of the bar sits at standard page flow — no sticky shadow until scroll. No mega-menu chrome: hover reveals a dropdown in the same Trade Gothic register, running at `{typography.nav-link}` size. ### Badges / Tags Sale and category tags: Trade Gothic Bold 12px, `{rounded.none}` for sale stamps on charcoal fill (`{components.badge-sale}`), `{rounded.pill}` for softer category filter chips on `{colors.surface}` (`{components.badge}`). Size selectors are square — matching the overall corner philosophy. ## Do's and Don'ts ### Do - Use `{typography.display-hero}` and `{typography.display}` (Didot) only for campaign heroes and collection section heads — its editorial authority is earned through scarcity. - Set all Trade Gothic labels at uppercase with positive letter-spacing (0.35–1px) — the open-tracked uppercase is definitional to the catalog register at this brand. - Keep all corners at `{rounded.none}` for buttons, inputs, and cards. Square corners signal tailored precision. - Use bottom-only `1px solid {colors.border-strong}` for structural dividers on navigation and form fields — never a full box-border on those elements. - Let campaign photography occupy the full container width with no surrounding margin at any breakpoint. - Maintain Gotham at weight 400 for all body and UI descriptive text — hierarchy comes from size and typeface switching, not weight change. - Keep `{colors.ink}` (`#242424`) as the sole action color. Never introduce a chromatic accent unless a sale or promotional context demands it. ### Don't - Don't apply border-radius to buttons, product cards, or input fields — any rounding reads as a consumer app, not a menswear brand. - Don't use Didot for body text, navigation labels, or CTA copy — the serif is editorial-only; misuse dilutes its authority. - Don't introduce a chromatic brand accent for primary CTAs — the charcoal-on-white system is intentional. A colored button would break the monochrome discipline. - Don't add box-shadow to product cards or layout containers — the surface is flat; CSS elevation competes with the photographic depth. - Don't use Gotham for navigation items or button labels — Trade Gothic Condensed is the action voice. Mixing the two in UI chrome creates category confusion. - Don't track Didot display text positively — the face needs negative or zero tracking at large display sizes to hold its editorial posture. - Don't compress the 40–60px section gaps on desktop — the whitespace is the luxury signal; reducing it reads as discount retail. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Small Mobile | ≤480px | Single-column product grid, hero fills viewport height, nav collapses to hamburger | | Mobile | 481–767px | Single column, compact product labels, stacked navigation | | Large Mobile | 768–1024px | 2-column product grid, navigation begins to expand | | Tablet | 1025–1260px | 2–3 column product grid, navigation shows key items | | Desktop | 1261–1400px | Full navigation bar, 4-column product grid, editorial sections at full expression | | Large Desktop | >1400px | Max content width reached, generous section margins | ### Touch Targets - Navigation links: 44px effective touch height via surrounding padding - Add to cart / Subscribe buttons: 11px vertical padding with Trade Gothic 18px text — confirm minimum 44px height on mobile - Size selector chips: square pads at adequate tap size; minimum 44×44px on touch - Full-card tap targets on product tiles — the image and label block is the link ### Collapsing Strategy - **Navigation**: Full Trade Gothic bar collapses to hamburger + logo at ≤1024px; hamburger opens a full-height overlay with the same typographic register - **Campaign hero**: Full-bleed at all breakpoints; aspect ratio adjusts via object-fit cover on mobile - **Product grid**: 4 columns → 2 columns (tablet) → 1 column (mobile) - **Typography**: Didot display scales from 72px to approximately 36–42px on mobile; Trade Gothic and Gotham UI sizes remain stable across breakpoints - **Spacing**: 40–60px section gaps compress to 24–30px on mobile; 10–15px base unit maintained throughout ### Image Behavior - Campaign photos: 100vw, no border-radius at any breakpoint, object-fit cover for portrait crops on mobile - Product photography: fills grid cell completely, no shadow, no radius, no card chrome - Hover: secondary image swap or CSS scale (approximately 1.03–1.05×) on product images — no surface color change --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Border (hairline): `{colors.border}` - Border (structural): `{colors.border-strong}` - CTA fill: `{colors.primary}` - CTA label: `{colors.on-primary}` - Panel / modal background: `{colors.surface}` - Focus ring: `{colors.focus-ring}` ### Example Component Prompts - "Build a Todd Snyder product card: white background (`{colors.background}`), full-bleed square product image with `{rounded.none}` corners, product name in `{typography.caption}` (Trade Gothic Bold 12px uppercase, `{colors.ink}`, 0.6px tracking), price below in the same token, no card border, no shadow. On image hover: CSS scale(1.04) transform, 0.1s linear. Card padding: 12px bottom only." - "Build a Todd Snyder navigation bar: single horizontal row, `{colors.background}` white background, `1px solid {colors.border-strong}` bottom edge. 'TODD SNYDER / NEW YORK' wordmark centered. Nav items in `{typography.nav-link}` (Trade Gothic Condensed 14px, uppercase, 0.35px tracking, `{colors.ink}`). Hover shifts nav item color to `{colors.ink-secondary}`, 0.1s linear. Utility links (Wishlist, Account, Cart) at far right in `{typography.caption}`." - "Build a Todd Snyder primary CTA button: `{colors.primary}` charcoal fill, `{colors.on-primary}` white label in `{typography.button-ui}` (Trade Gothic Condensed 18px uppercase), `{rounded.none}` corners, 11px 24px padding, `2px solid {colors.primary}` border. Hover: `{colors.ink}` fill darkens, 0.2s linear. Full width on mobile." - "Build a Todd Snyder newsletter modal: white `{colors.surface}` background panel, `{rounded.none}` corners. Didot headline in `{typography.heading-section}` (45px, weight 500, `{colors.ink}`). Gotham body copy in `{typography.body-large}` (18px, 2.0 line-height). Email input with `{colors.border}` 1px outline, `{typography.body}` (Gotham 14px), `{rounded.none}`. Below it: full-width `{components.button-primary}` labeled 'SUBSCRIBE'. Small `{typography.caption}` disclaimer below button." - "Build a Todd Snyder sale badge: `{colors.primary}` charcoal fill, `{colors.on-primary}` white text in `{typography.label-upper}` (Trade Gothic Bold 12px uppercase, 1px tracking), `{rounded.none}` corners, 4px 8px padding. Position as absolute top-left overlay on product image. No shadow." - "Build a Todd Snyder campaign section: full-bleed photograph at 100vw × 70vh, object-fit cover, `{rounded.none}`. Below the image: centered `{typography.heading-section}` (Didot 45px, weight 500, `{colors.ink}`, line-height 1.44) for the collection name. Below that: `{components.button-primary}` CTA. Section vertical padding: 40px top and bottom." ### Iteration Guide 1. Start with `{colors.background}` white and set `{typography.body}` (Gotham 14px, `{colors.ink}`) as the default reading text — the foundation is a neutral white page with near-black ink. 2. Reserve Didot (`{typography.display-hero}`, `{typography.display}`) for one editorial headline per section — it derives authority from scarcity and must never appear in navigation or product UI. 3. Use Trade Gothic Condensed (`{typography.nav-link}`, `{typography.button-ui}`) for all navigation items, button labels, and uppercase category tags — never Gotham in that role. 4. Apply `{rounded.none}` to every interactive element — buttons, inputs, cards, image containers. The only exception is filter chip badges (`{rounded.pill}`). 5. Use `1px solid {colors.border-strong}` (bottom-only) on navigation and structural form field edges; use `{colors.border}` for full-outline input states and light panel dividers. 6. Keep `{colors.ink}` as the sole CTA color — no chromatic accent. The charcoal-on-white language is the brand identity. 7. Let photography be the hero — avoid competing typographic overlays or color fills on top of campaign images. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Todd Snyder. Brand names and trademarks belong to their respective owners.