Runs in: Claude Code
Codex
Cursor
Gemini CLI
GitHub Copilot
OpenCode
Install guides: Claude Code Codex Cursor Gemini CLI GitHub Copilot OpenCode How to install a skill
Generates with: Your agent's model
Tested with: Claude Code 2.1.322Claude Sonnet 5.51 real run, 12 Nov
Needs: Node 20+Chrome
Licence: Recaply licence

Monochrome Designer Portfolio

A strict black-and-white designer portfolio: huge type, greyscale work that inverts on hover, clients and contact.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a strict black-and-white portfolio for a designer into your own project: pure white and black with one grey, a huge tight headline across the width, an index of projects with greyscale pictures that invert on hover, a client list, short about and a contact block. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a graphic, brand, type or interface designer wants a minimal, serious portfolio, or someone asks for a black-and-white, monochrome, Swiss-style site.

By RecaplyUpdated 12 Nov

Similar skills

All 735 skills

Research Report Hero

Editorial hero for a report

AI Task Assistant Landing Page

Lavender page for an AI app

Aurora Headphones Landing Page

Product page for headphones

Automation Flow Landing Page

Page with a node-flow hero

What you get

One HTML file with its CSS inside: no build step, no framework
A strict black-and-white portfolio for a designer
Checked at phone and desktop widths

Good fit

When a graphic, brand, type or interface designer wants a minimal, serious portfolio

Not for

An app with a backend, sign-in or a database
Copying another company's site

About this skill

You say

Build my portfolio website. Details in brief.md.

It said back

Sam's portfolio is built as plain HTML, CSS and JavaScript. It passes the check (check.mjs) at 390, 768 and 1440 px. That covers overflow, small text, alt text, contrast, focus styles, reduced motion, leftover sample words and symbol icons. I looked at the screenshots and fixed the picture drawings that were cut off or overlapping. After my last fix I only looked at the 768 px screenshot, not 390 or 1440 again. The "& Hollow" lettering still sits tight against the edge of its circle.

Files (in the work folder):

index.html
style.css
script.js
og.svg (the share image and favicon)

What it did in run 1

ls -la && cat brief.md
monochrome-designer-portfolio
cd ./.claude/skills/monochrome-designer-portfolio && ls -R . | head -30 && node scripts/check.mjs --ready; cat reference/index.html reference/style.css reference/script.js
./.claude/skills/monochrome-designer-portfolio/reference/index.html
./.claude/skills/monochrome-designer-portfolio/reference/script.js
cd ./.claude/skills/monochrome-designer-portfolio/reference && wc -c style.css && grep -n "about\|work-art\|logos\|Lindqvist\|sample" style.css | head -40
cd . && R=.claude/skills/monochrome-designer-portfolio/reference && cp $R/style.css style.css && cat > script.js <<'EOF' // Mark JS on, menu toggle, reveal on scroll (skipped with reduced motion), in-place form confirmation. document.documentElement.classList.add('js'); const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); for (const b of document.querySelectorAll('[data-nav-toggle]')) { const menu = document.getElementById(b.getAttribute('aria-controls')); const close = () => { b.setAttribute('aria-expanded', 'false'); menu && menu.classList.remove('open'); }; b.addEventListener('click', () => { const open = b.getAttribute('aria-expanded') !== 'true'; b.setAttribute('aria-expanded', String(open)); menu && menu.classList.toggle('open', open); }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && b.getAttribute('aria-expanded') === 'true') { close(); b.focus(); } }); menu && menu.addEventListener('click', (e) => { if (e.target.closest('a')) close(); }); } (() => { const els = document.querySelectorAll('.reveal'); if (reduceMotion.matches || !('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; } const io = new IntersectionObserver((entries) => { for (const en of entries) if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' }); els.forEach((e) => io.observe(e)); })(); for (const y of document.querySelectorAll('[data-year]')) y.textContent = new Date().getFullYear(); // Contact form: no server connected yet, so it confirms in place and says so. for (const f of document.querySelectorAll('[data-form]')) f.addEventListener('submit', (e) => { e.preventDefault(); const s = f.querySelector('.form-status'); if (s) s.textContent = 'Thanks. Nothing has been sent yet because this form is not connected. Please email sam@okorotype.com.'; f.reset(); }); EOF cat > index.html <<'EOF' <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sam Okoro: Type designer, London</title> <meta name="description" content="Sam Okoro is a type and lettering designer in London with ten years of work for newspapers, brands and museums."> <meta property="og:title" content="Sam Okoro: Type designer, London"> <meta property="og:description" content="Type and lettering designer in London. Custom typefaces, hand lettering and variable fonts."> <meta property="og:type" content="website"> <meta property="og:image" content="og.svg"> <link rel="icon" href="og.svg" type="image/svg+xml"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav nav-bar"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Sam Okoro home"><span>Sam Okoro</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu"><svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7h16M4 12h16M4 17h16"/></svg><span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#work">Index</a></li><li><a href="#clients">Clients</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li></ul></nav> </div></header> <main id="main"> <section class="hero hero-type"><div class="wrap hero-in"><div class="hero-words reveal"><h1>Sam Okoro draws <em>typefaces and lettering</em></h1><p class="hero-sub">Type and lettering designer in London. Ten years of drawing letters for newspapers, brands and museums.</p><div class="hero-ctas"><a class="btn btn-primary" href="#work">Project index<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a class="btn btn-ghost" href="#contact">Contact</a></div></div></div></section> <section class="sec work work-grid" id="work" aria-labelledby="work-h"><div class="wrap"><div class="sec-head"><h2 id="work-h">Index</h2></div><ul class="work-list"> <li class="work-item reveal"><a href="#contact" class="work-link"><div class="work-art"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><rect width="400" height="300" fill="#EEE"/><text x="30" y="215" font-family="Georgia,'Times New Roman',serif" font-size="210" font-weight="700" fill="#111">Lg</text><text x="250" y="215" font-family="Georgia,'Times New Roman',serif" font-size="150" font-style="italic" fill="#777">a</text><path d="M30 250H370" stroke="#111" stroke-width="4"/></svg></div><div class="work-meta"><h3>Ledger Serif</h3><p>Custom typeface for The Southwark Ledger newspaper, four weights with italics</p><span class="work-year">2024</span></div></a></li> <li class="work-item reveal"><a href="#contact" class="work-link"><div class="work-art"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><rect width="400" height="300" fill="#DDD"/><circle cx="200" cy="150" r="120" fill="#111"/><circle cx="200" cy="150" r="104" fill="none" stroke="#FFF" stroke-width="3"/><text x="200" y="140" text-anchor="middle" font-family="Georgia,serif" font-style="italic" font-weight="700" font-size="64" fill="#FFF">Hop</text><text x="200" y="205" text-anchor="middle" font-family="Georgia,serif" font-style="italic" font-weight="700" font-size="52" fill="#BBB">& Hollow</text></svg></div><div class="work-meta"><h3>Hop & Hollow</h3><p>Hand lettering for a brewery's twelve can designs</p><span class="work-year">2025</span></div></a></li> <li class="work-item reveal"><a href="#contact" class="work-link"><div class="work-art"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><rect width="400" height="300" fill="#F2F2F2"/><g font-family="'Inter Tight',Arial,sans-serif" font-size="150" fill="#111"><text x="14" y="190" font-weight="100">G</text><text x="110" y="190" font-weight="300">G</text><text x="206" y="190" font-weight="600">G</text><text x="302" y="190" font-weight="900">G</text></g><path d="M20 230H380" stroke="#555" stroke-width="2"/><path d="M20 224v12M380 224v12" stroke="#555" stroke-width="2"/></svg></div><div class="work-meta"><h3>Gallery Variable</h3><p>Variable font for the Thamesbank Museum, weights 100 to 900</p><span class="work-year">2023</span></div></a></li> <li class="work-item reveal"><a href="#contact" class="work-link"><div class="work-art"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><rect width="400" height="300" fill="#CCC"/><text x="22" y="200" font-family="'Inter Tight',Arial,sans-serif" font-weight="800" font-size="200" letter-spacing="-10" fill="#111">Ok</text><rect x="300" y="60" width="70" height="70" fill="#FFF"/><text x="335" y="110" text-anchor="middle" font-family="'Inter Tight',Arial,sans-serif" font-weight="700" font-size="48" fill="#111">8</text></svg></div><div class="work-meta"><h3>Okoro Grotesk</h3><p>My own retail family, eight styles</p><span class="work-year">2026</span></div></a></li> </ul></div></section> <section class="logos" id="clients" aria-label="Selected clients"><div class="wrap"><p class="logos-label">Selected clients</p><ul><li>The Southwark Ledger</li><li>Hop & Hollow Brewing</li><li>Thamesbank Museum</li><li>Penfold Books</li><li>Ridley Records</li><li>Studio Narrow</li></ul></div></section> <section class="sec about" id="about" aria-labelledby="about-h"><div class="wrap about-in"><div class="about-words reveal"><div class="sec-head"><h2 id="about-h">About</h2></div><p>I draw letters for people who need words to look like them: newspapers, brands and museums.</p><p>Type and lettering designer in London, working for ten years.</p></div><div class="about-art reveal"><svg viewBox="0 0 400 300" role="img" aria-label="Drawing of the letter S with construction lines" style="filter:grayscale(1)"><rect width="400" height="300" fill="#EEE"/><path d="M0 70H400M0 150H400M0 230H400" stroke="#777" stroke-width="1"/><text x="200" y="230" text-anchor="middle" font-family="'Inter Tight',Arial,sans-serif" font-weight="800" font-size="230" fill="#111">S</text></svg></div></div></section> <section class="sec contact" id="contact" aria-labelledby="contact-h"><div class="wrap contact-in"><div class="reveal"><div class="sec-head"><h2 id="contact-h">Contact</h2></div><p class="contact-line"><svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 6h18v12H3zM3 7l9 6 9-6"/></svg><a href="mailto:sam@okorotype.com">sam@okorotype.com</a></p><p class="contact-line"><svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="4"/><circle cx="12" cy="12" r="3.5"/><path d="M16.5 7.5h.01"/></svg><a href="https://www.instagram.com/okorotype/">Instagram @okorotype</a></p></div><form class="contact-form reveal" data-form aria-label="Contact form"><label class="field"><span>Your name</span><input name="name" type="text" required autocomplete="name"></label><label class="field"><span>Email</span><input name="email" type="email" required autocomplete="email"></label><label class="field"><span>What do you need drawn?</span><textarea name="message" rows="5" required></textarea></label><button class="btn btn-primary" type="submit">Send message</button><p class="form-status" role="status" aria-live="polite"></p></form></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html"><span>Sam Okoro</span></a><p>Type designer, London.</p></div><nav class="foot-col" aria-label="Elsewhere"><h2>Elsewhere</h2><ul><li><a href="https://www.instagram.com/okorotype/">Instagram</a></li></ul></nav><nav class="foot-col" aria-label="Pages"><h2>Pages</h2><ul><li><a href="#work">Index</a></li><li><a href="#clients">Clients</a></li><li><a href="#about">About</a></li></ul></nav><nav class="foot-col" aria-label="Contact"><h2>Contact</h2><ul><li><a href="mailto:sam@okorotype.com">Email</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Sam Okoro. All rights reserved.</p></div></footer> <script src="script.js" defer></script> </body> </html> EOF cat > og.svg <<'EOF' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630"><rect width="1200" height="630" fill="#fff"/><text x="60" y="400" font-family="Arial,sans-serif" font-weight="800" font-size="300" letter-spacing="-12" fill="#000">Sam Okoro</text><text x="64" y="520" font-family="monospace" font-size="40" fill="#000">TYPE DESIGNER, LONDON</text></svg> EOF node .claude/skills/monochrome-designer-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -40
cd . && cp .claude/skills/monochrome-designer-portfolio/reference/style.css style.css && ls
./script.js
./og.svg
./index.html
W=.; cp "$W/.claude/skills/monochrome-designer-portfolio/reference/style.css" "$W/style.css" && ls "$W"
./.claude/skills/monochrome-designer-portfolio/reference/style.css
./style.css
cd . && node .claude/skills/monochrome-designer-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -40
./check/390.png
./check/1440.png
sed -i '' -e 's/font-size="150" font-style="italic" fill="#777">a/font-size="110" font-style="italic" fill="#777">a/; s/<text x="250" y="215"/<text x="300" y="215"/; s/font-size="210" font-weight="700" fill="#111">Lg/font-size="190" font-weight="700" fill="#111">Lg/; s/font-size="52" fill="#BBB">& Hollow/font-size="38" fill="#BBB">\& Hollow/; s/font-size="150" fill="#111"><text x="14"/font-size="105" fill="#111"><text x="30"/; s/<text x="110" y="190" font-weight="300">/<text x="120" y="190" font-weight="300">/; s/<text x="206" y="190" font-weight="600">/<text x="210" y="190" font-weight="600">/; s/<text x="302" y="190" font-weight="900">/<text x="300" y="190" font-weight="900">/' index.html && grep -c 'font-size="38"' index.html && node .claude/skills/monochrome-designer-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -5
./index.html
./index.html
./index.html
node .claude/skills/monochrome-designer-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -5
./check/768.png
Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 32 s · $0.52 of API use

Questions

Is Monochrome Designer Portfolio free?

No. Monochrome Designer Portfolio costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Monochrome Designer Portfolio?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Monochrome Designer Portfolio?

A ZIP of the whole skill folder (39 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Monochrome Designer Portfolio?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./monochrome-designer-portfolio with your agent's flag.

What do I get from Monochrome Designer Portfolio?

One HTML file with its CSS inside: no build step, no framework. A strict black-and-white portfolio for a designer. Checked at phone and desktop widths.

What does Monochrome Designer Portfolio need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Monochrome Designer Portfolio?

7 files, about 29,733 tokens in all. The SKILL.md is about 2,439 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 2 min 32 s to 2 min 32 s and $0.52 to $0.52 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Monochrome Designer Portfolio to use it?

Type /monochrome-designer-portfolio first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.