Stone Taupe
#a9a498The system's sole warm chromatic note — muted link states, secondary surface tints, paper-like card backgrounds that soften the black-to-gray transitions
Josephmark
josephmark.studioWebsite preview
The design language
Josephmark operates as a midnight editorial gallery for digital craftsmanship: dark-dominant canvases, oversized Scto Grotesk set tight with aggressive negative tracking, and an almost entirely achromatic palette where a single warm taupe (#a9a498) acts as the only chromatic relief. The system prizes restraint over decoration — flat surfaces, hairline borders, pill-shaped buttons, zero shadows, and text that does the heavy lifting through scale and weight rather than color. Screens alternate between deep charcoal stages and cream-paper inserts, creating a rhythm of dark void and quiet warmth. Content is allowed to be loud (the case study artwork, the orange RCA piece, the Walking Dead illustration) while the chrome around it stays nearly invisible — a museum wall, not a website chrome.
Color palette
accent
neutral
Carbon Black
#000000Primary dark canvas — hero backgrounds, full-bleed section stages, base for the editorial atmosphere
Pure White
#ffffffInverse text on dark canvases, form field backgrounds, button text on filled dark elements
Bone Cream
#f4f5efWarm off-white surface — secondary card and panel backgrounds, breaks the clinical feel of pure white and echoes the studio's paper-based brand collateral
Mist Gray
#e5e7ebHairline borders, dividers, list separators, subtle structural lines — the 999-occurrence border color that defines spatial relationships without visual weight
Graphite
#666666Mid-tone text — secondary headings, supporting copy, metadata that needs presence without competing with primary type
Forest Ink
#4e5449Body text on light surfaces — a desaturated dark olive that reads warmer than pure black, the only hue-leaning neutral in the system
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
70px · 300 · 1.1 · -2.45px trackingThe quick brown fox jumps
heading
36px · 300 · 1.2 · -1.08px trackingThe quick brown fox jumps
heading-sm
28px · 300 · 1.2 · -0.76px trackingThe quick brown fox jumps
subheading
20px · 300 · 1.25 · -0.5px trackingThe quick brown fox jumps
text-19
19px · 300 · 1.5The quick brown fox jumps
body
16px · 300 · 1.38 · -0.32px trackingThe quick brown fox jumps
body-sm
14px · 500 · 1.4 · -0.28px trackingThe quick brown fox jumps
caption
12px · 500 · 1.2 · -0.23px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Scto Grotesk A
- Weights
- 300, 400, 500
- Sizes
- 12, 14, 16, 19, 20, 28, 36, 70
- Line height
- 1.10, 1.20, 1.25, 1.38, 1.40, 1.50
- Letter spacing
- -0.035em at 70px display → -0.030em at 36px → -0.027em at 28px → -0.025em at 19-20px → -0.020em at 16px → -0.019em at 12-14px
- Fallback
- Inter (weight 300/400/500), Space Grotesk, or Söhne if licensed
The sole typeface — a custom neo-grotesque used for everything from 70px display headlines down to 12px captions. Weight 300 carries display and large headings (a deliberate anti-convention choice — most agency sites use bold for impact; Josephmark whispers with light). Weight 400 for body, 500 reserved for emphasis and interactive elements. The consistent aggressive negative tracking (-0.019em to -0.035em) tightens the grotesque's natural apertures, creating a compressed, editorial density even at body sizes.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Section gap
- 64-96px
- Card padding
- 16-24px
- Element gap
- 16px
Border radius
tags
9999pxcards
0pxinputs
0pxbuttons
9999pxSpacing scale
8px12px16px20px24px28px32px40px43px64px80px96px112px280pxGuidelines
Do
- Use Scto Grotesk A at weight 300 for all display and heading sizes — the light weight is the signature, not a fallback
- Apply negative letter-spacing consistently: -0.035em at display (70px), scaling proportionally to -0.019em at caption (12px)
- Build with full-bleed sections, not contained max-width layouts — let the dark canvas extend to the viewport edges
- Use #000000 and #f4f5ef as the two primary canvas colors, alternating between them for section rhythm
- Define interactive elements with 1px borders and 9999px radius — the pill shape is the only button form
- Set body text at 16px/1.38 with #ffffff on dark and #4e5449 on light surfaces
- Separate content blocks with 1px #e5e7eb hairlines, never with shadows or background fills
Don’t
- Do not introduce color beyond the single warm taupe (#a9a498) — the system's power comes from its 1% colorfulness
- Do not add shadows, glows, or any drop effects — this system is rigorously flat
- Do not use rounded corners on cards, images, or containers — only buttons are rounded (to 9999px)
- Do not center text — everything is left-aligned, following editorial column logic
- Do not use bold weights (600+) for emphasis — the scale goes 300 → 400 → 500, and contrast comes from size and color, not weight
- Do not add icon systems or decorative graphics — typography and photography are the only visual elements
- Do not use #ffffff as a section background — it appears only as surface within forms and as text color on dark
Components
Editorial Hero
Full-bleed dark opening section with oversized headline#000000 background spanning full viewport. Display headline at 70px, weight 300, color #ffffff, letter-spacing -2.45px, line-height 1.10. Generous top/bottom padding (64-96px). Navigation floats in a single row at the top with 28-32px padding.
Minimal Nav Bar
Transparent top navigationFull-width, transparent over the dark canvas. Wordmark 'Josephmark' left-aligned in 12-14px Scto Grotesk weight 500, color #ffffff. 'Menu' text link right-aligned at same size and weight. No background, no border, no logo mark — just two pieces of text floating in the void.
Pill Text Button
Primary interactive elementFully rounded with 9999px border-radius. Padding 8px 16px or 8px 20px. Border 1px solid #e5e7eb on dark backgrounds or #000000 on light. Text at 14px weight 500, letter-spacing -0.28px. Transparent fill — the pill is defined by its border, not its background. This is the only interactive component shape in the system.
Project Showcase Card
Case study entry in gridFull-bleed or 2-column grid tile on #000000 background. Large project artwork/image fills the card. Project name overlaid below at 16-20px weight 400, color #ffffff, letter-spacing -0.32 to -0.5px. No border, no radius, no shadow — the image IS the card surface.
Cream Content Insert
Warm light section breaking the dark rhythmBackground #f4f5ef with sharp 0px corners. Contains product photography or printed collateral. Headings at 28-36px weight 300, color #000000. Body at 16px weight 400, color #4e5449. The warm cream creates a paper-like quality that echoes physical design deliverables.
Arrow Link
Directional text link with chevron iconText at 16-20px weight 400 or 500, color #ffffff on dark or #000000 on light, with a right-pointing chevron (» or →). No underline. Letter-spacing -0.32 to -0.5px. The chevron sits inline after the text with ~8px gap.
Section Heading
Editorial sub-section title28-36px weight 300, color #ffffff on dark surfaces or #000000 on light. Line-height 1.20, letter-spacing -0.76 to -1.08px. Generous margin-bottom of 40px. Left-aligned, full-width within its container.
Body Text Block
Paragraph and supporting copy16px weight 400, line-height 1.38, letter-spacing -0.32px. Color #ffffff on dark sections, #4e5449 on light/cream surfaces, #666666 for secondary/supporting copy. Max-width implied by reading measure; no enforced container.
Horizontal Divider
Structural separator between content blocks1px solid #e5e7eb line. Full-width or contained. The 999-frequency border color makes this the system's primary spatial delineation tool — it defines where one thing ends and another begins without any visual ceremony.
Menu Toggle
Full-screen navigation overlayWhen activated, covers the viewport with #000000 or #f4f5ef. Large nav links at 36-70px weight 300, centered or left-aligned, with generous vertical spacing (24-40px between items). Closes via the same 'Menu' text in the top nav.
Surfaces & elevation
Level 0
Void
#000000Full-bleed dark canvas for hero, editorial sections, and project showcases
Level 1
Bone
#f4f5efWarm secondary surface — case study inserts, lighter content blocks
Level 2
Paper
#ffffffLight form surfaces, input fields, micro-cards
Zero elevation. No shadows, no drop effects, no blur. The system achieves spatial hierarchy through color contrast (dark vs. cream), generous whitespace, and hairline borders — never through simulated depth. This is a flat, editorial, print-derived visual logic where layers exist in sequence, not in z-axis.
Layout & imagery
Layout
Full-bleed, edge-to-edge layout with no max-width container. Navigation is a single row of two text elements floating over the void. Hero sections span the full viewport with display headlines left-aligned. The page alternates between black stages and warm cream inserts, creating a rhythm of darkness interrupted by paper-like warmth. Content is left-aligned throughout, never centered. Project showcases appear in 2-column grids on dark backgrounds. The layout is deliberately architectural — large blocks of solid color define spatial zones rather than cards or floating elements. Density is spacious: 64-96px section padding, 40px between heading and body, giving every element room to breathe.
Imagery
Imagery is content, not chrome. The system's own visual language is pure typography on flat color — no decorative graphics, no abstract patterns, no icon systems. When imagery appears, it's always project artwork: photography of printed materials (cash-flow reports, magazines), digital design work (RCA Records, The Walking Dead), and brand collateral. The case study images are vivid and full-color (orange, green, illustrations) — the surrounding system is deliberately monochrome so the project work reads as the only colorful thing in the room. Photography treatment: natural lighting, product-focused, no filters or duotones. Images are presented full-bleed within their containers with no rounded corners or masking.
Design notes
Agent Guide
**Quick Color Reference** - text (on dark): #ffffff - text (on light): #4e5449 - text (secondary): #666666 - background (primary dark): #000000 - background (warm light): #f4f5ef - border: #e5e7eb - accent: #a9a498 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a full-bleed hero section: #000000 background, padding-top 96px, padding-bottom 64px. Display headline at 70px, Scto Grotesk weight 300, #ffffff, letter-spacing -2.45px, line-height 1.10. Left-aligned, no max-width. 2. Create a project showcase card: no border, no radius, no shadow. Full-bleed image fills the card on #000000 background. Project title at 20px weight 400, #ffffff, letter-spacing -0.5px, positioned below the image with 16px gap. 3. Create a cream content insert: #f4f5ef background, 0px radius, padding 64px. Section heading at 36px weight 300, #000000, letter-spacing -1.08px. Body text at 16px weight 400, #4e5449, line-height 1.38. Product image right-aligned with no border. 4. Create a pill text button: 9999px border-radius, 1px solid #e5e7eb border, transparent fill, padding 8px 20px. Text at 14px weight 500, #ffffff, letter-spacing -0.28px. On dark backgrounds only. 5. Create a full-screen menu overlay: covers viewport with #000000. Nav links stacked vertically at 70px weight 300, #ffffff, letter-spacing -2.45px, with 40px vertical gap between items. Left-aligned with 28px padding.
Color Philosophy
The palette is deliberately impoverished — seven colors total, six of them achromatic or near-achromatic. This scarcity is the system: when a studio's work is bold, colorful, and inventive (RCA Records, Walking Dead), the website itself must recede. The only chromatic accent is #a9a498, a warm taupe that appears in just two contexts: as a subtle link color and as a rare secondary surface tint. It exists to prevent the system from feeling clinical or sterile — a human warmth in the machine. Every other color decision is about value contrast: #000000 against #f4f5ef, #000000 against #ffffff, #e5e7eb as the quietest possible structural line.
Typography Philosophy
Scto Grotesk A is custom — designed by Schick Toikka specifically for Josephmark. The system's typographic attitude comes from three choices: (1) weight 300 for display, which is anti-convention and forces the design to rely on scale and tracking rather than boldness for hierarchy; (2) aggressive negative tracking across the entire scale, from -0.019em at 12px to -0.035em at 70px, which compresses the grotesque's natural letterforms into a dense, editorial rhythm; (3) a line-height of 1.10 on the largest display size, meaning the headline almost touches itself — the type fills its container with no air, creating urgency and presence. There is no secondary typeface, no monospace, no serif. One family, one voice.
Similar brands
Manual (manual.co)
Same dark-canvas editorial approach with oversized light-weight grotesque typography and minimal navigation
Resn (resn.co.nz)
Full-bleed dark sections alternating with warm content areas, project showcase grids, zero decorative chrome
Locomotive (locomotive.ca)
Monochrome system where project artwork provides all the color, generous whitespace, editorial typographic scale
Pentagram (pentagram.com)
Grid-based project showcase on dark canvas, left-aligned display type, hairline structural elements
Active Theory (activetheory.net)
Dark-dominant agency portfolio with pill-shaped text buttons and flat, borderless card surfaces
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
