{"slug":"seminar","name":"Seminar – Cohort Learning Platform","version":"1.4.2","category":"education","priceCents":0,"description":"An online course template Next.js creators can use to show the full learner journey, from choosing a cohort to submitting and revising a critique-ready artifact. Seminar includes seven routes, thirteen sections, twenty-six primitives, seven original studio images, a canonical Wire Diagram learning trail, course catalog, lesson workspace, learner studio, mentor roster, and a living component guide. The Fieldnote demo stays honest about scope: fixtures and studio actions run in React, not an LMS backend. Both modes use computed AA pairs, every type size and color is token-driven, three OFL variable fonts ship locally, and the runnable zip includes agent workflows for rebranding and extension. Fourteen of the primitives are the shared tt-ui parts — dialog, confirm dialog, menu, popover, tooltip, toast, tabs, date picker, table sort, pagination, toggle group, search, skeleton and disclosure — each with Escape, focus trap, focus return and a real keyboard model, and each skinned entirely in Seminar's own tokens. The seven routes ship again as a framework-free HTML template that runs the same parts in vanilla JavaScript, compiled to standalone documents with local fonts for hosts without a Node build.","summary":"For creators teaching in cohorts: a free online course template Nextjs with a catalog, a lesson workspace, a learner studio and mentors. 7 routes.","tags":["online course template nextjs","education website template tailwind react","cohort course platform template","learning platform ui","course creator website","tailwind education theme"],"accent_mode":"second-hue","palette":{"bg":"#a8c2b7","surface":"#eaf4ef","accent":"#003b31","text":"#14211d","line":"#8ea99d"},"darkMode":true,"pages":[{"path":"/","title":"Fieldnote: practice the real thing","sections":["site-header","hero","learning-trail","course-shelf","cohort-band","mentor-notes","cta","site-footer"]},{"path":"/courses","title":"Courses: choose your studio","sections":["site-header","course-index","cohort-band","site-footer"]},{"path":"/course","title":"Service systems in practice","sections":["site-header","course-overview","learning-trail","mentor-notes","cta","site-footer"]},{"path":"/lesson","title":"Lesson 03: test the failure","sections":["site-header","lesson-shell","site-footer"]},{"path":"/studio","title":"Learner studio: continue your work","sections":["learner-studio"]},{"path":"/mentors","title":"Mentors: meet your critics","sections":["site-header","mentor-roster","mentor-notes","cta","site-footer"]},{"path":"/components","title":"Components","sections":["site-header","hero","learning-trail","course-shelf","cohort-band","mentor-notes","course-index","course-overview","lesson-shell","learner-studio","mentor-roster","cta","site-footer"]}],"components":[{"name":"site-header","file":"src/components/site-header.tsx","renders":"Sticky Fieldnote navigation, mode toggle, mobile disclosure and course action"},{"name":"hero","file":"src/components/hero.tsx","renders":"Hard 50/50 hero pairing a short imperative proposition with the first learning-trail artifact"},{"name":"learning-trail","file":"src/components/learning-trail.tsx","renders":"The canonical Wire Diagram route with square milestones, a critique-ready fork, mentor handoff and repair loop"},{"name":"course-shelf","file":"src/components/course-shelf.tsx","renders":"Three course choices with outcomes, schedules and explicit formats on an asymmetric shelf"},{"name":"cohort-band","file":"src/components/cohort-band.tsx","renders":"Full-bleed October cohort schedule, capacity, studio cadence and refund terms"},{"name":"mentor-notes","file":"src/components/mentor-notes.tsx","renders":"Named critique notes placed beside the learner artifacts they improve"},{"name":"course-index","file":"src/components/course-index.tsx","renders":"Course catalog opener with a working topic filter: pressed pills narrow the real course fixtures, and a topic with no match states it plainly"},{"name":"course-overview","file":"src/components/course-overview.tsx","renders":"Course detail opener with syllabus facts, deliverables and one primary enrollment action"},{"name":"lesson-shell","file":"src/components/lesson-shell.tsx","renders":"Lesson workspace with progress, transcript excerpt, exercise checklist and critique handoff"},{"name":"learner-studio","file":"src/components/learner-studio.tsx","renders":"Enrolled-learner sample with a Wire trail, next action, local submission, critique, cohort timing, version history, permissions and recoverable states"},{"name":"mentor-roster","file":"src/components/mentor-roster.tsx","renders":"Mentor directory with practice areas, office hours and critique formats"},{"name":"cta","file":"src/components/cta.tsx","renders":"Closing course action with time, cost and refund risk answered beside it"},{"name":"site-footer","file":"src/components/site-footer.tsx","renders":"Fieldnote brand, route links, scope note and type colophon"},{"name":"ui/badge","file":"src/components/ui/badge.tsx","renders":"The badge family — Eyebrow, the presentational Status label, and StatusBadge, which carries a verdict about a submission as ground, edge, glyph and word so the verdict is never colour alone"},{"name":"ui/progress","file":"src/components/ui/progress.tsx","renders":"A segmented completion rail on the theme's gap-px divider grid: one cell per milestone or check, the count drawn in words beside it, and no continuous or indeterminate variant because nothing this studio measures is either"},{"name":"ui/avatar","file":"src/components/ui/avatar.tsx","renders":"The initials square that stands in for a mentor or a learner at 40 and 48 pixels, on either the primary or the secondary ground, hidden from screen readers because the name is always printed beside it"},{"name":"ui/button","file":"src/components/ui/button.tsx","renders":"Primary, secondary and ghost actions using the complete state ramp and visible focus, with pressed, disabled and pending states — pending keeps its label, moves to the info surface, sets aria-busy and refuses a second press"},{"name":"ui/container","file":"src/components/ui/container.tsx","renders":"Prose, default and wide content measures"},{"name":"ui/dashboard-layout","file":"src/components/ui/dashboard-layout.tsx","renders":"Responsive sidebar, rail and top-bar geometry for Seminar application routes"},{"name":"ui/field","file":"src/components/ui/field.tsx","renders":"The form family — Field (label, control, instruction and error line on caller-supplied ids), Input, Textarea, FileInput and Checkbox, with rest, invalid, read-only and disabled surfaces, plus the fieldClasses helper"},{"name":"ui/logo","file":"src/components/ui/logo.tsx","renders":"The Fieldnote brand mark drawn as a folded page path"},{"name":"ui/mode-toggle","file":"src/components/ui/mode-toggle.tsx","renders":"Accessible light and dark switch scoped to Seminar"},{"name":"ui/section-heading","file":"src/components/ui/section-heading.tsx","renders":"Eyebrow, section title and one-sentence lede"},{"name":"ui/type","file":"src/components/ui/type.ts","renders":"Token-backed 1.250 type vocabulary and optical tracking"},{"name":"ui/wire-figure","file":"src/components/ui/wire-figure.tsx","renders":"Semantic renderer for src/assets/learning-trail.wire.json with cards, fork rails, connectors, loop edge and generated text alternative"},{"name":"ui/accordion-disclosure","file":"src/components/ui/accordion-disclosure.tsx","renders":"Native <details> disclosure for the syllabus rows and both nav panels, keeping Seminar's 45deg turn and height tween while adding the Escape close the element never had"},{"name":"ui/dialog","file":"src/components/ui/dialog.tsx","renders":"The studio's modal plate — tinted header band, one hairline, three measures — used for a submission's version history and the enrolment question"},{"name":"ui/confirm-dialog","file":"src/components/ui/confirm-dialog.tsx","renders":"The withdrawal question as an alertdialog: the consequence is the described-by sentence, Cancel takes focus, and the course code is typed into a gate before the irreversible half unlocks"},{"name":"ui/dropdown-menu","file":"src/components/ui/dropdown-menu.tsx","renders":"Row actions on a submission — resubmit, download, withdraw — as a roving menu of ghost rows, with a refusal that says why"},{"name":"ui/tooltip","file":"src/components/ui/tooltip.tsx","renders":"A hint on the control it came out of, drawn on the tint behind the hovered-control edge so it reads as attached rather than floating"},{"name":"ui/popover","file":"src/components/ui/popover.tsx","renders":"The anchored note a cohort date or a mentor's office hours opens into, dismissed by Escape, an outside press or Tab"},{"name":"ui/toast","file":"src/components/ui/toast.tsx","renders":"Submission and critique receipts in five tones, each carrying ground, edge, glyph and the tone's word so no verdict is colour alone"},{"name":"ui/tabs","file":"src/components/ui/tabs.tsx","renders":"The learner studio's view switch — brief, submission, critique — where the chosen tab wears the same selection tokens a pressed button does"},{"name":"ui/date-picker","file":"src/components/ui/date-picker.tsx","renders":"The studio-slot grid that replaced a list of dates: arrow keys, Home/End, PageUp/PageDown, and square day cells that combine selected, today and out-of-month"},{"name":"ui/skeleton","file":"src/components/ui/skeleton.tsx","renders":"The waiting state for the submission history — four cycled line measures, no shimmer, and a status line that says the wait in words"},{"name":"ui/sort-head","file":"src/components/ui/sort-head.tsx","renders":"A sortable column head as a mono index in a ghost control, with the sorted column's ground swapped so the working column is found without reading glyphs"},{"name":"ui/pagination","file":"src/components/ui/pagination.tsx","renders":"Page targets as square mono figures on a gap-px divider grid, with the live range sentence beside them"},{"name":"ui/toggle-group","file":"src/components/ui/toggle-group.tsx","renders":"The course catalog's topic filter as a single-select radio group: one tab stop, arrow keys, and the selection tokens the rest of the theme uses"},{"name":"ui/search-input","file":"src/components/ui/search-input.tsx","renders":"The catalog's search box on the field family's own control ramp, with a clear control that appears only when there is something to clear and a polite result count"}],"tokens":{"--background":"#a8c2b7","--foreground":"#14211d","--card":"#eaf4ef","--card-foreground":"#14211d","--primary":"#003b31","--primary-foreground":"#f4fbf8","--primary-hover":"#002a22","--primary-active":"#001a15","--band":"#003b31","--band-foreground":"#f4fbf8","--band-hover":"#002a22","--band-active":"#001a15","--secondary":"#cbdcd4","--secondary-foreground":"#20342d","--muted":"#b7ccc2","--muted-foreground":"#374f45","--accent":"#714433","--accent-foreground":"#fff7f1","--border":"#8ea99d","--ring":"#003b31","--field":"#f4fbf8","--field-border":"#8ca79b","--control-border":"#758d82","--selection":"#bcd2c8","--selection-foreground":"#14211d","--selection-border":"#8aa397","--link":"#003b31","--link-hover":"#002a22","--positive":"#1f6b4e","--positive-soft":"#d7ede3","--positive-border":"#4c806a","--warning":"#764900","--warning-soft":"#f4e4c4","--warning-border":"#936514","--critical":"#80353f","--critical-soft":"#f5dfe2","--critical-border":"#aa4b5c","--info":"#005975","--info-soft":"#d5e8ed","--info-border":"#367b8d","--shadow-color":"#18352c","--scrim":"rgb(20 33 29 / 0.55)","--surface-tint":"#bdd4c9","--trail-line":"#5f7f72","--icon-stroke":"1.75","--radius":"0.75rem","--radius-inner":"0.5rem","--weight-display":"700","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.6","--text-d1":"1.5rem","--leading-d1":"1.25","--text-d2":"1.875rem","--leading-d2":"1.18","--text-d3":"clamp(2rem, 1.858rem + 0.606vw, 2.344rem)","--leading-d3":"1.12","--text-d4":"clamp(2.5rem, 2.322rem + 0.758vw, 2.93rem)","--leading-d4":"1.05","--tracking-d1":"-0.01em","--tracking-d2":"-0.01em","--tracking-d3":"-0.02em","--tracking-d4":"-0.025em","--tracking-label":"0.08em","--font-display":"var(--font-seminar-display), ui-sans-serif, system-ui, sans-serif","--font-text":"var(--font-seminar-text), ui-sans-serif, system-ui, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-seminar-mono), ui-monospace, monospace"},"tokensDark":{"--background":"#101b17","--foreground":"#eaf4ef","--card":"#17251f","--card-foreground":"#eaf4ef","--primary":"#5bd7b7","--primary-foreground":"#092019","--primary-hover":"#75e8c8","--primary-active":"#9af2d9","--band":"#0f3a30","--band-foreground":"#d5e8df","--band-hover":"#164a3d","--band-active":"#1a5646","--secondary":"#20342c","--secondary-foreground":"#d5e8df","--muted":"#15231d","--muted-foreground":"#9eb8ac","--accent":"#f1a280","--accent-foreground":"#291006","--border":"#2f443b","--ring":"#5bd7b7","--field":"#0d1713","--field-border":"#415a4e","--control-border":"#5a746b","--selection":"#264036","--selection-foreground":"#d5e8df","--selection-border":"#43594e","--link":"#5bd7b7","--link-hover":"#75e8c8","--positive":"#75d9a9","--positive-soft":"#173227","--positive-border":"#4f9773","--warning":"#f0c16c","--warning-soft":"#392b13","--warning-border":"#9a7b3e","--critical":"#ff9aaa","--critical-soft":"#3c181f","--critical-border":"#ad5967","--info":"#6acce8","--info-soft":"#142e36","--info-border":"#4b8ea2","--shadow-color":"#06110d","--scrim":"rgb(6 17 13 / 0.72)","--surface-tint":"#1f392f","--trail-line":"#557567","--icon-stroke":"1.75","--radius":"0.75rem","--radius-inner":"0.5rem","--weight-display":"600","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.6","--text-d1":"1.5rem","--leading-d1":"1.25","--text-d2":"1.875rem","--leading-d2":"1.18","--text-d3":"clamp(2rem, 1.858rem + 0.606vw, 2.344rem)","--leading-d3":"1.12","--text-d4":"clamp(2.5rem, 2.322rem + 0.758vw, 2.93rem)","--leading-d4":"1.05","--tracking-d1":"-0.01em","--tracking-d2":"-0.01em","--tracking-d3":"-0.02em","--tracking-d4":"-0.025em","--tracking-label":"0.08em","--font-display":"var(--font-seminar-display), ui-sans-serif, system-ui, sans-serif","--font-text":"var(--font-seminar-text), ui-sans-serif, system-ui, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-seminar-mono), ui-monospace, monospace"},"compatibility":{"next":">=15 <17","react":">=19 <20","tailwind":">=4 <5"},"dependencies":["lucide-react"],"editions":{"react":{"source":"src","runtime":"react"},"html":{"source":"html/src","output":"html/dist","engine":"nunjucks","runtime":"vanilla","buildRequired":false}},"ui_library":{"version":"1.5.2","files":["html/src/js/_tt/accordion-disclosure.js","html/src/js/_tt/anchor.js","html/src/js/_tt/confirm-dialog.js","html/src/js/_tt/date-picker.js","html/src/js/_tt/dialog.js","html/src/js/_tt/dropdown-menu.js","html/src/js/_tt/focusables.js","html/src/js/_tt/layer.js","html/src/js/_tt/pagination.js","html/src/js/_tt/pending.js","html/src/js/_tt/popover.js","html/src/js/_tt/presence.js","html/src/js/_tt/reduced-motion.js","html/src/js/_tt/roving.js","html/src/js/_tt/search-input.js","html/src/js/_tt/sort-head.js","html/src/js/_tt/table-sort.js","html/src/js/_tt/tabs.js","html/src/js/_tt/toast-queue.js","html/src/js/_tt/toast.js","html/src/js/_tt/toggle-group.js","html/src/js/_tt/tooltip.js","src/components/ui/_tt/accordion-disclosure.axes.ts","src/components/ui/_tt/accordion-disclosure.fixtures.ts","src/components/ui/_tt/accordion-disclosure.tsx","src/components/ui/_tt/anchor.ts","src/components/ui/_tt/calendar.ts","src/components/ui/_tt/capture.ts","src/components/ui/_tt/confirm-dialog.axes.ts","src/components/ui/_tt/confirm-dialog.fixtures.ts","src/components/ui/_tt/confirm-dialog.tsx","src/components/ui/_tt/date-picker.axes.ts","src/components/ui/_tt/date-picker.fixtures.ts","src/components/ui/_tt/date-picker.tsx","src/components/ui/_tt/dialog.axes.ts","src/components/ui/_tt/dialog.fixtures.ts","src/components/ui/_tt/dialog.tsx","src/components/ui/_tt/dropdown-menu.axes.ts","src/components/ui/_tt/dropdown-menu.fixtures.ts","src/components/ui/_tt/dropdown-menu.tsx","src/components/ui/_tt/focusables.ts","src/components/ui/_tt/host.ts","src/components/ui/_tt/ids.ts","src/components/ui/_tt/layer.ts","src/components/ui/_tt/layout-effect.ts","src/components/ui/_tt/pagination.axes.ts","src/components/ui/_tt/pagination.fixtures.ts","src/components/ui/_tt/pagination.tsx","src/components/ui/_tt/popover.axes.ts","src/components/ui/_tt/popover.fixtures.ts","src/components/ui/_tt/popover.tsx","src/components/ui/_tt/presence.ts","src/components/ui/_tt/recipe.ts","src/components/ui/_tt/reduced-motion.ts","src/components/ui/_tt/roving.ts","src/components/ui/_tt/search-input.axes.ts","src/components/ui/_tt/search-input.capture.ts","src/components/ui/_tt/search-input.fixtures.ts","src/components/ui/_tt/search-input.tsx","src/components/ui/_tt/skeleton.axes.ts","src/components/ui/_tt/skeleton.fixtures.ts","src/components/ui/_tt/skeleton.tsx","src/components/ui/_tt/sort-head.axes.ts","src/components/ui/_tt/sort-head.fixtures.ts","src/components/ui/_tt/sort-head.tsx","src/components/ui/_tt/table-sort.ts","src/components/ui/_tt/tabs.axes.ts","src/components/ui/_tt/tabs.fixtures.ts","src/components/ui/_tt/tabs.tsx","src/components/ui/_tt/toast-queue.ts","src/components/ui/_tt/toast.axes.ts","src/components/ui/_tt/toast.fixtures.ts","src/components/ui/_tt/toast.tsx","src/components/ui/_tt/toggle-group.axes.ts","src/components/ui/_tt/toggle-group.fixtures.ts","src/components/ui/_tt/toggle-group.tsx","src/components/ui/_tt/tooltip.axes.ts","src/components/ui/_tt/tooltip.fixtures.ts","src/components/ui/_tt/tooltip.tsx"]},"license":"free","design":{"typefaces":{"display":"Instrument Sans","text":"Karla","mono":"Spline Sans Mono"},"typeRatio":1.25,"signature":"The learning trail: a Wire Diagram evidence fork built from square milestone nodes, mentor handoff cards, connector rails and a repair loop","surface_kind":"marketing","built_against":"2026-08-24","levers":{"theme":"chromatic-material","density":"comfortable","accent_mode":"duotone","motion":"restrained","borders":"hairline","radius":"medium","texture":"none","shadow":"none"},"icons":{"set":"lucide","stroke":1.75,"ladder":["size-3.5","size-4","size-5"],"contexts":{"nav":"glyph","panel_header":"mark","fact_row":"none","feature_grid":"none"}},"disclosure":{"helper_line":"one-clause","sentence":"hint","paragraph":"details","parallel_views":"tabs","secondary_object":"drawer"},"cta":{"header":"quiet","hero":"filled","repeats":["fold","end"],"mobile":"inline"},"colour_budget":{"brand_max_pct":null,"concentration_pct":70,"regions":[]},"strict":["cta","icons"]}}