// Design system — What drives the theme
Tokens, not decoration
Palette — click to copy
Typography
The token file, verbatim
:root {
/* Warm cream surfaces */
--color-bg: #FDF5E6;
--color-bg-card: #FFFFFF;
/* Primary — sunset orange */
--color-primary: #E8834A;
/* Secondary — deep teal */
--color-secondary: #35919F;
/* Accents — coral & leaf */
--color-accent: #EE6C8D;
--color-leaf: #7FB069;
/* Ink — warm cocoa */
--color-text: #2B2118;
/* Type — editorial pairing */
--font-heading: 'Fraunces', 'Georgia', serif;
--font-body: 'Be Vietnam Pro', sans-serif;
}Best for
- Kids' e-learning platforms and course apps
- EdTech SaaS landing pages with a content strategy
- Family-friendly subscription products
Pages included — 09
- Home
- Courses
- About
- Blog
- Blog article
- Category
- Contact
- Legal
- 404
Tech stack
- Astro 5
- Native CSS tokens
- Content collections (blog, authors, categories)
- GSAP + Lenis motion
- Fontsource
EDUFLOW takes the warmth of a children’s picture book and disciplines it with an editorial layout: Fraunces serif headlines, cream paper surfaces and a palette of sunset orange, teal and coral that stays friendly without turning to noise.
A blog that grows with your content
Articles, authors and categories are Astro content collections — dropping a Markdown file publishes a post, complete with author pages and category filters. No CMS, no database, type-safe frontmatter.
Motion, gated and gentle
The cinematic motion system (GSAP + Lenis smooth scroll, staggered reveals, floating particles) is progressive enhancement: everything respects prefers-reduced-motion, no framework islands ship, and the content is fully readable with scripts disabled.
Rebrand it in one file
Every color, font and radius lives in the token block of global.css. Swap the sunset palette for your brand and the whole platform — landing, courses, blog — follows.
// Catalogue — Keep browsing
