Marque
Chaque couleur, style typographique et composant qui compose happly.ai, au même endroit. Les échantillons ci-dessous sont lus directement dans la feuille de styles et les composants sont les vrais — cette page reste donc toujours au diapason du produit.
Le logotype est le verrouillage principal. La version verticale couvre les espaces carrés et étroits, et le symbole seul est réservé aux plus exigus — favicons, avatars, icônes d’application.
Télécharger les fichiers du logo
Conservez une zone de protection d’au moins la hauteur des majuscules du logotype sur tous les côtés.
Redimensionnez proportionnellement; la largeur minimale du logotype est de 96 px.
Sur fond foncé, utilisez le verrouillage inversé — il garde le symbole en couleur. La version tout en blanc aplatit le symbole en une seule silhouette : réservez-la à l’impression en une encre.
✕ Ne recolorez pas, n’étirez pas, ne faites pas pivoter, n’ajoutez pas d’effets et ne placez pas le logotype sur une photo chargée.
Les surfaces restent chaudes et peu contrastées afin que les captures du produit et la photographie portent la couleur. Le violet est le seul accent présent dans l’interface.
--purple
—
Violet principal de la marque. Boutons, liens, états actifs.
--purple-tile
—
Surface violette teintée derrière les icônes et les rangées de menu actives.
Ces cinq couleurs vivent dans l’illustration plutôt que dans la feuille de styles. Utilisez-les pour l’illustration et les accents de données — jamais pour le texte courant ni les boutons.
Soleil
#FBD570
Braise
#F97627
Éclat
#E30147
Violet
#6422C8
Menthe
#2ACEB6
--bg
—
Canevas de la page. Le mastic chaud derrière chaque panneau.
--panel
—
Panneaux de section. Blanc crème chaud.
--white
—
Cartes et contrôles posés sur un panneau.
--light
—
Remplissage discret pour les états survolés et inactifs.
--ink
—
Texte principal et titres.
--gray-600
—
Texte courant et texte secondaire.
--gray-400
—
Libellés, légendes et métadonnées atténuées.
--badge-text
—
Texte sur la badge d’annonce ambrée.
--border
—
Bordures des contrôles et des cartes.
--hairline
—
Séparateurs internes sur les panneaux crème.
Inter Display partout, hébergée localement en sous-ensembles woff2. Les titres se situent entre 500 et 700 avec un interlettrage serré; le texte courant reste à 400.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Nous aidons les gens à trouver du financement.
Deux rayons font l’essentiel du travail : 8 px sur les panneaux pleine largeur, 24 px sur les cartes. Les ombres restent presque invisibles — la profondeur vient des surfaces en dégradé chaud, pas du flou.
Les boutons font 40 px de haut avec un rayon de 8 px. L’appel à l’action de la navigation est un cas particulier : il conserve un encombrement fixe et change de libellé au survol, pour que la mise en page ne bouge jamais.
Les petits libellés portent le statut et la catégorie. Ils ont tous une forme de pastille, sauf les puces de fonctionnalité, qui utilisent un rayon plus doux de 8 px.
Trois traitements de carte couvrent tout le site : une carte blanche unie sur crème, une carte en dégradé chaud pour le contenu de fonctionnalité et de bêta, et la carte à icône utilisée dans les grilles de présentation.
.prov-icon-card
Le dégradé chaud de #fbf9f7 à #f4f1eb avec un filet. L’illustration occupe toute la largeur au bas de la carte, qui la rogne.
.prov-feature-card
Image en haut, titre et texte en dessous, logo et flèche dans la rangée du bas.
.announce-card
Le contenu est plafonné à une colonne fixe et chaque section est un panneau flottant sur le canevas mastic. Au point de rupture le plus large, la rangée peint aussi les panneaux latéraux pleine largeur.
Largeur du contenu
1198px
--content, avec 40 px de marge interne
Grille large
1fr · 1212px · 1fr
≥1440 px, les panneaux latéraux encadrent la colonne
Écart entre panneaux
2px
Le canevas visible entre les panneaux
Écart entre cartes
24px
Entre les cartes d’une rangée
Marge de section
48–64px
Rythme vertical à l’intérieur d’un panneau
Rangée bento
724 / 384
Alternance de cartes larges et étroites
L’animation sert à révéler, pas à décorer. Tout ralentit en sortie; rien ne rebondit. Les révélations se déclenchent une seule fois lorsqu’une section entre dans le champ et ne se répètent jamais.
Révélation
600ms
Fondu montant de 14 px, cubic-bezier(.22, 1, .36, 1)
Montée de l’illustration
700ms
Décalage de 120 ms par calque
Flottement
boucle de 5–7 s
Dérive verticale de 4–8 px, easeInOut
Défilement
30–42s
Linéaire, infini, masqué aux deux extrémités
Changement de titre
450ms
Par lettre, décalage de 35 ms, pause de 6 s
Survol
160–350ms
Couleur et ombre seulement, sans mise à l’échelle
