Frontend token usage

How 12pm-website, 12pm-order, 12pm-partner and 12pm-admin consume @12pm/design tokens and primitives without creating local visual authorities.

Guide

Frontend token usage

The website, order, partner and admin frontends consume this package as their shared visual source of truth. Product-specific layout can live locally, but token and primitive authority stays in 12pm-design.

Consumer guide

Import contract

Next.js

import "@12pm/design/tokens.css";
import { BrandMark, Button, StatusChip, TextField } from "@12pm/design";

const nextConfig = {
  transpilePackages: ["@12pm/design"],
};

Usage sequence

ref / sys / comp

Import once@12pm/design/tokens.css

Load the generated CSS file in the root app shell so variables are available before product styles render.

Use package primitives@12pm/design

Import BrandMark, Button, StatusChip and TextField from the package instead of rebuilding them locally.

Transpile linked sourcetranspilePackages

Keep the linked private package in the Next.js transpile list while the repos consume pinned Git revisions.

Style with CSS Modules--12pm-sys-* / --12pm-comp-*

Use semantic system tokens first, then component tokens when a local layout composes around a primitive.

Do

Expected

Start from sys tokens

Canvas, surface, text, border, action and state colors should come from system tokens.

Keep Sun as accent

Meal warmth stays in the Sun dot, separators and highlights; dense workflow controls stay readable.

Preserve exact IDs

Offer codes, order IDs and audit references use the exported data-id typography role.

Do not

Avoid

Do not redeclare tokens

Frontend repos should not define competing CSS variables for 12PM brand, action or component roles.

No local brand hex values

Use token names in product CSS instead of copying Ink, 12PM Red, Sun, Cream or state colors.

No new UI primitive authority

Add missing shared primitives in 12pm-design first when the same pattern appears across surfaces.

12pm-website

Public website

Marketing density

Use active BrandMark, Cream canvas, 12PM Red accents and measured Sun cues without creating local token values.

--12pm-sys-color-brand-red / --12pm-sys-color-brand-sun / --12pm-sys-color-brand-cream

12pm-order

Mobile order flow

Low density

Use larger tap targets, one primary action per step and warmer meal cues around menu discovery.

--12pm-sys-color-canvas / --12pm-sys-color-action-primary / --12pm-comp-button-height-large

12pm-partner

Partner Console

Setup density

Use form primitives, status chips and neutral surfaces for offer setup, price book fields and pickup scope.

--12pm-comp-input-height-default / --12pm-sys-color-surface / --12pm-sys-color-border

12pm-admin

Admin Console

Operational density

Use compact typography, clear status tones and restrained action color for review, override and support views.

--12pm-sys-type-data-id-* / --12pm-sys-color-warning / --12pm-sys-color-danger