How can landscapes be created in a design system?
Shanshui (Mountain Water)-inspired variable font extended into a humanized-landscaped design system.
Two months ago, I envisioned a new design experience. This time, instead of starting with scientific user experience research, I drew inspiration from Eastern philosophy: Shanshui (mountain and water).
Shanshui, the expression of nature and humans in Chinese painting.
Shanshui, the harmony between nature and humanity in Eastern philosophy.
Shanshui, the timeless reflection of thought and spirit in culture.
In traditional Chinese landscape painting, mountains and water mirror the artist’s inner world, where the balance between emptiness and substance embodies the unity of heaven and humanity (天人合一). Humans are seen as part of nature, seeking harmony and coexistence.
If the essence of Shanshui is omnipresent, why can’t its expression extend to other forms? This made me wonder:
Could the spirit of Shanshui become the basis for a design language?
At the time, I was designing a variable font for Gabriel Drozdov’s Type + Code class at RISD. This inspired me to create a font concept that blends Shanshui with typography, leading to the creation of “Landscript.”
Landscript is “Landscape” + “Script.”
This is not traditional alphabetic typography but a visual language inspired by Shanshui. The font aims to transcend linguistic boundaries, using scenic visuals to convey universal meanings.
Get Rocky Yuan’s stories in your inbox
Join Medium for free to get updates from this writer.
In today’s world, diverse languages create barriers that hinder communication. What if there were a universal medium everyone could understand? This idea led me to pictograms, similar to ancient Egyptian hieroglyphs, which conveyed meaning through depictions of nature and daily life, transcending language barriers.
Based on this foundation, let’s define what Landscript truly is.
Landscript is…
1. Cultural-Driven
Landscript is a culture-driven visual language that draws inspiration from symbolic meanings and imagery within culture. It conveys information through visual representations of nature and daily life.
2. Immersive
Inspired by the depth of Eastern landscapes, Landscript presents information in layered, structured designs. Its unique typography and visual identity create an immersive experience, turning interaction with information into a experiential journey.
3. Modular
Landscript’s design modules echo the layering and spatial balance of traditional landscape painting. Adaptable and reconfigurable, they embody the harmony of “division in unity,” delivering a cohesive yet dynamic user experience.
This is Landscript.
Architecture
Glyph
Glyph serve as the smallest unit, drawing inspiration from nature — such as the sun, moon, mountains, water, houses, trees, and clouds. These symbols inherently carry visual meaning and cultural associations.
Pattern
Combining different glyphs creates patterns; for example, repeating water symbols form the image of a water waves.
Morph
Morph is the fluid transition that shifts from a structured pattern to an actual organic letterform.
Text
Arranging different letter forms into visually informative text.
Design System
Typography
Landscript’s adaptable and dynamic visual effects make it ideal as a display font. Paired with the classic Suisse Int’l for body text, it highlights contrasts in type size, reinforcing information hierarchy and ensuring spatial harmony.
Iconography
Custom icons were designed based on the aesthetics of Landscript letterforms, providing users with a more immersive information interaction experience.
Colors
The color system, inspired by China’s traditional “Five Colors” and “Yin-Yang and Five Elements” theories, reflects nature, seasons, and humanity. It balances motion and stillness to create designs that are both grounded and dynamic.
Sky turquoise originates from “天青,” symbolizing the azure sky after the rain, as described in the poem: “雨過天青雲破處” (“After the rain, the sky clears, and the clouds disperse”).
Mountain gray originates from “千山翠” (verdant mountains), depicted in the poem: “林端襯出千山翠，夕照看成二月春” (“The forest tips frame verdant mountains, and the evening glow resembles early spring”).
River blue originates from “青冥,” reflecting the vastness of water and waves, as described in the poem: “上有青冥之長天，下有水渌之波瀾” (“Above lies the azure sky, below the rippling waves of clear water”).
Materials
Mist (霧), an ethereal element that softly veils the scenery, captures the subtle beauty of Eastern aesthetics. It serves as a foundational material for this design system.
Windows
In interface material design, a thin mist layer overlays the gradient color background. The mist softens the colors, creating a subtle elegance and the poetic essence of veiled landscapes.
Buttons
The button maintains its poetic aesthetic, using transitions between states to convey a tangible sense of interaction, symbolizing ‘the smoke clears’ to highlight the selected state.
Texts
Views
Sliders
The slider shape is inspired by the Landscript typeface, resembling a reversed letter “Z”.
Tab Bars
The tab bars, inspired once again by the curved “Z” in the Landscript typeface, integrate webpage icons and names into a cohesive design.
SideBar
Cards
Dialogs
Search
Interface Design
When the user opens the navigation bar, the media player interface extends horizontally into a curved shape, resembling the flowing motion of a waterfall in a landscape and providing an immersive visual experience.
Similarly, fluid animation is a key requirement for the Landscript user experience; it must be smooth and resemble the natural flow of water.
Continuing the Landscript design system, the desktop window showcases more comprehensive functionality for processing information and executing tasks.
On the left tab, extending the waterfall design metaphor, users can access other open applications, such as the currently playing music playlist, message notifications, and more.
As everything comes together and is displayed within the space, the focus window state enhances user concentration by emphasizing the active window while applying opacity adjustments and blurring effects to the surrounding windows. This creates a visually distinct environment that helps users stay focused on their current task.
What’s Next?
To some extent, Landscript transcends the practicality of a coding interface. While it’s technically possible to code this interface in reality, it would be extremely challenging. Yet, that’s the beauty of this passion project — it goes beyond feasibility, envisioning an ‘anomaly-intuitive’ interface that adaptively scales over time, subtly redefining the paradigm of user experience for the next 10 to 20 years.
Currently, I am a designer at Hyundai Regeneration Studio, focusing on plant-based biomaterials for tangible interfaces in future mobility. At the end of the day, nature and sustainable design are what truly matter. While good design generates profit at its core, great design goes further — creating social benefits and sustainable values for the future.
I truly appreciate you reading this till this point — it really means a lot! Wherever you are, wherever we are, I always wish us godspeed!
Acknowledgements 🎉
Landscript would never have been born without the inspiration, guidance, feedback, and affirmation from my great professors, peers, and friends.
Thank you, Professor Gabriel Drozdov 🧩, the most supportive human I have ever encountered. Thank you for letting me audit your amazing course, “RISD GRAPH 3123–01 Type + Code.” Without your words, Landscript would never have been born.
A huge, huge, huge thanks to Tina Zhou 🏆, Tonia Zhang 🍎, Jasper Xie 🕶️, Doug Scott 🎩, Amy Ai 👽, Giorgia Sage 💬, Cindy Lyu 🍬, and my dearest mum 🧘🏼♀️, my magical aunt 🔮, and my worldwide grandma 🌏. Thank you for everything — truly, everything!
This journey is AMAZING!
