01
Identity for screens
How the logo behaves at each size, including clear space and favicon and header versions.
Design · 02.4
A brand that works at 16 pixels.
Many identities are designed for a PDF and break in the first browser tab. We design the brand for small sizes, dark backgrounds, components and motion.
64px
40px
24px
16px
ease-in-out · 400ms
01 / What we work on
What we work on.
Pick one or more.
02
Type and color
Color defined by role rather than swatches, and type chosen for on-screen legibility.
03
Art direction
Written rules so others can produce imagery that fits.
04
Motion
Specified with duration and easing, so it ships as designed.
02 / Included
What brand work includes.
Tested on real screens, not just in a presentation.
Tested at real sizes
Logo and type checked on real devices, from favicon to header.
Color by role
Background, surface, border, text and signal, in light and dark mode.
Type for screens
Weight range, small-size legibility and loading cost.
Motion vocabulary
Named durations and easings, reused across the product.
Reduced motion
An alternative for every animation.
Applied on real pages
The deliverable is the brand working on your site, not a PDF manual.
03 / What to watch
Where brand work fails on screen.
Each risk, and how we avoid it.
×Logos illegible below about 40 pixels.
A reduced version designed for small sizes.
×No dark surface defined.
A full dark-mode palette from the start.
×A display typeface with a single weight.
Families with enough range for headlines, interface and body text.
×Motion described with adjectives.
A duration in milliseconds and a named easing for every animation.
×Brand guidelines are a PDF nobody opens.
Rules live beside the components where they're used.
04 / How it works
How it works.
How we usually work. The quote sets the real dates before we start.
Direction
Positioning, and two or three directions shown on a real page. Deliverables: visual directions; chosen direction.
System
Logo, type, color roles, image rules and motion vocabulary as usable assets. Deliverables: brand system; asset library.
Application
Applied to key surfaces (website, product, social) to prove the rules hold. Deliverables: applied designs; export set.
Guidelines
Written alongside the components, not in a separate document. Deliverables: usage guide; source files.
05 / Questions
Questions we get asked
We don't work on naming or strategy. Our focus is the visual identity and how it applies to screens.
Yes, that's the most common case. We extend it into a screen-ready system.
We deliver vectors and color specs. Packaging, signage and large format are out of scope.
Prototypes, specs and Lottie exports where they fit. Complex motion is usually cheaper built in code.
We aim for one clear motion idea per page. If everything moves, nothing stands out.
Show us what you're designing.
Describe it in a few lines. We'll get back to you with a plan, a timeline and a fixed quote.