Gallery White
#ffffffPage canvas, project tile background where artwork doesn't fill the frame
Specht Studio
stephaniespecht.comWebsite preview
The design language
Specht Studio is a curatorial frame, not a design showcase — the website removes every trace of itself so the portfolio work can hang on a neutral gallery wall. The chrome is aggressively monochrome: a single typeface, a single weight, black and gray ink on a near-white plane. There is no brand color, no CTA, no marketing surface — navigation is bare text and the grid of project tiles does all the work. The system achieves its identity through what it withholds: no shadows, no rounded corners, no gradient washes, no chromatic accent. Any page built in this system should read as a museum catalog, not a product page — the structure is the design, and the work is the content.
Color palette
neutral
Fog Gray
#b0b0b0Secondary surface, subtle dividers, muted metadata text
Graphite
#666666Link borders, secondary text, caption metadata, inactive nav
Gallery Black
#000000Primary text, active nav, all structural borders, the single ink that holds the system together
Typography
Type scale
Minor Second (1.067) · 16px basebody
25px · 400 · 1.3The quick brown fox jumps
body-sm
16px · 400 · 1.4The quick brown fox jumps
caption
15px · 400 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica Neue
- Weights
- 400
- Sizes
- 15px, 16px, 25px
- Line height
- 1.00–1.50
- Letter spacing
- normal
- Fallback
- Inter or Neue Haas Grotesk Text
Sole typeface across every context — nav, body, headings, links, footer. The deliberate choice of a single weight at 400 across all roles removes typographic hierarchy and forces the grid and the imagery to do the ranking. No display cuts, no bold emphasis, no italics — restraint as a point of view.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 6px
- Max width
- 1400px
- Section gap
- 67-122px
- Card padding
- 0px
- Element gap
- 2-10px
Border radius
all
0pxnav
0pxtiles
0pxSpacing scale
2px10px11px12px13px24px25px30px35px67px122pxGuidelines
Do
- Use only Helvetica Neue at weight 400 — no bold, no light, no italic beyond the brand subtitle. Typographic uniformity is the system.
- Set body text at 15-16px and headings at 25px max. Anything larger than 25px breaks the gallery-wall scale where the imagery dominates.
- Build with the white canvas as the default surface. Gallery Black (#000000) is the only structural ink; Graphite (#666666) handles secondary text and link borders.
- Let project tiles butt directly against each other with 2-10px gaps. The tight masonry grid is the primary organizational device — wide gutters would dissolve the visual density.
- Treat every page as a catalog. Text should annotate and index the work; it should never compete with the imagery for attention.
- Keep all borders hairline (1-2px) in Gallery Black. Borders replace shadows, fills, and rounding as the structural language.
- When a page needs section labels, use 25px black type directly on the white plane — never a colored chip, pill, or badge.
Don’t
- Do not introduce a brand color. Any chromatic accent would shift the system from 'gallery wall' to 'product page' and destroy the curatorial neutrality.
- Do not add rounded corners to tiles, buttons, or containers. The system is orthogonal — sharp 0px radii everywhere.
- Do not use shadows, blurs, or elevation. Depth must come from image content and grid density, not from CSS box-shadow.
- Do not use multiple typefaces or weights. A second weight or family immediately introduces hierarchy that the system deliberately suppresses.
- Do not add a CTA button. There is no primary action in this system — if a page needs a link, use a Graphite-underlined text link.
- Do not center the content on the page. The grid is left-aligned, slightly off-center, which creates the editorial-publication feel.
- Do not use gradients, fills, or tinted backgrounds. Every surface is pure white or pure black, never a shade between.
Components
Navigation Bar
Site-wide top navigationBare text-only horizontal list. Links at 15-16px Helvetica Neue 400 in Gallery Black, no underlines, no backgrounds, no active-state fills. Separated from the content by a hairline 1-2px black border bottom. Spacing between nav items is 30px margin-right. The word 'Work' carries a 2px black underline to mark the current section.
Project Tile
Portfolio thumbnail in the gridEdge-to-edge image or artwork with zero padding and zero border-radius. Tiles butt directly against neighbors with a 2-10px gap (the system lets the artwork define its own edges). No title, no metadata, no overlay — the tile is the pure artifact. Grid cells vary in proportion (1:1, portrait, landscape) creating a masonry rhythm.
Grid Container
Holds the portfolio tiles in masonry arrangementMulti-column grid (3-4 columns at desktop) at ~1400px max-width, left-aligned rather than centered. Tiles are tightly packed with minimal gutters. The grid is the dominant visual device — it is more present than any individual project.
Text Link
Inline and standalone links in body copy15-16px Helvetica Neue 400 in Graphite (#666666), underlined with a 1px Graphite border. No hover color shift detected — links are static. The 1px underline is the only interactive affordance in the entire system.
Section Header
Optional heading text for sections like 'Artwork', 'Young Innovators'25px Helvetica Neue 400 in Gallery Black, line-height 1.2, 13-24px margin-bottom. Overlaid directly on or near project tiles — no banner background, no colored chip, no box. Text sits on the white plane with no visual treatment distinguishing it from body type beyond size.
Brand Lockup
Studio identity in the top-left corner'Specht Studio' at 15-16px Helvetica Neue 400 in Gallery Black, with the italicized subtitle 'structure, intuition, experiment' directly beneath at the same size in Graphite. No logo mark, no symbol — the wordmark alone. The subtitle in gray creates the only typographic color contrast in the lockup.
Footer
Site footer with secondary links and metadataBare text at 15px Helvetica Neue 400, 11-24px padding. Same black-on-white treatment as the rest of the system. No social icons, no newsletter form, no decorative elements.
Surfaces & elevation
Level 1
Gallery White
#ffffffPrimary page canvas — the white wall
Level 2
Fog Gray
#b0b0b0Recessed surface for metadata and quieter elements
No shadows. The design flattens every element onto a single white plane; depth is implied by the project tile grid and the dense packing of imagery, not by elevation. Any attempt to add a drop shadow would introduce product-UI vocabulary that breaks the gallery-wall metaphor.
Layout & imagery
Layout
The site is a single dense masonry grid of project tiles, full-width with a ~1400px content envelope, left-aligned rather than centered. Navigation is a minimal text bar at the very top — logo top-left, nav links inline — separated from the grid by a single hairline border. The hero IS the grid; there is no separate hero section, no introductory text, no banner image. Scrolling reveals more tiles in continuous flow with no section breaks or alternating bands. The grid packs 3-4 columns at desktop and reduces on smaller viewports. Project metadata and section titles appear sparingly, overlaid on the grid rather than in dedicated zones.
Imagery
The imagery is the design system. Project tiles range across photography, editorial print, poster art, 3D renders, motion stills, and hand-drawn illustration — maximum visual diversity contained within a strict monochrome frame. Each tile is its own self-contained visual world; the grid treats them all with equal weight, no tile is visually privileged by size, position, or treatment. Tiles have no captions, no overlays, no rounded edges — they are raw crops. The overall feel is a curated mood board or museum wall: chaotic in content, rigorous in framing.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #000000 - accent: #666666 - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. Build a portfolio grid: white #ffffff background, 3-column masonry layout at 1400px max-width, tiles are edge-to-edge images with 0px border-radius and 8px gap between cells. No shadows, no borders on tiles. 2. Build a top nav bar: white background, 1px solid #000000 bottom border, 24px padding. Left: 'Specht Studio' in 16px Helvetica Neue weight 400 #000000 with 'structure, intuition, experiment' in #666666 directly below. Right: nav links 'Work', 'Art / Research', 'Archive', 'About', 'Shop' at 15px weight 400 #000000, 30px margin-right between items, active item gets a 2px solid #000000 underline. 3. Build a text link: 15px Helvetica Neue weight 400, color #666666, 1px solid #666666 underline. No hover state change. 4. Build a section header: 'Artwork' in 25px Helvetica Neue weight 400 #000000, line-height 1.2, 24px margin-bottom. Sits directly on the white canvas with no background or border. 5. Build a project tile: a single image filling the entire tile area, 0px padding, 0px border-radius, no overlay text, no border, no shadow. The tile is raw content.
Similar brands
Pentagram
Portfolio-as-website approach with no decorative chrome — diverse project tiles presented in a dense grid with minimal type treatment, letting the work carry the visual weight
Bruce Mau Design
Studio site that functions as a curatorial catalog — black text on white, tight grid packing, zero brand-color noise, the work speaks for itself
Wieden+ Kennedy
Editorial-portfolio feel with strict typographic restraint and a grid of visually diverse campaign artifacts presented in a neutral frame
M/M (Paris)
Design studio site that treats itself as an art object — monochrome chrome, typographic precision, and project tiles that are individually expressive within a rigid container
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
