FOR THE
LOVE OF
For the love of code
Case studyWork in progress

Jaryo

An adaptive design language

Adaptive black-and-white design language and interactive lab with 19 families · 85 curated + 12 optional (97 total), light and dark themes, layouts from about 260px to desktop, keyboard accessible. Work in progress; known gaps are listed on the page.

Interactive lab · GitHub Pagesv0.2.0

Louis Calata
ProjectWork in progress
Built withHTML · CSS · JavaScript
Source code (opens in a new tab)Live lab (opens in a new tab)
Adaptive design language · Interactive lab

Black and white interface
options you can try.

Jaryo is a text-first design language for product UI. Lab catalog: 19 families · 85 curated + 12 optional (97 total). The families cover layout, type, controls and states. The optional studies are legacy studies and a Red interactive UI. Themes are light and dark. Layouts run from about 260px to desktop. Keyboard use is supported.

Open the lab (opens in a new tab)GitHub repository (opens in a new tab)
JJaryo lab
85 + 12 optionsLight / dark260px–desktop

Text first. Two colors.
Editorial structure.

Lab19 families · 85 curated + 12 optional (97 total)
ThemesSystem, light, dark
Width~260px to desktop
What it is

A shared interface language.

Jaryo keeps product screens readable without relying on color, icons or decoration. Controls are labeled in words. Surfaces use black and white. The same language is used in AGIW Suite’s interface and in the Surface Duo OS of Old Phone OS. Its type follows Louis Calata’s Typography 1 studies: a mono face for labels and IDs, a sans face for reading at a 1.5 line height, and spaced capitals for meta lines.

Text first

Buttons, tabs and options say what they do in plain words.

Two colors

Ink and paper only in the chrome. Optional color and red studies stay inside their own preview cards.

Keyboard

Option groups and tabs support arrow keys, Home, End and Space. Focus rings are visible for keyboard users.

Interactive lab

Browse the options.

The lab is hosted on GitHub Pages from the Jaryo repository. It is documentation and exploration, not an installable product. Choose options, compare families, export a selection JSON, and switch theme.

louiscalata.github.io/jaryo (opens in a new tab) Source on GitHub (opens in a new tab)

Jaryo lab in light theme at desktop width, showing the option list and preview cards
Lab, light theme, desktop width.
Jaryo lab in dark theme at desktop width
Lab, dark theme, desktop width.
Jaryo lab in light theme at phone width
Lab, light theme, phone width.
Jaryo lab in light theme at about 260px width
Lab near 260px width.
Honest limits

What the lab does not cover yet.

  • Multi-tab conflict handling is not implemented; two tabs can overwrite each other’s saved choices.
  • Journey frames are reference sketches, not live composition.
  • Screen-reader behavior on real VoiceOver, NVDA or TalkBack has not been verified here.
  • The lab’s automated smoke checks run in Chromium, Firefox and WebKit (the engine behind Safari), plus a Chromium forced-colors check; Safari itself on a Mac or iPhone has not been checked.
  • Choice preference in the lab is not a production change.
Where it shows up

Keep exploring.

All code

Next project

Nisi