Vertical Advisor
Écrire sur WhatsApp contact@verticaladvisor.ae FREN

Système graphique.

Les couleurs, les caractères, les espacements, la grille et les composants communs aux cinq pages. Les valeurs sont celles du fichier assets/site.css.

Couleurs

Ivoire, sable, encre et un seul vert.

Ivoire#f7f3ecFond principal
Papier#fcfaf6Cartes, champs, formulaire
Sable#ece4d6Sections chaudes
Sable profond#ddd1beSurvols, surlignage des mentions [TBC]
Encre#23201cTexte, titres
Anthracite#4b463fTexte courant
Taupe#7d7469Légendes, libellés
Terre d’ombre#27231fSections immersives, pied de page
Vert chêne#34463cBoutons et détails, seule couleur d’action
Vert chêne profond#243229Survol des boutons
Vert pâle#dfe2d8Étiquettes

Proportions indicatives sur une page : le vert ne dépasse jamais les boutons, les puces et les étiquettes.

Typographie

Noto Serif Display pour les titres, Public Sans pour le reste.

Deux familles libres (SIL OFL), auto-hébergées, en attendant la police du client. Les tailles suivent une échelle fluide entre mobile (390 px) et desktop (1440 px) ; valeurs ci-dessous à 1440 px.

DisplayNoto Serif Display 300 · 116 / 114 px · −2,2 %Mobile : 50 px

Rigueur suisse, droit émirien.

Titre 1Noto Serif Display 300 · 84 / 86 px · −2 %Mobile : 42 px

Le soir. Le week-end.

Titre 2Noto Serif Display 300 · 56 / 60 px · −1,5 %Mobile : 32 px

Quatre pôles, de la société à la succession.

Titre 3Noto Serif Display 400 · 30 / 36 pxMobile : 24 px

Planification successorale

Libellé de sectionNoto Serif Display italique 400 · 19 px, taupeMobile : 17 px

Le cabinet

ChapeauPublic Sans 350 · 22 / 34 pxMobile : 19 px

Conseil juridique, fiscal et administratif aux Émirats, par des avocats suisses.

TextePublic Sans 400 · 17 / 28 pxMobile : 16 px

Vertical a été fondé par des avocats suisses. Ils travaillent aux Émirats comme ils ont appris à le faire en Suisse.

LégendePublic Sans 400 · 14 / 21 px, taupeMobile : 14 px

Numéro WhatsApp Business [TBC]

Espacements et grille

Une échelle de 4 à 160 px, douze colonnes.

4 px--s1
8 px--s2
12 px--s3
16 px--s4
24 px--s5
32 px--s6
48 px--s7
64 px--s8
96 px--s9
128 px--s10
160 px--s11
12 colonnes · gouttière 24 px · marges 80 px (20 px sur mobile) · largeur max. 1440 px
Sections
168 px de haut et de bas à 1440, 88 px à 390
Partage éditorial
Libellé sur 4 colonnes, contenu à partir de la 5ᵉ ; une seule colonne sous 960 px
En-tête
88 px, puis 72 px au défilement (72 et 64 px sur mobile)
Images
4:3 pour les cartes, 4:5 pour les portraits d’objets, pleine largeur pour les ouvertures

Boutons et liens

Un bouton plein pour l’action, un lien souligné pour le reste.

Bouton principal : WhatsApp, envoi

Écrire sur WhatsApp
Repos
Écrire sur WhatsApp
Survol
Écrire sur WhatsApp
Focus clavier
Écrire sur WhatsApp
Pressé
Désactivé

Bouton secondaire et lien

Le pôle en détail
Contour, repos
Le pôle en détail
Contour, survol
WhatsApp
Petit, en-tête
Découvrir le cabinet
Lien, repos
Découvrir le cabinet
Lien, survol : le filet se retire puis revient

Formulaire

Des champs soulignés, sans cadre.

Vérifiez l’adresse e-mail.
Choix

Composants

Carte de pôle, étiquette, ligne de publication, question.

Sociétés

Point d’entrée principal

Constitution et gestion de votre société aux Émirats, en zone franche ou sur le mainland.

Le pôle en détail

Point d’entrée principal

Puis-je détenir ma société à 100 % ?

Réponse ouverte : le signe plus devient moins.

Que faut-il faire chaque année ?

…

Navigation

En-tête sur la photo, puis ivoire au défilement.

Sur la photo d’ouverture : fond transparent, 88 px. Page courante soulignée.

Après 24 px de défilement : ivoire à 92 %, flou d’arrière-plan, filet, 72 px. Sous 960 px, le menu passe en plein écran (bouton « Menu »).

Mouvement et points de rupture

Lent, doux, une seule fois.

OuvertureLa photo se pose (échelle 1,06 → 1, 2,2 s) ; les deux lignes du titre montent dans leur masque, décalées de 0,12 s ; le reste apparaît en fondu.
ApparitionsFondu et montée de 22 px à l’entrée dans l’écran (1 s, courbe 0.16, 1, 0.3, 1). Les images se découvrent de haut en bas.
Transitions de pageFondu enchaîné entre pages (View Transitions), ou fondu de sortie de 0,3 s. Coupé si l’utilisateur réduit les animations.
1440Desktop de référence, marges 80 px
1180Navigation resserrée, sélecteur de langue masqué, relais en colonne
960Menu plein écran, une colonne, libellés au-dessus
390Mobile de référence, boutons pleine largeur