Primary
Urushi
Primary
Kuri
Primary
Haku
Secondary
Tsuchi
Secondary
Suna
Secondary
Kami
Primary
Urushi
Primary
Kuri
Primary
Haku
Secondary
Tsuchi
Secondary
Suna
Secondary
Kami
Headings typeface
Tiempos
Text
Body typeface
Geist
Regular
By Vercel
The system is live in jinba-landing.
New surfaces (Flow, App, Toolbox) need to integrate the design system manually.
Copy the style files
From jinba-landing/apps/landing/src/styles/, copy scales.css · tokens.css · theme.css. Import them in order in the global CSS entry point.
Load the fonts
Add the Google Fonts import for Geist:
fonts.googleapis.com/css2?family=Geist:wght@100..900
Copy /fonts/tiempos-text-*.woff2 into the new repo's public folder and add the @font-face blocks from global.css.
Apply heading defaults
Copy the @layer base block from global.css that sets h1–h4 sizing, tracking, and font-family, plus the line-height overrides below it.
Wire Tailwind
Reference theme.css with @theme inline. This exposes bg-background, text-foreground, text-sand-*, etc. as utilities that adapt to light and dark mode automatically.
Toward a shared package
The current setup copies files between repos. The mature form is a published NPM package — @jinba/design-system — that any surface installs as a dependency. Tokens, scales, and component primitives ship as one versioned artifact. New products get the full system with a single npm install.
The token files are plain CSS custom properties, which makes them compatible with any design system that consumes CSS variables. Teams using Radix Themes, Primer, or Carbon can remap those systems' theme variables to Jinba's tokens — or ignore the Tailwind wiring entirely and reference the tokens directly in their own setup.