Calendly
Encre bleu foncé sur marbre froid
Calendly offre un espace de travail serein et propice à la planification: une page blanche aérée, des fiches produits d'un blanc éclatant se détachant sur un fond gris clair, et une typographie bleu foncé, plus élégante que le noir. L'élément central est ce bleu foncé (#0b3558), omniprésent dans les titres, boutons, icônes et liens, qui adoucit l'interface et la rend plus chaleureuse et stylée qu'une page d'accueil SaaS classique. Un bleu vif (#006bff) est utilisé pour les actions principales, tandis que des touches décoratives roses et bleues, s'étendant au-delà des fiches produits, apportent une note chaleureuse sans surcharger l'interface. La sobriété des composants est de mise: bordures fines de 1 px, ombres subtiles bleutées, rayon de 24 px pour les fiches produits et coins de 8 px pour les boutons contribuent à un rendu soigné et harmonieux.
Largeur maximale de 1200 px, centrée, avec de larges marges sur ordinateur. L'écran principal est divisé en deux colonnes: la colonne de gauche contient un en-tête de 80 px, le texte principal et des boutons de connexion superposés; la colonne de droite contient une carte de réservation avec des éléments décoratifs en arrière-plan. Sous l'écran principal se trouve une bande pleine largeur affichant le logo Trust. Les sections suivantes alternent entre des blocs d'en-tête centrés (H2 + sous-titre + appel à l'action optionnel) et des blocs à deux colonnes décrivant les fonctionnalités (texte à gauche/produit à droite ou produit à gauche/texte à droite), avec des éléments décoratifs derrière chaque image de produit. Les grilles de cartes sont rarement utilisées; la mise en page privilégie les sections appariées côte à côte plutôt que les grilles à plusieurs colonnes. L'espacement entre les sections varie de 48 à 64 px. La navigation est assurée par une barre supérieure fixe de 64 px avec le logo à gauche, un menu centré et un groupe d'appels à l'action à droite.
L'élément visuel principal est constitué de captures d'écran du produit: de simples maquettes de l'interface utilisateur du calendrier de réservation, imprimées sur des cartes blanches nettes aux coins arrondis. Design décoratif: chaque carte produit est entourée d'une touche de violet corail (#e55cff) ou de bleu azur (#0099ff), légèrement décalée et floue, créant un effet de collage plutôt qu'une simple capture d'écran. Aucune photographie, aucune image de style de vie: tous les éléments visuels représentent l'interface utilisateur du produit, des formes abstraites ou les logos monochromes des partenaires dans la barre de confiance. Les icônes sont linéaires, monochromes, d'une épaisseur de 1,5 à 2 px, de couleur bleu marine foncé (Ink Navy) ou bleu (Signal Blue).
Palette
Marque
- Ink Navy
#0b3558— Texte principal, titres, icônes, fond sombre pour les appels à l'action, liens de navigation. - Signal Blue
#006bff— Appel à l'action principal (CTA), navigation active, mise en valeur des liens, états sélectionnés
Neutre
- Carbon
#0a0a0a— Texte en noir pur (solution de repli), glyphe du logo, remplissage d'icône. - Slate Gray
#476788— Texte principal supplémentaire, texte d'accompagnement, étiquettes atténuées. - Mist Gray
#a6bbd1— Texte désactivé, étiquettes de fonctions inactives, contours d'icônes clairs - Cloud
#f8f9fb— canevas de page, arrière-plan du pied de page, surface supplémentaire - Paper
#ffffff— Surfaces de cartes, panneaux en relief, texte des boutons sur fond sombre. - Pebble
#f0f3f8— Images de fond pour les icônes, ombrage des champs de saisie, séparateurs discrets, effets de survol.
Typographie
de 12 à 80 px · 10 étapes
- Gilroy — remplacement: Manrope · grandes lignes 400, 500, 600, 700 · Tous les textes d'interface. Gilroy est une police sans empattement humaniste géométrique à larges ouvertures et à contraste de traits uniforme; sa graisse grasse (700) est utilisée pour les titres, tandis que les graisses 500 à 600 sont utilisées pour les boutons et les sous-titres. À remplacer par Manrope ou Inter.
- Gilroy — remplacement: Inter · grandes lignes 400 · Texte principal et étiquettes d'interface utilisateur à usage général - La police de 400 points garantit que les textes longs sont lisibles sans paraître lourds.
- Gilroy — remplacement: Inter · grandes lignes 500 · Titres secondaires et texte principal mis en évidence - La police 14/500 est l'outil principal pour les titres de cartes et les étiquettes en ligne.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8-16px |
| Rayon du bouton | 8px |
| Rayon de la carte | 24px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 48-64px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Calendly et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- ElevenLabs — Un reportage photo aux tons crème chauds, avec des titres discrets. Un carnet de style Bauhaus: papier couleur coquille d’œuf, encre noire et une touche de violet et d’orange pour la présentation du produit.
- Awesomic — Grille éditoriale en zinc avec des signes de ponctuation orange évoquant des confettis
- Monad — revue technique éditoriale sur parchemin chaud
- Dub — Panneau de commande en papier de riz mat de Link
- Seline Analytics — Un tableau analytique silencieux sur du papier chaud
- Notion — Un carnet en papier chaud sous le soleil de midi
- Anthropic — Un journal de terrain scientifique sur vélin aux tons chauds — des surfaces ivoire apaisantes, des titres éditoriaux à empattements et une unique touche d'argile qui n'apparaît que lorsque l'action est nécessaire.
- Augen Pro — La présentation blanche d'Apple met en valeur un bleu électrique clinique et aérien comme unique accent dans un espace monochrome.
- Antimetal — Chronique éditoriale sur papier crème – une matinée paisible dans une revue scientifique, où la sobriété inspire confiance et où les empattements font tout le travail.
- Perk — Chaux électrique sur papier sulfurisé chaud
- Ditto — Un atelier baigné de soleil, où sont créés des échantillons de fleurs sauvages. Des surfaces crème chaudes, une base jaune éclatante, des encres bleu marine profond, des formes organiques aux couleurs chatoyantes qui s'épanouissent en arrière-plan.
- Officevibe — Un magazine éditorial imprimé sur un papier couleur crème chaleureuse. Imaginez un essai approfondi sur la gestion des ressources humaines, présenté comme un produit: une police à empattements cursive se dévoilant discrètement sur une interface bleue moderne.