Obsidian
#000000Page canvas, primary surface, image card backgrounds, footer/header fields
Minimal Collective
minimalcollective.digitalWebsite preview
The design language
Minimal Collective operates as a pitch-black editorial canvas where every element earns its presence through restraint rather than decoration. A single geometric sans-serif at weight 400 — never heavier — carries all hierarchy; even 77px display headlines whisper instead of shout, with letter-spacing compressed to -0.056em that pulls letters into sculptural, almost overlapping forms. The interface is colorlessly austere: true black #000000 as the void, hairline white borders as the only structural language, and bordered category pills (EDITORIAL, PREMIERE, CULTURE) that function as ghost labels rather than UI affordances. Content arrives as an overlapping photographic mosaic — event documentation, art installations, studio interiors — layered against the black field without shadows, gradients, or card elevation to separate them from the canvas. The aesthetic is closer to a contemporary art publication at midnight than a typical product UI.
Color palette
neutral
Ash
#5a5a5aSecondary structural elements, input borders, mid-tone dividers, muted UI chrome
Ghost White
#ffffffPrimary text, heading fills, hairline borders, badge outlines, link strokes
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-xl
77px · 400 · 0.9 · -4.31px trackingThe quick brown fox jumps
display
50px · 400 · 1 · -2.2px trackingThe quick brown fox jumps
heading-lg
32px · 400 · 1 · -1.18px trackingThe quick brown fox jumps
heading
27px · 400 · 1.2 · -0.86px trackingThe quick brown fox jumps
heading-sm
23px · 400 · 1.2 · -0.67px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.2 · -0.36px trackingThe quick brown fox jumps
body
16px · 400 · 1.43 · 0px trackingThe quick brown fox jumps
caption
14px · 400 · 1.43 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
PolySans
- Weights
- 400
- Sizes
- 14px, 16px, 18px, 23px, 27px, 32px, 50px, 77px
- Line height
- 0.90–1.43
- Letter spacing
- -0.056em at 77px down to -0.020em at 18px; near-zero below
- Fallback
- Inter, Satoshi, General Sans
Sole typeface. Weight stays at 400 across every size from caption to display — hierarchy is created purely by scale and negative tracking, never by weight contrast. Display sizes (50–77px) use line-height 0.90–1.00 and letter-spacing compressed to -0.044em/-0.056em, pulling characters into tight sculptural forms. Body sits at 14–16px with 1.43 line-height for legibility. The single-weight discipline is the signature: no bold, no italic, no fallback hierarchy — scale is everything.
Spacing & shape
Spacing
- Density
- comfortable
- Section gap
- 144-173px
- Card padding
- 18px
- Element gap
- 14px
Border radius
cards
0pxbadges
4.5pximages
0pxbuttons
4.5pxSpacing scale
1px2px5px6px7px9px14px18px45px54px144px173px216pxGuidelines
Do
- Use Obsidian #000000 as the sole page background; never introduce a surface tint, gradient, or panel color that differs from the canvas.
- Set every text element to PolySans 400 — never bold, never medium. Create hierarchy only through size, letter-spacing, and line-height.
- Apply negative letter-spacing proportional to size: -4.31px at 77px, -2.2px at 50px, -1.18px at 32px, scaling down to 0 at body sizes.
- Use 4.5px border-radius exclusively for category badges and small interactive pills; keep all image cards and content blocks at 0px radius.
- Layer photographs directly on the Obsidian canvas with 0px radius and no drop shadow — let overlap (10–30px) create spatial relationships, not elevation.
- Build category labels as ghost pills: 1px Ghost White border, transparent fill, 5px/6px padding, 14px uppercase text.
- Maintain section gaps of 144–173px between major editorial blocks; let whitespace do the work that dividers would in a busier system.
Don’t
- Do not introduce any chromatic color — no accent blue, red, or green. The palette is strictly black, ash, and white.
- Do not use bold or semibold weights; PolySans 400 is the only weight permitted across the entire type scale.
- Do not add box-shadows, glows, or any elevation effects — surfaces differentiate through overlap and position, never through shadow.
- Do not round image cards or photographs — 0px radius keeps the editorial-magazine tension. 4.5px is reserved for badges only.
- Do not center body text or use justified text blocks — left-align all editorial copy to preserve the gallery-wall reading rhythm.
- Do not fill buttons or badges with white — they remain ghost/outlined. Filled controls would break the
- everything is content" principle."
- Do not add icon decoration to category badges, navigation, or scroll indicators — words alone, at the right size, carry the interface.
Components
Top Navigation Bar
Persistent site headerFull-width black bar, 14px vertical padding. Logo
Hero Headline (Overlapping Image)
First-screen editorial statementFull-viewport black canvas with a single photographic image (e.g. vehicle) positioned behind large display text. Headline at 77px PolySans 400, Ghost White, line-height 0.9, letter-spacing -4.31px. Text overlaps the image rather than stacking above or beside it. Faint concentric arc linework (Ash #5a5a5a, 1px stroke) radiates across the background as the only decoration.
Scroll Indicator
Vertical scroll promptCentered
Category Badge (Ghost Pill)
Editorial taxonomy labelBordered-only pill: 1px Ghost White border, 4.5px radius, transparent background, 5px vertical / 6px horizontal padding. Label text 14px PolySans 400 Ghost White uppercase (e.g.
Image Mosaic Card
Featured visual fragment in editorial collageFull-bleed photograph with 0px radius, no border, no shadow. Overlaps neighboring cards by 10–30px to create a layered editorial spread. Optional title overlay in top-left at 23–32px PolySans 400 Ghost White, and a category badge (e.g.
Article Card (Editorial Spread)
Long-form content entryTwo-part layout: large photograph (0px radius, full-width of its column) stacked with metadata row (category badges + date at 14px) and title at 27–32px PolySans 400, letter-spacing -0.86 to -1.18px. Excerpt in 16px PolySans 400. No card container, no border, no background — content sits directly on the Obsidian canvas.
Page Corner Footer Nav
Minimal page-level navigationTwo text links anchored to bottom-left (
Hairline Divider
Section separation1px Ghost White line, full container width, 0px radius. Used sparingly to separate editorial sections; the primary section separator is whitespace (144–173px gaps).
Surfaces & elevation
Level 1
Obsidian Field
#000000Full-bleed page canvas extending edge to edge
Level 2
Ash Inset
#5a5a5aSubtle surface variation for secondary controls and muted elements
Elevation is entirely absent by design. Spatial relationships emerge from photographic overlap, positional offset, and generous whitespace (144–173px section gaps) — never from shadow, glow, or surface tint. The Obsidian canvas is treated as a single infinite plane; cards, images, and text all sit on it directly. This preserves the gallery-wall metaphor: works are pinned to a black plane, not stacked in a z-axis.
Layout & imagery
Layout
Full-bleed dark canvas with no max-width container; content breaks to the viewport edges. The hero occupies the full first viewport with a centered display headline overlapping a single photographic subject and faint concentric arc linework as background texture. Below the hero, a mosaic of overlapping image cards (10–30px overlap) creates an editorial collage — cards are not constrained to a grid but arranged in an asymmetric, layered composition. The lower section transitions to a structured 2-column editorial spread: large photograph paired with category badges, date, display-weight title (27–32px), and excerpt body. Navigation is radically minimal — a top bar with only logo + hamburger, plus
Imagery
Photography is the dominant visual content — event documentation, art installations, architectural interiors, music studio environments, and street/venue photography. All imagery is full-color, presented unfiltered and uncropped at 0px radius against the black canvas. The treatment is editorial-magazine: overlapping card mosaics rather than uniform grids, with images sometimes extending edge-to-edge and other times sharing space with overlaid display text. No illustrations, no abstract graphics, no 3D renders, no icon systems beyond the single hamburger glyph. The photographs carry all visual weight; the typographic and structural system is deliberately quiet so imagery can speak at full volume.
Design notes
Agent Guide
primary action: no distinct CTA color
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
