# Joshuakaplan · Design system migration spec

> Source: https://www.joshuakaplan.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a data-driven, typographic portfolio where the structure itself becomes the primary design element.

## 1. Identity DNA

This portfolio operates as a meticulously organized index, where the structure itself is the primary design statement. The system prioritizes clarity and information hierarchy above all else, creating a space that feels both systematic and deeply refined.

**One-liner:** A highly structured, typographically-driven designer portfolio that prioritizes information hierarchy through a clean, grid-based layout.
**Keywords:** minimalist · typographic · systematic · structured · refined
**Analogy:** A meticulously organized design portfolio, functioning like a structured index or ledger.

## 2. Color

The palette is a study in stark contrast, built on a strict monochrome of black and white. A single high-chroma lime green is reserved exclusively for status indicators, acting as a functional signal within the field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.75)` | secondary text |
| `--muted` | `rgba(0,0,0,0.5)` | placeholder |
| `--muted-soft` | `rgba(0,0,0,0.7)` | weak hint |
| `--accent` | `#CDFF8B` | single accent |
| `--line` | `rgba(0,0,0,0.75)` | divider |

**Color principle:** A stark, high-contrast palette of black and white, using a single bright lime green accent for status indicators.

Color here is not decorative; it is information.

## 3. Typography

Typographic voice is singular and disciplined: a medium-weight sans-serif applied with a very tight line height. The scale is deliberately constrained, using 16px and 12px to establish a clear, unwavering hierarchy.

- **Display:** sans-serif
- **Body:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.0 | 500 | normal | Headings and navigation |
| body | 12px | 1.17 | 500 | normal | Body text and project details |

**Type rules:**
- All text uses a medium weight (500) sans-serif font.
- Line height is very tight, often around 1.0 to 1.2.
- Font size is consistently small, with 16px and 12px being the primary sizes.

## 4. Spacing

A tight, consistent 8px rhythm governs internal cell padding, establishing a granular and even pace across the grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Tight, consistent 8px padding is used within grid cells, with horizontal rules defining major sections.

## 5. Surfaces

Depth is absent by design; the interface is entirely flat, relying on thin, single-pixel horizontal rules for separation. These borders are the only visual dividers, creating a clean, ledger-like segmentation of content.

- **Radius:** sm 0px · md 0px · lg 0px · pill 20px
- **Borders:** 1px solid rgba(0,0,0,0.75) horizontal rules are used extensively to separate rows and sections.

## 6. Layout

The layout is a single vertical column composed of data-rich rows. Each row is subdivided into four aligned columns of varying widths, creating a structured, tabular skeleton for all content.

- **Container max:** 1200px
- **Grid:** 4 columns, gutter 0px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single-column vertical stack of rows, with rows divided into 4 columns of varying widths.

## 7. Motion & Interaction

Motion is subtle and utilitarian, applied as a global transition to all elements. The philosophy is one of smooth, simple state changes rather than pronounced animation, keeping the focus on the content's structural clarity.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Transitions on all interactive elements.

- **Hover:** Text links change color to blue on hover.
- **Click:** Standard pointer cursor on clickable elements.
- **Transition:** All elements have a transition property applied.
- **Keyboard:** Standard focus and tab behavior for links.

## 8. Voice & Don'ts

The editorial voice is professional, concise, and systematic, mirroring the visual rigor. Headlines state facts directly—roles and locations—and navigation is presented as simple, unadorned text links.

- **Tone:** Professional, concise, and systematic.
- **Headline style:** Direct and informational, stating roles and locations.
- **CTA style:** Simple, unadorned text links for navigation.
- **Avoid:** Decorative language / Marketing jargon / Excessive adjectives

### Don'ts
- ❌ Don't use rounded corners on containers — the screenshot shows sharp 90-degree corners on all rows and sections.
- ❌ Don't use drop shadows or elevation — the screenshot shows a completely flat design with no shadows.
- ❌ Don't use multiple accent colors — the screenshot shows a monochrome palette with only one lime green accent for status pills.
- ❌ Don't use large, varied typography — the screenshot shows a very tight typographic scale with minimal size variation.
- ❌ Don't use heavy borders or boxes — the screenshot shows only thin, single-pixel horizontal rules for separation.
- ❌ Don't use decorative imagery or background patterns — the screenshot shows a plain white background with no imagery except for logos.

The system deliberately forgoes decorative imagery, background patterns, rounded containers, and any form of visual elevation.

## System Prompt (paste into AI tool)

```
This is a highly structured, minimalist designer portfolio. It uses a stark, high-contrast black-and-white palette with a single lime green accent (#CDFF8B) for status indicators. Typography is exclusively a medium-weight sans-serif, used in a very tight scale (16px and 12px) with a line height of around 1.0 to 1.2. The layout is a systematic, single-column grid of rows divided into four aligned columns, defined by thin horizontal rules. Key critical donts: Do not use rounded corners on main containers. Do not add drop shadows or elevation effects. Do not introduce multiple accent colors or decorative imagery. The design is purely typographic and structural.
```