Quick Start

Prerequisites

• Node.js >=20
• pnpm >=9
• You are working inside the brettjohnson-xyz monorepo

---

Setup

1. Install workspace dependencies

   From the repo root:

   pnpm install

2. Import the shared Tailwind theme

   In your app’s global CSS file, import Tailwind v4 and the shared tokens:

   app/globals.css

   @import "tailwindcss";
   @import "@brettjohnson/config-tailwind/theme.css";

   This gives you access to all brand tokens via Tailwind utilities:

   <div class="bg-brand-dark text-white border border-brand-gray rounded-sm">
     …
   </div>

3. Use shared components

   Import from @brettjohnson/ui:

   import { Button } from '@brettjohnson/ui';
   
   export default function Page() {
     return (
       <Button variant="primary" size="lg">
         Book a Speaking Engagement
       </Button>
     );
   }

4. Run your app

   # Run the main site
   pnpm dev:www
   
   # Run this design docs site
   pnpm dev:design

---

Token access patterns

Tailwind utility

<!-- Background -->
<div class="bg-brand-red">…</div>
<div class="bg-brand-dark">…</div>
<div class="bg-brand-charcoal">…</div>

<!-- Text -->
<p class="text-brand-red">…</p>

<!-- Border -->
<div class="border border-brand-gray">…</div>

CSS custom property

.my-element {
  background: var(--color-brand-red);
  border-color: var(--color-brand-gray);
}

---

Design docs site

To run this design system site locally:

pnpm dev:design
# → http://localhost:4322

To build:

pnpm turbo build --filter=@brettjohnson/design