Mostly Working

Mostly Working · Core

The brand as it stands

Colour, logo, type, dither and motion, with the tokens and files to take away. Use the Tools to make anything else with the brand already applied.

Colour

One paper and its deep ink, tinted to the same hue, so every piece reads as one ink on one stock. Paper is always the light one and deep the dark one; soft, line and muted are mixed from the two, and anything else in between is made of pattern. In dark mode the page swaps which is ground and which is ink, never what the names mean.

Type

Geist for everything read, Geist Mono for labels, numbers and anything that should feel like working notes. A few sizes, and weight does the work bold usually would.

Get Geist ↗
DisplayGeist 400 · 72 px (38 on phones) · leading 1.0 · tracking −3.5%

Demos, half-finished tools

HeadingGeist 450 · 26 px · leading 1.15 · tracking −2%

Honest notes on what works

SubheadingGeist 450 · 22 px · leading 1.2 · tracking −1.5%

A summit at Monzo

IntroGeist 400 · 16 px · leading 1.5 · muted

The first line under a heading, saying what the section is for, in a softer ink.

TextGeist 400 · 15 px · leading 1.5 · 500 for emphasis

Everything read at length. When a word needs weight, it goes to 500, never bold, and never italic.

SmallGeist 400 · 13 px · leading 1.45 · muted

Notes, captions and anything said in passing.

LabelGeist Mono 500 · 11 px · uppercase · tracking +8%

Mostly Working / Episode 19 / Draft

NumbersGeist Mono 400 · 12 px · tabular figures

00:40 · 25 FPS · #F1EBFB · 13.9:1

Weights

Aa

400 · RegularDisplay, text, intros, notes. The default.

Aa

450Headings: a touch firmer than the text around them.

Aa

500 · MediumEmphasis, buttons, labels and the names of things.

Aa

600 · SemiboldOnly the name in the site bar. The heaviest it goes.

Aa

300 and lighter, 700 and heavierNot used. Light breaks up at small sizes on the paper; bold shouts.

Dither

Dither is the only gradient: one ink, and pattern for every grey in between. These six ways of making a grey are the set, each with its own job. Each one here slides slowly, so you can see how it moves.

One ink, one paper →

Motion

Five principles for how Mostly Working moves, each with its rules, tokens and a rule kept and broken on the Principles page. The lockup arrives by drawing itself on.

The principles →
  1. 01Show the workingLet people see it being made.
  2. 02Turn it overThe M is a W, upside down.
  3. 03One ink, one paperTwo tones. Dither is our only gradient.
  4. 04Calm, then decisiveSlow when it’s ambient. Quick when it matters. Never bouncy.
  5. 05Mostly workingMade by people. Human rhythm, and one knowing wink.

Origins

Mostly Working grew out of Near Future, and kept what worked. None of this is needed to use the brand; it’s where things came from.

Colour
Lilac keeps the lightness of the Near Future green, with a little more chroma and a deeper, more tinted ink.
Logo
The wave in the mark is the line that joined NEAR to FUTURE in the Near Future logo.
Type
Geist and Geist Mono, as Near Future set them.
Dither
Photos are dithered the way nearfuture.works does them, Atkinson at a threshold of 128 and a dot a pixel, and its dot fields are halftone.
Motion
The principles start from how nearfuture.works already moved: photos drifting over six seconds, and the logo’s connector breathing every four.

Mostly Working · Principles

How Mostly Working moves

Five principles for how Mostly Working moves, drawn from how Near Future works, from the motion already running on nearfuture.works, and from the mark itself, each with the execution details that make it real. The film runs through all five in under two minutes. Below it, each principle with a rule kept and the same rule broken, the motion tokens that put numbers on them, and the same five in sound.

00:00 / 01:37

    1920 × 1080 at 25 fps. Space plays and pauses, and ← → step a frame at a time once paused. Recording runs the film once in real time, so keep this tab in front until it finishes.

    Five principles

    Each comes from something true about the team or the mark, and each ends in rules you can check a frame against. The two canvases beside each one show a rule kept and the same rule broken.

    01

    Show the working

    Let people see it being made.

    Near Future started as AI hack weeks, on the belief that these tools stay hype until you build something real with them. Mostly Working puts that belief in the name: demos, half-finished tools, honest notes on what works. Near Future’s logo already hinted at it: one of the lines it could join its words with was Damien Newman’s design squiggle, a mess that resolves into a clear line. So nothing simply appears. It’s drawn, typed or resolved out of coarse pixels, and you get to watch.

    • DrawLines draw on and off with flat caps. The circle starts at 12 o’clock and runs clockwise.
    • LockupThe lockup arrives by drawing on: the circle in 800 ms from 12 o’clock, then the M, the wave and the W, 240 ms each and 160 ms apart. It draws away the same way round.
    • ResolveBig cells shrink smoothly onto a fine screen over 1.6 s, then turn to vector in a 160 ms dissolve.
    • TypeWords are typed a character at a time, never faded or scrambled in.
    • BuildThe pixels that land are the pixels that make the mark. Nothing is quietly swapped in at the end.
    DoDraw it on
    Don’tFade it on

    02

    Turn it over

    The M is a W, upside down.

    The mark has two-fold symmetry. Turn it half way round and it lands exactly on itself. It describes the work as well: a workshop or a partnership is mostly turning a problem over until the other side shows. The wave at its centre is the S that joined NEAR to FUTURE in the Near Future logo, so the hinge between the M and the W is also the handover from one name to the other. The half turn is our signature move, and because it lands on itself our loops never show a seam.

    • TurnA half turn is 180° about the circle’s exact centre. Ambient takes 5 s, linear. Decisive takes 640 ms, considered.
    • GeometryTurn the geometry, never the bitmap. The pixel grid stays square to the frame while the mark turns inside it.
    • HingeThe wave is the pivot between the M and the W, and between the lockup and the wordmark.
    • LoopLoop on the half turn, so the first and last frames are identical.
    DoTurn the geometry
    Don’tRotate the pixels

    03

    One ink, one paper

    Two tones. Dither is our only gradient.

    Every piece is one paper and the deep ink tinted to its hue, as it was on the Near Future green. Anything in between is made of pattern. nearfuture.works already works this way: every photo, the podcast thumbnails included, is Atkinson dither in the page’s own two colours, and its header band and dot fields are ordered dither and halftone. It stays crisp at any size, prints and compresses cleanly, and looks made by a person with a machine.

    • ToneNo opacity fades, blurs, shadows or gradients. A fade is a Bayer dissolve through 64 levels.
    • PixelsSizes come from the ladder, 4 · 6 · 8 · 12 · 16 · 24 · 32 px at 1080. One size per piece. Photos go finer, to a dot a pixel, as the site dithers each image at its own size.
    • MethodSix ways of making a grey: the six greys. Ordered dither (Bayer 8×8, clustered dot, blue noise) for anything that moves. Error diffusion (Floyd–Steinberg, Atkinson) for stills and slow textures, because it crawls in motion. Halftone for dot fields. Photos are Atkinson at a threshold of 128, through the site’s own code.
    • InvertTo invert, swap the roles. The deep becomes the ground and the paper becomes the ink.
    • PortraitsTwo layers. The subject is cut out and dithered in the ink; the background is a pattern of its own, on the same pixel, and never touches it. An outline or a frame is made of that pixel too.
    DoDither dissolve
    Don’tOpacity crossfade

    04

    Calm, then decisive

    Slow when it’s ambient. Quick when it matters. Never bouncy.

    Near Future works with teams who care about craft, and craft reads as confidence. Its site already moves this way: photos drift 5% either way over six seconds, on a triangle wave because a sine “reads as stop-start”, and the logo’s connector breathes once every four seconds. Ambient motion drifts slowly enough to ignore. Changes of state happen quickly and land without fuss. Nothing overshoots, wobbles or bounces, and anything worth reading is held long enough to read.

    • FramesEvery duration is a whole number of 40 ms frames, so it lands exactly at 25 and 50 fps.
    • SpeedAmbient loops run 4 to 6 s: a breath takes 4 s, a half turn 5 s and a drift 6 s. A background may take two drifts, 12 s. Moves take 400 to 640 ms. Arrivals settle in 240 ms.
    • EasingConsidered for moves, Decisive for cuts, Settle for arrivals. Linear only for continuous drift, and a triangle wave, never a sine, when the drift moves in steps.
    • HoldHold anything worth reading for at least 1 s, plus 200 ms a word.
    DoMove, then settle
    Don’tBounce into place

    05

    Mostly working

    Made by people. Human rhythm, and one knowing wink.

    The name promises honesty about the state of things. Our motion keeps a human rhythm. Typing hesitates, and the wave talks like two people in a room, the way Tom and Jonny do on the podcast. Each piece may have one wink, such as a typo put right, a pixel that arrives late or a loader that stops at 99% before carrying on. Near Future’s logo tool had the same streak: drag FUTURE around and it plays a pentatonic chord, turn up its futurism and the word drifts off into the distance. It should never look broken.

    • Typing70 ms a character with ±35% jitter, longer at spaces. The cursor blinks every 480 ms.
    • WinkOne per piece at most, and put right within 600 ms.
    • VoiceThe wave is a voice. Two speakers, the M side and the W side, take turns.
    • StrayOne pixel in a few hundred lands 320 ms late. Nothing else misbehaves.
    DoOne wink
    Don’tActually broken

    Motion tokens

    The principles as numbers. Every duration is a whole number of 40 ms frames, so it lands exactly at 25 and 50 fps, the rates the brand’s videos and GIFs are exported at.

    Durations

    TokenmsFrames at 25Used for

    Easing

    Each curve plays at its own token’s speed. Linear is only for things that never stop, like a turn or a drifting texture.

    Pixel ladder

    The lockup at each size on the ladder, then vector. A piece picks one size and keeps it. A resolve starts far bigger and shrinks smoothly onto that size before the vector takes over.

    Dither defaults

    ForMethodWhy
    Anything movingBayer 8×864 levels, and the pattern holds still as tone changes
    Print feelClustered dotDots grow from centres, like a halftone screen
    Grain, no gridBlue noiseAn even grain with no pattern and no worms, and it holds still as tone changes
    Photos, guestsAtkinson · 128 · a dot a pixelAs nearfuture.works/podcast does it, pixel for pixel: highlights stay open and faces readable
    Photos, drifting±5% · 6 s · triangleThe site’s drift: the threshold wanders in whole steps, evenly, with no dwell at the ends
    Slow texturesFloyd–SteinbergRichest tone, but it crawls when animated
    Dot fieldsHalftoneRound dots sized by tone on a square grid, as nearfuture.works has them
    TransitionsField + BayerAny wipe shape, with a dithered 10% edge

    Six methods, the six greys decided on the Playground: Bayer 8×8, clustered dot, blue noise, Atkinson, Floyd–Steinberg and halftone. See them move in Core →

    As code

    
      
    
    
    
  
    

  
    
    
    
      
    
        
    In sound
    
        
    The same five principles, heard. They shape the sixteen music sketches on the Playground and the instrument on the Music tab, where the jingle is written.
    
      
    
    
    
    
      
      
    • 01 Show the workingPieces assemble in front of you, a part at a time, or resolve from crushed to clean.
      • 
      
    • 02 Turn it overThe theme is the mark, played: the M’s five corners as notes, the wave as a glide, then the W, the same notes backwards and upside down.
      • 
      
    • 03 One ink, one paperFew voices. Texture comes from noise, one-bit pulses and dither, not from effects piled on.
      • 
      
    • 04 Calm, then decisiveEvery note lands on a 40 ms frame; at 93.75 BPM a beat is the 640 ms considered token. Pads breathe every 4 s, and landings hit on the beat.
      • 
      
    • 05 Mostly workingPlayed like people: a late note, a typo put right, tape that drags once. Never broken.
      • 
    
    
  
    
    
    
  
    
  
    

  
    
  
    
    
    
      
    Mostly Working · Tools
    
      
    Make things with the brand
    
      
    Tools that produce the brand’s assets with the decisions already in them: the decided paper, the logo and the motion principles. Open one to change it, or take a GIF or video straight from its card.
    
    
    
    
    

    
  
    
    
    
      
    
    
    

    

    

    

    

    
  
    
  

    

    




    
    
    
  
    
  
    

  
    
  
    
    
    
      
    Mostly Working · Music
    
      
    Write the jingle
    
      
    An instrument for the podcast’s music. Draw each track on its grid and layer them up: a buzzing drone, a lead that arpeggiates, a harp, drums and cymbals, each through its own effects. Play the loop as you go, or play it through, intro to last chord; save what you like as a version to play back, and as a WAV.
    
    
    
    
    

    
  

  
    
    
    
      
    
      
    
        
    
          
    Stopped
    
          
    Your jingle
    
          
    
        
    
        
    
          
          
    00:00.0 / 00:00.0
    
          
    
            
            
          
    
        
    
      
    
    
    
    
    
      
    Versions
    
      
    
        
        
        
        
      
    
      
      
      
      
    
      
  
      

  
      
    
      
      
      
      
      
      Stopped
    
      
    
      
      
      
      
      
    
      
  
      
  
      
    
      
      
      125 BPM
      
      
      Time
        
      
      
      Loop
        
      
      
      Steps
        
      
      
      
      
      
    
      
  
      

  
      
    
    
      
      
      
      
      
      
      
      
      
      
      
      
        
      Effects
      Drag a knob · Shift for fine · double-click to reset