Typography
One typeface. Four weights. Twelve steps, each wired to responsive tokens.
Typeface
Dino uses Rubik exclusively. Its rounded shapes balance the saturated palette and hold up on small screens at every weight. Both --font-family-body and --font-family-headings point to it. No exceptions.
Rubik
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & ( ) — + = ?
Type scale
Twelve steps, display to caption. Heading tokens are responsive: they shrink on mobile. Paragraph tokens stay the same across breakpoints. Always use the token, not a raw size.
Token Mobile Desktop Weight Sample
h1 48px / 56px 64px / 76px 700 Start your revision h2 40px / 48px 48px / 56px 700 Today's progress h3 32px / 40px 40px / 48px 600 Biology — Unit 3 h4 28px / 32px 32px / 40px 600 Choose the right answer h5 24px / 28px — 500 Question 4 of 10 h6 20px / 24px — 500 Feedback paragraph-xlg 20px / 24px — 400 Great answer! The mitochondria is indeed the powerhouse of the cell. paragraph-lg 18px / 20px — 400 Select the option that best describes the cell cycle. paragraph-md 16px / 20px — 400 The process by which cells divide and replicate their DNA. paragraph-sm 14px / 18px — 400 Tap to reveal the explanation. paragraph-xsm 12px / 16px — 400 Last studied 2 days ago paragraph-cp 11px / 16px — 500 CAPTION · LABEL Weights
Four weights, four tokens. Bold for headings, regular for body, semi-bold for emphasis, medium for UI labels. Always use the token, never a raw number.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.