@zentmarketplace/design-tokens

Brand design tokens (colors, typography, fonts) for all Zent frontend apps. Built for Tailwind CSS v4 using the @theme directive.

Install

Each consuming app needs:

1. A ~/.npmrc (per-dev, not committed) with a GitHub PAT for read:packages
2. A committed .npmrc at app root mapping the scope:

   @zentmarketplace:registry=https://npm.pkg.github.com

3. Then:

   pnpm add @zentmarketplace/design-tokens

See the repo root README for full setup instructions.

Usage

In each app's globals.css (or wherever you load Tailwind):

@import "tailwindcss";

/* Shared neutrals + semantic colors (no font, no brand color) */
@import "@zentmarketplace/design-tokens/base";

/* App-specific brand theme — picks its own font-family and brand palette */
@import "@zentmarketplace/design-tokens/themes/marketplace";

/* @font-face declarations for the font(s) this app actually uses.
   Skip entirely if you use next/font/local — that's preferred for Next.js. */
@import "@zentmarketplace/design-tokens/fonts/proxima-nova-alt";
/* or: @import "@zentmarketplace/design-tokens/fonts/momo-trust-sans"; */
/* or: @import "@zentmarketplace/design-tokens/fonts"; — loads BOTH */

Then use Tailwind utilities normally: bg-button-background-primary, text-text-primary-1, etc. — Tailwind v4 auto-generates the classes from the @theme block.

Token naming

Names mirror the Figma design system exactly. If the designer names a variable button-background-primary, our CSS variable is --color-button-background-primary and the Tailwind class is bg-button-background-primary. No translation layer.

Available themes

| Theme | App | |---|---| | themes/marketplace | zent-community-marketplace | | themes/marketing (coming soon) | zent-marketing-dashboard | | themes/seller (coming soon) | zent-seller-client |

Token reference

base.css (shared across all themes)

| Token | Value | Role | |---|---|---| | --color-text-primary-1 | #1C1B1C | Heading & primary body text | | --color-text-secondary-1 | #484647 | Secondary body text | | --color-input-placeholder | #7D7D7D | Input placeholder / muted text | | --color-input-border | #E5E1E1 | Default input/border color | | --color-surface-primary | #FFFFFF | Primary surface (cards, modals) | | --color-surface-secondary | #F5F3F3 | Secondary surface (chips) | | --color-surface-tertiary | #F9F9F9 | Tertiary surface (table headers) | | --color-label-failure | #FF3636 | Error/validation red |

Note: --font-sans is not in base — each theme picks its own font.

themes/marketplace.css (marketplace brand)

| Token | Value | Role | |---|---|---| | --color-button-background-primary | #4A62FF | Primary CTA fill | | --color-button-background-secondary | #FFFFFF | Secondary CTA / active surfaces | | --color-button-label-primary | #FFFFFF | Text on primary CTA | | --color-button-label-secondary | #4A62FF | Text on secondary CTA / accent icons | | --color-background-primary | #EEEBFC | Page background gradient end | | --color-accent-background-primary | #EEEBFC | Accent fills (progress, highlights) | | --color-sidebar-bg | #083D8E | Dashboard sidebar navy | | --font-sans | "Proxima Nova Alt", ... | Sans-serif font family for this theme | | --gradient-page | linear gradient | linear-gradient(180deg, #FFFFFF 0%, #EEEBFC 100%) — marketplace only, other themes don't have one |

Font files

Each font ships its own @font-face declarations + woff2 binaries. Import only the font(s) your app actually uses (browsers lazy-load anyway, but the import is the explicit intent).

| Import | Family | Weights | Notes | |---|---|---|---| | @zentmarketplace/design-tokens/fonts/proxima-nova-alt | Proxima Nova Alt | 400, 400i, 600, 600i, 700 | No 500/medium — falls back to 400 | | @zentmarketplace/design-tokens/fonts/momo-trust-sans | Momo Trust Sans | 200–800 (variable font, all weights in one ~69KB file) | No italics | | @zentmarketplace/design-tokens/fonts | both | — | Aggregate, loads both |

Skip importing these in Next.js apps that use next/font/local — that's preferred (no layout shift, automatic subsetting).

Updating tokens

1. Edit the relevant CSS file
2. Bump the version in package.json
3. Commit + push to main
4. Tag the repo root (git tag v0.2.0 && git push --tags) — CI auto-publishes
5. Bump the @zentmarketplace/design-tokens reference in each consuming app