K07 — Elements

Small parts, every state.

The atoms of PROOF: buttons, fields, chips, marks and labels, each with anatomy, spacing, all eight states, both themes and all five presets.

01

States

Every interactive element in all eight states. Focus-visible is a 2 px ink outline with 3 px offset in every preset; error adds an icon and dashed treatment so it never reads as the accent.

Default
Hover
Focus-visible
Active
Disabled
Loading
Error
Success
Primary button
Start a project
Start a project
Start a project
Start a project
Fully booked
Sending…
Retry send
✓ Sent
Secondary button
Book a call
Book a call
Book a call
Book a call
Book a call
Loading…
✕ Try again
✓ Booked
Text link
View case →
View case →
View case →
View case →
View case →
Loading…
✕ Link broken
✓ Copied
Text input
you@company.com
you@company.com
you@company.com
lea@
Locked
Checking…
lea@hofmark ✕ Add a domain, like .de
lea@hofmark.de ✓ Looks good
Budget chip
€9–18k
€9–18k
€9–18k
€9–18k
Under €4.5k
…
Pick one
✓ €9–18k
02

Anatomy & spacing

Specs for the two most-used elements. All spacing on the 4-pt scale.

Start a project → 48 px 24 gap 10 label 17/600
① Container: --accent, radius var(--radius), min 48 px
② Label: --f-body 17 px / 600, --on-accent
③ Icon: 18 px, trails label, moves 4 px on hover
Sizes: S 44 · M 48 · L 60 px
Work email For the reply
you@company.com
Helper or error, 13–15 px
① Label 15/600 above, never placeholder-only
② Hint right-aligned, optional
③ Field 1 px ink, min 48 px, padding 12 / 14
④ Message below, icon + text for errors
03

Themes × presets

The same five elements in all five presets, in Studio and Darkroom. Markup is identical; only semantic tokens change.

Editorial · Studio
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Editorial · Darkroom
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Gallery · Studio
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Gallery · Darkroom
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Raw · Studio
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Raw · Darkroom
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Playful · Studio
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Playful · Darkroom
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Cinematic · Studio
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
Cinematic · Darkroom
Start a project you@company.com
IdentityWeb
Booking Nov 2026 Final
04

Element catalog

Every element in the kit with its spec and a do/don’t. All render in the current preset; switch presets in the sidebar.

Text link
Hover me →
underline draws 0→100% · 240 ms
✓ One per paragraph.
✕ Underline every word on the page.
Icon button
44 × 44 · aria-label required
✓ Pair with a tooltip.
✕ Icon-only primary CTAs.
Budget-range chips
€4.5–9k €9–18k €18k+ Not sure yet
single select · min shown in hint
✓ Always offer “Not sure yet”.
✕ Hide the minimum.
Date & availability picker
M T W T F S S 1 2 3 4 5 6 7 8 9 10 11 12 13 14
booked = ink · open = red outline
✓ Show real booked weeks.
✕ Fake “only 1 slot left”.
File upload
Drop moodboards or briefs
PDF, JPG, PNG · 25 MB
drag-over: ink border · per-file status
✓ Accept links as an alternative.
✕ Require an upload.
Link field
https:// hofmark.de
prefix · validates on blur
✓ Accept “hofmark.de” without protocol.
✕ Reject valid URLs for a missing “www”.
Card checkbox / radio
Identity ✓
Packaging
min 56 px · whole card is the target
✓ Add a one-line sub-label.
✕ Checkbox without a label.
Switch
Newsletter
role=switch · aria-checked
✓ Instant settings only.
✕ Switches in forms that need “Submit”.
View toggle
Sheet List Gallery
aria-pressed · remembered per session
✓ Keep filters across views.
✕ Reset scroll on switch.
Discipline & industry tags
Identity Packaging Dairy Food
non-interactive · 13 px
✓ Max 4 per card.
✕ Tags as decoration.
Availability chip
Booked until mid-Nov Fully booked
dot + text · accent only when open
✓ Month and year.
✕ “Available soon!”
Price-anchor chip
From €9k
tabular · currency first
✓ Link to what’s included.
✕ “Starting at just…”
Metadata line
Hofmark Identity 2025 14 wks
Client · Role · Year · Scope
✓ Same order everywhere.
✕ Labels once learned.
Camera metadata
35 mm · f/2 · 1/250 s · ISO 400
mono · tabular · thin separators
✓ Show on hover or in lightbox.
✕ On every thumbnail at once.
Frame number
No. 17A
No. + 2 digits + edge letter
✓ Stable across views.
✕ Renumber on filter.
Proof stamps
Approved Final Featured
rotate −8…+6° · ink mask
✓ One per card.
✕ Stamp everything.
Annotation marks
€9k ← picked v3
line-draw 700 ms once
✓ Duplicate meaning in real text.
✕ Annotation as the only label.
Cursor labels
View Drag Play Zoom Open
fine pointers only · beside native cursor
✓ Label the action.
✕ Hide the native cursor.
Loupe
2.5× · 120–220 px · tap on touch
✓ On detail images.
✕ On every image.
Crop marks
12 px marks, 8 px outside trim
✓ Frame hero and detail images.
✕ Around text blocks.
Color bar
fixed top · 4–6 px · = scroll progress
✓ Decorative, aria-hidden.
✕ As a divider.
Caption & credits
Hofmark bottles, chiller shelf
Photo: Jonas Reyes · © 2025
14 px · credit on every image
✓ Credit the photographer.
✕ Caption-free galleries.
Pull-quote mark
“
display face · accent · aria-hidden
✓ One per page.
✕ Quote marks as decoration.
Avatars
JH
48 / 36 / 28 · initials fallback
✓ Real portraits.
✕ Stock faces.
Tooltip
i
on hover + focus · Esc closes
✓ Supplementary info.
✕ Required info in a tooltip.
Step progress
Step 3 of 6 · Budget
role=progressbar · text + bar
✓ Name the step.
✕ Percentages only.
Blur-up placeholder
32 px LQIP → sharp · 400 ms reveal
✓ Reserve the ratio (CLS 0).
✕ Spinners over images.
Skeleton
static · no shimmer loop
✓ Match final layout.
✕ Animated shimmer forever.
Toast
✓ Link copied Undo
role=status · 5 s · pauses on hover
✓ Offer undo.
✕ Errors in toasts only.