@pushbutton/ui-tokens

Canonical design tokens for all PushButton projects. This is the single source of truth for brand colors, typography, shadows, and background images used across every PushButton codebase.

Extracted from Project B (pushbuttonai.com). When tokens change, update here first, bump the version, and consuming projects update their dependency.

---

Installation

npm install github:PushButtonPlatforms/pushbutton-ui-tokens

---

Usage

Option 1 — Tailwind v4 project

In your globals.css (or equivalent entry CSS):

@import '@pushbutton/ui-tokens/tokens.css';

Tokens are registered via @theme inline {} and are available as Tailwind utilities (bg-green-800, text-dark, shadow-build, etc.) and as CSS custom properties (var(--color-green-800)).

Option 2 — Standard CSS (no Tailwind v4)

In your globals.css (or equivalent entry CSS):

@import '@pushbutton/ui-tokens/tokens-root.css';

Tokens are registered on :root as standard CSS custom properties (var(--color-green-800), var(--shadow-build), etc.).

Option 3 — Tailwind v3 preset

In your tailwind.config.js:

module.exports = {
  presets: [require('@pushbutton/ui-tokens/tailwind.preset')],
  // ...your project config
};

This maps all tokens to theme.extend so Tailwind v3 utilities are generated automatically.

---

How to update tokens

1. Edit tokens.css — the Tailwind v4 @theme inline {} block is the canonical source.
2. Mirror all changes to tokens-root.css — same names and values, :root {} format.
3. Mirror relevant values to tailwind.preset.js.
4. Bump the version in package.json.
5. Commit and push — consuming projects run npm install github:PushButtonPlatforms/pushbutton-ui-tokens to update.

---

Token inventory

Fonts (3)

Token	Value	Category
--font-sans	var(--font-inter)	Font
--font-heading	var(--font-playfair-display)	Font
--font-playfair	var(--font-playfair)	Font

Colors (11)

Token	Value	Category
--color-dark	#252b37	Color
--color-green-900	#18251a	Color
--color-green-800	#3a5a40	Color — brand green
--color-green-400	#c7dbca	Color
--color-green-200	#e6efe7	Color
--color-gray-100	#fcfaf8	Color
--color-gray-200	#f7f7f7	Color
--color-gray-300	#e9efe8	Color
--color-gray-500	#dadada	Color
--color-stone-900	#33373e	Color
--color-stone-800	#343435	Color
--color-stone-700	#676f7e	Color

Background images (7)

Token	Value	Category
--background-image-chat	url("/images/chat.svg")	Background Image
--background-image-chat-md	url("/images/chat-md.svg")	Background Image
--background-image-line	url("/images/line.png")	Background Image
--background-image-question	url("/images/real-question.svg")	Background Image
--background-image-hero	linear-gradient(to bottom, #c4d9c8, #f5f5f5)	Background Image
--background-image-footer	linear-gradient(to top, #c4d9c8, #f5f5f5)	Background Image
--background-image-pattern	linear-gradient(90deg, rgba(58, 90, 64, 0.15) 0%, rgba(199, 219, 202, 0.15) 100%)	Background Image

Shadows (16)

Token	Value	Category
--shadow-build	2px 11px 24px rgba(57, 91, 63, 0.1), 8px 44px 44px rgba(57, 91, 63, 0.09)	Shadow
--shadow-cta	0px 2px 4px rgba(0, 0, 0, 0.1), 0px 8px 8px rgba(0, 0, 0, 0.09)	Shadow
--shadow-card	0px 37.07px 92.67px 0px rgba(0, 0, 0, 0.12)	Shadow
--shadow-decision	8px 22px 53px 0 rgba(57, 91, 63, 0.15), 33px 90px 96px 0 rgba(57, 91, 63, 0.13)	Shadow
--shadow-emotional	132px 359px 153px 0 rgba(57, 91, 63, 0.02), 75px 202px 129px 0 rgba(57, 91, 63, 0.08)	Shadow
--shadow-can-ask	75px 202px 129px rgba(57, 91, 63, 0.08), 132px 359px 153px rgba(57, 91, 63, 0.02)	Shadow
--shadow-proof-card	33px 90px 96px rgba(57, 91, 63, 0.13), 132px 359px 153px rgba(57, 91, 63, 0.02)	Shadow
--shadow-counsel-card	33px 90px 96px rgba(57, 91, 63, 0.3)	Shadow
--shadow-democard	0px 37.07px 92.67px rgba(0, 0, 0, 0.03)	Shadow
--shadow-start-card	8px 22px 53px 0 rgba(57, 91, 63, 0.15)	Shadow
--shadow-usecase-card	0px 37.07px 92.67px 0px rgba(0, 0, 0, 0.03)	Shadow
--shadow-usecase	0px 31px 78px 0px rgba(0, 0, 0, 0.03)	Shadow
--shadow-owners	-15px 176px 106px 0px rgba(0, 0, 0, 0.03), -7px 78px 78px 0px rgba(0, 0, 0, 0.04), -2px 20px 43px 0px rgba(0, 0, 0, 0.05)	Shadow
--shadow-developers	132px 359px 153px 0 rgba(57, 91, 63, 0.02), 33px 90px 96px 0 rgba(57, 91, 63, 0.08)	Shadow
--shadow-choose	14px 22px 53px 0 rgba(57, 91, 63, 0.09)	Shadow
--shadow-pricing	207px 561px 168px 0 rgba(57, 91, 63, 0), 132px 359px 153px 0 rgba(57, 91, 63, 0.02), 75px 202px 129px rgba(57, 91, 63, 0.08)	Shadow