Your Organisation · Style Guide v1
Tokens, type, and components — all in one place.
The single source of truth for every page, course, and learning experience your team builds. Follow these patterns and every project will feel consistent, accessible, and on-brand.
All colours, spacing, and motion live as CSS custom properties. Copy the :root block into every new file. Dark mode remaps every token automatically — no extra code.
--ease: cubic-bezier(.4,0,.2,1) — use for all transitions. Duration: 200ms micro-interactions · 350ms panels · 600ms scroll reveals.
Two fonts. One rule: always use class names, never override heading tags globally. Include the Google Fonts link in every file's <head>.
Fraunces
--font-display · Headlines, H2, H3, card titles, pull quotesFraunces:opsz,wght@9..144,400;9..144,600;9..144,700
Hanken Grotesk
--font · Body copy, UI, nav, buttons, labels, captionsHanken+Grotesk:wght@400;500;600;700
Twenty years translating complex tools and workflows into clear, accessible learning for every kind of audience.
Body copy at 17px with comfortable line-height. Used for all general prose, descriptions, and paragraph content across every page and course.
Smaller text for card descriptions, footnotes, and secondary information. Never use for body-length paragraphs.
Section Label
Hover lifts 1px; active presses down. Box-shadow uses teal shadow tokens. Min-width: 120px.
Border and text use --btn-bg so they swap correctly in dark mode. Never use two solid .btn side by side.
Arrow slides 4px on hover. The › IS the affordance — never add underline. Use everywhere you'd normally underline a link.
Active pill uses --ink (near-black). In dark mode it flips to near-white automatically. Use for filtering, not navigation.
The standard card, flip card, hover tile, and expertise tile — the four ways to present clickable content blocks.
A short description of this course or content piece. Two to three sentences. Focus on what the learner will be able to do.
View course ›Responsive content that works on phones, tablets, and desktops. Cards always show three per row on desktop, two on tablet, one on mobile.
Check it out ›Tool-pill colour matches the category. Add data-tool="storyline" and set the pill colour class accordingly.
This is the revealed content. Use flip cards for concepts that have a brief definition on front and deeper explanation on back — skills, theories, principles.
The grid is 2-column on desktop, 1-column on mobile. min-height: 210px ensures all cards in a row are the same height.
On desktop, CSS :hover handles the flip — no JS needed. On touch devices, a tap toggles the .flipped class via JavaScript.
Keyboard users can Tab to focus and press Enter or Space to flip. The ↻ hint rotates on flip as a visual cue.
Bands divide the page into chapters. Impact items surface numbers. The tool list organises dense catalogues of resources.
Band accordion, inline accordion, course-style tabs, STAR expand cards, testimonial carousel, and modal — the full interactive toolkit.
Expanded content goes here. Can contain any HTML — paragraphs, grids, flip cards, tool lists. Height animates via grid-template-rows: 0fr → 1fr.
Use band accordions to group subsections — portfolio by tool, design practice by principle, foundations by framework.
Multiple items can be open simultaneously. Each is fully independent.
Add more .bacc-item elements and the system handles colours and animation automatically.
A brief description of the role, responsibilities, and impact. Keep to three to five sentences. Focus on outcomes, not tasks. Opening this item closes any other open item.
Use inline accordion for career history, reading lists, or any content where a list of items each has a short expandable body. One open at a time.
The chevron rotates 90° when open. Closing happens automatically when another item is opened.
Tabs let you pack multiple views into one section without a long scroll. Use when you have 2–5 categories of equal importance.
Each panel can hold any content. The active pill gets the nth-child accent colour — cobalt, indigo, teal, coral cycling.
Fully keyboard accessible. Tab to focus a button, then use Left/Right arrows to move between tabs and Enter to select.
In the portfolio this holds Impact, Career, Case Studies, Industries, and Education in one compact section.
This is an example testimonial quote. It should be honest, specific, and ideally reference a real outcome or quality of the work that a future collaborator would care about.
A second recommendation. The carousel shows two at a time on desktop and scrolls by exact card-width. On mobile each card fills the viewport and you swipe. Arrows hide at the ends automatically.
A third card demonstrating the carousel scroll. On touch screens the arrows are hidden — the track scrolls natively. On desktop, the ‹ and › buttons appear and hide at their respective ends.
Close with ✕ button, Escape key, or clicking the backdrop. All three must be implemented in every modal.
Follow these and every page your team builds will feel like it came from the same hand. Break them and the system starts to fracture.
✓ Always
.display, .h2, .lead — never override tags globallyvar(--token-name) for every colour — never hard-code hex values in component CSSdvh or svh — never plain vh — for any full-height layout (iOS Safari breaks it).btn per visual section maximum — use .chev for all other linksaria-expanded, aria-label, and role on all interactive controls✗ Never
› on .chev is the affordance. No underlines anywhere..display more than once per page — it's for the hero H1 onlyvar() token.grad to more than one word — it loses all impact immediatelyvh for full-height layouts — iOS Safari collapses them when the toolbar shows--focus-ring).btn side-by-side without one being .btn-secondary — one is always primary