educalia.app/styles

Styles & animations LearningStudio

Représentation visuelle de la charte utilisée sur la landing : fond nuit, glows violet/teal, grille, orbites pointillées, boutons pills, cards et motion. Utilisable comme référence pour d’autres pages Educalia.

Source CSS landing : /assets/styles.css · Lab : /assets/styles-lab.css

Design tokens

Couleurs de marque

Variables CSS partagées avec la landing (--brand, --glow, --accent…).

Ink#0b1020

Ink soft#161d33

Brand#6b5ce7

Brand deep#4f46c8

Glow#8b7cf5

Accent#1fa7a0

Paper#f3f5f9

CTA gradientglow → deep

Typographie

Fraunces + Outfit

Display serif expressif pour les titres, sans pour le corps et l’UI.

Display

Des formations prêtes à publier.

Fraunces · clamp 2–3.2rem · tracking −0.03em

Body

LearningStudio transforme un référentiel en parcours interactif, exports LMS et preuves Qualiopi.

Outfit 400/600 · line-height 1.55

Eyebrow

Pourquoi LearningStudio

0.75–0.78rem · uppercase · letter-spacing 0.12–0.14em

Composants

Boutons & pills

Hover : léger translateY(-2px). Primary avec glow violet.

Sur fond nuit

btn-primary · btn-ghost (glass)

Sur fond clair

btn-dark · btn-outline · btn-accent

Surfaces

Fonds, grille, glass, lift

Motifs atmosphériques de la hero et des cards pricing.

Hero night

Grille + mask radial

radial glows + grid 56px + mask

Aurora

Blobs flous animés

animation aurora 9s

Lift card

Hover → translateY(-4px)

Cards bénéfices / tarifs

Glass chip

RNCP · RS SCORM · H5P

backdrop-filter blur + bordure 18%

Signature visuelle

Orbites & pointillés

Le motif hero : anneau dashed qui tourne autour du logo, chips flottants, variantes multi-orbites.

Landing — ring spin

border: dashed + spin 28s + float 7s

Multi-orbites pointillées

3 anneaux · sens opposés · satellite clignotant

SVG dash offset

stroke-dasharray + dash-orbit

Chips en orbite

RNCP · RS

Preuves Qualiopi

Bras qui tourne + contre-rotation du label

Motion

Animations utilitaires

Entrées, pulse, shimmer, stagger — respectent prefers-reduced-motion.

rise

Assistant IA Studio Exports LMS

opacity + translateY · délais échelonnés

pulse-glow

Halo violet qui respire

breathe

scale 1 → 1.06

shimmer

Bande lumineuse sur CTA / skeleton

skeleton

Placeholder chargement

marquee

SCORMH5PHTML5PDFPPTXRNCP SCORMH5PHTML5PDFPPTXRNCP

Bandeau défilant infini

Nouvelles propositions

Autres styles & animations modernes

Alternatives à l’orbite pointillée actuelle — mêmes couleurs LearningStudio, directions visuelles différentes. Dis-moi celles que tu préfères pour la landing.

A · Border beam

LearningStudio

Bordure conic qui tourne — très 2024/25 (cartes feature)

B · Spotlight

Survolez la carte

Halo qui suit le curseur — style Vercel / Linear

C · Mesh gradient

Fond mesh animé — alternatif au grid + glows

D · Clip reveal

Prêt à publier.

Titre qui se dévoile (clip-path) — hero impactant

E · Carte 3D

Module SCORM

Perspective + redressement au hover

F · Liquid CTA

Forme organique — plus « produit » que pill classique

G · Conic ring

Loader / génération IA en cours

H · Film grain

Texture bruit

Grain SVG — look premium / print digital

I · Typewriter

Du RNCP au LMS

Caret clignotant — accroche hero alternative

J · Stack parallax

Couches décalées — remplace l’orbite pour les livrables

K · Magnetic pills

SCORM H5P Qualiopi RNCP

Scale spring au hover — tags features

L · Spring bento

Bloc bento

Entrée « ressort » — grilles bento modernes

M · Progress beam

Barre de scan — génération / export en cours

N · Gradient text

LearningStudio

Wordmark animé — titre hero sans orbe

O · Radar

Balayage conic — alternative plus « tech » à l’orbite dashed

P · Line draw

Tracé SVG progressif — icônes / illustrations

UI marketing

Badges & carte tarif

Éléments réutilisés sur la grille 99 / 279 / 499 / devis.

Badges

Recommandé Pro Qualiopi

Pills uppercase

Plan featured

Recommandé

279 €

HT / mois · formule Pro

Fond ink + bordure glow

Hero orb seul

Sans float — pour comparer