Hillbrook · design handoff

Send this to Derek.

You can't deploy to Wrangler yourself — that's Derek's job. This page is the full package: the message, the code, the deploy commands, and links to all the mockups so he can see the look you're building toward.

Back to design system

1 · The Teams DM

Paste this to Derek in Teams

Pre-written. Hit copy, switch to Teams, paste.

Hey Derek,

New design tokens + typography for tenant.hillbrook.co and postcon.hillbrook.co. All the mockups I've been building (Simon, Drazen, Daniel, Mariana, Caleb, Campbell, Freddie, Zee, Malcolm, Paul, Luca, James, CEO) live in /Users/tristanangelini/Projects/1Chats/HOP/mockups/ — open any *-dashboard.html to see the new look in context.

What needs changing in BOTH repos (hillbrook-tenant + hillbrook-postcon):

1. Typography:
   - Headings -> Adecion (uppercase + 0.02em letter-spacing)
   - Body -> Space Grotesk
   - Colours unchanged (Hillbrook forest palette)

2. Files to edit (per repo):
   - src/app.html         -> add Google Fonts link (see handoff page)
   - tailwind.config.js   -> replace theme.extend (full block in handoff)
   - src/app.css          -> add uppercase rule for h1-h3, .display, .stat

3. Deploy:
   - tenant: bun run build && wrangler pages deploy .svelte-kit/cloudflare --project-name=hillbrook-tenant-management
   - postcon: pnpm cf:deploy

ONE QUESTION: Adecion isn't on Google Fonts. Is it a licensed/custom font you've got? If not, use Anton as the public fallback (already in the config) — it's the closest free all-caps display font.

Full code blocks are in the handoff page: /HOP/mockups/handoff-to-derek.html

Should be a 30-min job total. Thanks mate.
Tristan

2 · Tailwind config

Replace theme.extend in both tailwind.config.js

hillbrook-tenant/tailwind.config.js hillbrook-postcon/tailwind.config.js

// Hillbrook design tokens — generated from /HOP/mockups/design-system.html
// Apply to both tenant.hillbrook.co and postcon.hillbrook.co

export default {
  // ... existing config
  theme: {
    extend: {
      colors: {
        // Core neutral
        ink: '#fafafa',
        paper: '#050807',
        card: '#0d1410',
        border: '#1f3329',
        muted: '#7a8580',

        // Brand
        forest: '#95FF6E',
        forestSoft: '#0d2017',
          lime: '#95FF6E', limeSoft: '#1D3A17',
        ocean: '#1F86C7',
        oceanSoft: '#0d2032',

        // Status (universal traffic light)
        go: '#22FF55',
        goSoft: '#0d2a14',
        amber: '#FBBF24',
        amberSoft: '#2a1809',
        danger: '#FF3D5A',
        dangerSoft: '#2a0d11',

        // Integrations (vendor brand colours)
        procore: '#F47E42',
        procoreSoft: '#2a1809',
        bluebeam: '#1F86C7',
        bluebeamSoft: '#0d2032',
        asana: '#F06A6A',
        asanaSoft: '#FEE2E2',
        onedrive: '#0078D4',
        onedriveSoft: '#DBEAFE',
        maps: '#34A853',
        mapsSoft: '#D9F2DF',

        // Lifecycle stages
        plum: '#A855F7',         // CRM
        plumSoft: '#1a0a2a',
        insight: '#A855F7',      // ECI
        insightSoft: '#1a0a2a',
        sky: '#0EA5E9',          // Postcon · Vestra
        skySoft: '#0a1e2a',
        dlp: '#1E3A8A',          // DLP
        dlpSoft: '#DBEAFE',
        tenyr: '#7DD3FC',        // 10yr warranty
        tenyrSoft: '#F0F9FF',

        // Build typology
        sda: '#7C3AED',
        sdaSoft: '#EDE9FE',
        rooming: '#0891B2',
        roomingSoft: '#CFFAFE',
        childcare: '#EA580C',
        childcareSoft: '#FFEDD5',
        fitout: '#DB2777',
        fitoutSoft: '#FCE7F3',
      },
      fontFamily: {
        // Adecion is Tristan's preferred display font — confirm licensing.
        // Anton is the free Google Fonts fallback (similar all-caps look).
        display: ['Adecion', 'Anton', 'sans-serif'],
        sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
      },
    },
  },
}

3 · Global CSS

Add uppercase rule to global stylesheet

hillbrook-tenant/src/app.css hillbrook-postcon/src/app.css

/* Hillbrook heading style — add at top of global stylesheet */

h1, h2, h3,
.display,
.stat {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Optional — apply Adecion + Anton stack directly via CSS as well */
h1, h2, h3, .display {
  font-family: 'Adecion', 'Anton', sans-serif;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

4 · Font links

Add Google Fonts to app.html head

hillbrook-tenant/src/app.html hillbrook-postcon/src/app.html

<!-- In the <head> of src/app.html, add these three lines: -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />

<!-- If Adecion exists as a paid font, host it in /static and add: -->
<!-- @font-face { font-family: 'Adecion'; src: url('/fonts/adecion.woff2') format('woff2'); } -->

5 · Deploy

Derek deploys · 4 steps

Under an hour total for both apps.

Edit 6 files

3 files × 2 repos: app.html, tailwind.config.js, app.css. Copy-paste from above.

Test locally

tenant: bun run dev
postcon: pnpm dev

Deploy tenant

bun run build && wrangler pages deploy .svelte-kit/cloudflare --project-name=hillbrook-tenant-management

Deploy postcon

pnpm cf:deploy

(stamps short SHA → wrangler deploy)

6 · For Derek's visual reference

All 25 mockups · open in any browser

Each shows the new typography + colours applied. Path: /Users/tristanangelini/Projects/1Chats/HOP/mockups/

7 · One thing to confirm

Open question

Is "Adecion" a font you've already licensed?

I couldn't find Adecion on Google Fonts. Three options for Derek to pick:

Adecion exists as a paid/custom font — Derek hosts the .woff2 in /static/fonts/ and adds an @font-face rule. The current config already prefers Adecion, falls back to Anton.
Use Anton (free Google Font) — closest visual match for an all-caps display font. Already in the fallback chain, so it'll render this way today regardless. Lowest effort.
You meant a different name — easy swap. Common alternatives: Bebas Neue, Oswald, Archivo Black, Anton (chunkier). All free.

The mockups all currently render with Anton because Adecion isn't available. If you're happy with how the mockups look right now, sticking with Anton is the zero-licence path.