Principles
Guidance from Observation
Not opinions. Patterns derived from building real interfaces on the vertical axis. Each one emerged from a specific design problem.
Respect Reading Flow
Reading direction creates expectations. Interfaces that reinforce those expectations feel natural; interfaces that oppose them feel disorienting, even when the user cannot articulate why.
Motion, navigation, hierarchy, layout, spacing — every layer of interface design is affected by how the reader scans. In a vertical interface, 'up' and 'down' have different meanings. 'Left' and 'right' carry semantic weight they do not carry in horizontal UIs.
Motion Has Meaning
Every animation communicates something. In a vertical interface, the direction, duration, and easing of motion must be calibrated to the reading axis, not imported from horizontal conventions.
A drawer that slides from the right edge of an RTL reading interface travels toward the reader's origin — which feels like an intrusion. The same drawer sliding from below follows an orthogonal axis — which feels like a new layer. Neither is inherently correct; the choice must be deliberate.
Interaction Before Typography
The purpose of a vertical interface is not beautiful text. It is behavior that matches how people read. Typography enables interaction; it is not the goal.
A common mistake is to treat vertical text as a typographic exercise — rotating existing components or applying writing-mode to achieve aesthetic effect. The question is not 'does this look like a vertical book?' but 'does this behave like one?'
Mixed Language First
Real CJK content always contains mixed scripts — han characters, kana, hangul, Latin numerals, Roman punctuation, and URL-like strings. Design for this mixture from day one.
Designing for pure CJK text produces a brittle system. Verse references, dates, measurements, code snippets, and proper nouns will appear in any real document. Each character class needs correct orientation defined at the token level.
Accessibility Is Fundamental
Vertical interfaces introduce unique accessibility challenges that horizontal design systems never considered. Solve them from the beginning.
Arrow key semantics change. Screen reader reading order depends on column order. Reduced motion must account for the directional nature of vertical animations. Focus management must traverse RTL column order correctly.
Progressive Familiarity
Users who are new to vertical interfaces need a ramp. Vertical interaction is unfamiliar to most digital users, even those who read vertically in print.
A sudden full-vertical interface is disorienting. The best approach is progressive introduction — starting with familiar patterns in the navigation chrome, then deepening the vertical commitment in the content area, then finally in gesture interactions.
Research Never Ends
Most questions in vertical interface design do not have correct answers yet. Document what is unknown as carefully as what is known.
Treating open questions as closed produces brittle design systems. The best vertical interface decisions are made with an explicit model of what is known and what remains a hypothesis.