Applying a Handcrafted visual direction

You are applying Handcrafted to an existing web interface. Preserve the product’s purpose and information architecture; change the visual language so it feels authored by a person, tactile, and specific without making the mechanism feel unreliable.

What this means here

Use a disciplined layout as the ground, then add a small vocabulary of genuine human marks: a variable-width stroke, paper or ink material, a slightly placed object, or one handwritten accent. Imperfection belongs to the surface. Text, controls, hit areas, and focus states remain regular and predictable.

Recommendations

• Give one or two hand-drawn marks a communication job: route, annotation, emphasis, or signature.
• Use a paper, ink, or print-like material cue at a perceptible but restrained intensity.
• Keep rotation and offset small enough to read as hand placement, not a layout error.
• Pair one irregular display accent with a clear interface/body face.
• Build a legible grid first, then introduce deliberate breaks around the route or note.
• Keep essential information separate from texture and decorative marks.
• Use standard, rectangular controls with clear focus; the handmade treatment must not alter their mechanism.
• Check the smallest text against the darkest and lightest actual background behind it.

Avoid

• Covering every surface with doodles, grain, or random rotation.
• Handwritten body copy or irregular controls that slow parsing or reduce hit reliability.
• Generic stock illustration pretending to be a hand-made mark.
• Decorative texture carrying essential information.
• Removing focus indicators because they look too mechanical.
• Presenting fictional route, person, or performance data as real.

A working order

1. Name the product job and the one human mark that can clarify it.
2. Establish the content hierarchy and a regular underlying grid.
3. Choose a bounded material vocabulary: paper, graphite, ink, or one warm accent.
4. Select or draw one variable-width mark with a clear role.
5. Add the route, annotation, or callout before adding any supporting texture.
6. Introduce no more than two small placements or rotations.
7. Set body and utility text in a readable interface face; reserve irregular type for an accent.
8. Restore regular shapes, dimensions, and focus states to every interactive mechanism.
9. Verify texture, type, and marks at the smallest responsive size.
10. Remove any imperfection that reads as accidental or hides essential information.

How to check your own work

Ask whether the handmade layer explains or identifies something specific. Measure the worst text/background pairing, inspect the route at narrow width, and confirm that every real control stays rectangular, discoverable, and keyboard-visible. If the page feels broken rather than made, reduce the rotations and keep the purposeful mark.

Handcrafted — Specification

Definition

Handcrafted is a web-interface style that makes human authorship visible through purposeful hand-drawn marks, tactile material cues, and small authored irregularities over a disciplined structure. A route, annotation, or signature can feel placed by a person; essential information and interaction mechanisms remain regular and dependable.

Core principles

• Authored imperfection. Irregularity is a deliberate visual decision, not a rendering error.
• A mark has a job. A stroke, note, or texture clarifies a route, identity, or emphasis.
• Structure before deviation. A grid makes the breaks feel intentional.
• Mechanisms stay regular. Controls, hit areas, and focus states do not inherit decorative distortion.
• Material serves legibility. Texture is background atmosphere, never the carrier of essential information.

Visual characteristics

• Variable-width ink, pencil, or marker lines.
• Paper, print, or restrained ink texture.
• A route line, stop, annotation, or caption arranged with slight human placement.
• One irregular display accent paired with readable interface text.
• A warm paper-and-ink palette with one route accent.
• Regular control shapes and clear state boundaries.

Rules

1. Give the hand a communication role. A mark must explain, identify, or direct. Acceptance criterion: At least one hand-drawn mark labels a route, annotates content, or carries an identity cue; no decorative mark is present without a stated role.
2. Use a bounded material vocabulary. Tactile cues should feel like one authored kit. Acceptance criterion: The composition uses no more than three material cues from paper, graphite, ink, print grain, and stamp-like marks.
3. Make the primary mark genuinely irregular. Uniform borders do not count as hand-drawn. Acceptance criterion: The primary route or underline has visible variation in width, dash, or contour along its length at 100% zoom.
4. Build on a legible structure. The hand-made layer is a deviation from an understood order. Acceptance criterion: A viewer can identify a title, sequence, and supporting note without following any decorative mark.
5. Bound placement irregularity. Small shifts signal touch; large shifts signal breakage. Acceptance criterion: No more than two non-interactive elements use a 0.5–3° rotation or a 2–8px offset, and neither clips content.
6. Keep text readable. Irregular type is a controlled accent. Acceptance criterion: Body and utility copy use a readable interface face; one irregular family, if present, appears only in an accent position.
7. Separate essential information from texture. Material does not become an information dependency. Acceptance criterion: Removing texture and decorative marks leaves the title, route sequence, labels, and notes understandable.
8. Keep mechanisms regular. The style must not reduce interaction reliability. Acceptance criterion: Every interactive element is rectangular, has a predictable hit area, and retains a visible focus indicator; no control is rotated or textured as a control surface.
9. Use contrast at the worst texture point. Paper grain changes the background beneath text. Acceptance criterion: Essential text measures at least 4.5:1 against the lightest and darkest actual background it overlaps.
10. Use motion as a small reveal. Movement should extend the mark’s role, not turn the page into a performance. Acceptance criterion: At most one route or note reveal responds to preview hover; the static state remains complete and the catalogue grid stays still.

Avoid

• Random doodles, uncontrolled texture, or rotations that resemble a layout bug.
• Handwritten body copy, decorative marks carrying essential content, and irregular controls.
• Stock illustration used as a substitute for an authored mark.
• Fictional measurements or routes presented as real-world evidence.
• Focus states weakened to preserve a visual illusion.

Acceptance criteria

• A hand-made mark has a clear communication role.
• The material vocabulary is bounded to three cues or fewer.
• The primary mark visibly varies in width, dash, or contour.
• Title, sequence, and notes remain understandable without texture.
• Placement irregularity is limited, non-clipping, and non-interactive.
• Essential text meets 4.5:1 at the worst actual texture point.
• Preview motion is limited to one small reveal and has a complete static equivalent.

Blocking failures

• A control is rotated, irregular, or visually hidden by the handmade treatment, making the mechanism unreliable.
• Texture or a hand-drawn mark is required to understand essential route, status, or instructional content.
• Body copy becomes difficult to parse or essential text fails contrast over the real material ground.

Responsive adaptation guidance

• Reflow the route and its notes from map-like columns into a readable vertical sequence with @container queries, not viewport assumptions.
• Reduce rotation and texture intensity at narrow widths, then re-check contrast and clipping.
• Redraw or crop route marks rather than non-uniformly stretching them.
• Keep body text readable and controls regular at every container width; the 44px touch target floor applies to real controls.