Butter Highlight
#f1f29fYellow outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
Faire ES
faire.com
Website preview
The design language
Faire reads like a printed wholesale catalog digitized — warm cream paper (#fbf8f6) as the canvas, a whisper-thin geometric sans (Graphik 100) for body and a high-contrast serif (Nantes) for editorial headlines, almost zero chromatic noise, and one pale buttery yellow (#f1f29f) used as a decorative underline accent rather than a functional call-to-action. The whole interface is achromatic: the brand 'Sign up to buy' button is matte black, the secondary 'Sign in' is ghost, category nav pills use a generous 40px radius, and the 4px button radius keeps control elements grounded and rectangular against the otherwise pill-shaped navigation. Imagery carries all the warmth — full-bleed lifestyle photography of boutiques, shelves, and product stills — while the UI stays quiet, editorial, and whitespace-driven, letting merchants' products feel curated rather than marketed.
Color palette
accent
neutral
Cream Paper
#fbf8f6Page canvas, hero backgrounds, warm base layer beneath white cards
Pure White
#ffffffCard surfaces, search field background, raised panels, inverted text on dark buttons
Ink Black
#000000Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Charcoal
#333333Secondary text, form field borders, body copy, inactive link text
Smoke
#6c6a6aMuted helper text, tertiary metadata, low-emphasis labels
Ash
#dadadaDivider lines, input borders, inactive card outlines, subtle separators between rows
Typography
Type scale
Major Second (1.125) · 16px basedisplay
52px · 400 · 1.23The quick brown fox jumps
text-38
38px · 400 · 1.32The quick brown fox jumps
heading-lg
30px · 400 · 1.27 · 0.24px trackingThe quick brown fox jumps
heading
28px · 400 · 1.43 · 0.14px trackingThe quick brown fox jumps
heading-sm
22px · 400 · 1.45 · 0.11px trackingThe quick brown fox jumps
subheading
18px · 500 · 1.44 · 0.09px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.144px trackingThe quick brown fox jumps
caption
14px · 200 · 1.5 · 0.154px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Graphik
- Weights
- 100, 400
- Sizes
- 14px, 16px, 18px, 22px, 28px, 30px
- Line height
- 1.20–1.50
- Letter spacing
- 0.0050em to 0.0110em — slight positive tracking that loosens as size shrinks, the opposite of most design systems
- Fallback
- Inter (100, 400) or Manrope (200, 400) — the key is keeping the thin weight available at display sizes
Primary UI and body sans-serif. Weight 100 at 22–30px carries display and feature headlines with an almost wireframe-thin feel — the opposite of SaaS-bold; this is editorial restraint. Weight 400 handles body, nav, buttons, and dense metadata.
Additional typeface
Nantes
- Weights
- 400
- Sizes
- 22px, 30px, 38px, 52px
- Line height
- 1.23–1.45
- Letter spacing
- normal (0)
- Fallback
- GT Sectra, Source Serif Pro, or PT Serif at regular weight
Editorial serif for hero and section headlines. Tight leading (1.23 at 52px) lets the serifs do the work of personality. The contrast between a humanist serif headline and a near-weightless sans body is the site's most recognizable typographic gesture.
Additional typeface
Graphik (fix variant)
- Weights
- 400
- Sizes
- 14px, 16px
- Line height
- 1.43, 1.50
- Letter spacing
- 0.0090em to 0.0110em
- Fallback
- Same as primary Graphik — Inter 400
Corrected variant of Graphik used inside inputs, small buttons, and form elements where kerning fidelity matters most
Additional typeface
Graphik_fix
- Weights
- 400
- Sizes
- 14px, 16px
- Line height
- 1.43, 1.5
- Letter spacing
- 0.009, 0.011
Graphik_fix — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1280px
- Section gap
- 48-64px
- Card padding
- 16px
- Element gap
- 16px
Border radius
cards
4pxbadges
40pximages
4pxinputs
4pxbuttons
4pxnavPills
40pxcategoryChips
40pxSpacing scale
3px4px7px8px12px16px20px23px24px32px48px56px99pxGuidelines
Do
- Use the cream #fbf8f6 canvas as the page background, never pure white — the warm tone is part of the brand identity
- Set all body and UI text in Graphik 400 with letter-spacing between 0.0090em and 0.0110em
- Use Nantes 400 (or a humanist serif substitute) for editorial headlines at 30px and above, with tight 1.23–1.27 line-height
- Give all category nav, filter chips, and tag elements a 40px border-radius pill shape
- Keep all buttons, inputs, and cards at 4px border-radius
- Use the matte black #000000 fill for the single primary CTA on any given screen — never introduce a chromatic button color
- Use #f1f29f only as a short 3px decorative underline beneath a heading; never as a background, border, or text color
Don’t
- Do not use drop shadows or blur effects on any component — depth comes from section color transitions, not elevation
- Do not add a chromatic primary action color (green, red, blue) — the entire interactive system stays achromatic
- Do not bold the Graphik headlines — the signature is weight 100 or 400 only; authority comes from the serif, not from sans-serif heaviness
- Do not use the yellow #f1f29f on buttons, badges, or alerts — it is an editorial accent, not a functional state color
- Do not use rounded corners larger than 40px or smaller than 4px — the system has exactly two radii
- Do not introduce gradients — the page is flat-color throughout, including the hero overlay
- Do not use centered text in body or navigation contexts — the site reads left-aligned with editorial asymmetry
Components
Primary CTA Button (Sign up to buy)
Main conversion action — dark filled buttonBackground #000000, text #ffffff, 4px radius, horizontal padding 23px, vertical padding 8–12px. Graphik 400 at 14–16px, letter-spacing 0.0090em. The matte-black fill against cream paper is the page's only high-chromatic-weight element, so it reads as deliberate and confident rather than aggressive.
Ghost Text Button (Sign in)
Secondary action that recedesNo fill, no border. Text in #000000 at 14–16px Graphik 400, letter-spacing 0.0090em. Sits inline with navigation as a quiet alternative to the filled CTA.
Hero Search Bar
Primary discovery input anchored in the headerPill-shaped (40px radius), white #ffffff background, 1px solid #dadada border, padding 16px horizontal. Search icon left, placeholder text in #333333 at 16px Graphik 400. The pill shape is the only non-rectangular control on the page, making it instantly identifiable as the search field.
Category Nav Pills
Horizontal category filter row above featured brand grid40px radius, 16px vertical / 23px horizontal padding, 1px border. Default state: white #ffffff background, #333333 border, #000000 text. Active/selected state: #000000 background, #ffffff text. Pills sit in a horizontally scrollable row with 12px gaps.
Top Category Nav Bar
Primary site navigation rowCentered text-only links on cream #fbf8f6 background, no background or border. Items: Featured, New, Home decor, Food & drink, Women, Beauty & wellness, Jewelry, Paper & novelty, Kids & baby, Pets, Men, Books. 12–16px gap between items. Graphik 400 at 14px, color #000000.
Brand Logo Card
Square tile in the featured brands gridSquare or near-square thumbnail, 4px radius, 1px solid #dadada border, 4px padding. The product photography fills the card; the card itself is just a thin frame.
Promo Banner (Top Bar)
Slim announcement strip above the main headerFull-width, centered text 'Shop wholesale online from over 100,000 brands.' at 14px Graphik 400 in #000000 on cream #fbf8f6. The 'Sign up' link is underlined inline. No background fill — just a thin line of type at the top of the page.
Hero Overlay Headline
Large editorial title sitting over full-bleed photographyNantes 400 at 38–52px, white #ffffff, line-height 1.23, no tracking. Headline sits bottom-left over the hero image with 48px left padding. A short 3-word yellow underline (#f1f29f) appears beneath the headline — this is the only place the accent color touches the hero.
Section Heading with Yellow Accent Rule
Reusable section title treatment used across the pageA 3px-tall #f1f29f horizontal line, 4px wide, sits above or below a Nantes 400 heading. The rule is decorative — it does not span the full heading width, it is a short editorial mark.
Inverted Dark Section
Full-width band that flips the page to a dark mode mid-scrollBackground is a deep desaturated green/charcoal. Text in white #ffffff, Nantes 400 at 30–38px. The contrast against the cream sections above and below creates a clear content break. Used for value-prop blocks like 'Get your products in front of millions of buyers'.
Header Logo Wordmark
Brand identifier top-leftFAIRE set in Graphik 400 (or a wide-tracked geometric sans) with significant positive letter-spacing, #000000. The generous tracking is the wordmark's only typographic treatment — no icon, no case styling.
Surfaces & elevation
Level 0
Page Canvas
#fbf8f6Warm cream background across the entire page; primary canvas tone
Level 1
Card Surface
#ffffffWhite product cards, elevated panels, search input field, pill chips
Level 2
Elevated Overlay
#ffffffModals, dropdowns, sticky header bar; same white as cards but visually stacked via thin 1px borders
Faire uses zero drop shadows. Every component — buttons, cards, nav pills, the search bar — relies on a 1px hairline border (always #dadada or #000000) against the cream or white surface to establish its edge. This is a deliberate editorial decision: the absence of shadow keeps the page feeling like a printed catalog where elements sit on the paper rather than floating above it. Depth comes from section background transitions (cream → white → dark green band) rather than from elevation.
Header search bar
none — relies on 1px #dadada border for definition
Category nav pills
none — flat with 1px border
Brand logo cards
none — flat with 1px #dadada border
Primary CTA button
none — matte black fill carries the weight
Layout & imagery
Layout
Max-width ~1280px centered container with generous side padding (48px). The hero is full-bleed with the text container left-aligned inside the max-width. Below the hero, sections alternate between cream #fbf8f6 canvas and occasional dark green inverted bands, each separated by 48–64px vertical rhythm. The featured brands section uses a category pill row followed by a horizontal product image grid (roughly 4–5 cards visible per row). Navigation is a two-tier top system: a slim promo banner, then a primary header with logo + search + utility actions, then a centered category text nav. The page is spacious and editorial — high white space ratio, no multi-column dense layouts, no sidebars. Asymmetric compositions (large left-aligned headline over image) rather than centered stacks.
Imagery
Full-bleed lifestyle and product photography carries all visual warmth. The hero uses a candid documentary shot of a woman in a boutique — green shelving, curated products, warm natural light — that establishes the brand's merchant-world identity. Product close-ups in the featured brands grid are square, tightly cropped, and fill their card edge-to-edge. No illustration, no 3D renders, no abstract graphics. Color treatment is natural and slightly desaturated to harmonize with the cream canvas; no duotone or filters. Photography is the only source of saturated color on the page.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #fbf8f6 - surface: #ffffff - border: #dadada - secondary text: #333333 - muted text: #6c6a6a - accent: #f1f29f (decorative only) - primary action: no distinct CTA color **Example Component Prompts** 1. *Hero section*: Cream #fbf8f6 base. Full-bleed lifestyle photo background. Bottom-left headline at 52px Nantes 400, white #ffffff, line-height 1.23. Short 3px-tall #f1f29f underline beneath the headline (decorative, not full-width). Subtext 18px Graphik 400, white. Ghost button with white border and white text, 4px radius, 16px 23px padding. 2. *Category filter row*: Cream #fbf8f6 background. Horizontal row of 40px-radius pills, 16px vertical / 23px horizontal padding, 12px gap between. Default: white #ffffff fill, 1px #333333 border, #000000 text. Active: #000000 fill, #ffffff text. 14px Graphik 400, letter-spacing 0.0090em. 3. *Featured brand card grid*: 4-column grid on 1280px max-width container. Each card: square aspect ratio, 4px radius, 4px padding, 1px #dadada border, edge-to-edge product photo. No shadow, no text overlay on the card itself. 4. *Inverted dark value-prop section*: Full-width dark desaturated green background. Nantes 400 headline at 38px white #ffffff, line-height 1.27. Inline text link in #f1f29f underline treatment (not a button). 48px vertical padding top and bottom, 48px horizontal padding within the 1280px max-width. 5. *Header with search*: 16px vertical padding row. FAIRE wordmark top-left in Graphik 400 with wide tracking. Center: 40px-radius white #ffffff search field with 1px #dadada border, search icon left, 16px Graphik 400 placeholder in #333333. Right: ghost 'Sign up to sell' and 'Sign in' text links, then a 4px-radius matte-black #000000 'Sign up to buy' button with 8px 23px padding and 14px Graphik 400 white text.
Type Personality
The defining typographic gesture is the contrast between Nantes (a humanist editorial serif at regular weight) for display and Graphik at weight 100 for UI. This pairing rejects both the SaaS-bold sans convention and the e-commerce-display-serif convention — the serif is used to feel like a magazine masthead, the thin sans to feel like a quiet label. Letter-spacing on Graphik is slightly positive (0.005–0.011em) and increases as the size shrinks, which is the opposite of most systems where display type is tracked tight and body type is left normal. This gives small text a slightly airy, typeset quality.
Radius System
Only two radii exist: 4px for everything rectangular (buttons, inputs, cards, images) and 40px for everything pill-shaped (search, category chips, tag pills, badges). There is no in-between. This binary is intentional — it keeps the page feeling catalog-precise while reserving pill shapes exclusively for navigational and filterable elements, making them instantly identifiable as interactive filters.
Similar brands
GOOP
Same warm cream canvas with achromatic UI and editorial serif headlines over product photography
Net-a-Porter
Same high-fashion catalog feel with generous whitespace, thin sans body type, and full-bleed lifestyle photography as the dominant visual element
Mejuri
Same minimal achromatic UI with a single warm accent and editorial-style typography mixed with geometric sans
Anthropologie
Same boutique-merchant identity expressed through full-bleed shop photography, warm neutrals, and serif/sans typographic pairing
Shopify (marketplace sections)
Same clean B2B header pattern with a centered pill-shaped search bar, matte-black primary CTA, and ghost text links for secondary actions
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
