---
name: Josephmark Studio
description: "An excellent reference for bold, minimalist agency portfolios that rely on typography and scale rather than complex UI components."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#666666"
  neutral: "#666666"
  bg-soft: "#F4F5EF"
  muted-soft: "#A9A498"
  line: "rgba(255, 255, 255, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-1px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.25
    fontWeight: 300
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 300
    letterSpacing: "-0.38px"
  small:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 28px
  3xl: 32px

---

## Overview

A bold, dark-themed digital studio portfolio characterized by massive typography and a minimalist, high-contrast aesthetic.

*A high-end architectural firm: clean lines, confident statements, and a focus on structural clarity.*

## Colors

High-contrast dark mode with neutral off-whites and grays for secondary elements.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous vertical padding (96px-112px) between major sections to emphasize scale.

## Elevation & Depth

- Borders: Minimal 1px borders, often using white or gray, primarily on tags and UI elements.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Pill-shaped tags with thin borders (e.g., 'Brand', 'Digital Product') and simple text links.
- **card:** Large image-based project showcases with left-aligned typography and pill-shaped category tags below.
- **chip:** Small, pill-shaped category tags with thin borders.
- **hero:** A full-viewport dark section featuring massive, left-aligned light typography.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```