# Josephmark Studio · Design system migration spec

> Source: https://josephmark.studio  ·  Curated by OpenDesign  ·  en

> An excellent reference for bold, minimalist agency portfolios that rely on typography and scale rather than complex UI components.

## 1. Identity DNA

The Josephmark system is a study in structural confidence, operating like a high-end architectural firm where every element is a load-bearing statement. Its identity is defined by clean lines, generous negative space, and a monochrome palette that frames the work, not the interface.

**One-liner:** A bold, dark-themed digital studio portfolio characterized by massive typography and a minimalist, high-contrast aesthetic.
**Keywords:** studio · agency · design · bold · minimal
**Analogy:** A high-end architectural firm: clean lines, confident statements, and a focus on structural clarity.

## 2. Color

Color is a discipline of restraint, with a strict dark mode palette anchoring the interface in deep black. Supporting tones are limited to neutral off-whites and grays, creating a high-contrast canvas where content provides the only chromatic variation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#F4F5EF` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--muted-soft` | `#A9A498` | weak hint |
| `--line` | `rgba(255, 255, 255, 1)` | divider |

**Color principle:** High-contrast dark mode with neutral off-whites and grays for secondary elements.

The principle is absolute: color is a tool for contrast and hierarchy, never for decoration.

## 3. Typography

The typographic voice is singular and authoritative, set entirely in **Scto Grotesk A** at a consistent light weight of 300. This choice favors clarity and scale over ornamental weight, allowing massive statements to feel spacious rather than heavy.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 300 | -1px | Hero headlines and large statements |
| h1 | 36px | 1.25 | 300 | -0.5px | Section headings and project titles |
| body | 16px | 1.5 | 300 | -0.38px | Standard body text |
| small | 12px | 1.33 | 300 | 0px | Captions and metadata |

**Type rules:**
- All text uses Scto Grotesk A with a default weight of 300 (light).
- Negative letter spacing is applied consistently to display and heading sizes.
- Uppercase is used sparingly for labels and tags.

## 4. Spacing

Vertical rhythm is measured in expansive breaths, with 96 to 112 pixels of padding separating major sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 28 / 32 / 43 / 48 / 64 / 96 / 112 px
- **Rhythm:** Generous vertical padding (96px-112px) between major sections to emphasize scale.

## 5. Surfaces

Surfaces are flat and definitive, rendered without shadows to maintain a clean, architectural plane. Depth is communicated solely through scale and spacing, with minimal 1px borders appearing only where functional separation is required on tags and UI elements.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Borders:** Minimal 1px borders, often using white or gray, primarily on tags and UI elements.

## 6. Layout

The layout skeleton is a full-bleed, vertically stacked column. It prioritizes large typographic blocks and expansive image containers, creating a single, continuous scroll where each section commands its own visual territory.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A full-bleed, vertically stacked layout with large typographic blocks and image containers.

## 7. Motion & Interaction

Motion philosophy is one of professional subtlety, serving interaction feedback without theatrical flourish. All transitions follow a standard 0.3s cubic-bezier curve, applying smooth opacity and transform shifts to maintain a calm, controlled interface.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover.
  - Standard 0.3s transitions for color and background changes.

- **Hover:** Subtle opacity or color shifts on interactive elements.
- **Click:** Standard pointer interaction.
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1) for most properties.
- **Keyboard:** Standard focus behavior.

## 8. Voice & Don'ts

Editorial voice is confident, direct, and ambitious, delivered through large, declarative statements. It avoids clutter, using minimal and unobtrusive calls to action that are often simple text links or subtle tags.

- **Tone:** Confident, direct, and ambitious.
- **Headline style:** Large, declarative statements with a light font weight.
- **CTA style:** Minimal and unobtrusive, often simple text links or subtle tags.
- **Avoid:** Overly decorative elements / Bright, clashing accent colors / Dense information layouts

### Don'ts
- ❌ Don't use heavy font weights — screenshot shows a consistent use of light (300) weights.
- ❌ Don't use bright, saturated accent colors — screenshot shows a strict monochrome palette with neutral off-whites.
- ❌ Don't use centered text alignment — screenshot shows all major text blocks are left-aligned.
- ❌ Don't use complex drop shadows — screenshot shows entirely flat surfaces with no visible shadows.
- ❌ Don't use tight vertical spacing — screenshot shows generous padding (96px+) between sections.
- ❌ Don't use standard rectangular buttons — screenshot shows pill-shaped tags and thin-bordered tags instead.

What is deliberately absent is as defining as what is present: no heavy weights, no bright accents, no centered alignment, and no decorative shadows.

## System Prompt (paste into AI tool)

```
Josephmark is a high-end digital design studio. Their website uses a bold, minimalist dark theme with a strict monochrome palette (black #000000 and white #FFFFFF). The typography is set in Scto Grotesk A, a grotesque-sans, consistently at a light weight (300) with significant negative letter spacing. Layout is dominated by massive left-aligned headlines. Do not use heavy font weights, bright accent colors, or centered text. Avoid dense layouts; instead, use generous vertical padding (96px+) and minimal UI elements like thin-bordered pill tags. The overall feel should be confident, architectural, and restrained.
```
