Document 04 of 14 · DESIGN.md

Artisan PDF Studio, design direction

Mockups of this direction, plus two alternates drawn to be argued with, are on the design canvas at https://claude.ai/artifact/88arHMUX5p2ekQXW6gDEVo (sources in docs/mockups/).

This is the seed for DESIGN_SYSTEM.md in the new repo. It settles the identity before the first template ships, for the same reason measureandbuy settled its look before the paint tool: the new-template skill will encode whatever pattern the first three templates carry, and thirty templates later a change is a retrofit.

1. The idea: the site is a working print studio

The page is a desk. The templates are sheets lying on it. Everything the visitor does is what you would do at a studio counter: pick up a sheet, hold it to the light, ask for your name on it, pay, take it home. The site's job is to get out of the way of the paper.

That gives us three rules that decide most questions before they are asked:

1. Paper is white. Templates render on true white, always, because that is what comes out of the printer. The site around them is not white, so the sheets read as objects.
2. The sheet is the only image. No stock photography, no lifestyle shots of planners next to coffee. Every picture on the site is a real render of a real template, including the OG cards and the pins. This is the same standard that killed hero images on measureandbuy, applied to a site that is entirely images.
3. One accent, and it means "act". Red is for the price, the buy button, the proof stamp and the selected state. Nothing decorative is red.

The site ships one theme, light. The product is white paper, and a dark ground under a white sheet turns every preview into a lightbox. This is a decision, not an omission; record it in the new repo's DECISIONS.md.

2. Palette

The neutrals are pulled from a studio worktop, not from a cream-and-terracotta template.

Contrast is measured, not eyeballed, exactly as on measureandbuy: --ink-2 on --sheet, --pencil on --desk, --accent on both grounds, --kraft-ink on --kraft, white on --accent. Every pair passes 4.5:1 or it is not shipped. The trap measureandbuy hit three times applies here in reverse: anything dark placed on a white card inside the grey page must set its own colours; do not let a .desk a rule repaint links inside a sheet.

No template theme uses the site's own red (#b3261e): the "Studio" theme is oxblood, #8f2d2d, so a sheet on the template page never carries the same red as the buy button beside it. Inside a template, colours are the template's own and live in four variables the runtime can swap: --t-paper, --t-ink, --t-accent, --t-muted. A theme is a set of those four (plus optional extras the template declares). The site palette never leaks into a template and a template's palette never leaks into the site.

3. Typography

• Display: one self-hosted variable serif, Newsreader (SIL OFL, latin subset, optical sizes), for the wordmark, H1s, template titles and the hero. Editorial, warm without being cosy, and it has real italics for the wordmark. Alternative if the owner prefers portfolio consistency: Fraunces, already vetted on measureandbuy. One face is the budget; the same amendment to the no-webfont rule applies (self-hosted, preload, font-display: swap, OFL.txt beside the file, never a Google Fonts <link>).
• Body and UI: the system sans stack. Prose measure about 65 characters.
• Data: the system mono stack (ui-monospace, SFMono-Regular, Menlo, Consolas), tabular-nums, for prices, paper sizes, page counts, field counters, spec lists, order numbers. Every number on the site is mono. Same rule as measureandbuy.
• Scale: 13 / 15 / 17 / 22 / 28 / 40 / 64. Uppercase labels at 12px with 0.08em tracking.

Templates carry their own type systems, at most two faces each, chosen from the approved list in data/fonts.md. A template never uses the site's display face by default, so the templates look like a collection of different things made by one studio rather than one design repeated.

4. Signature devices

These are the equivalents of measureandbuy's live diagram: the parts that make the site recognisably itself.

1. The sheet frame. A component, .sheet, that shows a template at its true aspect ratio (8.5:11, or 210:297 when A4 is selected) with a two-layer shadow (a tight contact shadow and a soft ambient one), a hairline edge, and four crop marks just outside the corners in --pencil. On hover it lifts 4px and the shadow deepens. Multi-page templates show a second sheet offset 6px behind. It is used everywhere a template appears: cards, the template page hero, the customizer, the homepage. One component, one look.
2. The live sheet. The template page and the homepage do not show a picture of the template; they show the template, rendered by studio.js in an iframe, with the theme chips wired. Type your name on the homepage and it sets in the display face on the certificate. Tap a chip on the template page and the sheet repaints. The product demonstrates itself in the first three seconds.
3. The proof. In the customizer, the sheet carries a diagonal repeating "PROOF" in --accent at 8% opacity, pointer-events: none. It is honest (this is a proof, you have not bought it yet), it is the brand, and it makes a screenshot worth less than $7. The customizer's print stylesheet hides the stage entirely.
4. Theme chips. Drawn as paint chips: a tall rectangle with three stacked bands (the theme's paper, accent and ink), the theme name in mono under it. Selected state is a red outline and a small check; every chip is a <button aria-pressed>. The light-ink theme is always present and always says "printer-friendly" under it.
5. The color bar. A nine-square C M Y K strip, 6px tall, left-aligned, used as the divider between major sections on long pages. Once per section at most. It is the one motif on the site, and it stays small so it reads as a press mark rather than a rainbow.
6. Stamps. "FREE" as a kraft tag on cards that have a free version, "PROOF" over the customizer, "READY" on the success page. Uppercase mono, 2px border, rotated 3 degrees, used only in those three places.
7. The mark. A registration target (circle, crosshair, a small gap at the ring) as the favicon and beside the wordmark. It is one shape, it survives 16px, and it says "print" without saying it. Wordmark: "Artisan PDF Studio" in Newsreader 500, with "PDF" set in mono small caps as the one detail. The mark never carries a colour of its own; it inherits currentColor so header and footer variants come from CSS, which is the lesson measureandbuy learned about a mark that lived in five files.

Motion, in total: the sheet lift, the chip select, a 200ms cross-fade on the sheet when a theme changes so it does not flash, and a simple slide between pages on multi-page previews. No scroll effects, no parallax, nothing that plays on load. prefers-reduced-motion turns all of it off.

5. Page layouts

Shell

--wrap 1200px. Header on the desk: mark + wordmark left, nav right (Templates, Help, License), and a search field in Phase 2 that filters catalog.json on the client. Footer on --desk-2: the categories, the legal four, the Associates-style compliance line is not needed here (no affiliate program), the Synergy attribution the way measureandbuy does it ("Made by" + logo, "© 2026 Synergy"), and the email signup.

Template card

The sheet frame at about 300px wide, then the title in Newsreader 22, then one mono line: category, page count, price, and the kraft FREE tag if there is a free version. The whole card is one link, hit-tested at five points the way measureandbuy's cards are.

Template page

Two columns above 980px: the live sheet with its chips on the left (about 55%), and on the right the H1, promise, the two CTAs with the price on the paid one, and the "what is inside" spec list. Below, full width: description, print notes, FAQ, related. On mobile the sheet comes first, then the CTAs, and a fixed bottom bar carries the price and "Make it yours" until the real buttons scroll into view.

Customizer

• Desktop: grid-template-columns: 380px 1fr. Left column is a white panel with the field groups as <fieldset>s with real <legend>s: Text, Dates, Colors, Options, Logo, Paper size. Right column is the stage on --desk-2, the sheet centred and scaled to fit with transform: scale(), the proof over it, page thumbnails under it for multi-page templates.
• A sticky top bar (template name, price, the button) is the only thing that never scrolls away.
• Mobile: stage on top at 40vh with a "tap to expand" affordance, the panel under it, the fixed bottom bar with the price and button.
• Field components: text with a live counter ("12 / 40"), textarea with the same, select with a custom caret (house rule: never a bare native select), the theme chips, a toggle switch for show/hide sections, a logo dropzone that accepts PNG and JPEG only and downsizes on the client, a list editor for repeated rows (invoice lines, checklist items) with add, remove and drag to reorder, and a segmented control for Letter / A4.
• The overflow warning is a red one-liner under the offending field ("Too long for the ribbon by 3 characters") and the buy button goes to a disabled state that says why. This is the customizer's single most important behaviour and it gets tested on every template with the longest allowed value in every field.
• "Write it for me" is a small secondary button inside the textarea's footer on fields that allow it. It replaces the field's text with a draft and offers "Undo". Nothing else about the page changes; it is a helper, not a feature the page is built around.

Success page

White card on the desk with the READY stamp, the order number in mono, two buttons (Letter, A4), "A link is in your email and works for a year", "Make another". The failed state is the same card with the stamp replaced by a plain sentence and the order number, never a spinner.

Email

600px, white on the desk grey, the mark and wordmark, "Your invoice template is ready", the two buttons, the order number, one line of print advice, the Synergy footer. Inline CSS, no images that matter (the buttons are HTML). Same words on screen and in the email, so the two never disagree.

6. Rules for the templates themselves

These are the design half of the Studio Standard and they go in the new-template skill:

• A .sheet sized in physical units (8.5in by 11in, or 210mm by 297mm under .a4), @page { size: Letter; margin: 0 } with the A4 variant switched by a class, and 0.5in safe margins on every edge because home printers cannot print to the edge and the reader will not know that.
• A light-ink theme on every template. Backgrounds off, colour reduced to rules and one accent, so the planner someone prints fifty-two times does not cost a cartridge.
• Two faces at most, from data/fonts.md, as static instances (one file per weight and style). A variable font on a template prints as Type 3 outlines with no embedded font program and four times the file size; the render proof in spikes/render/ showed it. Minimum 8pt for anything a person is meant to read, 0.5pt for the thinnest rule.
• Decoration is CSS or SVG we drew. No raster art. No clip art.
• Every editable region has a fixed box and a data-max the runtime can measure against. A design that "just flows" cannot be guarded, so it is not a design we sell in v1. (This is why résumés wait for a second runtime; see CATALOG.md.)
• The template renders correctly with every field at its longest allowed value and with every optional field empty. Both states are in the sweep.
• Colours only through --t-* variables. A hard-coded hex in a template is a theme that cannot exist.

7. Traps carried over from measureandbuy, because they will recur

• Specificity. .desk a (class plus element) beats .button (bare class). Anything inside a white sheet on the grey page sets its own colour explicitly. Third time this shipped a bug on the sister site.
• ch on a wrapper resolves against the wrapper's font size, not the heading inside it. Put the measure on the heading.
• display: grid beats the UA [hidden] rule. Restate [hidden] { display: none } for any grid or flex container that toggles.
• Symmetric padding is not optical centring when a frame overlaps the element. Measure with real font metrics.
• Select carets never sit flush to the border. appearance: none, an inline-SVG chevron at right 14px center, padding-right: 38px.
• Measure the whole surface when one contrast pair fails. One bad pair usually means the ramp was never checked.
• Screenshot clipping is in page coordinates. Pin the page at scrollTo(0,0) before capturing a rect.
• html { scroll-behavior: smooth } makes scrollIntoView async, so hit-tests report zero unless the scroll is instant.