Design System · Vertical Writing Systems
Designing Interfaces for Vertical Writing Systems
A living design system exploring interaction patterns for vertical interfaces.
Interaction, demonstrated
Four core patterns replaying as they behave in a vertical, right-to-left interface — every motion follows the reading axis.
Real Implementations
What happens when vertical-first thinking is applied to actual product categories.
What This Project Explores
Open questions, and the principles derived from trying to answer them.
Should a sheet animate from screen geometry or reading direction?
Screen geometry says slide up; the reading axis often disagrees. Motion has to pick a side.
How should mixed CJK and Latin content behave in the same column?
Dates, names, and references mix scripts — and each glyph class needs its own orientation.
Where does the navigation rail belong in a vertical-first interface?
Columns read down and pages flow right-to-left. Neither a bottom bar nor a left rail maps cleanly.
How does text selection work when reading flows top-to-bottom, right-to-left?
Drag-to-select assumes horizontal baselines. In vertical columns the anchor sits at the top and selection crosses columns 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
The full playground, embedded. Language, writing and reading direction, theme, device, and type size — every control updates the canvas live.