Typography & interactive design
Studio Type Lab
Make a little bold. A playful poster maker with movable type, original Studio UI shapes, custom colours and full-resolution PNG export.
My role
Product Designer & AI Creative Director
Development Method
- #AI-Native Development
- #Product Design
- #Iterative Prototyping
Technical Stack
- #React
- #TypeScript
- #Glyph
- #Three.js
Product Category
- #Typography
- #Design Tool
- #Interactive Playground
Overview
A playful poster maker that brings the Studio UI design system into a working creative tool. Start with Wrap, Stack or Split, add your words and move the composition around. Type flows around the mascot and selected shapes as you drag. Adjust text size, alignment and colour, add original Studio UI artwork, then download a full-resolution PNG. Everything runs locally in the browser, with no account required.
How I Built It
Bring the design system to life
Carried Studio UI’s typefaces, palette and original artwork into a complete editor. A ready-made poster gives visitors something to experiment with from the first screen.
Make room for expression
Started with three layouts, then expanded the editor through hands-on feedback: freely movable text, independent type sizes, custom colours and eight shape choices with rotation, duplication and optional text wrapping.
Make the output dependable
Used Glyph for text shaping and layout, with mouse, touch and keyboard controls. Added readable mobile controls and clear text-fit feedback, then checked that downloaded 1080 × 1350 PNGs match the rendered artwork.
Words, shapes and a little Studio personality
