# Lumina — Language School Website Template Tailwind

> 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.

- Price: $14, one-time
- License: Standard
- Version: 1.0.0
- Category: Education
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15 <17, React >=19 <20, Tailwind CSS >=4 <5
- Dependencies: `lucide-react`

## What's inside

- 8 pages
- 33 components
- 124 design tokens plus 124 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero-matchboard`, `departure-board`, `week-timetable`, `instructor-tiles`, `faq-stack`, `site-footer` |
| `/skills` | `site-header`, `hero-matchboard`, `cohort-calendar`, `practise-plan`, `instructor-tiles`, `faq-stack`, `site-footer` |
| `/tutoring` | `site-header`, `hero-matchboard`, `session-ledger`, `first-conversation`, `instructor-tiles`, `faq-stack`, `site-footer` |
| `/teams` | `site-header`, `hero-matchboard`, `session-ledger`, `consultation-facts`, `instructor-tiles`, `faq-stack`, `site-footer` |
| `/programs` | `site-header`, `program-matchboard`, `departure-board`, `site-footer` |
| `/program` | `site-header`, `program-decision`, `program-narrative`, `session-ledger`, `related-programs`, `faq-stack`, `site-footer` |
| `/instructors` | `site-header`, `instructor-directory`, `site-footer` |
| `/components` | `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 | What it renders |
| --- | --- |
| `site-header` | 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. |
| `hero-matchboard` | 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. |
| `departure-board` | 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. |
| `week-timetable` | 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. |
| `instructor-tiles` | 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. |
| `faq-stack` | The four questions a visitor asks before booking, as ruled disclosure rows, beside the section's lede and its quiet action. |
| `site-footer` | The 96px wordmark, the six-link nav, the school's line and the address row. |
| `cohort-calendar` | The skills academy's first quarter as three ruled month columns, each listing its cohort starts by day. |
| `practise-plan` | What a cohort actually does, week band by week band: the range, the title and one line of what is practised. |
| `session-ledger` | 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. |
| `first-conversation` | The tutoring centre's three numbered steps from enquiry to a written suggestion to a four-week check-in. |
| `consultation-facts` | The four facts a training manager needs before the call — team format, where, cohort dates, what comes first — and the consultation action. |
| `program-matchboard` | 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. |
| `program-decision` | 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. |
| `program-narrative` | 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. |
| `related-programs` | 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. |
| `instructor-directory` | 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. |
| `token-sheet` | 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. |
| `ui/type` | 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. |
| `ui/container` | The page's two gutters and its one maximum measure (1440px, the artboards' own frame), plus the bleed case the ink hero band uses. |
| `ui/icon` | 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. |
| `ui/mono-label` | The mono caps label in five tones: the theme's second voice, and the one that means looked up rather than read. |
| `ui/tag` | The 28px printed label in its two categorical states — filled for a level, outlined for a format — one column per state on every board. |
| `ui/monogram` | The 120px Es / Fr / 日 / ∑ at weight 300: type used as a picture, language-tagged and hidden from the reading order. |
| `ui/button` | Four pills and three hit heights: the Signal action, the neutral ink action, its counterpart on the ink band, and the quiet arrow link. |
| `ui/sentence-token` | 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". |
| `ui/area-switcher` | 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. |
| `ui/logo` | The wordmark at its two sizes: the bar's 24px label and the footer's 96px sign-off. There is no mark. |
| `ui/mode-toggle` | The light/dark switch, scoped to the nearest .tt-lumina so the marketplace preview's own mode still wins. |
| `ui/header-menu` | 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. |
| `ui/section-heading` | A section's opening rule, mono eyebrow, display h2 and one-sentence lede, with the section's quiet action on the same baseline. |
| `ui/accordion-disclosure` | The FAQ row — a ruled &lt;details&gt; that opens in the space the rule already promised, with a Signal chevron that turns. Behaviour from tt-ui. |
| `ui/sheet-drawer` | 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. |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#efede6` | `#111114` |
| `--foreground` | `#111114` | `#efede6` |
| `--card` | `#fbfaf6` | `#1a1a1e` |
| `--card-foreground` | `#111114` | `#efede6` |
| `--secondary` | `#e4e1d8` | `#232328` |
| `--secondary-foreground` | `#111114` | `#efede6` |
| `--muted` | `#f3f1ea` | `#1f1f24` |
| `--muted-foreground` | `#55555e` | `#b9b7ae` |
| `--border` | `#c9c6bc` | `#3a3a40` |
| `--primary` | `#f35004` | `#f35004` |
| `--primary-foreground` | `#111114` | `#111114` |
| `--primary-hover` | `#ff6a37` | `#ff6a37` |
| `--primary-active` | `#ff7f55` | `#ff7f55` |
| `--ink-action` | `#111114` | `#efede6` |
| `--ink-action-foreground` | `#efede6` | `#111114` |
| `--ink-action-hover` | `#2a2a30` | `#cccac3` |
| `--ink-action-active` | `#000000` | `#ffffff` |
| `--accent` | `#fee9e2` | `#3b1a10` |
| `--accent-foreground` | `#111114` | `#efede6` |
| `--signal-ink` | `#b43800` | `#ff6a37` |
| `--signal-tint` | `#fee9e2` | `#3b1a10` |
| `--signal-deep` | `#f9d9ce` | `#4e2214` |
| `--signal-hover` | `#fcddd3` | `#461f12` |
| `--slot-empty` | `#e9e6dd` | `#29292d` |
| `--paper-white` | `#ffffff` | `#1a1a1e` |
| `--rule` | `#111114` | `#efede6` |
| `--ink-band` | `#111114` | `#1f1f24` |
| `--on-dark` | `#efede6` | `#efede6` |
| `--on-dark-soft` | `rgba(239, 237, 230, 0.6)` | `rgba(239, 237, 230, 0.6)` |
| `--on-dark-line` | `rgba(239, 237, 230, 0.25)` | `rgba(239, 237, 230, 0.25)` |
| `--on-dark-signal` | `#461f12` | `#461f12` |
| `--link` | `#111114` | `#efede6` |
| `--link-hover` | `#bd3c00` | `#f35004` |
| `--ring` | `#d94800` | `#f35004` |
| `--field` | `#ffffff` | `#1a1a1e` |
| `--field-border` | `#8a867b` | `#6e6c63` |
| `--control-border` | `#111114` | `#efede6` |
| `--selection` | `#fee9e2` | `#4b1e0f` |
| `--selection-foreground` | `#111114` | `#efede6` |
| `--selection-border` | `#d94800` | `#f35004` |
| `--positive` | `#1f6b3e` | `#6fcf97` |
| `--positive-foreground` | `#ffffff` | `#111114` |
| `--positive-soft` | `#e4f0e7` | `#16281e` |
| `--positive-border` | `#6e9b7f` | `#4b8763` |
| `--positive-fill` | `#1f6b3e` | `#6fcf97` |
| `--warning` | `#8a5312` | `#e3b341` |
| `--warning-foreground` | `#ffffff` | `#111114` |
| `--warning-soft` | `#f6e7d2` | `#2c2314` |
| `--warning-border` | `#b08a55` | `#8c7334` |
| `--warning-fill` | `#8a5312` | `#e3b341` |
| `--critical` | `#b3261e` | `#ff8a80` |
| `--critical-foreground` | `#ffffff` | `#111114` |
| `--critical-soft` | `#f8e2df` | `#331a18` |
| `--critical-border` | `#c08078` | `#9a5a55` |
| `--critical-fill` | `#b3261e` | `#ff8a80` |
| `--radius` | `0` | `0` |
| `--radius-tag` | `4px` | `4px` |
| `--radius-block` | `6px` | `6px` |
| `--radius-pill` | `999px` | `999px` |
| `--rule-width` | `1.5px` | `1.5px` |
| `--hairline-width` | `1px` | `1px` |
| `--gutter-page` | `3.5rem` | `3.5rem` |
| `--gutter-page-sm` | `1rem` | `1rem` |
| `--control-h` | `3rem` | `3rem` |
| `--row-head` | `2.75rem` | `2.75rem` |
| `--hit-min` | `2.75rem` | `2.75rem` |
| `--row-board` | `6.5rem` | `6.5rem` |
| `--cell-week` | `6.75rem` | `6.75rem` |
| `--tile-instructor` | `18.75rem` | `18.75rem` |
| `--tile-monogram` | `7.5rem` | `7.5rem` |
| `--band-hero` | `42.5rem` | `42.5rem` |
| `--measure-page` | `90rem` | `90rem` |
| `--measure-sentence` | `81.25rem` | `81.25rem` |
| `--measure-hero-column` | `50rem` | `50rem` |
| `--cols-board` | `10rem minmax(15rem, 4fr) 8.75rem 8.125rem minmax(6rem, 1fr) 6rem 3rem` | `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` | `10.5rem 10.625rem minmax(0, 1fr) 9.375rem 11.875rem 9rem` |
| `--cols-week` | `6.875rem repeat(6, minmax(0, 1fr))` | `6.875rem repeat(6, minmax(0, 1fr))` |
| `--device-column` | `35.5rem` | `35.5rem` |
| `--icon-stroke` | `1.75` | `1.75` |
| `--ease-house` | `cubic-bezier(0.2, 0.7, 0.2, 1)` | `cubic-bezier(0.2, 0.7, 0.2, 1)` |
| `--duration-micro` | `120ms` | `120ms` |
| `--duration-state` | `150ms` | `150ms` |
| `--duration-settle` | `150ms` | `150ms` |
| `--duration-rise` | `900ms` | `900ms` |
| `--duration-rise-late` | `250ms` | `250ms` |
| `--duration-drift` | `48s` | `48s` |
| `--distance-settle` | `16px` | `16px` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.375rem` | `1.375rem` |
| `--leading-d1` | `1.2` | `1.2` |
| `--tracking-d1` | `-0.02em` | `-0.02em` |
| `--text-d2` | `clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem)` | `clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem)` |
| `--leading-d2` | `1` | `1` |
| `--tracking-d2` | `-0.025em` | `-0.025em` |
| `--text-d3` | `clamp(2rem, 1.2rem + 2.6vw, 3rem)` | `clamp(2rem, 1.2rem + 2.6vw, 3rem)` |
| `--leading-d3` | `1` | `1` |
| `--tracking-d3` | `-0.035em` | `-0.035em` |
| `--text-d4` | `clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem)` | `clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem)` |
| `--leading-d4` | `1.8` | `1.8` |
| `--tracking-d4` | `-0.035em` | `-0.035em` |
| `--text-d4-tight` | `clamp(2.25rem, 1.3rem + 3.4vw, 4rem)` | `clamp(2.25rem, 1.3rem + 3.4vw, 4rem)` |
| `--text-monogram` | `clamp(4rem, 2rem + 6vw, 7.5rem)` | `clamp(4rem, 2rem + 6vw, 7.5rem)` |
| `--leading-monogram` | `0.85` | `0.85` |
| `--tracking-monogram` | `-0.06em` | `-0.06em` |
| `--text-wordmark` | `clamp(3rem, 1.5rem + 5vw, 6rem)` | `clamp(3rem, 1.5rem + 5vw, 6rem)` |
| `--leading-wordmark` | `0.9` | `0.9` |
| `--tracking-wordmark` | `-0.05em` | `-0.05em` |
| `--text-ribbon` | `clamp(5.25rem, 1rem + 9vw, 9.375rem)` | `clamp(5.25rem, 1rem + 9vw, 9.375rem)` |
| `--text-field-label` | `0.625rem` | `0.625rem` |
| `--tracking-field-label` | `0.12em` | `0.12em` |
| `--tracking-label` | `0.08em` | `0.08em` |
| `--tracking-tag` | `0.04em` | `0.04em` |
| `--tracking-date` | `-0.02em` | `-0.02em` |
| `--weight-display` | `500` | `500` |
| `--font-text` | `var(--font-lumina-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif` | `var(--font-lumina-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-lumina-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace` | `var(--font-lumina-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/lumina.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/lumina](https://tailthemes.com/api/download/lumina)

## Links

- Product page: [https://tailthemes.com/themes/lumina](https://tailthemes.com/themes/lumina)
- Live preview: [https://tailthemes.com/preview/lumina](https://tailthemes.com/preview/lumina)
- Docs: [https://tailthemes.com/docs/lumina](https://tailthemes.com/docs/lumina)
- Manifest JSON: [https://tailthemes.com/api/themes/lumina](https://tailthemes.com/api/themes/lumina)
- Registry item: [https://tailthemes.com/r/lumina.json](https://tailthemes.com/r/lumina.json)