--- version: alpha name: "Fenty Beauty" description: "Bold monochromatic design system anchored in stark black-and-white contrast, Brown typeface discipline, and a sharp-cornered geometry that signals inclusive luxury without apology." colors: # Surface / canvas background: "#ffffff" surface: "#f5f5f5" # light gray used for secondary panels and hover states surface-dark: "#000000" # inverted dark canvas for hero and promo moments # Text / ink ink: "#2d2929" # near-black primary body text — extracted from dembrandt palette ink-secondary: "#666666" # secondary labels, metadata, helper text ink-muted: "#8c8c8c" # disabled states, placeholder text on-background: "#2d2929" # Brand accent primary: "#000000" # jet black — the single unambiguous brand accent on-primary: "#ffffff" primary-container: "#e0beb1" # blush nude — CSS --color-accent-01, tinted container # Interaction / states text-hover: "#373737" # link hover — from dembrandt links.hover focus-ring: "#4b3dc4" # CSS --button-secondary-focus-color: accessibility blue focus-tint: "#4b3dc4" # same as focus-ring # Semantic success: "#00af2f" # CSS --color-green warning: "#ffde7b" # CSS --color-warning error: "#bd0100" # CSS --color-danger # Borders border: "#d8d8d8" # 1px solid borders on inputs, cards, dividers border-strong: "#000000" # high-contrast outlines on buttons and active states border-muted: "#efefef" # subtle hairline separators # Nude accent nude-warm: "#e0beb1" # CSS --color-accent-01: blush nude for secondary surfaces nude-deep: "#684537" # CSS --color-accent-04: espresso-brown CTA inverse hover # Shadow tints shadow-soft: "#bfbfbf" # was #00000040 (alpha) — flattened: rgba(0,0,0,0.251) over white ≈ #bfbfbf typography: display-hero: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 0.88 letterSpacing: 0.8px display: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.48px heading-section: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.32px heading-sub: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.24px label-uppercase: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.17 letterSpacing: 0.6px body-large: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.18px body: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.16px button-ui: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "Brown, 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.17 letterSpacing: 0.36px spacing: xs: 4px sm: 8px md: 15px lg: 20px xl: 30px 2xl: 40px 3xl: 60px 4xl: 80px rounded: none: 0px xs: 2px sm: 4px md: 10px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 20px border: 1px solid {colors.primary} button-primary-hover: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 20px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 20px border: 1px solid {colors.primary} button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 20px border: 1px solid {colors.primary} button-secondary-focus: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 20px border: 1px solid {colors.focus-ring} outlineColor: "{colors.focus-ring}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 20px border: 1px solid {colors.border} card-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 20px border: 1px solid {colors.border-strong} input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 15px 20px border: 1px solid {colors.border} input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 15px 20px border: 1px solid {colors.ink} badge: backgroundColor: "{colors.nude-warm}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 10px badge-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 10px nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" border: 1px solid {colors.border} --- # Fenty Beauty Design System ## Overview Fenty Beauty arrives on screen the way Rihanna arrives in a room: in stark black-and-white, completely sure of itself. The canvas is pure white (`{colors.background}`) that flips, when the moment calls for it, to an absolute `{colors.surface-dark}` — a binary contrast system that admits almost no gray compromise. The brand is a feat of reduction: three colors, one typeface, zero radius, and a relentless commitment to the idea that inclusive luxury doesn't need to borrow the vocabulary of traditional prestige beauty. The typographic voice is Brown — a sans-serif with a slightly warm geometric quality, set exclusively in bold (700) for all display and heading work, and in a contained set of lighter weights for body copy. Headlines run at 80px with a tight 0.88 line-height and micro tracking (0.8px), giving them the compressed energy of a campaign billboard rather than a web heading. Button labels drop to 12px in all-caps — a deliberate formal contrast between the power of the display and the brisk utility of calls to action. Every letterform carries the same measured confidence. Shape language is sharp and unambiguous. Buttons are true rectangles (`{rounded.none}`), bordered on all four sides with a 1px solid stroke. There is no pill, no soft radius softening the edge. The 2px rounding on images (`{rounded.xs}`) is the maximum concession to soft — and even that reads as a printing artifact rather than a design statement. Where Glossier's sharpness reads as fashion-editorial minimalism, Fenty's reads as manufactured precision: the sharp edge of a compact mirror, the clean lip of a foundation bottle. **Key Characteristics:** - Brown (self-hosted) at weight 700 for all display and heading — the only typeface, the only voice - Pure black (`{colors.primary}`) and pure white (`{colors.background}`) as the operating palette — binary, unambiguous - Zero border-radius on buttons, cards, and interactive controls — sharp as a product edge - All button labels at 12px (`{typography.button-ui}`) — functional abbreviation against monumental display type - `{colors.nude-warm}` (#e0beb1) and `{colors.nude-deep}` (#684537) as the only warmth — drawn from the skin-tone foundation range - 15px as the dominant spatial unit — not a standard 8px or 16px system, a deliberate quarter-step - Full-bleed photography in hero zones; no gradient scrims — model photography does all the chromatic work - Uppercase labels at `{typography.label-uppercase}` (22px, weight 400, 0.6px tracking) — category headers, tab labels, sale tags - 1px solid borders in `{colors.border}` (#d8d8d8) as the workhorse separator for cards and inputs - Motion is functional and brief: 0.15s on buttons, 0.2s on navigation — no decorative animation - Accessibility focus color `{colors.focus-ring}` (#4b3dc4) breaks the mono palette deliberately — a pragmatic carve-out for keyboard users ## Colors ### Primary - **Fenty Black** (`{colors.primary}`): The brand anchor. Primary CTAs, headings, borders on active controls, filled button backgrounds, body text. Absolute black — no softening to near-black. - **Fenty White** (`{colors.background}`): The default canvas and the fill for secondary (outline) buttons on dark surfaces. Pure white holds the photography and type without competing. - **Near-Black Body** (`{colors.ink}`): The body text color (#2d2929) — a warm almost-black that softens reading without departing visibly from the black brand anchor. ### Brand Warmth - **Nude Blush** (`{colors.nude-warm}`): The single warm accent drawn from the foundation shade range. Used for badge containers, tinted secondary panels, and the occasional decorative surface. Never used as body text. - **Espresso Brown** (`{colors.nude-deep}`): Deep warm brown surfacing as an inverse CTA hover state. Reinforces the skin-tone vocabulary without becoming a full second accent. - **Primary Container** (`{colors.primary-container}`): Same as `{colors.nude-warm}` — the tinted surface for pills, chips, and soft badges. ### Text States - **Secondary Ink** (`{colors.ink-secondary}`): #666666 — metadata, pricing labels, helper text, secondary nav items. - **Muted Ink** (`{colors.ink-muted}`): #8c8c8c — placeholder text, disabled labels. - **Link Default** (`{colors.ink}`): Links default to the near-black ink and shift to `{colors.text-hover}` (#373737) on hover — a subtle darkening rather than a color change. - **Focus Blue** (`{colors.focus-ring}`): #4b3dc4 — the only non-monochrome interactive color. Appears exclusively for keyboard focus outlines. ### Borders - **Border Default** (`{colors.border}`): #d8d8d8 — 1px solid on cards, inputs, and dividers. The workhorse separator. - **Border Strong** (`{colors.border-strong}`): #000000 — 1px solid on primary buttons (white variant), focus-active inputs, and selected states. - **Border Hairline** (`{colors.border-muted}`): #efefef — light-touch bottom borders on accordions and stacked list items. ### Semantic - **Success** (`{colors.success}`): #00af2f — confirmation states, stock indicators. - **Warning** (`{colors.warning}`): #ffde7b — alert messaging. - **Error / Sale** (`{colors.error}`): #bd0100 — error messaging, out-of-stock, compare-at sale price strikethrough. ## Typography ### Font Family - **Primary**: `Brown` (self-hosted as Brown-Regular.woff2, Brown-Bold.woff2, Brown-Light.woff2), fallback stack: `'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif` - **No secondary typeface**: Every typographic role — display, body, button, caption, nav — is Brown. Weight is the only variable. - **No OpenType alternates detected**: Standard ligatures and kerning only. *Note: Brown is a commercial typeface from Lineto. Libre Franklin (Google Fonts) is the closest web-safe substitute for external implementations; DM Sans or Nunito as secondary fallbacks.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | Campaign-scale headlines, hero moments — 80px / 700 / lh 0.88 | | `display` | Section feature heads, collection titles — 48px / 700 / lh 1.0 | | `heading-section` | H2 equivalents, category labels at large scale — 32px / 700 | | `heading-sub` | H3 equivalents, product name display — 24px / 700 | | `label-uppercase` | Tab labels, sort/filter headers, promo stamps — 22px / 400 / uppercase / 0.6px | | `body-large` | Lead copy, product feature paragraphs — 18px / 600 | | `body` | Standard product descriptions, nav links, footer copy — 16px / 400 | | `nav-link` | Navigation items, section jump links — 16px / 700 / uppercase | | `button-ui` | All CTA labels — 12px / 400 | | `caption` | Ingredient lists, ratings labels, legal micro-copy — 12px / 400 / 0.36px | ### Principles - **Bold is the default for display**: Every heading from 24px up uses weight 700 — compressed, campaign-caliber energy. - **12px buttons are deliberate**: The small button label creates tension with the massive display type. CTAs feel terse and functional; headings feel monumental. That contrast is the system. - **Uppercase is reserved for labels and stamps**: `{typography.label-uppercase}` and `{typography.nav-link}` mark category-level information. Body and button text is sentence case. - **Positive tracking on display**: 0.48–0.8px tracking at large sizes gives the bold display text visual air without losing its compressed quality. - **Weight 400 for body and button-ui**: The lighter weight at small sizes prevents the Brown Bold from overwhelming reading-scale text. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 15px (with 4px and 8px as compact sub-units). The 15px base is the most telling number in the Fenty system — a deliberate deviation from the standard 8px grid. It creates a slightly tighter, more editorial rhythm: product grids feel dense, button padding feels proportional to a 12px label, and section spacing scales to 30–80px without the cushioned generosity of a 16px-based system. ### Grid & Container - Max content width: approximately 1440px at desktop - Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile - Hero: full-bleed photography with overlaid type, no container constraint - Nav: sticky white bar, centered wordmark, persistent cart and search icons - Key detected breakpoints: 460px (mobile compact), 750px (tablet), 768px (tablet/desktop pivot) ### Whitespace Philosophy - **Dense product zones**: 15–20px gutters inside product grids pack items efficiently — this is a commercial catalog, not an editorial magazine. - **Generous section breaks**: 40–80px between major sections creates breathing room without losing commercial energy. - **15px rhythm dominates**: Internal padding on buttons (15px 20px) mirrors the spacing base — the padding feels integral, not arbitrary. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Default page canvas, product photography, body text | | Hairline (Level 1) | `1px solid {colors.border}` (#d8d8d8) | Cards, inputs, dividers, accordion separators | | Surface Tint (Level 2) | `{colors.surface}` (#f5f5f5) fill | Hover states on cards, secondary panel backgrounds | | Soft Lift (Level 3) | `rgba(0,0,0,0.18) 0px 0px 6px 0px` | Sticky nav drop, cart drawer separation | | Dialog (Level 4) | `rgba(0,0,0,0.25) 0px 22px 44px 0px` | Modals, quick-shop overlays, drawer chrome | | Focus Ring | `{colors.focus-ring}` 2px outline offset | Keyboard focus on all interactive controls | **Shadow Philosophy**: Fenty's elevation is nearly flat. The system relies on 1px borders to define zones — not shadows. The two shadow values detected (6px ambient on nav, 22px/44px on dialogs) are functional infrastructure, not brand expression. The photography already carries all the three-dimensional weight; the chrome around it stays graphic and flat. Depth is used sparingly, precisely, and only where the UI needs structural signaling. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Primary visual language — buttons, cards, modals, badges, all interactive controls | | `xs` | 2px | Images and media thumbnails — barely-rounded, effectively flat | | `sm` | 4px | Small utility elements and minor UI components | | `md` | 10px | Dialogs and larger overlay containers where structural roundness helps | | `pill` | 9999px | Circular icon buttons (carousel controls, mute/play), color swatch circles | The system is functionally sharp. Buttons are true rectangles. Cards have no radius. The `{rounded.xs}` on imagery is a browser rendering artifact more than a design intent — at 2px, it barely registers. The only deliberate softness is in the circular media controls and swatch elements, where `{rounded.pill}` signals "interactive roundel," not brand aesthetic. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Solid black fill (`{colors.primary}`), white type, white 1px border. The main CTA: "Quick Shop," "Add to Bag." Sharp rectangle, 15px 20px padding, 12px Brown 400. Hover darkens but holds black on black. - **`button-secondary`** — White fill, black type, 1px black border. "SHOP NOW" style. Outlined rectangle, identical padding to primary. On dark surfaces the inverse inverts cleanly. - **`button-secondary-hover`** — Surface gray (`{colors.surface}`) fill on hover — a subtle press feedback without changing the border geometry. - **`button-secondary-focus`** — Keyboard focus breaks to `{colors.focus-ring}` (#4b3dc4) outline — the only moment purple enters the mono system. ### Cards Product cards are flat rectangles (`{rounded.none}`, no shadow) with a 1px `{colors.border}` edge. Image fills the top flush to the card edge; product name and price sit below in 16px Brown. Quick Shop button overlays on hover. No interior padding on the image zone — flush is the rule. ### Inputs - Default border: `1px solid {colors.border}` (#d8d8d8), `{rounded.none}`, 15px 20px padding - Focus: border sharpens to `1px solid {colors.ink}` (near-black), no ring on non-keyboard focus - Placeholder: `{colors.ink-muted}` (#8c8c8c) - Keyboard focus: `{colors.focus-ring}` blue outline, 2px offset ### Badges / Tags - **Dark badge** (`{components.badge-dark}`): Black fill, white text, 0-radius, 4px 10px padding — product status, "NEW," limited edition markers. - **Nude badge** (`{components.badge}`): Blush `{colors.nude-warm}` fill, dark text — shade range indicators, soft promotional labels. ### Navigation Sticky white bar at `{colors.background}`, 1px `{colors.border}` bottom separator. Logo is the "FENTY BEAUTY" wordmark (SVG, 300×17px) centered in the header zone. Nav links in Brown 700 uppercase. Hamburger collapses the link bar on mobile; cart, search, and account icons in minimal SVG remain persistent. ## Do's and Don'ts ### Do - Use `{colors.primary}` (pure black) for every primary CTA — never soften to near-black or charcoal - Set all display and heading type in Brown weight 700 — compressed, confident, campaign-scale - Keep button radius at `{rounded.none}` — sharp edges are the brand signature - Use `{colors.nude-warm}` (#e0beb1) sparingly as a secondary tinted surface — one warm moment per zone maximum - Apply `{typography.label-uppercase}` for category headers, tab labels, and promo stamps — uppercase 22px is the categorization signal - Default to 15px as the base padding unit — it governs button padding, grid gutters, and component internal spacing - Allow full-bleed photography to carry chromatic and emotional weight — the chrome around it stays monochromatic - Reserve `{colors.focus-ring}` (#4b3dc4) exclusively for keyboard accessibility — it's a functional carve-out, not a brand accent - Use `1px solid {colors.border}` as the primary separator — hairlines are the system's only "decoration" - Let `{typography.button-ui}` stay at 12px — the small label against massive display type is the intentional contrast ### Don't - Don't add border-radius to buttons, cards, or modals — even 4px reads as "not Fenty" - Don't introduce a second typeface — Brown handles every role; no serifs, no display novelty fonts - Don't use `{colors.nude-warm}` as text color or button fill — it lives exclusively as a surface tint - Don't expand the palette with blues, purples, or pastels — `{colors.focus-ring}` is a functional exception, not permission to add brand color - Don't use the accessibility focus blue (`{colors.focus-ring}`) for decorative hover states or non-interactive elements - Don't apply gradients or atmospheric shadows — the brand is graphic and flat; depth lives in photography - Don't deviate from 15px 20px button padding — the proportion is calibrated to the 12px button-ui type - Don't uppercase body or button text beyond the defined uppercase tokens — all-caps shouting is not Fenty - Don't soft-round images beyond `{rounded.xs}` (2px) — anything more reads as non-system - Don't replace the full-bleed photography strategy with illustrations or icons-as-decoration --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <460px | Single-column, wordmark shrinks to 60%, nav collapses to hamburger | | Mobile | 460–750px | Single-column product grid, hero photography portrait-cropped | | Tablet | 750–768px | Transition zone — 2-column grid begins, nav links partially visible | | Desktop | 768–1440px | 4-column product grid, full nav bar, sticky header visible | | Large Desktop | >1440px | Max-width container centers; hero photography expands to fill | ### Touch Targets - Primary CTAs: minimum 44px tap height (15px padding + 12px type + 15px padding = 42px — add 1px border = meets threshold) - Nav icons (cart, search, account): 44×44px minimum hit area enforced via Tailwind arbitrary values - Product cards: full card surface is tappable, links to product detail - Color swatches: 44×44px circular hit target, `{rounded.pill}` visual form ### Collapsing Strategy - **Nav**: Full horizontal link bar → hamburger drawer on mobile. Wordmark stays centered. Cart and search remain visible at all breakpoints. - **Product grid**: 4-col → 2-col (at 750px) → 1-col (below 460px). Gutters maintain 15px at every step. - **Hero**: Full-bleed photography maintains; copy text scales from 80px display to 32–48px on mobile. - **Promo bar**: Full-width at all breakpoints; text truncates or wraps before removing. - **Spacing**: xl (30px) section gaps compress to md (15px) on mobile — the rhythm tightens but the base unit holds. ### Image Behavior - Product photography maintains aspect ratio (typically 1:1 square or 4:5 portrait for product cards) - Hero images art-directed for mobile: portrait crops served via Shopify `crop=center` transforms - No lazy loading placeholders — immediate load strategy for above-the-fold product imagery - Images carry `{rounded.xs}` (2px) at all viewport sizes — not viewport-dependent --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#ffffff) - Primary text: `{colors.ink}` (#2d2929) - Secondary text: `{colors.ink-secondary}` (#666666) - Brand accent / CTA: `{colors.primary}` (#000000) - Warm surface accent: `{colors.nude-warm}` (#e0beb1) - Border: `{colors.border}` (#d8d8d8) - Error / sale: `{colors.error}` (#bd0100) - Focus (accessibility only): `{colors.focus-ring}` (#4b3dc4) - Default radius: `{rounded.none}` (0px) - Default shadow: none (flat system) ### Example Component Prompts - "Create a Fenty Beauty product card on `{colors.background}` (#ffffff) with no border-radius, `1px solid {colors.border}` (#d8d8d8) border, and no shadow. Product photo fills the top zone flush to card edges in 1:1 aspect ratio. Below: product name in Brown weight 700 16px `{colors.ink}`, price in Brown weight 400 14px `{colors.ink-secondary}`. CTA button on hover: black fill, white text, 15px 20px padding, 0px radius, Brown 12px weight 400 label 'Quick Shop.'" - "Build a primary CTA button using `{components.button-primary}`: background `{colors.primary}` (#000000), text `{colors.on-primary}` (#ffffff), padding 15px 20px, border `1px solid #000000`, border-radius 0px, font Brown 12px weight 400 uppercase. Hover state maintains black fill. Focus state: `2px solid {colors.focus-ring}` (#4b3dc4) outline, 2px offset." - "Design a Fenty Beauty navigation bar: `{colors.background}` background, `1px solid {colors.border}` bottom border, sticky. Center: 'FENTY BEAUTY' wordmark SVG at 300px wide. Left: nav links in Brown 700 16px uppercase `{colors.ink}`. Right: search, wishlist, cart SVG icons at 24px. No border-radius on any element." - "Create a collection header with `{typography.display-hero}`: Brown weight 700, 80px, line-height 0.88, letter-spacing 0.8px, color `{colors.primary}` (#000000) on `{colors.background}` white canvas. Below the headline: uppercase category tab bar using `{typography.label-uppercase}` (22px / weight 400 / 0.6px tracking), `{colors.border}` bottom border on the tab row, active tab underlined with `2px solid {colors.primary}`." - "Style a Fenty Beauty product badge: background `{colors.nude-warm}` (#e0beb1), text `{colors.ink}` (#2d2929), font Brown 12px weight 400 uppercase, padding 4px 10px, border-radius 0px. Use for shade-range indicators and secondary promotional callouts." - "Build a full-bleed hero: viewport-width photography, no scrim overlay. Overlay in the lower-left: headline in Brown 700 80px white (`{colors.on-primary}`) with line-height 0.88, letter-spacing 0.8px. Directly below: outline button — `{colors.background}` fill, `{colors.on-primary}` (#ffffff) text, `1px solid #ffffff` border, 15px 20px padding, 0px radius, Brown 12px weight 400 label." ### Iteration Guide 1. Start with pure white (`{colors.background}`) canvas — Fenty never opens on cream or off-white. 2. Default to `{colors.primary}` (pure black) for every interactive element, heading, and CTA. Add warmth only via `{colors.nude-warm}` as a surface accent, never as text. 3. Set all headings in Brown weight 700. Scale from `{typography.display-hero}` (80px) down through the token stack. Never set display text in weight 400 or 300. 4. Keep every border-radius at `{rounded.none}` — buttons, cards, inputs, modals. The only exceptions are circular media controls (`{rounded.pill}`) and image corners (`{rounded.xs}` 2px). 5. Button padding is 15px 20px, non-negotiable. Button label is 12px Brown weight 400 — small, functional, terse. 6. No shadows on the primary UI. Elevation is reserved for nav sticky separation (6px ambient) and dialog overlays (22px/44px). Use `{colors.border}` hairlines for zone separation everywhere else. 7. Photography is the color. The chrome around it is monochromatic. Never interrupt a product photograph with overlays, gradients, or color blocks. 8. Uppercase only at `{typography.label-uppercase}` (22px, 0.6px tracking) and `{typography.nav-link}` (16px, 0.16px tracking) — category-level signals only. --- ## 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 Fenty Beauty. Brand names and trademarks belong to their respective owners.