# BC + AI design guidelines
# Contract version: 2026-09-07
# Human version: https://bc-ai.ca/design-guidelines
# Colour, type, logo, and photography are also shown visually on the page above.
# Boilerplates, fact sheet, and downloads: https://bc-ai.ca/press-kit
#
# These are the rules for building a BC + AI surface. Values are derived from
# live usage, not preference; see docs/design/design-guidelines-usage-audit.md.

## Spacing
Basis: Tailwind 4px scale
Use Tailwind spacing utilities directly. There is no BC + AI spacing token, and adding one would fork a scale the site already follows.
- 1 (4px / 0.25rem) · Hairline gaps inside a control or between an icon and its label.
- 2 (8px / 0.5rem) · Tight grouping: label to value, chip to chip.
- 3 (12px / 0.75rem) · Default gap between related items in a list or card.
- 4 (16px / 1rem) · Default padding inside a card or small panel.
- 6 (24px / 1.5rem) · Page gutter and separation between distinct blocks.
- 8 (32px / 2rem) · Padding inside a large panel; gap between subsections.
- 12 (48px / 3rem) · Space between sections within a page region.
- 16 (64px / 4rem) · Vertical rhythm between major page sections.
- 24 (96px / 6rem) · Top and bottom of a page, and around a full-bleed break.

## Radius
- Control: --bcai-radius-control = 0.5rem · Inputs, chips, and tags. Buttons are square by default and are the exception, not the rule.
- Card: --bcai-radius-card = 0.75rem · Cards, tiles, and the default rounded container.
- Panel: --bcai-radius-panel = 1rem · Large panels, sheets, and dialogs.
- Pill: --bcai-radius-pill = 9999px · Badges, avatars, and status dots. Never a primary button.

## Elevation
- Resting: --bcai-elevation-1 = 0 2px 12px rgba(0, 0, 0, 0.35) · A card sitting on the canvas. Most cards need only a border.
- Raised: --bcai-elevation-2 = 0 8px 24px rgba(10, 13, 18, 0.45) · Hover, active drag, and panels that lift off the page.
- Overlay: --bcai-elevation-3 = 0 24px 80px rgba(0, 0, 0, 0.28) · Dialogs, menus, and anything that covers the page.
- Pair every elevation with a border token. On the navy canvas a shadow alone reads as a smudge rather than a height.
  source: app/globals.css
- Glow is a separate axis and means signal, not elevation. Never put a glow utility and an elevation token on the same element.
  source: app/globals.css

## Layout
- Content: --bcai-content = 72rem · Default maximum width for reading and standard page sections.
- Wide content: --bcai-content-wide = 90rem · Galleries, dense grids, and full-bleed-adjacent composition.
- Hold a 24px page gutter on small screens and let the max width do the rest.
  source: docs/design/design-guidelines-usage-audit.md

## Buttons
Component: components/ui/Button.tsx
Sizes: sm, md, lg
- Primary (variant="primary") · The one action a page wants. Chartreuse fill on ink text, one per view.
- Secondary (variant="secondary") · A real but non-primary action. Outline only, no fill.
- Ghost (variant="ghost") · Tertiary and inline navigation. Reads as a link, not a control.
- Buttons are square-cornered. Accent CTAs across the site are overwhelmingly set without a radius class, so the sharp edge is the house convention rather than an oversight.
  source: components/ui/Button.tsx, docs/design/design-guidelines-usage-audit.md
- One primary button per view. If two actions both look primary, neither is.
  source: components/ui/Button.tsx

## Communities
A room gets no private palette, typeface, or logo. Two things vary, both by rule.

Lockups
A room lockup is the organisation wordmark with the room prefix substituted, set identically: mono face, uppercase, 0.18em tracking, a space either side of the plus. Nothing else changes, and no room gets a second typeface or a symbol.
- BC + AI · the organisation
- FV + AI · Fraser Valley
- CV + AI · Comox Valley
- OK + AI · Okanagan
- ED + AI · Education
Named, not locked up: AI Film Club, MAC, Life Sciences, Futures Lab, Creativity + Design

Signals by kind
- regional: --bcai-signal-steel · Every regional room shares one signal. A place is a place; Fraser Valley is not a different kind of thing from Comox Valley, so colour is the wrong axis to separate them. They differ through their lockup and their own photography.
- special-interest: one signal each, no two alike · Subject-matter rooms each take a distinct signal, because subject matter is exactly what a reader is being asked to tell apart. No two may hold the same one.

Assignments
- FV + AI (regional): --bcai-signal-steel
- CV + AI (regional): --bcai-signal-steel
- OK + AI (regional): --bcai-signal-steel
- ED + AI (special-interest): --bcai-accent-mint
- MAC (special-interest): --bcai-signal-ice
- Life Sciences (special-interest): --bcai-signal-glacier
- AI Film Club (special-interest): --bcai-signal-coral
- A room may not introduce a colour, typeface, logo, or lockup of its own. Every community route was audited on 2026-09-07 and none does.
  source: lib/visual-contract.ts, docs/design/design-guidelines-usage-audit.md
- A signal follows the kind of room, not the room. Regional rooms share steel on purpose. A new regional room takes steel; it does not get to pick.
  source: docs/design/design-guidelines-usage-audit.md
- No two special-interest rooms may hold the same signal. A new one takes an unused signal, or the system needs a decision before it launches.
  source: docs/design/design-guidelines-usage-audit.md
- The plus-AI lockup is granted, not assumed. A room that does not have one uses its name. Do not invent an initialism for it.
  source: docs/design/design-guidelines-usage-audit.md
- Print stylesheets are the one place a literal colour is allowed, because ink on paper is not the screen canvas.
  source: docs/design/design-guidelines-usage-audit.md

## Logo use
- Keep clear space around the wordmark equal to the cap height of the B on every side.
  source: lib/press-kit/brand-contract.ts
- Do not set the wordmark below its 14px chrome size. Below that the 0.18em tracking closes up and it stops reading as a mark.
  source: lib/press-kit/brand-contract.ts
- Do not recolour, rotate, outline, condense, or add effects to the wordmark, and never set it in a different typeface. Keep a space either side of the plus.
  source: lib/press-kit/brand-contract.ts
- Do not reintroduce the DNA-helix identifier or any other symbol as a logo. BC + AI is identified by its wordmark.
  source: lib/press-kit/brand-contract.ts

## Known gaps
- There is no BC + AI icon system. Icons are chosen per surface today. Until one is adopted, do not introduce a new icon family without a governance decision.
  source: docs/design/design-guidelines-usage-audit.md
- The press kit still offers the DNA-helix square as a downloadable logo mark, while governance records that identifier as superseded. Until that asset is replaced or withdrawn, anyone downloading a BC + AI logo receives the retired identity. Use the wordmark.
  source: lib/press-kit/brand-contract.ts, docs/design/design-guidelines-usage-audit.md
- There is no vector or image mark at all, retired helix aside. The identity is typographic, so large-format use sets the wordmark in Geist Mono rather than scaling a file.
  source: lib/press-kit/brand-contract.ts
- Some arbitrary shadow values predate the elevation tokens. New work uses the tokens, but most of those values are accent glows and must stay as they are: converting a glow to an elevation would break the signal system. Check which axis a shadow belongs to before touching it.
  source: docs/design/design-guidelines-usage-audit.md, app/globals.css

## Sources
- Live global tokens: app/globals.css (reviewed 2026-09-07)
- Shared button component: components/ui/Button.tsx (reviewed 2026-09-07)
- Route and community visual contract: lib/visual-contract.ts (reviewed 2026-09-07)
- Live usage audit, 2026-09-07: docs/design/design-guidelines-usage-audit.md (reviewed 2026-09-07)
- Press-kit brand contract: lib/press-kit/brand-contract.ts (reviewed 2026-09-07)