Guidance from Observation

01

Respect Reading Flow

Reading direction sets expectations. Reinforce them and the interface feels natural; fight them and it feels disorienting, even when the user cannot say why.

Motion, navigation, hierarchy, layout, spacing: every layer answers to how the reader scans. Turn the page vertical and 'up' and 'down' change meaning, and 'left' and 'right' carry weight they never had horizontally.

Vertical List CellTiered PageVertically Verse
02

Motion Has Meaning

Every animation says something. On the vertical axis, direction, duration, and easing answer to the reading direction, not to horizontal habit.

In an RTL interface, a drawer from the right edge travels toward the reader's origin and feels like an intrusion. The same drawer from below crosses an orthogonal axis and feels like a new layer. Neither is right by default; you choose one on purpose.

SheetDialogToast
03

Interaction Before Typography

A vertical interface exists to make behavior match how you read. Typography serves that behavior; it is not the goal.

The common mistake is treating vertical text as a typographic exercise, rotating components or applying writing-mode for effect. The test is not 'does this look like a vertical book?' but 'does it behave like one?'

ButtonToggleSlider
04

Mixed Language First

Real CJK content is never pure. Han, kana, hangul, Latin numerals, Roman punctuation, and URL-like strings share the column. Design for the mixture from day one.

Design for pure CJK and the system breaks on contact. References, dates, measurements, code, and proper nouns show up in any real document, and each character class needs its orientation set at the token level.

VerseText FieldTypography Rules
05

Accessibility Is Fundamental

Vertical interfaces raise accessibility problems horizontal design systems never faced. Solve them from the start.

Arrow keys change meaning. Screen-reader order follows column order. Reduced motion has to account for directional animation, and focus has to traverse RTL columns.

TabsDialogPopover Menu
06

Progressive Familiarity

Vertical interaction is new to most digital users, even ones who read vertically in print. Give them a ramp.

A sudden full-vertical interface disorients. Introduce it in stages: familiar patterns in the navigation chrome first, deeper vertical commitment in the content, then the gestures.

Vertically To-doVertically Verse

Bring them into your project

Use them in your own project. Open source on GitHub, MIT-licensed.

npx verticallyworks init
View on GitHub