Canvas White
#ffffffPage background, card surfaces, button backgrounds, link containers — the gallery wall everything sits on
099 SUPPLY
099.supplyWebsite preview
The design language
099 Supply is a museum-grid: white walls, black objects, labels in tiny tracked-out monospace caps. The entire interface is reduced to a pure white canvas with one near-black (#101010) doing all the work — typography, borders, fills, buttons, mockup silhouettes — so every rendered asset reads as a specimen on a gallery plinth. Typography is exclusively Soehne Mono at weight 400, with uppercase tracking up to 0.18em giving every label the air of a curator's index card. Components are flat, borderless, and defined by 1px hairline edges and tight 8px radii; there are no shadows, no gradients, and no chromatic accents. The aesthetic is forensic — each mockup and component tile is framed identically, letting the objects themselves carry the visual weight.
Color palette
neutral
Ink
#101010Primary headings, body text, and icon fills on light surfaces. Do not promote it to the primary CTA color
Charcoal
#000000Pure-black decorative fills for mockup rendering and high-contrast object silhouettes
Muted Hard
#222222Dark surface tint for elevated dark components and modal/overlay backgrounds; Dark surface fill for elevated panels, toggle/loader component backgrounds
Muted
#555555Secondary body text, supporting copy, muted helper labels
Muted Soft
#999999Section headings, icon fills, badge text, hover border state — the softest readable gray
Border Soft
#c8c8c8Soft hairline borders for less prominent dividers and input outlines
Border Subtle
#e0e0e0Card edges, link borders, subtle dividers between tiles — the dominant hairline color
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
54px · 400 · 1 · 1.35px trackingThe quick brown fox jumps
label
26px · 500 · 1.2 · 4.68px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.2The quick brown fox jumps
text-12
12px · 400 · 1.2The quick brown fox jumps
text-11
11px · 400 · 1.5The quick brown fox jumps
caption
10px · 400 · 1.2 · 0.8px trackingThe quick brown fox jumps
text-8
8px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Soehne Mono
- Weights
- 400, 500
- Sizes
- 8px, 10px, 11px, 12px, 16px, 26px, 54px
- Line height
- 1.00, 1.20, 1.50
- Letter spacing
- 0.025em at 54px display, 0.18em at 26px hero, 0.08em at 12px badge, 0.02em at 8px micro
- Fallback
- JetBrains Mono, IBM Plex Mono, or Space Mono
- Features
- No special features detected — monospaced face is the visual identity
The exclusive typeface — used for every heading, body, badge, link, icon, and label. Weight 400 dominates; weight 500 is reserved for the 26px hero label. All non-body sizes render in uppercase with tracking between 0.02em and 0.18em. The monospaced face reinforces the museum-catalog, specimen-tag atmosphere.
Spacing & shape
Spacing
- Density
- compact
- Section gap
- 80px
- Element gap
- 12px
Border radius
cards
8pxbadges
0pxinputs
4pxbuttons
9999pxSpacing scale
2px3px4px5px6px8px10px11px12px16px40px80pxGuidelines
Do
- Use only Soehne Mono (or JetBrains Mono substitute) for every piece of text — no second typeface.
- Set every label, badge, and metadata strip in uppercase with tracking between 0.02em and 0.18em.
- Render all buttons at 9999px radius and all cards/tiles at 8px radius — the contrast is the system.
- Use 1px solid borders in #e0e0e0 for default state, #999999 for hover, and #101010 for strong emphasis.
- Keep all mockup assets on pure white backgrounds centered within their tiles — the object IS the content.
- Maintain the catalog metadata pattern: asset ID left ('M 005'), asset name right ('IPHONE'), separated by a horizontal divider.
- Use #101010 as the sole fill for dark elements — buttons, strokes, silhouettes, checkmark icons, loader arcs.
Don’t
- Never introduce chromatic color — no blues, greens, reds, or any hue. The system is monochrome.
- Never apply box-shadow, drop-shadow, or any elevation effect. Depth comes from hairline borders only.
- Never use a sans-serif or proportional typeface. Mono is non-negotiable.
- Never use background gradients except for the single conic-gradient loader pattern (#101010 → #c8c8c8).
- Never set border-radius below 4px on cards or above 9999px on buttons — the radius vocabulary is fixed.
- Never use bold (600+) or light (300-) weights. Stay at 400, with 500 reserved for the 26px section heading.
- Never mix section heading style — always 26px uppercase #999999 with 0.18em tracking, nothing decorative.
Components
Mockup Tile Card
Primary unit — displays a 3D mockup asset with catalog-style metadata stripWhite background, 1px solid #e0e0e0 border, 8px radius. Top portion: centered mockup image on white. Bottom metadata strip: padded 10px top/bottom, 12px right/left, separated from image by a 1px #e0e0e0 horizontal divider. Left metadata label in Soehne Mono 11px weight 400 #555 (format 'M 005'). Right label in Soehne Mono 12px weight 400 #555 uppercase with 0.08em tracking (asset name like 'IPHONE'). No shadow.
Framer Component Tile Card
Second tile variant for interactive component previewsWhite background, 1px solid #e0e0e0 border, 6px or 8px radius. Centered component preview (toggle, loader, browser frame). Bottom label strip same format as mockup tile but prefixed 'C' instead of 'M' (e.g. 'C 000 THEME TOGGLE'). Expand icon (two arrows) sits in the top-right corner as a 16px #555 stroke.
Section Heading
Section label above each grid blockSoehne Mono 26px weight 500, uppercase, #999999, letter-spacing 0.18em (4.68px). Acts as a quiet, tracked-out curator's heading. Examples: '3D MOCKUPS', 'FRAMER COMPONENTS'. No underline, no decoration.
Primary Button
Filled dark button for 'Buy' and conversion actionsBackground #101010, text #ffffff, Soehne Mono 12px weight 400 uppercase with 0.08em tracking, 9999px (pill) radius, padding ~10px 16px. Hover: background shifts to #999999. Used sparingly — appears in modal CTAs and the browser-frame demo.
Ghost Button
Secondary outlined button paired with primaryBackground transparent, border 1px #999999, text #555555, same Soehne Mono 12px uppercase treatment, 9999px radius, padding ~10px 16px. Appears alongside Primary Button in modal demo ('Close').
Metadata Label
Catalog-style tag below each tileSoehne Mono 12px weight 400, uppercase, 0.08em letter-spacing, #555555. Left-aligned: asset ID (e.g. 'M 005'). Right-aligned: asset name (e.g. 'IPHONE'). No background, no border, sits on the card's metadata strip.
Modal Panel
Overlay for copy/info interactionsWhite background, 1px #e0e0e0 border, 8px radius. Header text Soehne Mono 16px weight 400 #101010 ('Less is more'). Body copy Soehne Mono 11px #555. Footer contains a Ghost Button + Primary Button pair right-aligned.
Theme Toggle
Interactive component demo — pill switchPill-shaped (999px radius), 1px #e0e0e0 border, white background, inner circle thumb at left position showing #ffffff fill on #101010 track, or reversed when toggled.
Loader Ring
Circular progress component demoTwo concentric arcs forming a ring: lighter arc #e0e0e0 (background ring), darker arc #101010 (progress arc, ~270° sweep). No fill, pure stroke composition.
Browser Frame
Windowed screenshot frame componentRounded rectangle with 8px radius, 1px #e0e0e0 border. Top chrome bar: three small circles (traffic lights) and a URL pill input with #c8c8c8 placeholder text ('https://'). Interior content area displays a globe or page preview.
Compare Slider
Before/after image comparison componentRectangular frame split vertically: left side shows light-mode garment, right side dark-mode variant, divided by a 1px #101010 handle/bar with a draggable circle grip.
Table Component
Structured data table demoHeader row: 'COMPANY' / 'FOUNDED ↑' in Soehne Mono 12px uppercase #999999 with 0.08em tracking. Body rows alternating white background, 1px #e0e0e0 horizontal dividers, text in Soehne Mono 12px #101010. No vertical borders.
Form Builder Checkbox
Form control component demoSmall 16px square with 4px radius. Unchecked: 1px #e0e0e0 border, white fill. Checked: #101010 fill with white checkmark stroke at ~2px weight.
Counter Display
Large numeric typographic componentSoehne Mono weight 400 at large display size (~54px or scaled), rendered as three stacked digits '099' in #101010 on white. Pure typographic exercise — no frame, no border.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background — the gallery wall.
Level 1
Card
#ffffffIndividual mockup and component tile surfaces, visually identical to canvas but defined by a 1px border.
Level 2
Elevated Dark
#222222Dark mode toggle, loader ring fills, modal overlays — the only surface that breaks from white.
Zero shadows. All depth is conveyed through 1px hairline borders (#e0e0e0 default, #999999 on hover, #101010 for strong emphasis). The absence of shadows is deliberate — the museum-plinth aesthetic requires flat, paper-thin surfaces where objects sit on the same plane as their frames.
Layout & imagery
Layout
Full-bleed white canvas with no max-width container — content extends edge to edge. Hero is a centered site title area (the '099' counter in large mono) followed by section grids. Each section begins with a left-aligned uppercase heading ('3D MOCKUPS', 'FRAMER COMPONENTS') in muted gray with wide tracking, then a uniform 5-column tile grid with consistent 12px gaps between tiles. Tiles are identically sized and shaped — a square-ish rectangle containing a centered asset and a metadata strip footer. No alternating bands, no dark sections, no asymmetric compositions. The grid is the page: museum-row after museum-row of black objects on white. Navigation is minimal — likely a top bar with category links in the same tracked-out uppercase treatment.
Imagery
Pure UI, no decorative photography. The only imagery is the mockup assets themselves — high-fidelity 3D product renders (iPhone, hoodie, Apple Watch, drink carton, cap, Pro Display, MacBook Pro, business card, digital tablet) rendered in pure black or near-black against white. Illustrations are limited to UI component previews (theme toggle, loader ring, kinetic text dot sphere, grid loader plus-pattern, compare slider garment). Icon style: thin 1-2px stroke outlines, monochrome #555 or #101010, no fills. No lifestyle, no atmosphere, no context — each object is isolated like a product shot for a catalog.
Design notes
Agent Guide
**Quick Color Reference** - canvas/background: #ffffff - primary text: #101010 - muted text: #555555 - border default: #e0e0e0 - border hover: #999999 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a mockup tile card: white background, 1px solid #e0e0e0 border, 8px radius. Center a black iPhone silhouette in the top 75% of the tile. Add a 1px #e0e0e0 horizontal divider below the asset. Footer strip: 10px top/bottom padding, 12px left/right padding. Left label 'M 005' in Soehne Mono 11px #555. Right label 'IPHONE' in Soehne Mono 12px uppercase 0.08em tracking #555. 2. Create a section heading: Soehne Mono 26px weight 500, uppercase, #999999, letter-spacing 0.18em (4.68px). Text '3D MOCKUPS'. No underline, left-aligned with 40px top margin and 12px bottom margin. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 4. Create a loader ring: two concentric SVG arcs. Background arc: stroke #e0e0e0, 4px weight, full 360°. Progress arc: stroke #101010, 4px weight, 270° sweep starting from top. No fill, centered in a 120px container. 5. Create a theme toggle: pill shape at 999px radius, 40px tall, 72px wide, 1px #e0e0e0 border. Inner thumb: 16px circle, positioned 4px from left edge, white fill with 1px #999999 border. On/active state: thumb at right, #101010 fill.
Motion Philosophy
Motion is minimal and functional. Durations cluster at 0.12s (106 occurrences) for micro-interactions like hover color shifts, with 0.3s reserved for larger transitions. The dominant easing is 'ease' (474 uses) — no bouncy or spring curves. Properties transitioned: border-color (50x), opacity (42x), color (14x) — all signaling state changes rather than spectacle. No scroll-triggered animations, no parallax, no entrance choreography. The loader ring is the only component with continuous motion.
Similar brands
Are.na
Same flat white-canvas grid with no chrome — objects/content tiles presented as bare specimens with minimal labels.
Linear
Monochrome dark-on-light discipline, tight typographic system, gallery-grade restraint in component design.
Framer Marketplace
Same component-grid presentation pattern with catalog-style metadata strips under each tile.
Apple Design Resources
Same white-plinth aesthetic for product mockups — black objects on white, no lifestyle context, identical framing.
Minimalissimo
Editorial design portfolio with same museum-catalog feel — monochrome, monospace labels, specimen-card layouts.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
