feat(design-system): add type scale, spacing rhythm and font tokens

Apply the Phase 2 warm-premium base additively (no existing page changes):
- tailwind.config.ts: add fontSize roles (display, h1, h2, h3, title, body-lg,
  body, small, caption, overline) with line-height/tracking/weight; add
  fontFamily (sans/latin = Museo, arabic = Dubai); add section-sm/section-lg
  spacing rhythm.
- globals.css: add Arabic-safe .eyebrow utility (uppercase + tracking on Latin,
  neutralised for html[lang="ar"]).

Colors and fonts unchanged. Verified: tsc clean, eslint clean, tailwind build
generates the new utilities with correct values.
This commit is contained in:
MohFarawati
2026-07-14 22:08:34 +02:00
parent d1a1a67b84
commit dcffa87be7
2 changed files with 31 additions and 0 deletions
+12
View File
@@ -168,6 +168,18 @@ html[lang="ar"] {
font-family: var(--font-dubai), sans-serif; font-family: var(--font-dubai), sans-serif;
} }
/* Eyebrow / overline label. Latin gets uppercase + tracking; Arabic keeps
normal case and spacing so joined letterforms are not broken. */
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
}
html[lang="ar"] .eyebrow {
text-transform: none;
letter-spacing: normal;
}
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
+19
View File
@@ -74,6 +74,23 @@ const config: Config = {
ring: "hsl(var(--sidebar-ring))", ring: "hsl(var(--sidebar-ring))",
}, },
}, },
fontFamily: {
sans: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"],
latin: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"],
arabic: ["var(--font-dubai)", "Tahoma", "Arial", "sans-serif"],
},
fontSize: {
display: ["clamp(2.75rem, 8vw, 5.5rem)", { lineHeight: "0.95", letterSpacing: "-0.03em", fontWeight: "900" }],
h1: ["clamp(2.25rem, 5vw, 3.5rem)", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "700" }],
h2: ["clamp(1.75rem, 3.5vw, 2.5rem)", { lineHeight: "1.1", letterSpacing: "-0.015em", fontWeight: "700" }],
h3: ["1.375rem", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "700" }],
title: ["1.125rem", { lineHeight: "1.3", fontWeight: "500" }],
"body-lg": ["1.125rem", { lineHeight: "1.7", fontWeight: "400" }],
body: ["1rem", { lineHeight: "1.7", fontWeight: "400" }],
small: ["0.875rem", { lineHeight: "1.6" }],
caption: ["0.8125rem", { lineHeight: "1.5", fontWeight: "500" }],
overline: ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.14em", fontWeight: "500" }],
},
borderRadius: { borderRadius: {
sm: "var(--radius-nested)", sm: "var(--radius-nested)",
md: "var(--radius-nested)", md: "var(--radius-nested)",
@@ -106,6 +123,8 @@ const config: Config = {
}, },
spacing: { spacing: {
section: "var(--section-space)", section: "var(--section-space)",
"section-sm": "3rem",
"section-lg": "8rem",
content: "var(--content-space)", content: "var(--content-space)",
}, },
backdropBlur: { backdropBlur: {