Obsidian
#000000Body text, icons, primary action button fill, footer ink — the only chromatic-feeling value, used at maximum contrast for all interactive affordances
Filling Pieces
fillingpieces.com
Website preview
The design language
Filling Pieces operates as a monochrome fashion editorial: the entire interface is grayscale, so the brand voice lives in photography and type, not color. A single custom sans-serif (favorit, weights 400/600) carries every label, headline, and product name, with a fixed -0.04em tracking that compresses every glyph into a tight editorial lockup. The 100px display weight is the hero's only punctuation — it is enormous, sitting directly over full-bleed photography with no overlay card or gradient. Surfaces stay warm and flat: hairline #e5e7eb borders at 1px, no shadows, no gradients, an 8px radius applied uniformly to inputs and buttons. Product cards are flat on a warm-gray canvas; the grid reads like a magazine spread, not a typical ecommerce tile wall. Every element earns its presence by being quiet.
Color palette
neutral
Paper White
#ffffffPrimary surface for cards, input fields, product tiles, and modal backgrounds; white text on dark photographic hero backgrounds
Hairline Gray
#e5e7eb1px borders, dividers, input outlines, card edges — the structural skeleton that separates every surface
Stone
#efefefSecondary surface behind product grids, checkout bands, and footer — the warm neutral that lifts the page off pure white
Driftwood
#bfbfbfCanvas/background tone for editorial sections and product category walls — warm enough to distinguish from clinical white
Slate
#6b7280Input border accent, muted helper text, inactive form controls
Ink Wash
#241f20Near-black text alternative with a warm undertone — used where pure #000000 reads too cold against the warm-gray canvas
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
100px · 600 · 0.9 · -0.04px trackingThe quick brown fox jumps
heading
50px · 400 · 1 · -0.04px trackingThe quick brown fox jumps
heading-sm
35px · 400 · 1.2 · -0.04px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.5 · -0.04px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
body
14px · 400 · 1.5 · -0.04px trackingThe quick brown fox jumps
text-12
12px · 400 · 1.2The quick brown fox jumps
text-11
11px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
favorit
- Weights
- 400, 600
- Sizes
- 8px, 10px, 11px, 12px, 14px, 16px, 18px, 35px, 50px, 100px
- Line height
- 0.90–1.78
- Letter spacing
- -0.04em (applied uniformly across all sizes — the negative tracking compresses the type into an editorial lockup at every scale)
- Fallback
- Söhne or Inter (close geometric sans-serifs with tight tracking); General Sans as a free alternative
- Features
- "ss04" on
Single typeface for everything. Weight 400 for body, nav, and editorial captions; weight 600 for buttons, product names, and navigation labels. The custom ss04 alternate character set is part of the brand identity — it must be enabled.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 40px
- Card padding
- 16px
- Element gap
- 16px
Border radius
tags
0pxcards
0pxinputs
8pxmodals
0pxbuttons
8pxSpacing scale
1px2px4px6px8px12px16px20px24px28px32px40px48px64px80px315pxGuidelines
Do
- Apply -0.04em letter-spacing and `"ss04"` font-feature-settings to every text element using favorit — the tracking is what makes the type feel editorial
- Use 1px #e5e7eb borders for all separators, input outlines, and card edges; never use thicker borders or colored dividers
- Use 8px border-radius for all inputs and buttons; use 0px for cards, modals, and tags — the contrast between rounded controls and flat surfaces is a signature
- Reserve the 100px display size for hero headlines only; pair it with line-height 0.90 to make the type fill the frame edge-to-edge
- Let full-bleed photography be the background; lay white text and ghost buttons directly on the image with no scrim, gradient, or overlay card
- Use #000000 for all primary action button fills and body text; use #ffffff only for card surfaces and text on dark imagery
- Keep the entire palette achromatic — the brand is grayscale by intent, and any chromatic color introduced will read as an error
Don’t
- Don't introduce any color outside the achromatic scale — no blues, greens, reds, or brand accents; 1% colorfulness is the system ceiling
- Don't add box-shadows to cards, modals, or buttons — the design is deliberately flat and uses surface tone contrast for depth
- Don't use border-radius values other than 8px (inputs/buttons) or 0px (everything else) — the data shows no other radii exist
- Don't use font weights outside 400 and 600 — no bold, no light, no black weights; favorit exists in exactly these two voices
- Don't use a second typeface — favorit is the only font in the system, including for icons, badges, and buttons
- Don't use decorative gradients, scrims, or overlay tints over hero photography — the image is meant to breathe through the text
- Don't use colored icon fills or multi-color iconography — all icons are stroke-only in #000000 or #ffffff, single-color
Components
Top Navigation Bar
Primary site navigationFull-width flat bar on #ffffff, no shadow, 1px #e5e7eb bottom border. Left: brand wordmark in favorit 400, 16px, #000000. Center: horizontal links (Men, Women, Our World, Rewards) in favorit 400, 12–14px, #000000, 32px gap. Right: utility icons (Search, Login, Wishlist, Bag with count) in favorit 400, 12px, #000000, 24–32px gap. Height ~60px. No background fill, no sticky behavior beyond scroll.
Announcement Bar
Site-wide promotional strip1px #e5e7eb top + bottom border, ~32px height, centered favorit 400 11–12px text in #000000, letter-spacing -0.04em. Warm-neutral background or white. Used for loyalty point messaging.
Primary Button (Black Filled)
Primary call-to-action across the siteBackground #000000, text #ffffff, favorit 400, 14px, letter-spacing -0.04em, uppercase or sentence case. Border-radius 8px. Padding 12px 32px. No shadow, no hover color change beyond subtle darkening. Used for DISCOVER NOW, NEXT, and checkout actions.
Ghost Button (Dark Outline)
Secondary editorial CTA over photographyTransparent background, 1px border in #ffffff or #000000 depending on surface. Text in #ffffff over dark hero, #000000 over light. Border-radius 8px. Padding 12px 32px. favorit 400, 14px. Used for DISCOVER overlays on editorial image blocks.
Product Card
Product grid itemFlat card on warm-gray canvas (#bfbfbf). No border, no shadow, no radius. Product image fills the card at ~1:1.2 aspect ratio. Top-left: small uppercase category tag in favorit 400, 10–11px, #000000 (e.g. 'POPULAIR', 'NEW', 'BESTSELLER'). Top-right: wishlist heart icon, 16px, #000000. Below image: product name in favorit 400, 14px, #000000, followed by price in favorit 400, 14px, #000000 on its own line. No card padding between image and text.
Hero Display Block
Full-bleed editorial hero with overlaid textFull-viewport photographic background, dark-toned. White display text in favorit 400, 100px, line-height 0.90, letter-spacing -0.04em, centered. Subhead in favorit 400, 16–18px, #ffffff, centered below. Ghost-button CTA (white border, white text) centered below subhead. No overlay scrim, no gradient — the image is the atmosphere.
Editorial Split Section
Two-column lifestyle/editorial blockTwo equal-width columns side by side, each containing a full-bleed photographic image with text overlaid. Category label in favorit 400, 35–50px, #ffffff, positioned lower-left. Ghost-button CTA (white border) above the label or in the center. No border between columns, no padding — images touch edge to edge.
Email Capture Input
Newsletter and form input fieldBackground #ffffff, 1px border in #6b7280 (focus state shifts to #000000). Border-radius 8px. Padding 12px 16px. Placeholder text in favorit 400, 14px, #6b7280. Input text in favorit 400, 14px, #000000. Full-width within its container.
Category Tag (Product Badge)
Small status label on product cardsNo background, no border. Uppercase favorit 400, 10–11px, #000000, letter-spacing -0.04em. Positioned top-left of product image. Labels: POPULAIR, NEW, BESTSELLER, BESTSELLIJER.
Language Selector
Locale switcher in headerInline text link with flag icon + country name in favorit 400, 12px, #000000, followed by dropdown caret. No border, no background. Dropdown opens a simple list of language options.
Wishlist Heart Icon
Product save toggle16–20px outline heart icon, stroke #000000, no fill. Positioned top-right corner of product card. No background, no badge. Fills to #000000 on active state.
Modal Overlay (Newsletter Popup)
Email capture overlayCentered white card on semi-transparent black backdrop (rgba(0,0,0,0.5)). Card: #ffffff background, 0px radius, 24–32px padding. Close (×) button in top-right corner, 16px, #000000. Headline in favorit 400, 24–35px, #000000. Email input + primary black filled button stacked. No shadow on the card itself.
Footer
Site-wide footerBackground #000000 or #ffffff depending on section. White text on black or black text on white. Multi-column link lists in favorit 400, 12px, -0.04em. 1px #e5e7eb divider lines between sections. No large logo, no social icons in color.
Surfaces & elevation
Level 0
Canvas
#bfbfbfWarm-gray page background visible behind product grids and editorial sections
Level 1
Surface
#efefefSecondary surface for checkout bands, footer, and content dividers
Level 2
Card
#ffffffProduct cards, modal popups, input fields, and all raised content
Level 3
Photographic Overlay
#000000Full-bleed editorial and hero images with white text laid directly on top
The design is deliberately shadowless. Depth is created through surface tonal contrast (#bfbfbf → #efefef → #ffffff) and hairline 1px borders in #e5e7eb, not through box-shadow elevation. This keeps the interface flat and editorial — products and photography sit flush against the canvas without floating.
Layout & imagery
Layout
Full-width page model with no centered max-width container — sections bleed edge to edge. Hero is a full-viewport photographic image with centered overlay text and a single ghost CTA. Product grid is a 4–5 column flat card row, no gutters between cards, sitting on a warm-gray (#bfbfbf) canvas. Editorial sections alternate as two-column splits (50/50) with full-bleed images and overlaid text. Vertical rhythm uses 40px section gaps with no visible dividers between sections — the flow is seamless. Navigation is a single flat top bar, not sticky. No sidebar, no mega-menu. Content density is generous and breathing — each product or editorial image gets full room to dominate.
Imagery
Photography is the entire brand. Full-bleed editorial images dominate every section — hero blocks, product backgrounds, and split editorial panels are all unmasked photographs. The imagery is warm-toned, slightly desaturated, and lifestyle-oriented: people in motion within real environments (Brazil, urban settings, natural light). Product photography is clean and centered on warm-gray or white backgrounds with no lifestyle context — the object stands alone. No illustrations, no 3D renders, no abstract graphics. Icons are outline-only, single-color, 1–1.5px stroke weight, never filled. The ratio of imagery to UI chrome is roughly 80/20 — the interface recedes so the photography can speak.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #e5e7eb - muted text: #6b7280 - canvas/surface: #bfbfbf / #efefef - primary action: #000000 (filled action) **Example Component Prompts** 1. Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a product card: flat card on #bfbfbf canvas, 0px radius, no shadow. Product image at 1:1.2 ratio fills the card. Top-left category tag in favorit 400, 10px uppercase, #000000, letter-spacing -0.04em reading "NEW". Top-right wishlist heart icon, 16px stroke #000000, no fill. Below image: product name favorit 400, 14px, #000000, then price on a new line in the same style. 3. Create an email capture input: background #ffffff, 1px border in #6b7280, 8px radius, padding 12px 16px. Placeholder "Enter your email address" in favorit 400, 14px, #6b7280. Full-width. On focus, border shifts to #000000. 4. Create an editorial split section: two equal 50% columns, each with a full-bleed photographic image. Lower-left of each image: category label in favorit 400, 50px, #ffffff, line-height 1.00, letter-spacing -0.04em. Ghost button above the label: transparent, 1px #ffffff border, 8px radius, 12px 32px padding, favorit 400 14px #ffffff reading "DISCOVER". No divider between columns, no padding. 5. Create a navigation bar: full-width, background #ffffff, 1px #e5e7eb bottom border, ~60px height. Left: brand name "FILLING PIECES" in favorit 400, 16px, #000000, letter-spacing -0.04em. Center: links "Men", "Women", "Our World", "Rewards" in favorit 400, 14px, #000000, 32px gap. Right: utility icons (Search, Login, Wishlist, Bag) with labels in favorit 400, 12px, #000000, 24px gap.
Photography Direction
All hero and editorial imagery is full-bleed, unmasked, and edge-to-edge. No rounded corners, no drop shadows, no border frames on images. Product photography uses a neutral, slightly warm background (not pure #ffffff) so the product sits in a tone, not a void. Lifestyle and editorial photography is warm-toned, naturally lit, and shot in real environments — no studio white-cyc backdrops, no obvious product-staging. The visual brief: the photography should look like it was shot by a fashion documentary photographer, not a catalog retoucher. Skin tones, textiles, and street textures should read naturally without heavy color grading.
Type Personality
favorit's ss04 alternates are non-negotiable. The font's character set includes custom alternates (visible in ligatures, numeral shapes, or letterform details) that distinguish the brand from any system sans-serif. A designer using a substitute like Söhne or Inter should still enable OpenType alternates if available, and should never switch to a humanist or geometric sans that has a different terminal style — the type must feel engineered, not friendly. Weight 400 carries most of the work; weight 600 appears only for navigation labels and button text. There is no italic, no condensed cut, no display variant — the only expressive dimension is size, and size is used sparingly.
Similar brands
Acne Studios
Same monochrome-only palette, custom sans-serif identity, and full-bleed editorial photography as the primary layout device
COS
Identical approach to warm-gray canvas (#bfbfbf-range) with flat product cards, hairline 1px borders, and zero shadow elevation
Mr Porter
Same magazine-spread product grid with uppercase category tags, wishlist hearts, and editorial text-over-photography section blocks
The Row
Same restrained luxury language: single typeface, tight tracking, achromatic surfaces, and photography that does all the brand work
Needles
Same tight -0.04em tracking discipline and editorial oversized display headlines over unmasked lifestyle photography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
