Proofmark — Template Guide

A guide built from the system — not a brochure about it.

This page shows how Proofmark actually works: the four proof surfaces, every reusable section and component you can inspect before editing, the real CMS model, and the exact order to replace demo content without weakening the evidence structure.

System Map

Four surfaces carry the whole template. Each one does a different job.

01 / Fast scan

Signal Ledger

A homepage proof strip for impact, scale, ownership, constraints, and domain.

Use it when a visitor needs credibility before they need the full story.

02 / Deep proof

Case Files

Project detail pages built from context, decisions, evidence, results, and reflection.

Use it for the projects that carry the most weight in hiring or consulting.

03 / Visible thinking

Field Notes

A writing surface for process notes, NDA-safe explanation, principles, and teardowns.

Use it when a full case study isn’t possible, or the thinking is the proof.

04 / Fit layer

About + Fit

A qualification layer for role fit, availability, work modes, location, and range.

Use it to remove back-and-forth before a recruiter or client reaches out.

Section Library

Reusable canvas sections and components. Duplicate what you need, then replace the proof.

Section / Split Header

Use it for orientation before depth — on Work, Notes, About, and detail pages.

About

Designer and consultant for complex work that needs context, structure, and proof.

The rail label orients, the headline carries the substance. Edit those three fields and the page keeps its read.

Edit rule: keep the rail label short and structural. Let the headline do the talking.

Component / Signal Ledger

Use it on the homepage to turn scattered strengths into scannable, inspectable proof.

Scale

Reusable onboarding system

Shipped a shared onboarding pattern adopted across product, support, and operations.

Enterprise platform · Quarter rollout · Cross-functional
3 units
Ownership

Design system foundation

Defined interaction logic, component rules, and rollout sequencing for a new product surface.

0→1 product surface · Design systems · Senior IC
Led direction
Constraint

Regulatory review workflow

Delivered a review system under compliance pressure without delaying launch.

Finserv · Compliance review · Legacy constraints
4 months

Edit rule: one concrete signal per row. No vague traits like “passionate” or “strategic” without evidence.

Component / Core Signals

Use it near the hero or on About to show role, focus, capability, and proof context before a visitor reads deeper.

Edit rule: keep the labels concrete. Use this for role-fit and proof context, not random personality traits.

Section / Featured Case

Use it when one project needs more weight than a standard list row — usually near the top of Home or Work.

Edit rule: lead with the decision, constraint, or outcome. Do not make this a decorative project card.

Component / Index Row

Use it for Work, Field Notes, related projects, and any compact proof list.

Essay

Why process is not proof

A note on turning project write-ups into evidence a reviewer can actually inspect.

Edit rule: one row should answer what it is, why it matters, and where it leads. Open the component controls to change density, dividers, and arrow visibility.

Component / Fit Grid

Use it to make availability, location, work mode, domains, and hiring fit scannable — on About or Resume.

Location
Remote, US
Target Roles
Staff Product Designer
Timezone
Pacific Time
Work Modes
Full time, contract, fractional
Availability
2 week notice / Select advisory
Core Domains
B2B, fintech, internal tools, data-heavy platforms
Work Authorization
Work in US
Preferred Environment
Engineering / product teams, ambigous systems, complex workflows

Edit rule: keep this factual. This section is for qualification, not biography. Open the controls for preset, columns, and density.

Section / CTA Band

Use it at the end of Work, Notes, About, Resume, or any custom page to give the visitor one clear next step.

Have a problem worth proving?

A single, specific invitation — review selected work, read the resume, or start a conversation.

Edit rule: give each page one next step. Resume, email, contact, or selected work — not all at once.

CMS Map

Two collections. No fake enterprise schema. Work carries case studies, Field Notes carries thinking.

Projects

8 entries · /work · /work/:Projects

Case files, featured work, and project detail pages. The deep-proof surface.

Identity

Title, Slug, Work Type, Primary Capability

Headline

Kicker, Featured Headline, One-Line Summary, Evidence Line

Meta

Client / Organization, Role / Scope, Timeframe, Cover Image

Flags

Featured, Confidential

Body

Section 1–4 — Title, Subtitle, Body, Gallery

Convert

CTA Label, CTA URL

SEO

SEO Title, SEO Description, Social Image

Field Notes

8 entries · /field-notes · /field-notes/:Field Notes

Essays, memos, principles, and NDA-safe thinking. The visible-thinking surface.

Identity

Title, Slug, Note Type, Featured

Meta

Publish Date, Short Summary

Body

Article Body (rich text)

SEO

SEO Title, SEO Description

Rule

Don’t add collections for testimonials, services, or clients in the default file. That creates complexity before it creates value.

Page Anatomy

What goes into a case study and a field note, top to bottom. Structure, not styling.

Case Page

Hero summary

Meta rail

Executive summary

Core shift

Evidence sections

Outcomes

Reflection

Next project

Edit rule: the case page should show what changed, what decisions mattered, and what proof supports the story.

Field Note

Title

Dek

Date / type

Body

Key takeaway

Related work

Next note

Edit rule: field notes should prove thinking in smaller, publishable slices.

Responsive Rule

How the rail system behaves across breakpoints.

Desktop uses the left rail system — sticky labels beside the content column.

Tablet compresses spacing and narrows the rail, keeping the two-column relationship.

Phone stacks the rail above the content so sections read top to bottom.

Edit rule: change phone layouts intentionally. Do not assume desktop spacing will survive on mobile.

Writing Prompts

The buyer doesn’t need prettier filler. They need sharper questions for each case.

Role

What did you personally own?

Owned discovery synthesis, IA, prototype direction, stakeholder reviews, and handoff logic.

Constraint

What made this hard?

Legacy permissions, partial analytics, compliance review, and a six-week release window.

Decision

What did you choose, reject, or simplify?

Cut the comparison table and moved users into a guided sequence with fewer failure paths.

Evidence

What proves the work happened or mattered?

Annotated flows, support-ticket themes, test notes, a rollout memo, and shipped interface states.

Outcome

What changed after the work shipped?

Reduced handoff ambiguity, shortened review cycles, and improved adoption across two internal teams.

Setup Order

Replace content in this order. Most people break premium templates by styling too early.

01

Replace the identity layer

Update hero copy, name, footer, socials, resume link, and email before touching any styling.

02

Add two to four Projects

Start with fewer, stronger case files. Fill summary, role, capability, timeframe, and cover media first.

03

Rewrite the Signal Ledger

Turn vague strengths into inspectable proof: ownership, constraint, scale, shipped work, or recognition.

04

Build the case skim layer

Each project should expose what changed, what you owned, why it was hard, and what evidence supports it.

05

Add Field Notes only where useful

Use notes for judgment, NDA-safe thinking, or operating principles. Don’t add blog filler.

06

Update About and Fit

Make fit easy to inspect: location, timezone, work modes, target roles, authorization, and availability.

07

Remove Guide from the public nav

Keep this page for marketplace preview and buyer onboarding. Remove it before publishing the final personal site.

Do Not Break

The few things that quietly break the system if you remove them.

Do not delete CMS bindings unless you are replacing them.

Do not detach code components unless you are customizing deeply.

Do not rename CMS fields without checking the connected layers.

Do not remove the footer reveal spacer unless you are rebuilding the footer.

Do not leave this Guide page in public navigation unless you want visitors to see it.

Before Publish

The final QA pass is not optional. These are the things buyers forget.

Replace every demo name, link, email, and resume file.

Confirm Projects and Field Notes slugs are clean and human-readable.

Check desktop, tablet, and phone — especially nav, sticky rails, and list rows.

Swap placeholder images for artifacts that match the work category.

Test all CTA links, mailto links, social links, and downloadable files.

Confirm every page has one clear H1 and no broken CMS fallbacks.

Remove this Guide page from the nav before publishing the buyer’s final site.

Final instruction

Keep the structure. Replace the proof.

Proofmark isn’t trying to make every portfolio sound the same. It gives the work a stronger grammar: context, decision, evidence, outcome, and fit. Fill that in honestly and the template does the rest.

Create a free website with Framer, the website builder loved by startups, designers and agencies.