Design System · Vertical Writing Systems
Designing Interfaces for Vertical Writing Systems
A living design system exploring interaction patterns for vertical interfaces. Not typography. Interaction.
“If digital interfaces had been invented around vertical writing systems, what would software look like today?”
Real Implementations
What happens when vertical-first thinking is applied to actual product categories.
Try it in the playground ↓A fully vertical, right-to-left scripture reader for Korean, Japanese, and Chinese. Every control, gesture, and transition rethought for the top→bottom, R→L axis.
View on GitHub →How should playback controls and album art behave in a vertical interface?
Should chat bubbles stack vertically? Where does the input field belong?
How do directional labels and navigation instructions adapt to a vertical reading axis?
Interaction Primitives
Reusable components with documented reasoning. Every one answers a design question.
Try it in the playground ↓What This Project Explores
Open design questions and the principles we've derived from attempting to answer them.
Try it in the playground ↓Should a sheet animate from screen geometry or reading direction?
A sheet sliding up feels natural on a phone, but in an RTL column layout it travels against the direction the reader just came from.
How should mixed CJK and Latin content behave in the same column?
Every reference, date, and proper noun mixes scripts, and each character class needs a different orientation in a vertical column.
Where does the navigation rail belong in a vertical-first interface?
A vertical RTL interface reads down each column and flows right-to-left, so neither a bottom rail nor a left sidebar maps cleanly.
How does text selection work when reading flows top-to-bottom, right-to-left?
Drag-to-select assumes horizontal baselines; in vertical RTL columns the anchor sits at the top and selection must cross column breaks rightward.
Respect Reading Flow
Begin with how the reader moves, not convention.
Motion Has Meaning
Animation reinforces reading direction, never decoration.
Interaction Before Typography
Behavior is the goal; typography enables it.
Mixed Language First
Design for mixed scripts, not the average.
Accessibility Is Fundamental
Keyboard, touch, screen reader, reduced motion, built in.
Research Never Ends
Document open questions beside resolved ones.
Try it yourself
A live window into the interaction model. Change the text alignment and watch the vertical columns respond, right here.