Ultra-Minimal Portfolio

---
name: ultra-minimal-portfolio
description: Apply the Ultra-Minimal Portfolio visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Ultra-Minimal Portfolio, mentions name-and-links site, one-page portfolio, text-only portfolio, or describes near-empty page, black on white only, single sans-serif — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Ultra-Minimal Portfolio Design System

The near-blank personal site: a name, a sentence or two, and a handful of underlined links in one sans-serif on pure white. No imagery, no sections, no chrome — the emptiness is the statement of confidence.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Ultra-Minimal Portfolio.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (name-and-links site, one-page portfolio, text-only portfolio, near-blank portfolio, anti-portfolio), or describes its traits: near-empty page; black on white only; single sans-serif; hover underlines as the only interaction; one small text block.

## Design tokens

### Color palette

- Pure white — the page is mostly this: `#ffffff` (--color-bg)
- Pure black text: `#000000` (--color-text)
- There is no accent; links are black with underlines: `#000000` (--color-accent)

### Typography

- Display / headings: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.125 ratio, base 18px — computed steps: 18px / 20px / 23px / 26px / 29px / 32px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.3, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 32, 64, 128, 192 — Maximum whitespace — the text block occupies a small fraction of the viewport and everything else is deliberately empty.
- Border radius: none 0px — Nothing has corners because almost nothing has a box.
- Border treatment: none — No borders anywhere; the only line on the page is a link underline.

### Shadows

- none: `none` — Nothing is elevated; hierarchy comes from text order and the tiny 400/500 weight step

### Layout

- Max content width: 640px
- One text block, top-left with ~10vh/10vw offset or perfectly centered — pick one and never mix
- The entire site is often a single viewport with no scroll
- If work is listed, it is a plain vertical list of underlined links, one per line
- No footer, or a single muted line (email, year) at most

### Motion

- Easing: ease; durations 100ms / 150ms / 200ms
- Underline appears (or thickens) on hover — often the only animation on the site
- Optional single fade-in of the text block on load; nothing else moves

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-accent: #000000;
  --radius-none: 0px;
  --border-default: none;
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 18px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** There is no nav — the link list is the navigation
- **Hero:** The site: name at 18–20px/500, one- or two-sentence bio at 18px/400, blank line, then the link list
- **Card:** Does not exist; a 'project' is one underlined text link, optionally followed by an em dash and a two-word description
- **Button (primary):** An underlined black text link — the mailto link is the call to action
- **Button (secondary):** Same as primary; the style has exactly one link treatment
- **Form fields:** Avoided entirely — contact is a mailto link; if a field must exist, it is a bare black bottom-border input

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A single small text block — name, one-line bio, three to six links — floating top-left or dead center in an otherwise completely empty viewport. Spend boldness here; keep everything else quiet.

## Do

- Cut until only the essential remains, then cut once more — every surviving word earns its place
- Keep default-feeling type sizes (16–20px); oversized type would make this a different style
- Underline every link by default or on hover — with no color, the underline is the entire affordance
- Write well; with nothing else on the page, prose quality is the design

## Don't

- No images, logos, icons, or favicons beyond the browser default — visual work is linked, not embedded
- No color, gradients, borders, or backgrounds
- Don't center AND left-align different blocks; one alignment governs the whole page
- Don't add analytics-driven sections (testimonials, logos, CTAs) — the emptiness is the credibility

## Accessibility notes

- Pure black on pure white passes AAA at maximum ratio (21:1); some readers find it harsh — this style accepts that trade deliberately
- Links rely on underlines, which is the accessible default; ensure hover-only underlines still show a visible focus style for keyboard users
- A single-viewport page must still use a proper h1 and landmark structure despite its visual sparseness

## Reference sites

- Paco Coursey: https://paco.me
- Rauno Freiberg: https://rauno.me
- Read.cv alumni sites: https://read.cv

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip ultra-minimal-portfolio.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/ultra-minimal-portfolio.json

Settings → Capabilities → Skills → Upload skill → ultra-minimal-portfolio.zip