Couleurs
Main (#191919)
#191919 (DEFAULT/900) - Primary brand color
Secondary (#c8d400)
#c8d400 (DEFAULT/500) - Accent / secondary color
Tertiary & Quaternary
#000000
#ffffff
Quinary (#878787)
#878787 (DEFAULT/500) - Gris moyen
Senary (#2674d4) - Button
#2674d4 (DEFAULT/600) - Couleur des boutons
Couleurs Semantiques
#228452
#C64C4C
#f59e0b
#3b82f6
Typographie
Police: Sora (Google Fonts)
Les tailles ci-dessous sont responsives. Redimensionnez la fenetre pour voir les changements.
Couleur par défaut des textes: text-main-900 (#191919) pour H1, H2, H3, H4, H5, Body Big, Body, Body Small
Titre Principal H1 Bold
Titre Principal H1 Semi-Bold
Titre Principal H1 Medium
Titre Principal H1 Regular
Titre Section H2 Semi-Bold
Titre Section H2 Medium
Titre Section H2 Regular
Sous-titre H3 Semi-Bold
Sous-titre H3 Medium
Sous-titre H3 Regular
Titre de carte H4 Semi-Bold
Titre de carte H4 Medium
Titre de carte H4 Regular
Petit titre H5 Semi-Bold
Petit titre H5 Medium
Petit titre H5 Regular
Body Big Light - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Big Regular - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Big Medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Big Semi-Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Big Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Light - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Regular - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Semi-Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small Light - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small Regular - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small Medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small Semi-Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Utilisé pour les encarts adresse et heures d'ouverture du footer, légendes d'images, informations secondaires.
Caption Light (300) - Hein S.à r.l. | 102, rue du Kiem, L8030 Strassen
Caption Regular (400) - Hein S.à r.l. | 102, rue du Kiem, L8030 Strassen
Caption Medium (500) - Heures d'ouverture
Category / Tags - HEIN DESIGN SYSTEM
Boutons
Border radius: 100px (pill style) - comme specifie dans les guidelines
Primary Buttons
Effet bounce + shine au survol
Secondary Buttons
Texte en Body Small 400 (15px), effet bounce + shine au survol
Boutons avec Icone
Effet bounce + shine au survol
Primary avec Icône Circulaire
Effet bounce + shine au survol, icône flèche dans cercle blanc
Lien Hero avec Icône Circulaire (Trouver un partenaire)
Lien simple avec texte blanc, cercle blanc et flèche secondary-600 vers le bas, effet bounce au survol
Bouton Navigation (Secondary Lime)
Fond secondary-600 (lime), texte blanc, effet bounce + shine au survol
Etats Desactives
Border Radius
None
0px
Small
5px
Medium
10px
Large
100px
Cartes
Carte Standard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
Carte avec Image
Description de la carte avec une image.
Carte avec Bordure
Alternative sans ombre, avec bordure simple.
Formulaires
Badges et Tags
Alertes
Succes!
Votre action a ete effectuee avec succes.
Erreur
Une erreur s'est produite. Veuillez reessayer.
Attention
Verifiez les informations avant de continuer.
Information
Voici une information importante.
Ombres
None
Small
Default
Medium
Large
XL
Animations CSS
Hero Ken Burns Animation
Animation de zoom lent et subtil sur l'image de fond du hero (scale 1 → 1.08, 25s)
Animation Ken Burns Active
Classes: .hero-animate + overflow-hidden sur le parent
Label Glow Animation
Animation de lueur mouvante avec radial-gradient et blur (6s, secondary-500)
Classes: .label-glow (utilise ::before avec radial-gradient + blur)
Partners Section Animation
Animation de gradient sombre pour la section partenaires (10s, nuances de gris)
Trouvez votre partenaire HEIN
Réseau européen de distributeurs certifiés.
Classes: .partners-animate
CTA Gradient Animation
Animation de gradient subtil avec effet blur pour la section CTA (20s, secondary-500 → #909c00)
Un projet d'équipement ? Parlons-en.
Nos équipes et nos partenaires sont à votre disposition.
Classes: .cta-animate
Section CTA avec Boutons
Boutons avec icône circulaire pour la section CTA - variantes dark et white
Un projet d'équipement ? Parlons-en.
Nos équipes et nos partenaires sont à votre disposition pour vous conseiller et vous accompagner.
Boutons isolés
Liens avec Underline Animé
Effet underline de gauche à droite au survol, utilisé dans le footer pour les liens de catégories et bottom bar
Lien Footer - Catégorie
Caption Light (14px/22px/300), couleur main-400, survol secondary-500 + underline
Lien Footer - Bottom Bar
Caption Light (14px/22px/300), couleur main-400, survol secondary-500 + underline
Technique Background-Size (Multi-ligne)
Alternative utilisant background-size pour les liens multi-lignes. Fonctionne sur plusieurs lignes contrairement à la technique ::after.
Classes: bg-gradient-to-r from-secondary-500 to-secondary-500 bg-[length:0%_1px] hover:bg-[length:100%_1px] bg-no-repeat bg-left-bottom pb-0.5
Réseaux Sociaux
Footer Component
Aperçu complet du footer avec tous les styles appliqués
102, rue du Kiem, L8030 Strassen
T. (+352) 45 50 55-1
E. info@hein.lu
Lundi - Vendredi
Bureaux ouvert de 7.30 - 12.00 et de 13.00 - 16.30
Livraisons de 7.30 - 11.45 et de 12.30 - 15.45
Solutions
Services
Contact
Hein S.à r.l. 2024 Tous droits réservés
Classes Tailwind utilisées
- Background: bg-main-950
- Texte: text-main-400, font-light
- Border: border-main-800
- Logo: h-12
- Titres catégories: text-[0.9375rem] leading-[1.5625rem] text-white font-medium mb-7
- Liens catégories: text-sm leading-[1.375rem] font-light text-main-400 hover:text-secondary-500
- Underline hover: relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-secondary-500 hover:after:w-full after:transition-all after:duration-300
- Social icons: w-9 h-9 rounded-full bg-secondary-600 hover:-translate-y-1
- Shine effect: bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full
Link Underline (CSS Class)
Effet underline utilisant une classe CSS avec span::after, idéal pour les liens de catégories produits
Lien Catégorie Produit
Texte secondary-600, flèche, underline au survol
Classes: .link-underline (CSS class) + span wrapping text
Salon Card
Carte de salon avec effet hover (translate-y -8px) et shine sur l'image
Cartes Salon
Effet bounce + shine au survol de l'image
Classes: .salon-card + .shine (span inside image container)