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
- Mollie — Un comptoir en cachemire, un registre sombre. Prévoyez un large espace blanc autour du texte noir pour la mise en page, puis mettez en valeur les produits avec des tons crème chauds, des bruns expresso et des photos illustrant les moyens de paiement.
- Kagi — Une salle de lecture séparée. Créer un espace blanc ouvert autour d'un texte en gras couleur graphite, en utilisant de subtiles touches de violet et des surfaces aux tons pastel chauds pour rompre la tranquillité.
- Milanote — Milanote est un studio de création dédié. Créez des pages de style galerie éditoriale à l'aide de panneaux visuels flottants: murs encadrés de noir, espace d'affichage blanc et captures d'écran qui ressemblent à de véritables objets avec une profondeur subtile.
- Co2 — Un atlas climatique sous la lumière hivernale. Créez des pages comme un paysage documentaire aérien, où les titres à empattement, les données codées par catégorie et les images glacées mettent en valeur de larges marges blanches.
- GitButler — Du turquoise en fin de texte. Une combinaison de titres à empattements contrastés, de grilles techniques subtiles, de surfaces graphite chaudes et d'une discrète touche de turquoise.
- 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.