01 / Design

Design is the decisions, not the decoration.

A look is the easy part. What you are actually buying is the reasoning underneath one — the scale, the space, the contrast and the alignment that decide what a person reads first, second, and never. Take any of the four away and the same words stop working. The frame below lets you put them back.

Start a design project @eval on Telegram

Specimenmeasuring…

All four in place. Nothing here is decoration; take one away and watch the frame stop working.

Four decisions

4 of 4 in place

The words never change. Only the design does.

02 / Branding

A mark is only as good as its worst appearance.

Anyone can make a logo look right at four hundred pixels on a white slide. The job is everywhere else it has to live — a browser tab, an embroidered polo, a single-colour stamp, a photograph that will not get out of the way. We design against those first and the presentation deck last.

Construction

Clear space is x on every side, where x is half the mark's height. Set as a ratio rather than a number of pixels, because the one thing you can be sure of is that somebody will use it at a size nobody planned for.

Scale

Browser tab · app icon · avatar

Everything but the silhouette is gone. Which is why the silhouette is the design, and the flourish that looked clever at 400 pixels is not.

Conditions

six of them

Reversed
Light on dark, without thickening.
One colour
No tints to hide behind.
One bit
Stamped, etched, embroidered.
Knocked out
A hole, not a drawing.
On a picture
Busiest ground it will meet.
At distance
The squint test: shape only.

Delivered

Wordmark & monogramLockups & clear spaceColour systemTypographic systemPhotographic directionTone of voiceBrand guidelines

03 / Banner designs

One idea, every size it has to survive.

A campaign is not a picture. It is the same argument re-cut for a leaderboard, a square feed post and a nine-by-sixteen story, and most of the work is deciding what each shape can afford to keep. Every frame below is drawn at its real ratio, and the line under it says what that ratio cost.

6 sizes · one idea

IAB standard placements — the sizes a programmatic buy asks for by name, and the ones an agency most often forgets to draw.

Billboard970×250BrandArtHeadlineSubCTA

Wide skyscraper160×600BrandArtHeadlineSubCTA

Leaderboard728×90BrandArtHeadlineSubCTA

Medium rectangle300×250BrandArtHeadlineSubCTA

Square250×250BrandArtHeadlineSubCTA

Mobile banner320×50BrandArtHeadlineSubCTA

Formats: Static, animated HTML5, GIF and MP4 — each built to the network's weight budget rather than to ours.
Adaptation: Master sizes are designed; the rest are adapted by hand. Automated resizing is how a headline ends up half off the frame.
Handover: Editable source, an export sheet listing every dimension, and the naming convention your ad ops team already uses.

04 / Visuals

Six different jobs. One hand.

Key art, icons, texture, diagrams, type as image, motion. Different problems, and they are usually bought from different people — which is why so many brands end up looking like five brands wearing the same logo. Art direction is the decision to make all of it out of one set of rules.

01
Key art
The picture a campaign is cut from.
Contour geometry · one focal point, off centre
02
Iconography
One stroke weight, one radius, one grid.
24-unit grid · 1.5 stroke · round joins
03
Texture
So a flat colour has a surface to it.
Halftone ramp · one dot out of the field
04
Diagrams
The drawing that replaces the paragraph nobody read.
Node graph · hairline edges · one lit route
05
Type as image
When the words are the picture.
Display cut past the frame · serif accent
06
Motion
A still is one frame of something longer.
21s linear loop · four offset ellipses

Six marks, one box, one stroke weight, and the accent spent exactly once in each. That constraint is the whole argument — and it is the same reason we would rather hand you a visual system than a folder of images.

05 / What you keep

The system, not the screens.

A project ends with the thing that made it: a type scale, a palette, a spacing rhythm and a grid, written down so your team can keep going without calling us every Tuesday. This page is set in ours — and every number below is measured off the page while you look at it rather than typed into a table that could go stale.

Type

display-lgclamp(2.5rem, 7.5vw, 6.5rem)—
Decide
display-mdclamp(2rem, 5vw, 4rem)—
Then draw it
display-smclamp(1.5rem, 3vw, 2.25rem)—
Refine until it is obvious
leadclamp(1.0625rem, 1.6vw, 1.375rem)—
Explain it in a sentence anyone can repeat back.
body1rem—
Write the rule down so the next person does not have to guess at it.
eyebrow0.6875rem—
Hand it over

Colour

Surface

--bg—
--bg-elev—
--bg-sunken—

Line

--line—
--line-strong—

Ink

--fg—
--fg-dim—
--fg-muted—

Signal

--accent—
--violet—
--cyan—

Contrast

Body——
Secondary——
Labels——
Accent text——
On accent——

Switch the theme in the nav. Every value here is read off the page as you look at it — ratios included — so a palette change that breaks one shows up in the handover rather than in an audit.

Space

Multiples of four. Anything landing between them is an accident, and accidents are what make a layout feel hand-placed.

Grid

Container: —
Gutter: —
Rhythm: —
Columns: 12

Twelve columns and one gutter that grows with the viewport. Every block on this site lands on it, including this one.

Handed over as a Figma library and as code.

Not a folder of exports and good luck. The library your designers open, the tokens your engineers import, and the written rules that keep the two agreeing six months from now.

Figma library
Design tokens (JSON)
Component documentation
Motion specs
Editable source files
Asset kit

See engagement models