Sketchmorphism — An Original Design Language

Fig. 00 — The doctrine

Seven laws, one hand

01
Stroke over border
Edges are drawn strokes with pressure and curvature — never flat CSS borders.
02
Hatch over shadow
Elevation is hatched graphite at 47°. No blur, no drop shadows.
03
Three pencils only
Graphite carries content, non‑photo blue carries structure, red is reserved for action.
04
Pass count is hierarchy
Importance is measured in retraced passes: one to whisper, two to speak, three to sign.
05
Visible construction
Guides, ticks and figure numbers remain in the finished work.
06
One hand, no accidents
All wobble comes from one calibrated hand. Imperfection is controlled, never random.
07
Redraw, don't animate
Motion reads as drawing, settling or erasing. Springs arrive; they never perform.

Fig. 01 — Stroke tokens

Hierarchy by retracing

Pass 01Quiet

Single line. Body containers and supporting surfaces.

Pass 02Spoken

Retraced once, slightly off‑register. Cards and headings.

Pass 03Signed

Three passes. Reserved for the one action that must not be missed.

S1 · 1.6 — captions

S2 · 2.4 — chrome

S3 · 3.2 — emphasis

Fig. 02 — Depth tokens

Elevation, hatched by hand

elevation drawn as eleven lines — no blur involved.

Lifted

Rides above the paper on a graphite hatch. Hover — it leans further out and the hatch stretches to keep up.

Pinned

Held flat by a single red pin. Only a thin escape of hatch is permitted at the edges.

Pressed

Pushed into the sheet instead of above it. Its hatch lives on top, smudged toward the corner.

H1 · rest

H2 · hover

H3 · lifted

H4 · floating

H5 · emphasis

Fig. 03 — Controls

Every control, drawn to spec

Primary actions are double‑passed in red and rest on their own hatch. Press one and it sinks into the hatch — the paper accepts the pressure.

try the live playground ↓

spec coverage

86%

the caret is red. small joys.

Fig. 04 — Live playground

Draw directly on this sheet

Draw, Fix and Measure are live on this sheet. Every mark supports ⌘Z — Discard starts a fresh one.

Fig. 05 — Type

Drawn chrome, grown‑up text

Wonk is a feature.

Display — Fraunces, wonk axis engaged
Body — Schibsted Grotesk, keeps its posture
Margin notes — Shantell Sans, the human voice
Measurements — Space Mono, for the title block

margin notes carry the human voice — the type itself stays disciplined.

Fig. 06 — Motion

Everything settles, nothing bounces

LAW 01Settle, never bounce. Springs end exactly where the element was meant to live.
LAW 02Redraw over reload. A state change looks re‑inked, not re‑rendered.
LAW 03Nothing decorates. If a line moves, it's because the paper asked.

Fig. 07 — Developer Guide

Bring it to your project

1. Core files

Include the Sketchmorphism stylesheet and runtime script. No external dependencies, just one CSS and one JS file.

<link rel="stylesheet" href="skm.css">
<script src="skm.js" defer></script>

2. The Markup

Use the data-sk-border attribute. The JS runtime will automatically bake SVG borders around it on load and resize.

<div data-sk-border data-sk-r="14">
  Drawn content here
</div>

3. Colors & Passes

You can change the pencil color or request a double-pass (messier) stroke using attributes.

<span
  data-sk-border
  data-sk="red"
  data-sk-passes="2"
>Important!</span>

4. Motion

Add the settle class to elements, and wrap them in a container with data-reveal to stagger them in.

<section data-reveal>
  <h2 class="settle">Hey</h2>
  <p class="settle">World</p>
</section>

The runtime is incredibly lightweight. Resize events are debounced and batched.

Stroke over border

Hatch over shadow

Three pencils only

Pass count is hierarchy

Visible construction

One hand, no accidents