@mckinnonit/branding

McKinnon Secondary College design tokens — the single source of truth for colour, typography, and Tailwind / shadcn-vue theming across internal tools.

See BRANDING.md for the full visual spec.

What's in here

File	Purpose
tailwind.preset.cjs	Tailwind preset — colours, fonts, radii
src/tokens.css	CSS variables (hex + shadcn-vue HSL channels, light + dark)
src/fonts.css	Lora + Inter wiring and the .font-mckinnon helper
BRANDING.md	Human-readable brand reference

Setup

This is a structural deviation from the standard /app /tests /docker layout — it's a shared token package, not an application, so it ships as an importable preset instead.

1. Add the preset to your Tailwind config

// tailwind.config.js
module.exports = {
  presets: [require('@mckinnonit/branding/tailwind.preset.cjs')],
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
};

2. Import the tokens + fonts once, at your app entry

/* main.css */
@import '@mckinnonit/branding/fonts.css';
@import '@mckinnonit/branding/tokens.css';

3. Use it

<!-- School name → Lora -->
<h1 class="font-mckinnon text-primary">McKinnon Secondary College</h1>

<!-- Everything else → Inter (default sans), weight 400–500 -->
<p class="font-medium text-foreground">Internal tooling portal</p>

<!-- Primary button -->
<button class="bg-primary text-primary-foreground rounded-md px-4 py-2">
  Open dashboard
</button>

Run

No build step — this package ships source files directly. To consume it locally before it's on the org registry, reference it by path or link it:

npm link                       # in this repo
npm link @mckinnonit/branding  # in the consuming project

Deploy

Versioned via git tags. Bump version in package.json on any token change so consuming projects can pin a known-good release. Branding lives in one place: edit here, re-pull everywhere.