@georeputation/design-tokens

Canonical brand tokens for every GeoReputation frontend.

Colors, radius, and (over time) any other cross-frontend design primitives live here in exactly one place. Both the georep Next.js app and the reddit-agent Vite app consume the same tokens — a palette update in this package propagates on the next npm install.

What's in the box

| File | Consumed by | Purpose | |---|---|---| | tokens.css | All frontends | CSS custom properties (space-separated oklch components so <alpha-value> works). | | theme.css | Tailwind 4 consumers (georep-web) | @theme inline block exposing tokens as Tailwind color utilities. | | tailwind3-shim.cjs | Tailwind 3 consumers (reddit-agent) | Tailwind 3 preset providing the same color utilities. |

Consuming

Tailwind 4 project (Next.js — the georep pattern)

npm install @georeputation/design-tokens

app/globals.css:

@import 'tailwindcss';
@import '@georeputation/design-tokens/tokens.css';
@import '@georeputation/design-tokens/theme.css';

/* project-local @theme inline overrides come AFTER the shared theme */
@theme inline {
  --color-score-high: oklch(0.6 0.15 150);
  --color-score-medium: oklch(0.75 0.15 85);
  --color-score-low: oklch(0.55 0.2 25);
}

You now have bg-primary, text-foreground, border-border, bg-destructive/50, etc. out of the box.

Tailwind 3 project (Vite React — the reddit-agent pattern)

npm install @georeputation/design-tokens

tailwind.config.js:

export default {
  presets: [require('@georeputation/design-tokens/tailwind3-shim')],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // project-local extras (font family, per-project aliases)
      fontFamily: {
        sans: ['Geist', 'ui-sans-serif', 'system-ui', /* ... */],
      },
    },
  },
};

src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@georeputation/design-tokens/tokens.css';

Same utilities appear (bg-primary, text-foreground, ...).

Why the values look weird

tokens.css stores color components as bare numbers (--primary: 0.205 0 0;) instead of full oklch() calls. That's what lets Tailwind inject <alpha-value> — the consuming shim wraps the value in oklch(var(--primary) / <alpha-value>), giving you bg-primary/50 for free.

If you're editing a color with a hex in hand, convert via oklch.com — pick the "L C H" fields and paste the three numbers.

What's deliberately NOT in the package

• Score palette (--score-high/medium/low). Domain-specific to georep's visibility rubric. Stays local to whichever project surfaces it.
• Chart colors (--chart-1..5). Georep-specific.
• Font family declarations. Consumers import Geist via Google Fonts (or bundle) themselves so build sizes stay lean.
• Component library. Georep uses Next.js RSC + shadcn; reddit-agent uses Vite + plain React. Components diverge; only tokens are portable.

Update flow

1. Edit tokens.css (and theme.css / tailwind3-shim.cjs if the token set changes shape, not just values).
2. Bump package.json version. Follow semver: major for renames/removals, minor for additions, patch for value tweaks.
3. npm publish from the package directory.
4. Consumers pick up the change on their next npm install.

Ownership

Design tokens are ratified by Brett + Dan against the Brand Guide (docs/BRAND_GUIDE.md in the georep repo). Any change here should trace back to a documented palette decision — no drive-by tweaks.