Trois outils conçus dans le design system Liova. Cartes de visite, typographie, palettes — tout fonctionne en pur CSS/JS, sans librairie.
Chaque outil génère du CSS ou un lien prêt à l'emploi. Trois étapes, c'est tout.
.css, dans une balise <style>, ou dans ton design system. Fonctionne partout.Remplis le formulaire, choisis un style et une couleur. La carte se met à jour en temps réel. Partage le lien — tout est encodé dans l'URL.
/* Usages typiques */
- Lien dans ta signature email
- Lien sur ton profil LinkedIn / portfolio
- QR code généré depuis l'URL (ex : qr-code-generator.com)
- Envoyer à un client pour présenter ton identité
Clique sur une police titre et une police corps. Vois le rendu en live sur trois maquettes différentes : landing, article, cartes.
<head> de ton HTML, puis applique-les dans ton CSS.<!-- Dans ton <head> --> <link href="https://fonts.googleapis.com/css2? family=Playfair+Display:wght@700;900 &family=Inter:wght@400;500 &display=swap" rel="stylesheet"> /* Dans ton CSS */ h1, h2, h3 { font-family: 'Playfair Display', serif; } body, p { font-family: 'Inter', sans-serif; }
Entre une couleur source, génère une palette complète pour une interface sombre. Les composants se mettent à jour en temps réel. Exporte les variables CSS.
:root {} et colle-le en haut de ton fichier CSS. Utilise ensuite les variables partout dans ton projet./* Colle ça dans ton CSS global */ :root { --pal-bg: #080808; --pal-accent: #c8921a; /* ... autres variables ... */ } /* Puis utilise dans ton CSS */ body { background: var(--pal-bg); } .btn { background: var(--pal-accent); } .card { background: var(--pal-surface); }
:root {
/* génération en cours... */
}
Ajuste les paramètres, empile plusieurs ombres, copie le CSS. L'aperçu se met à jour en temps réel.
box-shadow./* Dans ton CSS */ .ma-carte { box-shadow: 0px 20px 40px -8px rgba(0,0,0,0.60); } /* Ombre au survol */ .ma-carte:hover { box-shadow: 0px 32px 60px -10px rgba(0,0,0,0.80); transition: box-shadow .3s ease; }
Compose ton dégradé, ajoute des stops de couleur, ajuste les positions. Copie le CSS prêt à l'emploi.
/* Fond d'une section */ .hero { background: linear-gradient(135deg, #c8921a 0%, #080808 100%); } /* Texte dégradé */ h1 { background: linear-gradient(90deg, #c8921a, #fff); -webkit-background-clip: text; color: transparent; }
Glisse les points de contrôle sur la courbe. La balle anime avec ta fonction. Copie le cubic-bezier() pour ton CSS.
ease, ease-in-out par ta valeur copiée./* Transition sur un bouton */ .btn { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Animation CSS */ .modal { animation: appear 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; } /* En JS (GSAP, Framer, anime.js) */ easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
Configure chaque paramètre du bouton. Hover effect, couleurs, typographie, forme. Copie le CSS complet.
.btn à ton bouton HTML.<!-- Dans ton HTML --> <button class="btn">Découvrir →</button> <a href="#" class="btn">Voir le projet</a> /* Dans ton CSS — colle le code copié */ .btn { /* ... valeurs générées ... */ }
.btn fonctionne sur un <button> ou un <a>.Entre deux couleurs et vois instantanément le ratio de contraste WCAG et les niveaux de conformité.
/* Seuils WCAG 2.1 */ Ratio ≥ 4.5:1 → Texte normal — AA ✓ (minimum légal) Ratio ≥ 7.0:1 → Texte normal — AAA ✓ (idéal) Ratio ≥ 3.0:1 → Texte ≥ 18px — AA ✓ Ratio ≥ 3.0:1 → Boutons / icônes — AA ✓ /* Si tu ne passes pas AA, essaie */ - Foncer le fond ou éclaircir le texte - Augmenter la taille de police (≥ 18px → seuil 3:1)
Passe la souris, clique. Chaque bouton montre un effet différent — tout en CSS/JS natif, zéro librairie.
/* Exemple — Ripple effect */ .btn { position: relative; overflow: hidden; } /* Exemple — Lift + glow */ .btn:hover { transform: translateY(-4px); box-shadow: 0 0 24px rgba(200,146,26,.5); transition: all .3s ease; } /* Exemple — Morph */ .btn:hover { border-radius: 50px 8px 50px 8px; }