Style guide · v1.0.2 · 18 sections · 15 primitives · 8 pages · 124 tokens × 2 modes

Lumina Edu

Two ideas hold the system: the sentence is the Matchboard, and the page is a timetable. Everything below serves one of the two.

01

Colour

Stone, ink and one signal. Orange appears only where a decision is being made: a token, a match, the primary action on dark.

Stone--background#efede6 · #111114page ground
Paper--card#fbfaf6 · #1a1a1etable surface
Stone dark--secondary#e4e1d8 · #232328header bands
Hover--muted#f3f1ea · #1f1f24row hover on paper
Slot--slot-empty#e9e6dd · #29292dan empty week cell
Line--border#c9c6bc · #3a3a401px hairlines
Rule--rule#111114 · #efede6the 1.5px structural line
Ink--foreground#111114 · #efede6text, rules, dark banners
Ink soft--muted-foreground#55555e · #b9b7aesecondary text
Band--ink-band#111114 · #1f1f24the hero slab, both modes
Signal--primary#f35004 · #f35004decisions only; ink text on it
Signal ink--signal-ink#b43800 · #ff6a37Signal set as type
Signal tint--accent#fee9e2 · #3b1a10the best-fit row
Signal deep--signal-deep#f9d9ce · #4e2214the best-fit lead cell
Ink action--ink-action#111114 · #efede6the neutral pill
Positive--positive#1f6b3e · #6fcf97a confirmed state
Warning--warning#8a5312 · #e3b341a state worth reading twice
Critical--critical#b3261e · #ff8a80a state that stops somebody
Ring--ring#d94800 · #f35004focus, 2px at 3px offset
Field--field#ffffff · #1a1a1ea control's own well
02

Type

Bricolage Grotesque for everything people read; Geist Mono for everything people look up — dates, prices, labels. Two families, no italics.

Sentence · 40 → 76px / 1.8 / -0.035em · 500
I want to learn
Section · 32 → 48px / 1 / -0.035em
A week of Spanish, from 11 January.
Row title · 24 → 30px / 1 / -0.025em
Everyday Spanish
Body · 16px / 1.55 · lead 18px
Practical language programs for study, work and life — in person, online or blended, at the level you actually are.
Date · Geist Mono 24 → 30px / -0.02em
11 Jan $320 8 wk
Label · Geist Mono 12px / 0.08em / caps
Program Matchboard · Starts · Level · Format · Where
Field label · Geist Mono 10px / 0.12em
What · Level · How · When
Monogram · 64 → 120px / 0.85 / -0.06em · 300
EsFr日
03

Rules, space, corners

Structure is drawn with lines, never with shadows or cards.

Structural rule

1.5px ink. Section tops, table frames, tile grids.

Hairline

1px line. Between rows, inside tables, under FAQ items.

Spacing

8-step scale. 56px page margin on desktop, 16px on phone; the sheet stops widening at 1440px.

Corners

0px tables and tiles · 4px tags · 6px timetable blocks · pill for every button.

04

Components

Every control is a real button, link or input. Minimum hit height 44px; tokens inherit the sentence's size.

Sentence token · default / blank / select

A 10px mono label (What / Level / How / When) sits above every token, so the sentence reads as the Matchboard. 4px signal underline, 6px top radius, chevron in signal. A blank is dashed and soft. Never let a token wrap onto two lines — shorten the word instead. On /programs the same shell holds a native select.

Buttons · signal / ink / on dark / quiet

One primary per view. Ink on stone, signal on ink. Text links carry an arrow and never underline until hover. Hit height is 44px on every one of them.

Areas · capsule and rail

The drawn desktop capsule, and the phone's own scrolling rail under the bar. aria-current marks the one you are on; it is a nav, never a tablist.

Tags · level and format
Beginner · A1In personNew managersOne-to-one

Level is a filled tag, format an outlined one — one column per state on every board. Free text stays plain.

Mono label · five tones
quiet · a caption on the pageink · a label that is a headingsignal · best fit · matches all fouronDark · on the bandonDarkSoft · the band's note

The theme's second voice: everything that is looked up rather than read. Caps for the name of a column, plain for something written in one.

Monogram · the oversized moment

Type used as a picture — the only place in the theme it is. Hidden from the reading order; a non-latin glyph carries its own lang.

Icon · the three-step ladder
smmdlg

14 / 18 / 22px at one stroke (1.75), always currentColor and always aria-hidden beside the words it belongs to. Below 14 this design uses a shape or a letter.

Wordmark · bar and sign-offLumina EduLumina Edu

Two sizes, one face, no mark. The bar's is a link and carries the hit height around a 22px line; the footer's is a picture.

Section heading
Upcoming sessions

A week of Spanish.

The rule, the eyebrow, the display head and one line — the four parts every section in this theme opens with.

Mode toggle

Scoped to the nearest .tt-lumina, so the marketplace preview's own mode still wins. It is the one control on this page that changes what the page looks like — pressing it here flips the whole styleguide, which is the point of it.

04b

Library parts

Two parts are vendored from tt-ui 1.5.1 and hash-locked. The behaviour — Escape, focus trap, focus return, scroll lock, outside press — is the library's; every class, every icon and every word in them is this theme's.

ui/accordion-disclosure · closed and open

How do I know my level?

A twenty-minute placement chat settles it. You talk, a tutor listens, and you leave with a level and a start date.

What if I miss a week?

The week's material stays open to you and your tutor sends the notes. Miss two in a row and we move you to the next cohort at no cost.

Enter or Space opens the panel the summary names; the summary stays a heading, so a reader moving by headings still has the page's outline. The Signal + turns 45° in 150ms rather than swapping for a −.

ui/sheet-drawer · surface and the real trigger
the real trigger

Paper, a 1.5px ink edge, no radius and no shadow. Escape closes it and returns focus to the button that opened it; the page behind it does not scroll.

05

Motion & principles

Two animations in the whole system. Both stop under prefers-reduced-motion; every link and button shows a 2px signal outline on keyboard focus.

Rise · hero content on loadopacity 0→1 · translateY 16px→0 · 900ms · cubic-bezier(0.2, 0.7, 0.2, 1) · facts row +250msDrift · greetings behind the language herotranslateX 0→−50% · 48s linear · loops · outlined 84 → 150px type at 25% stoneFeedback, and nothing elsehover and press 120ms · a disclosure 150ms · a drawer leaving 150ms
Do · Don't

Do lead with the date. Say it in a sentence. Draw structure with rules. Use signal for the decision, once per view.

Don't add cards, shadows or gradients. Don't use photography of learners — monograms and geometry carry the people. Don't put a token on two lines. Don't imply seats, results or accreditation.

06

Icons · Lucide

Lucide only, inlined as SVG on the 24-grid. One stroke (1.75) and one three-step ladder — 14 / 18 / 22px — because mixed weights read as two icon sets. Always currentColor: ink beside titles, ink-soft beside metadata, signal only inside a match. An icon never stands alone — it sits before a word.

arrow-right
chevron-down
calendar
calendar-days
clock
hourglass
map-pin
building-2
monitor
video
users
languages
book-open
briefcase
signal
banknote
check
plus
menu
messages-square
file-text
repeat
phone
moon
sun
x

Where it happens. map-pin for a room, building-2 for the client's offices, monitor for online, video inside the timetable.

When and how long. calendar for a start, calendar-days for a month or cohort list, hourglass for length, clock for session counts.

The four facts. languages / book-open / briefcase for What by audience, signal for Level, users for How, calendar for When. The pin is Where's alone.

Never. No graduation caps, diplomas or mortarboards; no emoji; no icon-only buttons except menu and the mode switch, which carry aria-labels.

07

The sections

The 18 sections the 8 routes are built from, each rendered once with the real fixture. The drawing has no panel for this one; the showcase contract does.

Each frame carries the component's name, its file, and the sentence the manifest gives it. Nothing here is a picture of a section — they are the sections, with the ids they own prefixed so this page keeps one outline.

site-headersrc/components/site-header.tsx

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-matchboardsrc/components/hero-matchboard.tsx

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.

Language schoolProgram Matchboard · finish the sentence

I want to learn at level, starting in

What
Spanish
Level
Beginner · A1
How
In person
When
January 2027
View programs3 programs · next start 11 Jan
departure-boardsrc/components/departure-board.tsx

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-timetablesrc/components/week-timetable.tsx

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.

cohort-calendarsrc/components/cohort-calendar.tsx

The skills academy's first quarter as three ruled month columns, each listing its cohort starts by day.

Cohort calendar, first quarter

January

  1. 11 · Digital Project Management
  2. 18 · Data Analysis Essentials
  3. 19 · Agile Foundations

February

  1. 08 · Stakeholder Reporting
  2. 22 · Digital Project Management

March

  1. 02 · Agile Foundations
  2. 15 · Data Analysis Essentials
  3. 22 · Effective Communication
practise-plansrc/components/practise-plan.tsx

What a cohort actually does, week band by week band: the range, the title and one line of what is practised.

Digital Project Management

What you'll practise

Weeks 1–2

Scoping real work

Briefs, timelines and trade-offs, on a project you bring.

Weeks 3–4

Leading week to week

Stand-ups, reviews and the conversations in between.

Weeks 5–6

Reporting to people who decide

One-page status, risks and asks that get read.

session-ledgersrc/components/session-ledger.tsx

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-conversationsrc/components/first-conversation.tsx

The tutoring centre's three numbered steps from enquiry to a written suggestion to a four-week check-in.

The first conversation

Book 30 minutes
01

You, the student, and one tutor

At the center or on a call. No test, no preparation.

02

A written suggestion

Tutor, format and a weekly slot — the blanks in the sentence, filled in.

03

A check-in after four weeks

Change the tutor, the slot or the format. Nothing is locked.

consultation-factssrc/components/consultation-facts.tsx

The four facts a training manager needs before the call — team format, where, cohort dates, what comes first — and the consultation action.

What a team program involves

Team format

6 to 16 people, one team or mixed

Where

Your offices, our rooms, or online

Cohort dates

Open cohorts monthly; private dates by arrangement

What you get first

A 45-minute call, then a written proposal

Tell us about the team.

Plan a consultation
instructor-tilessrc/components/instructor-tiles.tsx

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.

Meet the instructors

All twelve languages
  • Marta IlieSpanish · Portuguese · Romanian · Mon, Wed evenings
  • Théo LambertFrench · Dutch · English · Tue, Thu midday online
  • Aiko SatoJapanese · Mandarin · Sat mornings
  • Jonas WeberGerman · Italian · Polish · Greek · Fri evenings
instructor-directorysrc/components/instructor-directory.tsx

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.

The instructors at Lumina Edu

Languages

Spanish · French · German · Japanese · English · Italian · Portuguese · Dutch · Greek · Polish · Romanian · Mandarinfour instructors
  • Marta IlieSpanish · Portuguese · Romanian · Mon, Wed evenings
  • Théo LambertFrench · Dutch · English · Tue, Thu midday online
  • Aiko SatoJapanese · Mandarin · Sat mornings
  • Jonas WeberGerman · Italian · Polish · Greek · Fri evenings

Skills

Project management · Data · Communication · Reportingfour instructors
  • Ana PetrescuProject management · agile delivery
  • Daniel OkaforData analysis · spreadsheets to dashboards
  • Hanna LindqvistWorkplace communication · facilitation
  • Rui CostaStakeholder reporting · planning

Tutoring

Mathematics · English · Study skillsthree tutors
  • Elena MarinMathematics, years 7–11 · weekday afternoons
  • Samuel AdeyemiEnglish, reading and writing · online and center
  • Ioana PopStudy skills, exam preparation · Saturdays

For teams

Leadership · Change · Inclusion · Customer experiencefour facilitators
  • Cristina VoicuLeadership · first-time managers
  • Mark WhitfieldChange · cross-team working
  • Leila HaddadInclusive teams · facilitation
  • Andrei StanCustomer experience · service teams
program-matchboardsrc/components/program-matchboard.tsx

The theme's one interactive surface, mounted live: five native selects in the drawn token, a filter row, a status strip that counts, the board actually filtered, and a comparison of at most three. Change a word and the board under it answers.

Program directoryEvery program · finish the sentence

I'm looking for for , , starting in .

Result
12 programs · next start 11 Jan
StartsEvery program · 12
Open a program pageEvery program the school runs. Change any word in the sentence.
program-decisionsrc/components/program-decision.tsx

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.

Language schoolProgram · Mon · 18:30

Everyday Spanish

Practical language for real life

Level
Beginner · A1
How
In person
Where
Campus, Room 2
The six facts

What you are deciding.

What
Spanish
Level
Beginner · A1
How
In person
When
11 January
Length
8 wk
From
$320
Nothing is booked on this site. Every place is confirmed by the office, and the first reply says which cohort you are in.
program-narrativesrc/components/program-narrative.tsx

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.

Learning outcomes

What you'll practise.

  • Ask and answer the hundred small questions an ordinary day is made of.
  • Hold a short conversation in a shop, a clinic or a station without rehearsing it first.
  • Read a timetable, a menu and a short notice without translating word by word.
  • Bring your own situations to the session and practise them with the group.
Typical week

How the week works.

Live class
Mon · 18:30
Between sessions
One short activity, twenty minutes
Week 4
A fifteen-minute check-in with your tutor
Week 8
The conversation table, and you lead one
related-programssrc/components/related-programs.tsx

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.

faq-stacksrc/components/faq-stack.tsx

The four questions a visitor asks before booking, as ruled disclosure rows, beside the section's lede and its quiet action.

Before you book

Short answers. If yours isn't here, the placement chat is twenty minutes and free of any obligation.

Book a placement chat

How do I know my level?

A twenty-minute placement chat settles it. You talk, a tutor listens, and you leave with a level and a start date.

What if I miss a week?

The week's material stays open to you and your tutor sends the notes. Miss two in a row and we move you to the next cohort at no cost.

How big are the groups?

Eight people at most. The intensive mornings stop at six.

Can I switch from in person to online later?

Yes, from any week. Tell your tutor and the next session arrives as a link.
site-footersrc/components/site-footer.tsx

The 96px wordmark, the six-link nav, the school's line and the address row.