Lorraine (Yuanyu) Li
Lorraine (Yuanyu) Li is a graphic designer and creative technologist.

Featured in It's Nice That, TypeOne Magazine and Page Magazine. Previously at Manual, Studio Lin and 2x4. BFA in Graphic Design from Rhode Island School of Design. Currently a Creative Technology Lead (digital product) at Instrument.

info@lorraine.li, @lorrr.l

Last updated Nov 13, 2026

1 Color Walk Video Output
2 Remix Foundry publishes a collection of new open source fonts created from Font Remix.

lorraine.li/font-remix/foundry
3 The 2026 edition of Font Remix formalizes that framework and extends it with other operations collected from over the years.

lorraine.li/font-remix
4 Color Walk Output
5 Color Walk Output
6 Font Remix Output 2026.10
7 Collection of displacement maps from Typ-o-matics presets
8 Alternative displacement method exploration for Typomatics.
9 Typomatics is a tool commissioned by Instrument to produce internal motion assets. An extensible system was designed to allow control, creative remix and discovery of new formal qualities. The canvas system is built in a way where scripts can be created and "installed" for each input canvas, with specified controls. The tool renders the sketches with those controls and produce the resulting animation.
10 An assortment of outputs from Typomatics
11 Design and development for Dwight Eschliman's One Day project. The photographer takes snapshots of each second in a day at various locations around the world. These images make up a portrait of a day.

The site allows the photographer to offer customized viewing experiences of the work, as individual thumbnails or as a collection, in static sequences or in motion.

The website's backend includes a KirbyCMS panel supplemented by direct FTP upload to handle the amount of images in each upload.

With Micah Barrett at Manual.
12 Type-based graphic system Livewire's brand book.

To create high resolution (vector) print material, we developed a type manipulation method as follows: typography is first interpreted as a pixel matrix, wave based displacement is then sent through the matrix for the distortion.

With Yan Yan at Manual
13 Font-remix is a web-based experiment that proposes the process of configuring letter forms at runtime and generating a customized font file for download. Using opentype.js and performing boolean operations on the vector letterforms, two open source typefaces are combined according to a set of grids.
14 Waving Hand
15 Robert Brownjohn is an open source font created using the Font-Remix tool.

With Jonathan Maghen of Primary Foundry (primary-foundry.com) based on the 1959 Grishman-Ryce Duo cover art designed by Robert Brownjohn.

primary-foundry.com/typefaces/robert-brownjohn/
16 Instant Acumen Show Notes
17 Instant Acumen
18 Inaugural site for the RISD Color Lab. Site acts as a shared canvas that users anywhere can fill with color.

With Minkyoung Kim
19 Design and front-end development for ForA on the Urban by Institute of Architecture at University of Applied Arts Vienna.

With Studio Lin.
20 Mid-Autumn
21 Web Development for the Cyprus Pavilion using Kirby CMS. The site scrolls by the baselines of the mono-spaced typography accounting for dynamic content lengths.

With Studio Lin.
22 Work Lamp
23 MOS Casa No. 1–17 Book
24 Personal photography site for Joiii, artist and photographer based in Tokyo.

The site features navigation by color and scale via sliders. The color slider is a gradient visualization of the amount of photographs tagged each color on the content management system.

Web Design: TAOGRAPHICDESIGN(LTD.LTD.)
25 Website design and development for the RISD GD Senior Show themed Intersections.

Branding by Gabriel Abascal

Senior show committee: Damini Agrawal, Emily Mahar, Gabriel Abascal, Grace Young, Lorraine Li, Maddy Teh, Minji Koo, Xio Espana

intersections.risd.gd
26 Rewind Festival
27 Untitled Variable Font
28 The project attempts to distill the narrative of The Old Man And The Sea to meaningful symbols compiled with computational method, with hopes to create a visual story parallel to the cannon narrative.

All semantic information are gathered from the text using Python, visualized using Processing for “type-setting” in Indesign.

*Footnotes in the book are quotes in the text that correspond to the bracketed line of symbols.
29 Direction and design for the multimedia studio Seeeklab’s pop-up exhibition "At Seeeklab" and store in Shanghai, translating their interactive installation works into retail product graphics, catalog, signage, marketing collaterals, etc.

The graphics are directly referencing circuit designs used in installations featured in the exhibition, embracing the "work in progress", "created to inpire" concepts of the pop-up.
30 Graphic and art direction developed for At Seeklab, Seeklab's experiential activation.
31 The project attempts to distill the narrative of The Old Man And The Sea to meaningful symbols compiled with computational method, with hopes to create a visual story parallel to the cannon narrative.

All semantic information are gathered from the text using Python, visualized using Processing for “type-setting” in Indesign.

*Footnotes in the book are quotes in the text that correspond to the bracketed line of symbols.