Foreign Language Center · Chalandri
Since 1996
Notebook design system for the #1 foreign language school in Chalandri — since 1996.
Project overview
Alfa Schools
ALFA Foreign Language Center needed a digital presence that felt like the school itself: warm, methodical, and memorable. Instead of a generic education template, we designed and built a full notebook design system — from cover to footer — with Soft Alfa blue, handwriting typography, and a genuine Chalandri school atmosphere.
Design system
Like a notebook — not a template
ALFA's identity was built around something every student recognizes instantly: the school notebook. Ruled lines, red margin, binder holes, handwriting typography, and sticky tape become the visual vocabulary of the entire site.
Ruled paper
Horizontal blue lines and red margin on cards, heroes, and articles — the page reads like a notebook sheet.
Stampatello
StampatelloFaceto gives a handwriting character to titles and UI — warm, educational, not corporate.
Soft Alfa blue
Palette #4a6fa5 / #81a1d4 on paper wash (#f0f4ff) — calm, clean, school-like without childish clutter.
Tape & binder
Sticky-tape footer, binder holes, and paper shadows tie the scrapbook/notebook feel into every section.
Seasonal themes (Christmas, Halloween, Carnival, Easter, Summer) swap accents and logos without losing the notebook core — the brand stays playful all year.
Components
Core site components
The notebook system repeats across heroes, articles, footer, chatbot, and games — same language, different surfaces.
Platform
More than a brochure site
Marketing presence + educational content + games + CMS + PWA in the same notebook language.
Languages & place
English and French in Chalandri — local identity, 30 years of experience, clear CTAs.
Notebook UI
Heroes, articles, and chatbot with ruled paper, subject headers, and grade/star accents.
Games hub
Vocabulary, grammar, conversation, and anagrams by level — learning inside the brand.
CMS & admin
Articles, newsletter, and templates via Firebase — the school updates on its own.
i18n
Greek / English / French (and locale base for more) with consistent routing.
PWA & native shell
Installable experience and Capacitor Android shell for mobile presence.
Implementation
Design & implementation
Content architecture
Next.js App Router with public pages (services, why us, articles, games, contact), Firebase admin CMS, and i18n routing. The design system applies horizontally: the same notebook chrome on heroes, articles, chatbot, and footer.
Design approach
Paper surfaces with ruled lines and margin, StampatelloFaceto for display, bear mascot and 30-year anniversary marks, tape footer, and seasonal logo swaps. Goal: instantly recognizable «ALFA notebook» — playful yet trustworthy for parents.
Implementation
Next.js 15, React 19, Tailwind, Framer Motion/GSAP, Firebase Auth & Firestore, Lexical/TipTap editors, PWA, and Capacitor. Live at alfaschools.gr.
Challenge
A language school with 30 years of history needed a site that felt familiar to students and trustworthy to parents — not a generic education template.
Solution
A full notebook design system: ruled paper, red margin, binder holes, StampatelloFaceto, Soft Alfa blue, games hub, CMS, and seasonal themes on Next.js + Firebase.
Result
A recognizable brand presence at alfaschools.gr — notebook school aesthetic, multilingual experience, and a base for content, games, and PWA.