/design-business-card

name: design-business-card
description: Generate a printable business card — pixel-exact 1050×600 front canvas + 1050×600 back canvas in a single HTML file. Standard 3.5×2 inch card at 300dpi. Front carries name + title + contact details; back is wordmark-dominant (or brand device) with minimal text. The design system's most reduced artifact — tests whether the brand can speak with almost no text. Print bleed instructions in footer comment. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "business card", "calling card", "name card", "/business-card".

Skill: business-card

Produces a single self-contained HTML file containing **two pixel-exact 1050×600 canvases** — the front and back of a standard 3.5×2 inch business card at 300dpi. Print-ready dimensions; bleed and crop notes documented at the end of the file.

This skill is the most extreme reduction test in the platform-skills set. A business card has ~6 square inches of total real estate; the brand must speak with nearly no text. If the brand can't hold its identity at this scale, the design system has a problem worth surfacing.

When to use

• User needs printed business cards (or digital equivalents — Apple Wallet, Linktree alternative)
• A `DESIGN.md` exists for the brand

Inputs

• **Required:** brand slug, name, title/role
• **Required:** primary contact (email OR URL — pick the one most likely to lead to a conversation)
• **Optional:** secondary contact (the other of email/URL)
• **Optional:** location (city · timezone)
• **Optional:** secondary handle (e.g. GitHub for engineering brands)

Output

`./design/<brand-slug>/artifacts/business-card-YYYY-MM-DD-<slug>.html`

Steps

1. Verify brand exists

test -f ./design/<brand-slug>/tokens.css

2. Gather the brief

Ask in one message:

1. Name — as it should appear on the card
2. Title / role — short, sentence-case (no periods on titles — they're labels not sentences)
3. Primary contact — pick ONE: email OR URL (the one you most want to receive)
4. Optional secondary contact — the other one
5. Optional location — city · timezone (e.g. "Louisville · GMT−5")
6. Optional secondary handle — e.g. "github.com/handle" for engineering brands

If the user wants more than 4 lines of text on the front, push back: "Business cards work at 4 lines max. What's essential?"

3. Pick variation — FRONT and BACK can use different archetypes

This is the rare skill where the front and back can take DIFFERENT visual approaches because they serve different functions (front = info; back = mark/identity):

**Front archetype:**

• `chrome-led` — name + title + contact-row, structured. Most common; readable.
• `type-only` — name at maximum scale, contact details small in corner. Confident.
• `inverse-text` — full canvas dark inversion (canonical v2 feature treatment). Bold.

**Back archetype:**

• `wordmark-dominant` — full brand wordmark centered or off-center; nothing else. The mark IS the back.
• `single-mark` — a single brand device (single character, monogram, or symbol) at maximum scale.
• `inverse-text` — dark inversion with wordmark in cream. Mirrors the front if front is also inverted.
• `chromeless` — the back is intentionally near-empty cream. The negative space IS the message.

**Color treatment** — pick a relationship between front and back:

• `same-surface` (both cream OR both inverted)
• `inverted-back` (front cream, back dark — a register flip when you turn the card)
• `inverted-front` (front dark, back cream — punchy front, quiet back)

4. Generate the HTML

Template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Business card — <name></title>
<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=<families>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; font-family: var(--type-sans-family); }
body { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 0; }

.canvas-label { font-family: var(--type-mono-family); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); align-self: center; }

/* Front + Back — both 1050×600 (3.5×2 inch at 300dpi) */
.canvas-front, .canvas-back {
  width: 1050px; height: 600px;
  position: relative; overflow: hidden;
  padding: 48px 56px;
  box-sizing: border-box;
  display: grid;
}

.canvas-front {
  background: var(--color-surface);
  color: var(--color-ink);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

.canvas-back {
  background: var(--color-surface);   /* or --color-ink for inversion */
  color: var(--color-ink);
  display: grid; place-items: center;  /* default for wordmark-dominant back */
}

/* === Front composition === */
.front-name {
  font-family: var(--type-display-family);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.0;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--color-ink);
}
.front-title {
  font-family: var(--type-display-family);
  font-weight: 600;
  font-variant-caps: small-caps; font-feature-settings: 'smcp';
  text-transform: lowercase;
  font-size: 16px; letter-spacing: 0.08em;
  color: var(--color-ink-3);
  margin: 12px 0 0;
}
.front-contact {
  align-self: end;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--type-mono-family);
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--color-ink);
}
.front-contact .secondary { color: var(--color-ink-3); }
.front-contact .label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-3); margin-right: 12px; }

/* === Back composition === */
.back-wordmark {
  font-family: var(--type-display-family);
  font-weight: 500;
  font-size: 84px;
  lett