Create distinctive, production-grade frontend interfaces with bold, cohesive aesthetics and refined implementation — visual identity, typography systems, color palettes, and layout composition.
:root {
/* Type scale — musical intervals */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Heading: tight tracking, heavier weight */
--heading-tracking: -0.02em;
--heading-weight: 700;
/* Body: comfortable reading */
--body-leading: 1.6;
--body-max-width: 65ch;
}
font-display: swap