No. 20 · Editorial & content · 1 vote
Syllabus
Online academy — navy graph-paper heroes, highlighter actions, curriculum with free previews and a real lesson player
A clear, encouraging language for online academies, course marketplaces and learning platforms, Persian-first. Cool paper surfaces and a navy structure for heroes, the lesson player and the footer, with a faint graph-paper grid; a highlighter-orange brand that always carries dark text, and a marker-yellow stroke under the key words of a heading. Course cards share one anatomy (thumbnail with length, instructor, level, rating, price), learning paths are dotted step tracks, the curriculum is an accordion with free previews and locks, and a sticky buy card sits beside it. The student panel has a navy welcome band with folder tabs, a weekly goal ring and streak, an agenda, a classroom with a working player (chapter ticks, speed, captions, time-stamped notes, Q&A, files) and certificates with public verification.








Best for
- Online academies and course marketplaces
- Bootcamps, tutoring and language schools
- Corporate learning and onboarding portals
- Student panels with progress, lessons and certificates
Not ideal for
- Luxury and fashion brands
- Dense trading or monitoring tools
- Children’s apps that need a playful, illustrated look
Signature moves
- Navy graph-paper hero with a highlighter search
- Marker-yellow stroke under key words
- One course-card anatomy: length, instructor, level, rating, price
- Curriculum accordion with free previews, locks and a sticky buy card
- Navy welcome band with folder tabs, goal ring and streak
- Lesson player with chapter ticks, captions and time-stamped notes
Try it with another brand color
Opens the demo with only --brand changed. The style should still read as Syllabus.
Install this skill
/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install syllabus@tastefolionpx skills add tastefolio/tastefolio.github.io --skill syllabuscurl -L https://tastefolio.github.io/downloads/syllabus.zip -o syllabus.zip
unzip syllabus.zip -d .claude/skills/Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/syllabus/SKILL.md for every UI change."Files
Rate this style
Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.