Design system for the educational project "Language Speakers"
Project Task
The course materials (workbooks, guides, test tasks) had unique content but looked visually chaotic and were created manually by instructors "on the knee."
Main Task: Develop a conceptual visual style and create a flexible, automated template system in Figma for educational PDF notes (based on the materials "TYPES OF SIMPLE SENTENCES .docx", "EDITING REQUIRED.pdf" and "ALL ABOUT NUMERATORS.pdf") and social media (Instagram, Telegram).
Main Technical Requirement: The system must be intuitive and convenient so that clients can independently change texts in the templates without the help of a designer, and the blocks automatically adjust to the volume of information.
Visual Concept: "Expert Punk / Zoomer Minimalism"
To combine the incompatible — academic rules and harsh irony, the Acid Grunge / Modern Retro style with elements of digital minimalism was chosen.
Color Palette: The sterile white background was replaced with a comfortable off-white and light gray shades for prolonged reading from screens. Deep graphite was used as the base (expertise), and for main accents and emotional highlights — branded neon pink ("I’m bursting for your heart") and acid green.
Typography: A contrasting pair of fonts. An edgy, slightly rough sans-serif grotesque for hype headlines ("MADNESS", "LOSER'S RULE", "CRAZY CLIP") and a maximally clean, geometric font with high readability for large arrays of rules, tests, and tables.
Graphic Elements: Textures of crumpled paper, speech bubbles for meme integration, arrows, and outlines that imitate hand-drawn marker sketches. Integration of illustrated avatars of Yegor and Valeria as brand mascots.
Technical Implementation in Figma (Case Foundation)
Instead of a set of static images, the client received a full-fledged design system:
Auto Layout 5.0 (Smart Blocks): All tables, rule cards, and test options are set up so that when text is added or removed, the frames, margins, and neighboring blocks automatically adapt. The client does not need to move anything manually.
Figma Components: Basic master components were created for labels, answer options in tests, and decorative elements. Changing the style in one place instantly updates all course notes.
Color & Text Styles: All colors and fonts are fixed in the system, eliminating the appearance of random shades in future materials.
Package Composition of Developed Templates
Educational Materials (A4 format for PDF guides and print):
Cover of the theoretical block.
Template for the information page (theoretical rule + example).
Template for comparative table (for example, for declension of numerals from 200 to 900).
Template for interactive matching test (classic format of NMT).
Templates for Social Media (Instagram / Telegram):
Carousel template for card posts (Hook/Meme → Essence of the rule → Call to action).
Advertising layouts for intensives, story announcements ("hurry to book a spot") and labels for student feedback.
Project Result
The "Language Speakers" project received a visually expensive, recognizable, and unique conceptual style that completely distinguishes them from competitors in the online education market. Chaotic drafts transformed into a professional system of notes that students "want to flip through." At the same time, instructors completely resolved the design issue — they independently and quickly assemble new manuals in Figma, focusing solely on content and methodology.
You can copy this framework and try to assemble your first screen in Figma to test the fonts and palette.
The course materials (workbooks, guides, test tasks) had unique content but looked visually chaotic and were created manually by instructors "on the knee."
Main Task: Develop a conceptual visual style and create a flexible, automated template system in Figma for educational PDF notes (based on the materials "TYPES OF SIMPLE SENTENCES .docx", "EDITING REQUIRED.pdf" and "ALL ABOUT NUMERATORS.pdf") and social media (Instagram, Telegram).
Main Technical Requirement: The system must be intuitive and convenient so that clients can independently change texts in the templates without the help of a designer, and the blocks automatically adjust to the volume of information.
Visual Concept: "Expert Punk / Zoomer Minimalism"
To combine the incompatible — academic rules and harsh irony, the Acid Grunge / Modern Retro style with elements of digital minimalism was chosen.
Color Palette: The sterile white background was replaced with a comfortable off-white and light gray shades for prolonged reading from screens. Deep graphite was used as the base (expertise), and for main accents and emotional highlights — branded neon pink ("I’m bursting for your heart") and acid green.
Typography: A contrasting pair of fonts. An edgy, slightly rough sans-serif grotesque for hype headlines ("MADNESS", "LOSER'S RULE", "CRAZY CLIP") and a maximally clean, geometric font with high readability for large arrays of rules, tests, and tables.
Graphic Elements: Textures of crumpled paper, speech bubbles for meme integration, arrows, and outlines that imitate hand-drawn marker sketches. Integration of illustrated avatars of Yegor and Valeria as brand mascots.
Technical Implementation in Figma (Case Foundation)
Instead of a set of static images, the client received a full-fledged design system:
Auto Layout 5.0 (Smart Blocks): All tables, rule cards, and test options are set up so that when text is added or removed, the frames, margins, and neighboring blocks automatically adapt. The client does not need to move anything manually.
Figma Components: Basic master components were created for labels, answer options in tests, and decorative elements. Changing the style in one place instantly updates all course notes.
Color & Text Styles: All colors and fonts are fixed in the system, eliminating the appearance of random shades in future materials.
Package Composition of Developed Templates
Educational Materials (A4 format for PDF guides and print):
Cover of the theoretical block.
Template for the information page (theoretical rule + example).
Template for comparative table (for example, for declension of numerals from 200 to 900).
Template for interactive matching test (classic format of NMT).
Templates for Social Media (Instagram / Telegram):
Carousel template for card posts (Hook/Meme → Essence of the rule → Call to action).
Advertising layouts for intensives, story announcements ("hurry to book a spot") and labels for student feedback.
Project Result
The "Language Speakers" project received a visually expensive, recognizable, and unique conceptual style that completely distinguishes them from competitors in the online education market. Chaotic drafts transformed into a professional system of notes that students "want to flip through." At the same time, instructors completely resolved the design issue — they independently and quickly assemble new manuals in Figma, focusing solely on content and methodology.
You can copy this framework and try to assemble your first screen in Figma to test the fonts and palette.