Mandarin. The common speech. What a learner of Chinese studies.
Design notes
Mandarin, the language. Mandarin, the fruit.
Why an open Chinese dictionary is dressed as a mandarin, and why a page with eight downloads has this much juice.
01
The pun
Mandarin means
two things.
In English, Mandarin is the standard Chinese language. A mandarin is also a small, sweet citrus. In Spanish, the fruit is mandarina. The language and the fruit share a name, and the whole page grew out of that coincidence.
The fruit is on the cover because it's the joke. It appears once, as large as the page allows. The color of every page came from its peel.
A mandarin. Mandarina. In the files: /mandarina/, /mandarine/, /jeruk mandarin/.
02
The C
C, plus.
A dose of vitamin C.
C+DICT reads as "C plus DICT": CC-CEDICT, plus eight languages. Read it once more and it is C+, a dose of vitamin C. Vitamin C is citrus, and citrus is the mandarin again.
So the theme is mandarin juice. Mandarin orange leads; the fruit has the dimpled texture of real peel, and its leaves are copied from an oil painting. Light mode is Rice Paper. Dark mode is Lantern Night, the color of a room lit by paper lanterns.
03
Juice
Juice, as game developers say it.
In game development, juice is the polish that makes an action feel alive: a button that squashes under the finger, a drop that overshoots before it settles. The word spread with "Juice it or lose it", a 2012 talk by Martin Jonasson and Petri Purho. They took a plain Breakout clone and switched on one effect after another; the rules never changed, and with each step the game felt better.
Every control on this page has some. The four demos below are the real components of the page (press them).
aprender
04
Why bother
CC-CEDICT, the dictionary behind C+DICT, lives on a wiki, and most open dictionaries have a plain download page.
That's enough for a file. For many learners and developers, though, the page is their first look at a dictionary, so this one got some care.
C+DICT is a side project of R8VEN, with its own small corner of the company's domain. It still got a palette for day and night, three typefaces, a painted fruit and its own physics.
05
The system
Color
Mandarin & Rice PaperLight mode
Lantern NightDark mode
One hue leads (mandarin), the neutrals are tinted toward it, and leaf green is the only accent. On the first visit, the system setting chooses light or dark. A click on a color copies its code.
Type
Title · Plus Jakarta Sans 800
C+DICT
Headings · Bricolage Grotesque
Look up Chinese.
Everything else · Noto, every script
学习 学ぶ 배우다 учить เรียนรู้
Plus Jakarta Sans for the title, Bricolage Grotesque for headings, and Noto for everything else, because a dictionary in nine languages needs one family that covers every script. The "+" of C+DICT is raised to the center of the capitals. All fonts are self-hosted.
Buttons
橘子
Four colors of one button. Each button is a matte drop: a soft inner shadow at the bottom, a highlight at the top, a colored glow below. They lift on hover and squash on press.
Icons
Phosphor in the thin weight, so the icons sit lightly next to the heavy title.
Motion
Everything moves on springs, so it overshoots a little and settles, the way a liquid does. The marquee and the fruit pause when they leave the screen and continue from the same place when they come back. And for anyone with reduced motion switched on, every effect is plain and instant.
06
The fruit
-
1
A liquid, in a shader
The cover is one WebGL shader. The fruit and the cursor blob are two distance fields joined as a smooth XOR: outside the fruit the blob is juice, inside it the blob is a pool of paper. The blob physics come from the mercury lens of the R8VEN site.
-
2
Leaves, painted by code
The leaves copy an oil painting of a mandarin: a lit half and a shaded half, a pale midrib, soft patches of mint and blue-green, hundreds of short strokes. Code paints them once, from a fixed seed, so every visit gets the same brushwork. They stay still, like the painting.
-
3
The logo, from the same fruit
The logo is the fruit itself: the same shader, rendered once on white and once on black, with the transparency taken from the difference. When the fruit changes, the logo follows.
