Image drop shadow
The glow matches the card.
AIDA Labs · Toolbox · Canonical v1.1
AIDA Labs Toolbox
Every building block of the AIDA Labs sites, live and working. Load /assets/aidalabs-blue.css (theme and site styles) and /assets/toolbox.css (card components). Add /assets/toolbox.js for the pop-out tilt. Each block shows its class names.
Palettes
Three palettes from the AIDA Paris morning illustration. Paris dusk is the canonical default.
Paris dusk (default, dark)
aidalabs.ca, library, toolbox, both blueprints. /assets/paris-dusk.css
Page#4A5E78 → #34445A
Cards#2B3A4E
Gold#D7AF59
Light blue#7FA3C9
Blue#49698C
Navy#1F2A36
Paris night (darker)
For a deeper, evening look. /assets/paris-night.css
Page#34445A → #2A3747
Cards#25313F
Gold#D7AF59
Light blue#7FA3C9
Lines#465870
Navy#1F2A36
Paris morning (light, warm, bright)
For light backgrounds such as dashboards. Used by hub.aidalabs.ca. /assets/paris-morning.css
Page#F7F0E4
Cards#FFFCF6
Lamp glow#ECC58F
Gold text#9A6B22
Paris sky#3E5F80
Top bar#E3EAF2
Header#34445A
Espresso#2B2520
1 · Button boxes
The whole box is the button. No underlines; it lifts on hover and presses on click. The first box is gold and the second light blue.
A gold button boxUse for the first or most important of a pair. The title takes the box's accent colour.
A light-blue button boxThe second box of a pair. Keyboard users get a thin outline; mouse and touch users don't.
2 · Product boxes
Three button boxes in a row, with gold, light-blue and navy edges. They stack below 860 px.
3 · See it working (notched accordion)
Four linked panels. Hover, tap or tab to open one. They stack on phones and tablets.
Panel oneShort description of the destination.address ›
Panel twoNumbers come from CSS counters.address ›
Panel threeNotched corners where the browser supports them.address ›
Panel fourEach panel is a link.address ›
4 · Numbered cards
Used for the guardrails and the rules. The circles alternate gold and light blue.
1First ruleA short explanation in plain words.
2Second ruleTwo columns on desktop and tablet, one on phones.
5 · Step panels with a lesson
Step 1
A worked step
What happened, in plain words.
Lesson: what we learned and the rule it became.
6 · Checklist
- A ticked item, gold tick.
- A ticked item, light-blue tick.
7 · Safe deploy patterns
The building blocks behind every AIDA Labs deploy script. The full scripts are in the library.
1Read-only inventoryLook before changing: list folders, compare checksums, save the result to a file. Changes nothing.
2Back up firstCopy the live folder and the server settings, with a timestamp, before anything is replaced.
3Test, then switch on, or undoInstall the settings, test them, and only then reload. If the test fails, the old settings go back and nothing is uploaded.
4One named block, checkedEdit only one block of a settings file, and stop without writing if that block isn't exactly as expected.
5Twins deploy togetherSites that must look alike are updated by one script, so they can never drift apart.
6Version stamps and live matchEvery style and script link carries a content stamp, and each deploy checks the live files match the local ones.
7Copy, keep the originalCopies of client sites are copies, not links. The original stays untouched as the backup.
8Lock what's approvedAn approved version becomes a read-only folder with a checksum for every file.
8 · The original five card styles
The first-draft components, adapted from MIT-licensed originals on FreeFrontend (credits below), kept for later customization.
Ribbon leaderboard
- First rowHover a row to pull it forward.
- Second rowNumbered with CSS counters.
Holo card
Holographic project card
Previews fan out on hover.
Credits
Pop-out after mubangadv · Image drop shadow after Kriss Steindals · Ribbon leaderboard after Fabio Ottaviani (supah) · Holographic cards adapted from Mandy Nicole · Notched accordion adapted from Chris Bolson. All MIT-licensed, found on freefrontend.com. Full notice in toolbox/CREDITS.md.