Overview
Kickoff is a website kit for a cohort-based course platform. It is built so a course team can launch a cohort page quickly and re-skin it for different courses.
The challenge
Cohort courses live on deadlines: when applications close, when the cohort starts, how many seats are left. Most course sites hide this information. The kit also had to work for more than one brand without redesigning every page.
Approach
Dates first. A loud orange hero and a running ticker ("Applications close Oct 13 · Cohort 14 starts Oct 20 · 9 seats left · Demo Day Dec 1") keep the next step obvious on every page.
A real calendar, not a paragraph. "Pick a start date." shows upcoming cohorts on a calendar with a course card and seats left, so choosing a cohort is one click.
The six weeks, mapped. A week-by-week curriculum (foundations, components, systems thinking and more) shows exactly what students will do.
Proof through outcomes. "Every cohort ends with demo day." shows real-style student projects, and a short 3-step application flow keeps sign-up simple.
Design system
Built as a kit: 22 pages and 4 brand modes (orange, yellow, green, pink). Colors are tokens, so swapping one theme re-skins every page. Display type mixes a bold sans with a script italic accent, plus a mono face for dates and labels.
Scope and build
22 pages and 4 brand modes, designed in Figma with components and variables, and built in Framer.
What I learned
Designing with tokens from the start is what makes a template reusable. One swap should change the brand, not the layout.
