Skip to content

Design system check

Design system check · stage 1

One line, three layers

The same line of a Hindi hymn, shown the three ways a reader can take it. Each script sets its own family, size and line height. Romanization uses no diacritics, per the standard.

Native · Devanagari

प्रभु की महिमा गाओ, सारी पृथ्वी गाए
उसके नाम की स्तुति करो

Romanized

Prabhu ki mahima gao, saaree prithvee gaye
Uske naam ki stuti karo

English meaning

Sing the glory of the Lord, let all the earth sing
Give praise to his name


The other two scripts

Tamil · 26px / 1.7

ஆண்டவரைத் துதி செய்வோம் நாம்
அவர் நன்மை என்றும் உள்ளது

Telugu · placeholder metrics, needs checking

దేవుని మహిమ పాడుదాము
ఆయన నామము స్తుతించుదాము


Type scale

Display 46

Title 34

Heading 27

Lyric 20 — romanized and English lyrics

Body 17 — running text

Small 14 — metadata and captions


Palette

Every swatch is a variable, so the whole set flips for dark mode. Switch your system theme to see it.

base
surface
surface‑raised
contrast
muted
accent
accent‑soft

A link sits on the accent colour, and body copy stays on the ink token so both themes stay readable.