Open Design – Direction Comparison
Five sibling prototypes for the same portfolio, each a distinct visual identity. One page, four sections, shared colour system – differentiated by layout, typography and mood. Pick the one that fits, then it becomes the working direction.
01 – Core direction
Studio MUTT energy. Brand wordmark floats above everything and inverts all colour beneath it via CSS blend mode. Full-bleed image strips in editorial grids, wibbly distorted type, custom mix-blend cursor. Shrinks to the corner as you scroll.
Display: Fraunces · Body: Inter
Open direction02 – Core direction
Maximum restraint, maximum confidence. Acres of white space, a quiet neutral type system, architecture imagery doing 95% of the talking. Gallery-like, premium, calm.
Display: Inter Tight · Body: Inter
Open direction03 – Core direction
Most Studio MUTT-adjacent. Oversized grotesque headlines, full-bleed accent colour fields, monospace terminal layer for nav and labels. Irreverent and graphic but disciplined.
Display: Space Grotesk · Mono: Space Mono
Open direction04 – Experimental
The site is an architectural drawing. Construction grid, dimension lines, title blocks, north arrows, section markers, mono annotations. Precise and technical with dry wit.
Display: IBM Plex Sans Condensed · Mono: IBM Plex Mono
Open direction05 – Experimental
Architectural zine / riso-print spread. Layered images, cut-out fragments, rotated elements, tape and torn-edge motifs in CSS/SVG. Bold, conceptual, expressive – like her award work.
Display: Syne · Mono: Space Mono
Open direction