Foundations
Typography
Nexub uses Inter for interface text and Plus Jakarta Sans for display and headline text (--font-family-display; headings use it by default). Both ship with @nexub/themes: importing @nexub/themes/base self-hosts the variable fonts (Inter with its optical-size axis; both normal and italic), so every app gets them with no extra setup. Code uses the monospace stack in --font-family-mono. On React Native, nexubFonts loads the same families as static weights.
Type roles
Use roles, not sizes: className="text-title-md" sets size, line height, tracking and weight together. Headings (h1–h6) default to the display face with text-wrap: balance; numbers in data use tabular-nums.
display-lgThe quick brown foxtext-display-lgdisplay-mdThe quick brown foxtext-display-mddisplay-smThe quick brown foxtext-display-smheadline-lgThe quick brown foxtext-headline-lgheadline-mdThe quick brown foxtext-headline-mdheadline-smThe quick brown foxtext-headline-smtitle-lgThe quick brown foxtext-title-lgtitle-mdThe quick brown foxtext-title-mdtitle-smThe quick brown foxtext-title-smbody-lgThe quick brown foxtext-body-lgbody-mdThe quick brown foxtext-body-mdbody-smThe quick brown foxtext-body-smlabel-lgThe quick brown foxtext-label-lglabel-mdThe quick brown foxtext-label-mdlabel-smThe quick brown foxtext-label-smFont families
--font-family-sansInter: the interface typeface--font-family-displayPlus Jakarta Sans: display and headlines--font-family-monoMonospace: for code and dataFont weights
--font-weight-regular400: Regular
--font-weight-medium500: Medium
--font-weight-semibold600: Semibold
--font-weight-bold700: Bold
--font-weight-extrabold800: Extrabold