The visual language of Learnosaur. Neobrutalism
High-contrast, vibrant colors on a warm cream base. Activity categories may extend the palette with tints (cyan, lime, amber, rose, indigo).
#FACC15#7C3AED#2DD4BF#F97316#F472B6#4ADE80#38BDF8#0D0D0D#FFFDF5All buttons use the hover translate + shadow removal pattern.
Fredoka for display · Nunito for body. Both friendly, both legible.
Fredoka · 700 · Used for all headings & labelsNunito · 900 · Subheadings and section titlesBody text in Nunito SemiBold. Clear and friendly for young readers and educators alike. Legible at small sizes, expressive at large. Never feels cold.
Nunito · 600 · 18px / 1.6 line-height2px border · rounded-2xl · 5px hard shadow. Colored or white.
White base, 2px border, 5px offset shadow.
Palette color as background — great for category distinction.
Clickable cards inherit the hover translate treatment.
Pill-shaped labels with 2px border and 2px shadow. Icons are always Lucide at 2.5 stroke — never emoji, which render differently on every classroom device.
Motion is physical and playful: things press, float, wiggle, shake, and pop — they never fade or blur. All animation is disabled under prefers-reduced-motion.
Icon tiles wiggle when their card is hovered. Hover me!
Decorative elements bob gently on a 3–4s loop.
Hover sinks +2px and drops the shadow; active sinks +4px. In games, wrong answers shake and popped bubbles pop.
Sauro the Learnosaur appears wherever the site speaks to kids. Cards and tiles may tilt ±1° like hand-placed stickers — they straighten on hover.
Fresh Green body, Action Teal spikes, 4px black outlines. Drawn in-system — never a stock illustration.
This card is tilted −1°. Hover to straighten it. Use sparingly — only on decorative grids (stats, featured cards), never on forms or dense lists.