sent here for Lumina
language school website template tailwind · React and HTML source
Luminalanguage school website template Tailwind
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.
- 124 / 124
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
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.
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs: install, use, customizealso as a WordPress theme: Lumina Edupages, composed from 18 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Lumina Edu — language school/
- site-header
- hero-matchboard
- departure-board
- week-timetable
- instructor-tiles
- +2
Professional skills academy/skills- site-header
- hero-matchboard
- cohort-calendar
- practise-plan
- instructor-tiles
- +2
Tutoring centre/tutoring- site-header
- hero-matchboard
- session-ledger
- first-conversation
- instructor-tiles
- +2
Corporate training/teams- site-header
- hero-matchboard
- session-ledger
- consultation-facts
- instructor-tiles
- +2
Every program — the full matchboard/programs- site-header
- program-matchboard
- departure-board
- site-footer
One program — the decision page/program- site-header
- program-decision
- program-narrative
- session-ledger
- related-programs
- +2
The instructors — the ruled directory/instructors- site-header
- instructor-directory
- site-footer
The parts — the drawn style guide/components- site-header
- token-sheet
- hero-matchboard
- departure-board
- week-timetable
- +13
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.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project. 33 frames cover them, with 1 primitive sharing the ui/* frame.
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
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.
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.5.
Lumina
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.
const { open, close } = useLedger("2026-03") // 0123456789
- text
- Bricolage Grotesque
- mono
- Geist Mono
No separate display face: the headings are set in the text face.
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
- monogramAg
- wordmarkAg
- ribbonAg
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdAdd a route to Lumina
- add-section/SKILL.mdGraft a new section into Lumina following the theme's own patterns
- check-quality/SKILL.mdRun Lumina's own quality gate locally
- rebrand/SKILL.mdApply a buyer's brand to Lumina
- src/
- theme.css124 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/8 files
- components/18 files
- ui/18 files
- fonts/2 font files, 2 licenses
- app/8 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/8 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
Your key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
33 components, 8 pages and 124 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
activity
- v1.0.0: Initial release: a language school, tutoring and corporate-training theme in two editions
- v1.0.0 — eight-route language school, skills academy, tutoring centre and corporate-training template built on the sentence Matchboard: the page's H1 is the form, four of its words are real controls with a mono field label above and a Signal underline beneath, and the departure board and week grid below it are the answer to whatever the sentence currently says, with the fixture throwing at build time on a session or intake naming a program that does not exist, a week cell in the wrong slot, a listed row missing one of its five compared cells, a tinted row that does not answer its own sentence, a start date that does not fall on a day its cadence names, a week that is not six consecutive days opening on a Monday, a facet with no option or an option with no program, and a narrative that writes a weekday of its own
- v1.0.0: /components ships the owner's own drawn style guide as a route — six numbered panels, every swatch painted from the live custom property and every figure read out of the token tables
- the HTML edition of all eight routes, and the vanilla twin of the matchboard's filteringplanned
- the listing copy and the keywords row, once the demand gap the title claims is registeredplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
