FORMWORK —
brand tooling for identity designers.
SCOPE OF WORK
ROLE
Brand Systems · Interaction Design · Front-End Development · Design Tooling · Prototyping
DEVELOPMENT & ARCHITECTURE
Proprietary product · Mockhaus · Theo Thompson
CORE FUNCTION
A connected browser-based suite for constructing, presenting, documenting and delivering identity systems.
Independent Digital Product
01 · OverviewIdentity work doesn’t end with the identity.
Once a visual system is approved, designers still have to formalize its construction, present its applications, document its rules and prepare dozens of production-ready files. These steps are essential, but the tools used to complete them are often fragmented, repetitive and rebuilt from project to project.
Formwork brings that workflow into one connected system.
01 · CHALLENGEDesign the system, skip the paperwork.
Construction diagrams are rebuilt manually, presentation layouts start from scratch, and delivery formatting remains inconsistent.
The challenge was to eliminate this repetition without surrendering the control that makes identity systems useful.
02 · THE SYSTEM Four tools. One system.
01 Construct
Build the underlying geometry.
02 Present
Translate the identity into a clear visual narrative.
03 Document
Formalize the system and its rules.
04 Deliver
Prepare consistent, production-ready assets
03 · THE TOOLSQuiet catalysts shaping ideas into reality.
01 CONSTRUCT
Construct is a browser-based drafting environment for defining the geometry behind a mark.
Designers can combine modular shapes, calibrate the base grid, map construction relationships, and establish clearspace before exporting the finished structure as an SVG.
02 PRESENT
Present translates identity elements into structured modular frameworks.
Flexible canvas ratios, spatial controls, and reusable content cells allow designers to orchestrate marks, typography, color, and messaging without rebuilding the presentation architecture each time.
03 DOCUMENT
Document transforms approved identity decisions into a cohesive structural guideline.
Logo variations, clearspace, color, typography, imagery, and usage rules are assembled through a consistent page hierarchy designed for clarity, continuity, and export.
04 DELIVER
Deliver engineers the final identity package.
Designers can generate required asset scales, dictate background parameters, control padding, and package the resulting files for digital, social, and print deployment.
04 · The ExperiencePrecision by default.
Formwork centers on one principle: interface values equal final outputs. Editable numeric and visual controls are unified. Brand data remains consistent across the suite. Outputs are formatted for presentation, documentation, and delivery and not mere screenshots. The interface is purposely restrained so the identity stays central.
04 · One identity, end to end. Quiet in type, loud in color, clear in layout.
Aster was developed as a demonstration identity to test the complete workflow.
Its mark moves from geometric construction to presentation, documentation, and final delivery without changing systems or rebuilding the same decisions across separate files.
The identity is not the product. It is the proof that the product holds together.
04 · DESIGN APPROACHHide the scaffolding, highlight the structure.
Formwork utilizes a restrained dark interface, compact controls, and a shared visual language across all four tools.
The system keeps the workspace quiet so the identity remains the focal point. Repeated navigation, controls, and export patterns reduce relearning as designers move from one stage to the next.
04 · OUTCOMEPractical infrastructure, not another moodboard.
Formwork launched as a working browser-based product with four connected tools and a complete end-to-end demonstration system.
The result is not another source of visual inspiration. It is practical infrastructure for the part of identity work that usually gets rebuilt from scratch.
Four tools. One system.
[ Explore the live product ]
