{"slug":"lumina","name":"Lumina – Language School & Skills Academy","version":"1.0.0","category":"education","priceCents":1400,"ui_library":{"version":"1.5.1","files":["html/src/js/_tt/accordion-disclosure.js","html/src/js/_tt/dialog.js","html/src/js/_tt/focusables.js","html/src/js/_tt/layer.js","html/src/js/_tt/mode.js","html/src/js/_tt/presence.js","html/src/js/_tt/reduced-motion.js","html/src/js/_tt/sheet-drawer.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/focusables.ts","src/components/ui/_tt/host.ts","src/components/ui/_tt/ids.ts","src/components/ui/_tt/layer.ts","src/components/ui/_tt/presence.ts","src/components/ui/_tt/recipe.ts","src/components/ui/_tt/reduced-motion.ts","src/components/ui/_tt/sheet-drawer.axes.ts","src/components/ui/_tt/sheet-drawer.fixtures.ts","src/components/ui/_tt/sheet-drawer.tsx"]},"license":"standard","description":"Lumina is a language school website template built in Tailwind and React for an independent language school, tutoring centre or skills academy, and for the freelancer or small studio handing one over on a fixed fee. Eight routes ship in two editions, React and framework-free HTML: four audience landings, the program catalogue, one program, the instructor directory and a drawn styleguide. Its signature is the sentence Matchboard: the page's H1 is the form, “I want to learn Spanish at beginner level, in person, starting in January”, with four of its words as real controls under a mono field label and a 4px underline, and the dated departure board and week grid below are the answer to whatever the sentence says. The four landings carry four different sentences, one each for evening languages, professional skills cohorts, one-to-one tutoring and training bought by an employer. On the catalogue the same sentence becomes five native selects that filter twelve programs for real, with a live count, a designed empty state, a URL round trip and a side-by-side comparison of at most three. Eighteen sections and fifteen primitives, two of them behaviour-carrying tt-ui parts that arrive with the keyboard model, focus return and scroll lock already written. Everything derives from one fixture: twelve programs, their sessions, intakes, instructors and the week grid, with eight build-time refusals that stop a count, a weekday or a tinted best-fit row from disagreeing with the data it came from. Structure is drawn with lines, never cards. No shadow token exists in either mode, the only radii are a 4px tag, a 6px block and the pill buttons, and the palette is warm stone and ink with one orange spent on decisions alone, authored in OKLCH and computed pair by pair across 124 tokens in each of light and dark. Self-hosted Bricolage Grotesque and Geist Mono. Built for Tailwind v4, Next.js 15 and React 19, and the HTML edition renders all eight routes with one classic script and opens from a filesystem with no server. What it does not do is deliberate: there is no LMS, no student login, no backend and no booking. Nothing is reserved or paid for on this site, and every action is a link to the school's own contact block.","summary":"For a school selling its own timetable: a language school website template tailwind whose headline is the form the dated board of twelve programs answers.","tags":["language school website template tailwind","tutoring website template react","corporate training website template nextjs","skills academy website template tailwind","class timetable website template react","vocational training website template react"],"accent_mode":"monochrome-plus-spot","palette":{"bg":"#efede6","surface":"#fbfaf6","accent":"#f35004","text":"#111114","line":"#c9c6bc"},"darkMode":true,"pages":[{"path":"/","title":"Lumina Edu — language school","sections":["site-header","hero-matchboard","departure-board","week-timetable","instructor-tiles","faq-stack","site-footer"]},{"path":"/skills","title":"Professional skills academy","sections":["site-header","hero-matchboard","cohort-calendar","practise-plan","instructor-tiles","faq-stack","site-footer"]},{"path":"/tutoring","title":"Tutoring centre","sections":["site-header","hero-matchboard","session-ledger","first-conversation","instructor-tiles","faq-stack","site-footer"]},{"path":"/teams","title":"Corporate training","sections":["site-header","hero-matchboard","session-ledger","consultation-facts","instructor-tiles","faq-stack","site-footer"]},{"path":"/programs","title":"Every program — the full matchboard","sections":["site-header","program-matchboard","departure-board","site-footer"]},{"path":"/program","title":"One program — the decision page","sections":["site-header","program-decision","program-narrative","session-ledger","related-programs","faq-stack","site-footer"]},{"path":"/instructors","title":"The instructors — the ruled directory","sections":["site-header","instructor-directory","site-footer"]},{"path":"/components","title":"The parts — the drawn style guide","sections":["site-header","token-sheet","hero-matchboard","departure-board","week-timetable","cohort-calendar","practise-plan","session-ledger","first-conversation","consultation-facts","instructor-tiles","instructor-directory","program-matchboard","program-decision","program-narrative","related-programs","faq-stack","site-footer"]}],"components":[{"name":"site-header","file":"src/components/site-header.tsx","renders":"The wordmark, the four-area pill switcher with aria-current, the Resources link and one quiet ink action; at 375 the switcher drops to its own scrolling rail under the bar."},{"name":"hero-matchboard","file":"src/components/hero-matchboard.tsx","renders":"The signature: the ink band, the greeting ribbon drifting behind it in outlined type, and the display sentence whose four bracketed words are real controls with a mono field label above each. Closes on the four-fact strip and the single Signal action."},{"name":"departure-board","file":"src/components/departure-board.tsx","renders":"The answer half of the signature: date-led rows on paper, the date in its own ruled column on a tinted ground, mono numerals right-aligned, and the matched row tinted in Signal with its best-fit label."},{"name":"week-timetable","file":"src/components/week-timetable.tsx","renders":"A week as a grid of slots — three dayparts by six days, stone-dark day heads, blocks for the sessions and a tinted ground for the empty cells, with the matched sessions filled in Signal."},{"name":"instructor-tiles","file":"src/components/instructor-tiles.tsx","renders":"Four ruled tiles, each a 120px language or subject monogram over a name and a mono availability line. The theme's oversized moment, and the only place type is used as a picture."},{"name":"faq-stack","file":"src/components/faq-stack.tsx","renders":"The four questions a visitor asks before booking, as ruled disclosure rows, beside the section's lede and its quiet action."},{"name":"site-footer","file":"src/components/site-footer.tsx","renders":"The 96px wordmark, the six-link nav, the school's line and the address row."},{"name":"cohort-calendar","file":"src/components/cohort-calendar.tsx","renders":"The skills academy's first quarter as three ruled month columns, each listing its cohort starts by day."},{"name":"practise-plan","file":"src/components/practise-plan.tsx","renders":"What a cohort actually does, week band by week band: the range, the title and one line of what is practised."},{"name":"session-ledger","file":"src/components/session-ledger.tsx","renders":"Upcoming sessions as a dated ledger — day column, time, what it is, who it is for, where, and the row's own action. The first matched slot is tinted."},{"name":"first-conversation","file":"src/components/first-conversation.tsx","renders":"The tutoring centre's three numbered steps from enquiry to a written suggestion to a four-week check-in."},{"name":"consultation-facts","file":"src/components/consultation-facts.tsx","renders":"The four facts a training manager needs before the call — team format, where, cohort dates, what comes first — and the consultation action."},{"name":"program-matchboard","file":"src/components/program-matchboard.tsx","renders":"The full matchboard: a display sentence whose five words are native selects in the drawn token, a filter row, a live facts strip, and the departure board beneath it actually filtered by all of them — with a designed empty state and a side-by-side comparison of at most three."},{"name":"program-decision","file":"src/components/program-decision.tsx","renders":"The ink decision band for one program — the title, three facts and the one Signal action — then the six-fact ruled strip a reader is committing to, and the line that says nothing is booked on the site."},{"name":"program-narrative","file":"src/components/program-narrative.tsx","renders":"What a program practises, as a ruled outcomes list, and the shape of its week as a facts strip whose live-class row is derived from the same cadence the board prints."},{"name":"related-programs","file":"src/components/related-programs.tsx","renders":"The rest of this program's own school as departure-board rows, so two programs are compared on the same six cells rather than on two summaries."},{"name":"instructor-directory","file":"src/components/instructor-directory.tsx","renders":"The ruled monogram grid at full size: four bands, one per school, each headed by what it teaches and a counted line — and the twelve languages the landings' link has always claimed."},{"name":"token-sheet","file":"src/components/token-sheet.tsx","renders":"The drawn style guide's token panels — 01 Colour, 02 Type and 03 Rules, space, corners — every swatch painted from the live custom property and every figure read out of the manifest's two token tables, so a caption cannot drift from the thing above it."},{"name":"ui/type","file":"src/components/ui/type.ts","renders":"The type vocabulary: the four UI rungs, the four display rungs, the two picture roles, the mono label and the 10px field label — the only place in the theme a font size is named."},{"name":"ui/container","file":"src/components/ui/container.tsx","renders":"The page's two gutters and its one maximum measure (1440px, the artboards' own frame), plus the bleed case the ink hero band uses."},{"name":"ui/icon","file":"src/components/ui/icon.tsx","renders":"The three-step lucide ladder — 14 / 18 / 22px — at the theme's one stroke, always currentColor and always aria-hidden beside the words it belongs to."},{"name":"ui/mono-label","file":"src/components/ui/mono-label.tsx","renders":"The mono caps label in five tones: the theme's second voice, and the one that means looked up rather than read."},{"name":"ui/tag","file":"src/components/ui/tag.tsx","renders":"The 28px printed label in its two categorical states — filled for a level, outlined for a format — one column per state on every board."},{"name":"ui/monogram","file":"src/components/ui/monogram.tsx","renders":"The 120px Es / Fr / 日 / ∑ at weight 300: type used as a picture, language-tagged and hidden from the reading order."},{"name":"ui/button","file":"src/components/ui/button.tsx","renders":"Four pills and three hit heights: the Signal action, the neutral ink action, its counterpart on the ink band, and the quiet arrow link."},{"name":"ui/sentence-token","file":"src/components/ui/sentence-token.tsx","renders":"The signature control: a word inside the display sentence with a 10px Signal field label above it, a 4px Signal underline beneath, a chevron, a dashed blank state, and a name that reads \"What: Spanish, change\"."},{"name":"ui/area-switcher","file":"src/components/ui/area-switcher.tsx","renders":"The four-area pill nav in its two renderings — the drawn desktop capsule and the phone's own scrolling rail — marked with aria-current and never a tablist."},{"name":"ui/logo","file":"src/components/ui/logo.tsx","renders":"The wordmark at its two sizes: the bar's 24px label and the footer's 96px sign-off. There is no mark."},{"name":"ui/mode-toggle","file":"src/components/ui/mode-toggle.tsx","renders":"The light/dark switch, scoped to the nearest .tt-lumina so the marketplace preview's own mode still wins."},{"name":"ui/header-menu","file":"src/components/ui/header-menu.tsx","renders":"The phone bar's menu: the two links and the mode switch the 375px header has no room for, in a right-hand sheet. The four areas are never in it."},{"name":"ui/section-heading","file":"src/components/ui/section-heading.tsx","renders":"A section's opening rule, mono eyebrow, display h2 and one-sentence lede, with the section's quiet action on the same baseline."},{"name":"ui/accordion-disclosure","file":"src/components/ui/accordion-disclosure.tsx","renders":"The FAQ row — a ruled <details> that opens in the space the rule already promised, with a Signal chevron that turns. Behaviour from tt-ui."},{"name":"ui/sheet-drawer","file":"src/components/ui/sheet-drawer.tsx","renders":"The right-hand panel behind the phone menu: paper, a 1.5px ink edge, no radius and no shadow. Escape, focus trap, focus return and scroll lock from tt-ui."}],"tokens":{"--background":"#efede6","--foreground":"#111114","--card":"#fbfaf6","--card-foreground":"#111114","--secondary":"#e4e1d8","--secondary-foreground":"#111114","--muted":"#f3f1ea","--muted-foreground":"#55555e","--border":"#c9c6bc","--primary":"#f35004","--primary-foreground":"#111114","--primary-hover":"#ff6a37","--primary-active":"#ff7f55","--ink-action":"#111114","--ink-action-foreground":"#efede6","--ink-action-hover":"#2a2a30","--ink-action-active":"#000000","--accent":"#fee9e2","--accent-foreground":"#111114","--signal-ink":"#b43800","--signal-tint":"#fee9e2","--signal-deep":"#f9d9ce","--signal-hover":"#fcddd3","--slot-empty":"#e9e6dd","--paper-white":"#ffffff","--rule":"#111114","--ink-band":"#111114","--on-dark":"#efede6","--on-dark-soft":"rgba(239, 237, 230, 0.6)","--on-dark-line":"rgba(239, 237, 230, 0.25)","--on-dark-signal":"#461f12","--link":"#111114","--link-hover":"#bd3c00","--ring":"#d94800","--field":"#ffffff","--field-border":"#8a867b","--control-border":"#111114","--selection":"#fee9e2","--selection-foreground":"#111114","--selection-border":"#d94800","--positive":"#1f6b3e","--positive-foreground":"#ffffff","--positive-soft":"#e4f0e7","--positive-border":"#6e9b7f","--positive-fill":"#1f6b3e","--warning":"#8a5312","--warning-foreground":"#ffffff","--warning-soft":"#f6e7d2","--warning-border":"#b08a55","--warning-fill":"#8a5312","--critical":"#b3261e","--critical-foreground":"#ffffff","--critical-soft":"#f8e2df","--critical-border":"#c08078","--critical-fill":"#b3261e","--radius":"0","--radius-tag":"4px","--radius-block":"6px","--radius-pill":"999px","--rule-width":"1.5px","--hairline-width":"1px","--gutter-page":"3.5rem","--gutter-page-sm":"1rem","--control-h":"3rem","--row-head":"2.75rem","--hit-min":"2.75rem","--row-board":"6.5rem","--cell-week":"6.75rem","--tile-instructor":"18.75rem","--tile-monogram":"7.5rem","--band-hero":"42.5rem","--measure-page":"90rem","--measure-sentence":"81.25rem","--measure-hero-column":"50rem","--cols-board":"10rem minmax(15rem, 4fr) 8.75rem 8.125rem minmax(6rem, 1fr) 6rem 3rem","--cols-ledger":"10.5rem 10.625rem minmax(0, 1fr) 9.375rem 11.875rem 9rem","--cols-week":"6.875rem repeat(6, minmax(0, 1fr))","--device-column":"35.5rem","--icon-stroke":"1.75","--ease-house":"cubic-bezier(0.2, 0.7, 0.2, 1)","--duration-micro":"120ms","--duration-state":"150ms","--duration-settle":"150ms","--duration-rise":"900ms","--duration-rise-late":"250ms","--duration-drift":"48s","--distance-settle":"16px","--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.375rem","--leading-d1":"1.2","--tracking-d1":"-0.02em","--text-d2":"clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem)","--leading-d2":"1","--tracking-d2":"-0.025em","--text-d3":"clamp(2rem, 1.2rem + 2.6vw, 3rem)","--leading-d3":"1","--tracking-d3":"-0.035em","--text-d4":"clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem)","--leading-d4":"1.8","--tracking-d4":"-0.035em","--text-d4-tight":"clamp(2.25rem, 1.3rem + 3.4vw, 4rem)","--text-monogram":"clamp(4rem, 2rem + 6vw, 7.5rem)","--leading-monogram":"0.85","--tracking-monogram":"-0.06em","--text-wordmark":"clamp(3rem, 1.5rem + 5vw, 6rem)","--leading-wordmark":"0.9","--tracking-wordmark":"-0.05em","--text-ribbon":"clamp(5.25rem, 1rem + 9vw, 9.375rem)","--text-field-label":"0.625rem","--tracking-field-label":"0.12em","--tracking-label":"0.08em","--tracking-tag":"0.04em","--tracking-date":"-0.02em","--weight-display":"500","--font-text":"var(--font-lumina-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-lumina-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace"},"tokensDark":{"--background":"#111114","--foreground":"#efede6","--card":"#1a1a1e","--card-foreground":"#efede6","--secondary":"#232328","--secondary-foreground":"#efede6","--muted":"#1f1f24","--muted-foreground":"#b9b7ae","--border":"#3a3a40","--primary":"#f35004","--primary-foreground":"#111114","--primary-hover":"#ff6a37","--primary-active":"#ff7f55","--ink-action":"#efede6","--ink-action-foreground":"#111114","--ink-action-hover":"#cccac3","--ink-action-active":"#ffffff","--accent":"#3b1a10","--accent-foreground":"#efede6","--signal-ink":"#ff6a37","--signal-tint":"#3b1a10","--signal-deep":"#4e2214","--signal-hover":"#461f12","--slot-empty":"#29292d","--paper-white":"#1a1a1e","--rule":"#efede6","--ink-band":"#1f1f24","--on-dark":"#efede6","--on-dark-soft":"rgba(239, 237, 230, 0.6)","--on-dark-line":"rgba(239, 237, 230, 0.25)","--on-dark-signal":"#461f12","--link":"#efede6","--link-hover":"#f35004","--ring":"#f35004","--field":"#1a1a1e","--field-border":"#6e6c63","--control-border":"#efede6","--selection":"#4b1e0f","--selection-foreground":"#efede6","--selection-border":"#f35004","--positive":"#6fcf97","--positive-foreground":"#111114","--positive-soft":"#16281e","--positive-border":"#4b8763","--positive-fill":"#6fcf97","--warning":"#e3b341","--warning-foreground":"#111114","--warning-soft":"#2c2314","--warning-border":"#8c7334","--warning-fill":"#e3b341","--critical":"#ff8a80","--critical-foreground":"#111114","--critical-soft":"#331a18","--critical-border":"#9a5a55","--critical-fill":"#ff8a80","--radius":"0","--radius-tag":"4px","--radius-block":"6px","--radius-pill":"999px","--rule-width":"1.5px","--hairline-width":"1px","--gutter-page":"3.5rem","--gutter-page-sm":"1rem","--control-h":"3rem","--row-head":"2.75rem","--hit-min":"2.75rem","--row-board":"6.5rem","--cell-week":"6.75rem","--tile-instructor":"18.75rem","--tile-monogram":"7.5rem","--band-hero":"42.5rem","--measure-page":"90rem","--measure-sentence":"81.25rem","--measure-hero-column":"50rem","--cols-board":"10rem minmax(15rem, 4fr) 8.75rem 8.125rem minmax(6rem, 1fr) 6rem 3rem","--cols-ledger":"10.5rem 10.625rem minmax(0, 1fr) 9.375rem 11.875rem 9rem","--cols-week":"6.875rem repeat(6, minmax(0, 1fr))","--device-column":"35.5rem","--icon-stroke":"1.75","--ease-house":"cubic-bezier(0.2, 0.7, 0.2, 1)","--duration-micro":"120ms","--duration-state":"150ms","--duration-settle":"150ms","--duration-rise":"900ms","--duration-rise-late":"250ms","--duration-drift":"48s","--distance-settle":"16px","--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.375rem","--leading-d1":"1.2","--tracking-d1":"-0.02em","--text-d2":"clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem)","--leading-d2":"1","--tracking-d2":"-0.025em","--text-d3":"clamp(2rem, 1.2rem + 2.6vw, 3rem)","--leading-d3":"1","--tracking-d3":"-0.035em","--text-d4":"clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem)","--leading-d4":"1.8","--tracking-d4":"-0.035em","--text-d4-tight":"clamp(2.25rem, 1.3rem + 3.4vw, 4rem)","--text-monogram":"clamp(4rem, 2rem + 6vw, 7.5rem)","--leading-monogram":"0.85","--tracking-monogram":"-0.06em","--text-wordmark":"clamp(3rem, 1.5rem + 5vw, 6rem)","--leading-wordmark":"0.9","--tracking-wordmark":"-0.05em","--text-ribbon":"clamp(5.25rem, 1rem + 9vw, 9.375rem)","--text-field-label":"0.625rem","--tracking-field-label":"0.12em","--tracking-label":"0.08em","--tracking-tag":"0.04em","--tracking-date":"-0.02em","--weight-display":"500","--font-text":"var(--font-lumina-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-lumina-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', 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}},"design":{"typefaces":{"text":"Bricolage Grotesque","mono":"Geist Mono"},"typeRatio":1.5,"signature":"The sentence Matchboard: a display-size sentence whose bracketed words are the controls — \"I want to learn [Spanish] at [beginner] level, [in person], starting in [January]\" — each control carrying a mono field label above it in Signal and a 4px Signal underline beneath it. It is a form wearing a headline's clothes, and the departure board and week grid below it are the answer to whatever the sentence currently says. It recurs on /, /skills, /tutoring, /teams and /programs, each with its own sentence rather than one component with the nouns swapped.","heroArchetype":"A6","sanctionedDeviation":"Opener variety is broken on purpose across the four vertical landings: /, /skills, /tutoring and /teams all open with the sentence hero, because the product IS one matchboard carrying four audiences. The rule is honoured on every interior route — /programs opens with the full matchboard and its filter rows, /program with the ink decision band, /instructors with the ruled monogram grid, /components with the token sheet.","motionPersonality":"restrained: two animations in the whole system — one entrance on the hero, one loop behind it, and nothing else on the page ever moves","undertone":"a printed timetable on warm stone, with one orange mark where the decision is","surface_kind":"marketing","built_against":"2026-09-20","recipe":{"primary":"a departure board","secondary":"a school timetable"},"brand_pyramid":["decisive","ruled","plain"],"levers":{"theme":"light","density":"compact","accent_mode":"monochrome-plus-spot","motion":"restrained","borders":"hairline","radius":"zero","texture":"none","shadow":"none"},"icons":{"set":"lucide","stroke":1.75,"ladder":["size-3.5","size-4.5","size-5.5"],"contexts":{"nav":"glyph","panel_header":"none","fact_row":"glyph","feature_grid":"none"}},"disclosure":{"helper_line":"one-clause","sentence":"hint","paragraph":"details","parallel_views":"tabs","secondary_object":"route"},"cta":{"header":"quiet","hero":"filled","repeats":["end"],"mobile":"inline"},"colour_budget":{"brand_max_pct":null,"concentration_pct":70,"regions":["hero-band","matched-row"]},"exemplars":[{"name":"an airport departure board","slice":"the date in a ruled column of its own, and one row lit because it is yours"},{"name":"a printed school timetable on a corridor wall","slice":"a week as a grid of slots, where the empty cells carry as much information as the full ones"}],"anti_list":["cards, shadows, gradients and any radius above 6px outside the pill controls","stock photography of smiling learners — monograms and geometry carry the people","a course-catalog grid of tiles with a price badge in the corner","hero sliders, parallax, autoplay video, counters that tick up","graduation caps, diplomas, mortarboards, globes, emoji flags","invented accreditation, testimonials, star ratings or seat counts","\"limited places\" urgency, countdown timers, pop-up lead magnets","a chat widget, a newsletter modal, an AI assistant bubble","a sentence token allowed to wrap onto two lines"]}}