K01 — Principles

Twelve rules. The work leads the rest.

Every component in PROOF answers to these. When a design decision is unclear, pick the option that shows more work, asks less of the visitor and reads for everyone.

01–04

Design

01

The work leads.

Work comes first on every page: above the fold, before the bio, before the services. The person behind it appears in context, not in a headshot hero.

✓ Do
Open the home page with one project at full width, credited and dated.
✕ Don’t
Open with “Hi, I’m Mara, a passionate designer.”
02

One accent, used like a grease pencil.

Red marks the chosen next step: CTAs, selections and annotations that matter. Nothing else is red, so the eye always knows where to go.

✓ Do
One red element per view, two at most.
✕ Don’t
Red headings, red icons, red dividers, red hover states on everything.
03

Print heritage, digital craft.

Crop marks, hairlines, frame numbers and radius 0 come from the proof sheet. They frame the work and never compete with it.

✓ Do
1 px hairlines, crop marks on hero images, frame numbers on indexes.
✕ Don’t
Floating device mockups, drop shadows on work, glassmorphism.
04

Remix, don’t template.

Five presets change type, color mood, grid, motion, cursor and image treatment. The accent logic and the conversion system stay fixed.

✓ Do
Start from the preset closest to your practice, then override semantic tokens.
✕ Don’t
Edit component internals to change a color or a font.
05–08

Conversion

05

“Start a project” is never more than a scroll away.

In the header, at the end of every case study, on pricing and in the footer. The brief builder does the qualifying so the first call can be about the work.

✓ Do
A persistent header CTA plus a closing CTA on every page.
✕ Don’t
A contact page as the only way in, or an email address hidden behind a form.
06

Show your price range.

Serious clients qualify themselves. A price anchor saves both sides a call and signals confidence.

✓ Do
“Brand identity · From €9k · 6–8 weeks”, with what’s included.
✕ Don’t
“Get in touch for pricing.”
07

Proof over claims.

Results, context and the decisions behind them, instead of adjectives. Label illustrative figures as such.

✓ Do
“Online orders +38% in six months.” With the brief and the constraint.
✕ Don’t
“Results-driven, award-winning creative.”
08

Credit everyone.

Every project names its collaborators. Credits build trust, and they are how this industry refers work.

✓ Do
Client · Role · Year · Scope, then the team with links.
✕ Don’t
“We” when a studio built the site and a friend shot the photos.
09–12

Accessibility

09

Contrast is not a style choice.

WCAG 2.2 AA is the floor everywhere; body text aims for AAA. Ratios are listed next to every token pair in K02.

✓ Do
Full-ink captions on a solid bar under photography.
✕ Don’t
Tiny grey text on paper, or white text straight on a busy photo.
10

Readable by default.

Body copy is at least 16 px (18 px in Editorial) at 60–75 characters per line. Numbers that get compared use tabular figures.

✓ Do
13 px mono metadata at full muted contrast.
✕ Don’t
11 px letter-spaced captions at 40% opacity.
11

Motion is optional.

Everything respects reduced motion. No scroll-jacking, parallax under 10%, sound off until asked, and forms stay calm in every preset.

✓ Do
Reveals that finish in under a second and never block reading.
✕ Don’t
Hijack the scroll wheel to tell a story.
12

Never hide the pointer.

Labeled cursor states (View, Drag, Play, Zoom) appear on fine pointers only, next to the native cursor. Touch gets tap-to-inspect and 44 px targets.

✓ Do
A small “View” label that follows the arrow.
✕ Don’t
A custom dot that replaces the cursor with no fallback.
Map

Every visitor gets a next step

Primary conversion is “Start a project”. Secondary is “Book a 20-min call”. Everything else is a micro-conversion that keeps the relationship going.

Audience
They check
Next step
Marketing leads, founders, owners
Fit, quality, process, budget, timeline
Start a project · Book a call
Agencies and studios
Availability, rates, reliability, depth
Check availability · Download CV
Art directors and editors
Style, range, usage rights
Request a quote · License an image
Private clients
Trust, process, price
Booking inquiry
Product buyers
Prints, presets, templates, brushes
Buy · License
Recruiters and employers
Experience, skills, references
Download CV · Contact
Followers from social
What’s new, what’s for sale
Link-in-bio · Newsletter · Shop