name	paperclip-punkify
description	Create or restyle frontend interfaces in a paperclip punk editorial-technical style inspired by old computer manuals, monochrome print layouts, electric-blue blueprint line art, pixel labels, dense serif text, and diagram-heavy web pages like Making Software. Use when the user asks for this style, a retro technical manual aesthetic, blueprint editorial UI, or to paperclip-punkify a page or app.

Paperclip Punkify

Use this skill to design or restyle frontend work into a precise "paperclip punk" look: a web page that feels like a found 1980s technical manual, a photocopied engineering book, and a browser-native editorial artifact at the same time.

This is not a general creativity skill. Commit to this one aesthetic and execute it with restraint.

Core Style

Page as printed matter: Off-white paper background, narrow reading columns, generous margins, visible page rhythm, and a composed spread-like layout.
Electric blueprint accent: Use one saturated technical blue for headings, rules, diagrams, and annotations. Keep most other color black, gray, and paper.
Technical diagrams first: Include original line drawings, exploded views, small schematics, coordinate grids, measurement ticks, labels, and figure captions. Prefer generated SVG/CSS/canvas diagrams or generated bitmap illustrations over stock imagery.
Old-computer typography: Pair a sharp serif body face with a pixel/bitmap or monospaced display face. Use drop caps, small caps, figure labels, vertical captions, and typeset tables.
Dense but calm: Let the layout be information-rich without becoming a SaaS dashboard. Favor editorial sequencing, captions, and diagrams over cards and marketing blocks.
Visible artifact texture: Subtle halftone dots, scan lines, faint paper grain, registration marks, dashed rules, boxed labels, or ruler ticks are useful when restrained.

Implementation Recipe

Establish CSS variables for paper, ink, muted ink, technical blue, hairline borders, and page width.
Build the first screen as a manual page, not a landing page: title, short deck text, separator rule, body column, and a strong technical diagram.
Use asymmetric editorial composition: one narrow text column paired with one oversized diagram, or a two-column spread with captions in the gutter.
Add recurring figure systems: FIG_001, bracketed object labels, vertical side labels, copyright/year jokes, or coordinate markers.
Create original diagrams related to the product/domain. If the domain has no physical object, diagram the system, data flow, state machine, UI anatomy, protocol exchange, or mental model.
Make interactive states feel mechanical: snap transitions, stepped progress bars, cursor-like indicators, typewriter reveals, toggle switches, clipped outlines, or blueprint hover annotations.
Verify responsive behavior. On mobile, preserve the manual feel with stacked columns, full-width diagrams, legible captions, and no overlapping vertical labels.

Visual Rules

Use a restrained palette:
- Paper: #f7f7f2, #fbfaf4, or similar.
- Ink: near-black, not pure black when possible.
- Accent: one vivid blue such as #315dff, #244cff, or #2f5cff.
- Optional muted gray for rules and captions.
Avoid gradients as the main visual language. If texture is needed, use low-opacity noise, dot grids, or repeated-linear-gradient scan lines.
Avoid rounded cards. Use rules, columns, tables, captions, and diagram frames instead.
Avoid glossy shadows, glassmorphism, purple gradients, generic SaaS hero layouts, orb backgrounds, emoji decoration, and stock photos.
Use thin 1px lines, dashed construction lines, and labelled arrows. Keep line weights consistent.
Let blue carry drawings and headings; let black carry body text.

Typography Rules

Body: choose a literary serif or use the existing project serif. Good web-font directions: Newsreader, EB Garamond, Fraunces, Cormorant Garamond, Libre Baskerville, or a careful Georgia fallback.
Display/labels: use a pixel, bitmap, terminal, or monospace face. Good directions: Departure Mono, Berkeley Mono, IBM Plex Mono, Space Mono, VT323, Press Start 2P when legibility allows.
Use small body sizes only when line length is controlled. Do not make dense text illegible.
Use drop caps only for editorial prose, not for form labels or dense app chrome.
Keep letter spacing at 0 for ordinary text. Use uppercase labels sparingly and deliberately.

Components That Fit

Table of contents with numbered sections, word counts, status bars, or completion meters.
FAQ as a bordered table, not accordion cards.
Signup form as a small mechanical insert with a single-line input and square button.
Product features as annotated diagrams, not icon cards.
Pricing as a ledger, parts list, receipt, bill of materials, or spec table.
Navigation as a compact manual header, page tabs, or index strip.
Empty states as labelled diagrams or maintenance notes.

Code Guidance

Prefer CSS/SVG for diagrams when the subject is geometric or schematic.
Use generated bitmap images only when texture, illustration, or physical object rendering matters.
Keep semantics and accessibility intact. The aesthetic should not require unreadable text, unlabeled controls, or image-only information.
If modifying an existing app, preserve its component architecture and design tokens where practical, but reinterpret the surface through this visual system.
For React/Next apps, create reusable primitives such as Figure, SpecTable, ManualRule, BlueprintDiagram, and PixelLabel only when repeated.

Verification Checklist

The first viewport immediately reads as a technical manual/editorial artifact.
There is at least one substantial original diagram or technical visual.
The palette is mostly paper, ink, and one electric blue.
No generic SaaS cards, stock-photo hero, purple gradient, glass panel, or decorative orb remains.
Text and labels do not overlap on mobile or desktop.
Interactive controls remain obvious and accessible.

Copyright Boundary

Do not copy Making Software text, illustrations, layout assets, or exact page content unless the user provides them and asks for that use. Replicate the design language through original composition, diagrams, typography, color, and interaction patterns.

Paperclip Punkify

This is not a general creativity skill. Commit to this one aesthetic and execute it with restraint.

Core Style

Page as printed matter: Off-white paper background, narrow reading columns, generous margins, visible page rhythm, and a composed spread-like layout.

Electric blueprint accent: Use one saturated technical blue for headings, rules, diagrams, and annotations. Keep most other color black, gray, and paper.

Technical diagrams first: Include original line drawings, exploded views, small schematics, coordinate grids, measurement ticks, labels, and figure captions. Prefer generated SVG/CSS/canvas diagrams or generated bitmap illustrations over stock imagery.

Old-computer typography: Pair a sharp serif body face with a pixel/bitmap or monospaced display face. Use drop caps, small caps, figure labels, vertical captions, and typeset tables.

Dense but calm: Let the layout be information-rich without becoming a SaaS dashboard. Favor editorial sequencing, captions, and diagrams over cards and marketing blocks.

Visible artifact texture: Subtle halftone dots, scan lines, faint paper grain, registration marks, dashed rules, boxed labels, or ruler ticks are useful when restrained.

Implementation Recipe

Establish CSS variables for paper, ink, muted ink, technical blue, hairline borders, and page width.

Build the first screen as a manual page, not a landing page: title, short deck text, separator rule, body column, and a strong technical diagram.

Use asymmetric editorial composition: one narrow text column paired with one oversized diagram, or a two-column spread with captions in the gutter.

Add recurring figure systems: FIG_001, bracketed object labels, vertical side labels, copyright/year jokes, or coordinate markers.

Create original diagrams related to the product/domain. If the domain has no physical object, diagram the system, data flow, state machine, UI anatomy, protocol exchange, or mental model.

Make interactive states feel mechanical: snap transitions, stepped progress bars, cursor-like indicators, typewriter reveals, toggle switches, clipped outlines, or blueprint hover annotations.

Verify responsive behavior. On mobile, preserve the manual feel with stacked columns, full-width diagrams, legible captions, and no overlapping vertical labels.

Visual Rules

Use a restrained palette:

Paper: #f7f7f2, #fbfaf4, or similar.
Ink: near-black, not pure black when possible.
Accent: one vivid blue such as #315dff, #244cff, or #2f5cff.
Optional muted gray for rules and captions.

Avoid gradients as the main visual language. If texture is needed, use low-opacity noise, dot grids, or repeated-linear-gradient scan lines.

Avoid rounded cards. Use rules, columns, tables, captions, and diagram frames instead.

Avoid glossy shadows, glassmorphism, purple gradients, generic SaaS hero layouts, orb backgrounds, emoji decoration, and stock photos.

Use thin 1px lines, dashed construction lines, and labelled arrows. Keep line weights consistent.

Let blue carry drawings and headings; let black carry body text.

Typography Rules

Body: choose a literary serif or use the existing project serif. Good web-font directions: Newsreader, EB Garamond, Fraunces, Cormorant Garamond, Libre Baskerville, or a careful Georgia fallback.

Display/labels: use a pixel, bitmap, terminal, or monospace face. Good directions: Departure Mono, Berkeley Mono, IBM Plex Mono, Space Mono, VT323, Press Start 2P when legibility allows.

Use small body sizes only when line length is controlled. Do not make dense text illegible.

Use drop caps only for editorial prose, not for form labels or dense app chrome.

Keep letter spacing at 0 for ordinary text. Use uppercase labels sparingly and deliberately.

Components That Fit

Table of contents with numbered sections, word counts, status bars, or completion meters.

FAQ as a bordered table, not accordion cards.

Signup form as a small mechanical insert with a single-line input and square button.

Product features as annotated diagrams, not icon cards.

Pricing as a ledger, parts list, receipt, bill of materials, or spec table.

Navigation as a compact manual header, page tabs, or index strip.

Empty states as labelled diagrams or maintenance notes.

Code Guidance

Prefer CSS/SVG for diagrams when the subject is geometric or schematic.

Use generated bitmap images only when texture, illustration, or physical object rendering matters.

Keep semantics and accessibility intact. The aesthetic should not require unreadable text, unlabeled controls, or image-only information.

If modifying an existing app, preserve its component architecture and design tokens where practical, but reinterpret the surface through this visual system.

For React/Next apps, create reusable primitives such as Figure, SpecTable, ManualRule, BlueprintDiagram, and PixelLabel only when repeated.

Verification Checklist

The first viewport immediately reads as a technical manual/editorial artifact.

There is at least one substantial original diagram or technical visual.

The palette is mostly paper, ink, and one electric blue.

No generic SaaS cards, stock-photo hero, purple gradient, glass panel, or decorative orb remains.

Text and labels do not overlap on mobile or desktop.

Interactive controls remain obvious and accessible.

paperclip-punkify