AIDA Labs canonical design (v2, locked 4 October 2026)

AIDA Labs · Library · Design record · Status: CANONICAL

This is the approved, locked design for aidalabs.ca and its sites. Mike approved it on 3 October 2026 ("it's perfect, lock it all down"). Any change from here is a new version: build it, preview it, approve it, then record it here.

v2 (4 October 2026), locked: "mark everything locked, all versions canon" (Mike). Everything in section 10 below. Locked copy: a folder on the Mac on AIDA Labs Toronto and a server file on AIDA Labs Quebec, both read-only with SHA-256 manifests.

v1.3 (3 October): the light palette is named Paris morning, and the servers are named AIDA Labs Quebec and AIDA Labs Toronto.

v1.2 (same day): two more palettes, Paris night (darker) and Paris morning (light, warm), with hub.aidalabs.ca moved to Paris morning.

v1.1 (same day): the Sample Bank sites joined the design. Both project blueprints (Sample Bank and Sample Bank) now use Paris dusk, and the Sample Bank AML hub and Sample Bank blueprint have their own addresses on aidalabs.ca. The v1 lock folder is unchanged; v1.1 is recorded here and in the Site Map.

A read-only copy of everything that makes up this version sits on the Mac in a folder on the Mac, with a SHA-256 checksum for every file. The live server folders are snapshotted at the same point.

1. Colour theme: "Paris dusk"

Taken from the evening sky of the AIDA Paris morning illustration.

All page colours live in the single THEME block at the top of shared/aidalabs-blue.css. To re-colour the site, change only that block.

1b. Other palettes

All three palettes come from the AIDA Paris morning illustration. Each is a small file in shared/themes/, copied to every site's /assets/.

Rule: a dark page uses Paris dusk or Paris night. A page that needs a light background, such as a dashboard, uses Paris morning.

1c. Canonical names

Use these names in every document, page and script comment.

2. Type

• Headings: Georgia / Gelasio (serif).
• Body: Calibri / Carlito, falling back to Segoe UI, Helvetica, Arial.
• Minimum size: 14 px, no exceptions on AIDA Labs pages. The one known exception is hub.aidalabs.ca, an exact copy that keeps its original small labels.

3. aidalabs.ca home page, in order

1. About AIDA: kicker, title and the "AIDA stands for Artificial Intelligence Data Analysis" lead.
2. What that means in practice: two button boxes.
   • Left: "AI speeds up the building…" (gold) → /how-we-build/ai/
   • Right: "The controls are designed in…" (light blue) → /how-we-build/controls/
3. Our products: three button boxes, in the same order as "See it working":
   • AIDA Portal (gold border and title) → /aida-portal/
   • AIDA Intelligence Hub (light blue) → hub.aidalabs.ca
   • AIDA Project Blueprint (navy) → /blueprint/
4. See it working: the notched accordion, four panels:
   1. Job Seeker Portal → aida-job-search.ca
   2. Recruiter Portal → recruiter.aida-job-search.ca
   3. Intelligence Hub → hub.aidalabs.ca
   4. Project Blueprint → blueprint.aidalabs.ca
5. Guardrails we already use: 10 numbered cards, with circles alternating gold and light blue.
6. Our founder: biography (gold top) and Credentials (light-blue top).

4. Button boxes (the canonical interaction)

• The whole box is the link. There's no link text and no underline anywhere inside it.
• At rest: it looks like a normal content box.
• Hover: it lifts 3 px, its shadow deepens and its background brightens one step. The pointer becomes a hand.
• Press: it moves down 1 px for a moment, like a physical button.
• Focus: no outline for mouse or touch users. Keyboard users get a thin light-blue outline.

5. Navigation

• Brand menu ("AIDA LABS ▾"): Company first, then Products, then Client work. All four Client work links end with ↗.
  • Sample Intelligence Hub → hub.aidalabs.ca
  • Sample Project Blueprint → blueprint.aidalabs.ca
• Header button: "AIDA Home" → aidalabs.ca.
• Top band: an 8 px gold line across the top of every page.

6. Pages

7. Project blueprints

• Live data: the Sample Bank board reads its live figures through /api/ (read-only) and can save mockup review notes (one narrow, rate-limited write).
• Updates: both boards are always updated together with scripts/14_update_blueprints.zsh.

8. Devices

Every page is checked at desktop 1440 px, iPad mini 744 px (portrait) and 1133 px (landscape), and iPhone 12 mini 375 px. Each check covers sideways scrolling, text under 14 px, underlines in buttons, text overflowing its box, script errors and missing files. All pages passed at lock time.

9. How the site is produced

• Source: the consulting site copy in _sources/consulting_site/, the page text in content/, and the styles in shared/aidalabs-blue.css and toolbox/toolbox.css.
• Build: scripts/build_from_consulting.py. It renames AIDA Consulting to AIDA Labs, rewires the links, puts Company first in the menu, adds the ↗ arrows, sets the AIDA Home button, turns the boxes into buttons, builds Our products and the accordion, builds the how-we-build pages, the library and the toolbox, and stamps every asset link with a content version.
• Deploy:
  • scripts/06_deploy_from_consulting.zsh for aidalabs.ca, hub and blueprint
  • scripts/08_deploy_library_toolbox.zsh for the library and toolbox
  • scripts/14_update_blueprints.zsh for both project blueprints

Both back up first, test nginx with automatic undo, and check that the live files match the Mac.

10. v2 additions (4 October 2026)

Palettes in use

Home page (aidalabs.ca), in order: section menu (sticky; phones scroll it) · Welcome to AIDA Labs (café picture left, text right, picture is a plain graphic with the box hover) · See it working (notched four-panel accordion: AI-Enhanced Job Seeker Portal, AI-Enhanced Recruiter Portal, SaaS Project Management, Intelligence Hub; each site's front page faded behind its panel, text in a frosted box) · Proudly Canadian, Practically Priced (4 detail pop-ups) · How we use AI · What that means in practice · Guardrails (12) · Our founder (box hover).

Products page: card deck with six products (AI-Enhanced Portals, Intelligence Hub, Project Plans and Blueprints, SaaS Project Management, Bespoke Canadian AIDA-bases and Analytics, Professional Services); names above, card left, text box right; fits one screen at 1366 × 657 and up.

Names: "Bespoke Canadian AIDA-bases and Analytics", "Executive Database Analytics" (Sample Bank: Executive Data Analytics; product: Database Analytics and Insights), "SaaS Project Management", "Project Plans and Blueprints", "Professional Services", "AI-Enhanced" portals, "Canadian Job Data".

Positioning: AI-Enhanced portals combine people, mechanical scoring and minimal AI; a person runs every command, so no AI or agent reaches the architecture. Hubs, Blueprints, Boards and databases have no AI inside; AI only speeds up building them. Out of the box, tailored or bespoke; SaaS or the client's own install; token-minimizing AI where it helps. Canadian hosting, Law 25, outside the US CLOUD Act for stored data (Cloudflare does not store data; its removal is planned).

Shared components: al-detail (box opens a pop-up), al-deck (card deck), al-labsnav (AIDA LABS menu on product subdomains, palette-matched), al-sitebtns (Portal · Projects · Hub · Get the app · AIDA LABS, 124 × 40, paper with espresso text, current site gold, contrast ≥ 9:1), section menu, breadcrumbs, self-hosted Gelasio and Lato (no Google Fonts).

Project Plan viewer (content/projectplan.js): tabs Overview · Releases (each release with its tasks, milestones, sprints, critical-path count and work by area, all clickable) · Schedule · Tasks · Milestones · Critical path · Resourcing; every overview tile and release card drills down (Schedule, Tasks filtered by type or release, Milestones, Critical path); Tasks has a Type filter; used in a pop-up on the portals and on the page at projects.aidalabs.ca.

Hubs: the "I understand" notice screen is switched off; the fictional-data note stays in the header.

11. Additions (10 October 2026)

AIDA dropdown. The AIDA LABS product menu (toolbox.aidalabs.ca) is the canonical dropdown for every AIDA site: the brand name is the trigger with a small arrow; the panel has a 6px coloured band on top, small uppercase section labels, and each choice is a bold title with a one-line description; the current page is marked with a left bar. Keyboard: ↓ opens and moves, ↑ moves, Esc closes and returns focus; outside click or tabbing away closes. Per-site colours: AIDA Labs gold on dark; AIDA Job Search coral band, ink outline, 6px offset ink shadow on white; AIDA Recruiter Services steel band, gold labels, brass offset shadow on black. On phones and tablets (≤1023px) it replaces the nav, and any row of buttons that no longer fits on one line becomes the same dropdown (each button keeps its colour as a small square). Code: the shared AIDA mobile kit, aida-website-handoff/aida-mobile-kit/ (one style sheet and one script; the site's colours are picked from <html data-aida-kit="jobs|recruiter">).

3D trading card. The toolbox .al-pop card applied to the AIDA trading cards: each card image is cut into three layers from the same picture (card body, illustration panel lifted 34px, name bar lifted 56px) with a glare and floor shadow; it tilts with the mouse, a finger or keyboard focus and sways slowly when idle; still for reduced motion. jobs.aidalabs.ca only for now.

Tables on phones. At ≤760px every table row becomes a card with each value labelled by its column; a score shows as a badge; pagers keep only Prev / page / Next.

Pictures on the portal sites (11 October 2026). No base64 pictures inside pages on the trial copies: the publish step moves them to /aida-media/<content-hash>.<ext>, served with a one-year cache. The recruiter generator links assets/aida_paris.jpg instead of embedding it.

12. Additions (11 October 2026)

Explainer videos. One captioned video per product plus one for AIDA Labs, about a minute each. No voice and no music: captions carry everything. House style (template in a folder on the Mac):

• 1920 × 1080, 25 fps, web MP4 (crf 28, fast start), poster = the title card.
• Title and end cards on the Paris dusk backdrop: gold kicker, Gelasio headline with the key words in gold, Lato line, gold rule, the product picture on the right.
• Caption boxes: Paris dusk blue (#34445A at 95%), lamp-glow gold top rule (#ECC58F), cream headline with lamp-glow emphasis, pale blue body (#D9E4EE).
• Real screens of the live product in its own AIDA palette (never the Sample Bank colours), with fictional sample data only.

Video block on a page. A video is the first thing on the page, above the welcome or hero: small uppercase "Watch · About a minute" kicker in the page's accent, a headline ("… in about a minute"), then the video in a 16:9 frame with a 2px gold border, rounded 14px, soft shadow, poster shown until play, nothing downloaded until play (preload="none"), and "Captioned, no sound needed." underneath. Two videos sit side by side and stack on phones. Product lists use a "▶ Watch" link that opens the video in a player window (Close button, Esc, click outside). Sources: content/video_main.html, content/video_products.html, scripts/menu_videos.py, and video_section.html beside each portal generator.

AIDA LABS menu order. Products first, then Company, then Client work (scripts/menu_order.py, every AIDA Labs page, not the Sample Bank sites).

‹ Back to the library