Workroom Brand

Workroom Brand is the identity and design system for Workroom, our suite of tools for creative work. It covers the mark, colour, type, surfaces and controls, the app icons and the marketing site.

We worked each part from a spread of options down to one settled value, kept the options side by side in a coded sketchbook, and shipped the result into the product as design tokens.

Workroom needed a brand that could carry a family of tools, each with its own name and icon, and still read as one product. A first system set the idea that Workroom shows its working: precise Swiss geometry as the canvas and human marks on top of it.

The work that followed replaced that system’s palette and most of its type. What survived was Instrument Sans for the interface, Raleway for the wordmark, and the rule that a primary action is ink rather than colour.

The second pass began with a day of material studies: grids, grain, gradients, a blue pencil and geometric shapes. Grain stayed, and became part of the icons and the pattern.

The first mark, cut for the browser tab, was a white W on black. We redrew it as four triangles in a square, two pointing down over two pointing up. We tried the fourth triangle as an open V, in colour and as an inverse, then went back to the plain triangles.

The new mark replaced the W in the browser tab when the brand shipped. The wordmark is set in Raleway with the mark at cap height.

The new palette started from clay: terracotta, ochre, stoneware, kaolin and raku. A day later it gave way to ramps built in OKLCH, so the steps look evenly spaced across every hue. We tried more hues than the brand would keep and settled on cobalt, vermilion, purple, green, orange and yellow, with gray, cream and ink as neutrals.

The site and the app sit on different creams. The site’s ground is the warmer one, so a page reads as paper. The app’s is closer to white, and inside its white panes the steps are drawn in ink, because cream turns yellow beside white.

Dark mode is not an inversion: the same ladder of grounds is rebuilt on ink, and each dark pair is measured to keep the contrast of its light pair. It keeps the two grounds apart too: the site’s dark is warm, its paper in shadow, and the app’s is a neutral ink.

We set Instrument Sans and Raleway along the same type scale. Instrument Sans took the interface and the headlines, and Raleway was kept for the wordmark alone.

Instrument Sans has no monospace, so the next day we set candidates side by side on the same sample and read each one in real code. Bitstream Vera Sans Mono was chosen for code and numerals.

Depth comes from tint before shadow. We tried raised cards at several strengths of shadow, and inset cards, on several cream grounds. The next day we took the lightest lift apart to see what the shadow and the keyline each add, and settled a ladder: the page, an inset card and a well each step darker, and anything you act on is white with a small lift. A modal is the same raised surface over a scrim, so it needs no bigger shadow.

Corners were tested on the first day, from square to pill, with a button nested inside a box to see how inner and outer corners meet. Buttons settled at a small, fixed radius as solid, outline and ghost, with ink for the primary action.

The switch was built from the same rules. It was tried with several off states and corner shapes, and settled as a small track with a white sliding knob. Motion is stated once for every control: a press is instant, a change of state eases out quickly, and some things never animate.

The icons began as glass: Circle’s discs on ink and Dispatch’s bars on a cobalt tile. A sampler then tried different textures on the same discs. Circle was locked first, in a graded treatment: hard edges, the colour fading along the shape to the paper, and grain in the fade.

Its recipe set the pattern for Dispatch, Artefact and Trove, and Trove was later recut as a coin. Glass survived only as the dark-mode version of each icon, on ink.

Grain stayed from the first studies. It sits over flat colour and in the fades of the icons.

The pattern on the homepage is built from a few pieces, each a single fade laid on a grid. The same pieces fill an empty space in the product, in place of content.

The colour tokens were recast into Workroom in one release: every product moved onto the new surfaces, the new mark went onto the browser tab, and the marketing site went up with the pattern on its homepage.

The site’s dark mode followed, on a warm ground chosen over a neutral one and the brand’s ink.