Resident operates as a quiet editorial gallery for design objects: white paper canvas, near-zero chrome, and large-format photography doing all the visual work. The interface is almost entirely monochrome — black ink on white paper with hairline rules and small ghost text — letting the rooms, furniture, and light fixtures themselves provide every chromatic decision. Typography is a single custom sans-serif (MessinaSans) at moderate weights with tightened tracking, giving headlines a precise, catalogue-like authority without ever feeling loud. Components are reduced to their skeletons: a tiny underlined nav, border-only buttons, a section heading that scales to the edge of the column. No shadows, no gradients, no surface elevation — depth comes only from the photographs and generous vertical breathing room between editorial spreads.
#000000Body text, nav links, icon strokes, and all hairline borders (1px rules under nav, around inputs, and between editorial blocks). The structural workhorse — 724 borderColor occurrences and 336 body borders show it carries the layout's edges
#ffffffPage canvas, card surfaces, nav background, and ghost button fills. Everything floats on this surface; the entire interface is one flat sheet
#979797Muted body text and secondary borders. 2.9:1 contrast against white means it is intentionally faint — used for helper copy and less critical dividers, never for primary content
#333333Icon strokes, fills, and button borders for secondary controls. Sits between ink-black and mid-gray, giving icons a softer presence than body text without losing legibility at 12.6:1
27px · 500 · 1 · -1px trackingThe quick brown fox jumps
23px · 400 · 1.2 · -0.69px trackingThe quick brown fox jumps
19px · 500 · 1.4 · -0.57px trackingThe quick brown fox jumps
18px · 400 · 1.2The quick brown fox jumps
14px · 400 · 1.3 · -0.42px trackingThe quick brown fox jumps
12px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Brand typeface — used for all headings, body copy, nav, and product descriptions. Custom geometric sans with tightened tracking (-0.0370em at display, -0.0300em at body) and moderate weight (400–500, never bold). The anti-conventional choice: running a custom sans at weight 400 for section headings instead of 600–700 — authority comes from the typeface's precision and the negative letter-spacing, not from weight.
Utility text for small chrome — nav secondary items, footer micro-copy, minor UI labels. Deliberately reduced to two sizes and one weight; the system stack disappears so MessinaSans remains the voice of the brand.
0px0px0px0px0px1px3px5px6px10px12px13px14px15px18px19px21px27px28px35px42px56px83px93px280pxSticky top bar on white background. Left cluster: primary nav items (Furniture, Lighting, Designers, Journal, Resources, About) in 12–14px MessinaSans 400, black, spaced ~18–21px apart. Right cluster: secondary actions (Login, Search, Cart with count) in system sans 12–14px. 21px vertical padding. No background, no border-bottom — the nav sits naked on white paper.
Text-only, no background, no border, no underline at rest. 12–14px MessinaSans 400, #000000. On hover or active state, a 1px black underline appears beneath the text. 5–10px horizontal margin between items.
Massive 27px MessinaSans 400, #000000, line-height 1.00, letter-spacing -1.00px. Can be set to the right column edge of a two-column layout (as in the 'Resident' wordmark in the hero). Zero margin — it anchors the section rather than centering within it.
Full-bleed or column-width photographs with 0px border-radius, displayed at 1:1 or 4:3 aspect ratios. Images sit edge-to-edge with no frames, no captions overlays, and 24–48px gaps between paired photographs. The photographs themselves are the entire visual system — no illustrations, no icons overlaid.
Two equal columns with ~24px gap. Left column: descriptive body text in 18–19px MessinaSans 400, line-height 1.29–1.40, #000000. Right column: complementary paragraph at the same spec. No vertical rule between columns — the gap is the divider.
14px MessinaSans 400, #000000, 1px black underline, 3–6px horizontal padding. No background, no border, no fill. The only interactive element style on the site — there are no filled buttons anywhere.
1px solid #000000 border, 0px radius, white background, 14px MessinaSans 400, #000000 text. 10px vertical padding, no focus ring color shift (border remains black). Placeholder text at default body color.
21px vertical padding, system sans-serif 12–14px, #000000. Organized in small text clusters (links, locale switcher EN/DE, legal). No dividers, no background fill — continues the white paper sheet.
Zero-padding card — just a photograph followed by product name in 14–18px MessinaSans 400 and price/spec in the same size. No card background, no border, no shadow. The card is a typographic block beneath a photograph, not a container.
12px system sans, #000000, inline text with a thin space separator. No dropdown, no flags — just adjacent uppercase two-letter codes in a single line.
#ffffffPage canvas and the only surface in the system. All content — nav, cards, images, text blocks — sits directly on this single plane.
The design deliberately avoids shadows, gradients, and any surface lift. Depth is achieved only through full-bleed photography and generous vertical whitespace. No box-shadow, no colored fills, no modal scrims — the page is a flat editorial sheet where images create their own dimensionality against white.
Editorial two-column magazine grid. Max-width ~1440px with no centered container constraint — the grid runs edge-to-edge with generous outer margins. Hero pattern: oversized section heading (e.g. 'Resident') set at display weight positioned in the right column, with a two-photograph spread beneath filling the full width. Content sections alternate between two-column text blocks and image grids (2-up or 3-up). No full-viewport hero, no video, no animated banners — the page begins immediately as a quiet editorial spread. Section rhythm is consistent: 48–64px vertical gaps between blocks, no background bands, no visual dividers beyond whitespace. Navigation is a minimal top bar with small ghost links. No sidebar, no sticky elements beyond the nav, no mega-menu. The overall feel is of flipping through a design monograph rather than browsing a product catalog.
Photography is the entire visual language — no illustrations, no 3D renders, no iconography beyond minimal UI glyphs. Imagery is editorial-architectural: warm interior shots of rooms with Resident furniture and lighting, shot at natural light with muted earth tones (dusty pinks, warm woods, concrete greys, firelit ambers). Composition is wide and environmental — the furniture is shown in lived-in spaces, not on white seamless. Images are always full-bleed or column-width with 0px corner radius, never masked, never with text overlays. Color treatment is naturalistic with slight warmth — not desaturated, not duotone. Photography occupies 60–70% of the page surface area on most screens; the remaining white paper is intentional negative space.
**Quick Color Reference** - Text: #000000 (Ink Black) - Background: #ffffff (Paper White) - Border: #000000 (1px hairline) - Muted text: #979797 (Soft Graphite) - Icon/secondary: #333333 (Charcoal) - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. *Editorial section heading*: Render the word 'Resident' at 27px MessinaSans weight 400, #000000, line-height 1.00, letter-spacing -1.00px. Position right-aligned in a two-column grid. No margin. 2. *Two-column body block*: Create a two-column layout with 24px gap. Left column: paragraph in 18px MessinaSans 400, #000000, line-height 1.29, letter-spacing -0.54px. Right column: identical spec, different paragraph. No vertical divider between columns. 3. *Product photograph card*: Place a full-bleed photograph (4:3 ratio, 0px radius) above a text block: product name in 18px MessinaSans 400, #000000. No card background, no border, no shadow. 24px gap between image and text. 4. *Ghost navigation link*: Render a text link in 14px MessinaSans 400, #000000 with 1px solid #000000 underline, 3px horizontal padding. No background, no border-radius. 18px margin-right between adjacent links. 5. *Bordered input field*: Create an input with 1px solid #000000 border, 0px radius, #ffffff background, 10px vertical padding, 14px MessinaSans 400, #000000 text. Placeholder text in #979797.
The spacing scale is deliberately narrow and content-driven: - 3–6px: inline element padding (buttons, links) - 10–14px: small component padding (inputs, micro elements) - 18–21px: standard element gap (between nav items, between text blocks) - 48–64px: editorial section gap (between major spreads) There is no card padding because there are no card containers — content flows directly on the white paper surface. The base unit is 4px but most values are odd (5, 13, 19, 21) because the spacing follows typographic rhythm rather than a strict grid.
Same editorial-monograph approach: custom geometric sans at moderate weights, near-zero chrome, full-bleed furniture photography as the sole color source, and hairline 1px rules replacing all decorative borders.
Shared restraint philosophy: white canvas, single custom typeface, no filled buttons (all ghost links), photographic warmth providing the only chromatic content, and generous editorial whitespace between sections.
Same Scandinavian design-object sensibility with monochrome UI, tight-tracked geometric sans, borderless image-led grids, and ghost-text navigation that disappears to let product photography lead.
Identical editorial-design language: catalog-style two-column layouts, oversized section headings, architectural photography of furniture in rooms, and a four-neutral palette with no decorative color.
Use the design exports or connect Musterlab to your AI.
