Echelle typographique basee sur deux familles : Inter pour le texte courant et JetBrains Mono pour le timer, le code et les donnees numeriques.
Les deux polices utilisees dans toute l'application.
--font-inter (font-sans)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Specimen
Le speedcubing est une discipline ou chaque milliseconde compte. Les meilleurs cubers du monde resolvent le Rubik's Cube 3x3 en moins de 4 secondes.
--font-jetbrains (font-mono)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Specimen
R U R' U' R' F R2 U' R' U' R U R' F' -- T-Perm PLL. Temps: 8.234s (ao5: 9.127s, ao12: 10.456s)
Toutes les tailles de heading avec leurs valeurs en rem, px, line-height et poids.
| Niveau | Apercu |
|---|---|
h1 | Speedcube Master |
h2 | Speedcube Master |
h3 | Speedcube Master |
h4 | Speedcube Master |
h5 | Speedcube Master |
h6 | Speedcube Master |
Les quatre graisses disponibles dans le design system.
Aa
font-normalTexte courant, paragraphes, descriptions
Aa
font-mediumLabels, headings h5/h6, liens de navigation
Aa
font-semiboldHeadings h3/h4, titres de sections, boutons
Aa
font-boldHeadings h1/h2, display, timer, noms de pages
Les differentes hauteurs de ligne utilisees dans le systeme.
| Nom | Classe Tailwind | Valeur |
|---|---|---|
| none | leading-none | 1 |
| tight | leading-tight | 1.25 |
| snug | leading-snug | 1.375 |
| normal | leading-normal | 1.5 |
| relaxed | leading-relaxed | 1.625 |
| loose | leading-loose | 2 |
Utilise pour les titres principaux de pages et les sections hero.
Speedcube Master
Speedcube Master
Titres de sections, cartes et sous-menus.
Speedcube Master
Speedcube Master
Speedcube Master
Texte courant, descriptions et labels.
Le speedcubing est l'art de resoudre le Rubik's Cube le plus rapidement possible. Les meilleurs cubers resolvent le 3x3 en moins de 5 secondes.
Temps moyen de 12 solves. L'inspection dure 15 secondes maximum selon les regles WCA.
Derniere mise a jour il y a 3 minutes
Timer, algorithmes, code et donnees numeriques. Utilise JetBrains Mono avec tabular-nums pour un alignement optimal des chiffres.
12.345
R U R' U' R' F R2 U' R' U' R U R' F'
--primary: #2563eb; --accent: #22c55e;
A faire
tracking-tight sur les titres display et h1tabular-nums pour les temps et statistiquesfont-mono pour les algorithmes et le timerA eviter
normal, medium, semibold, bold) par composant