Cursor
Un atelier de parchemin chaleureux, éclairé par des braises incandescentes.
Cursor utilise une typographie chaleureuse, évoquant le parchemin: un fond crémeux, un texte noir profond et une unique touche orange vif qui active les liens et les sélections plutôt que les boutons. Les titres, en CursorGothic (épaisseur 400), présentent un espacement des lettres qui diminue progressivement avec leur taille; l’autorité est obtenue par la sobriété et la finesse des caractères plutôt que par l’audace. Les surfaces restent plates et imitent le papier, avec des bordures fines et des ombres douces et chaudes de couleur gris; les angles sont nets (épaisseur 4 px) pour l’ensemble du texte. EB Garamond est utilisé de manière sélective pour les sous-titres et les textes courts, tandis que berkeleyMono gère le code, les balises et les métadonnées, conférant au système une personnalité typographique qui rappelle davantage une revue littéraire qu’un tableau de bord SaaS.
Largeur maximale: 1300 px centrée, marge de 24 px. Navigation supérieure: en-tête transparent de 52 px de haut avec logo et texte à gauche, 4 liens de navigation centrés, groupe « Connexion / Contact / Téléchargement» aligné à droite. Section principale: en-tête aligné à gauche + double bloc d’appel à l’action avec texte partant du coin supérieur gauche, puis une maquette de produit pleine largeur. Bande de confiance: une rangée horizontale de 8 logos sur toute la largeur de la section. Les sections de présentation alternent texte à gauche et capture d’écran à droite dans une mise en page à deux colonnes (50/50), avec un espacement vertical de 64 à 96 px entre les sections. Toutes les captures d’écran sont des maquettes de fenêtres avec le style macOS identique. Pied de page: grille de liens à quatre colonnes avec le logo de la marque à gauche. Les sections sont séparées par un espacement suffisant plutôt que par des séparateurs; le fond crème assure la séparation.
Les captures d'écran du produit occupent une place centrale: de grandes maquettes de fenêtres macOS présentent l'IDE Cursor en action: onglets de fichiers, vues de différences, plans d'agents, panneaux de terminal et intégration Slack/chat. Chaque maquette est encadrée d'une carte #f2f1ed au contraste doux et chaleureux. Une photo de paysage aux tons discrets (montagnes/horizon désertique) s'étend au-delà de la section principale, apportant une touche chaleureuse sans concurrencer l'interface utilisateur. Les logos des clients ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) sont présentés sous forme de lettrage monochrome dans des vignettes Linen en forme de pilule. Aucune photographie de personnes, illustration ou élément graphique décoratif abstrait: toute l'attention visuelle est portée sur l'interface utilisateur et l'identité de marque du produit. Les icônes sont des glyphes fins et monolinéaires remplis de #7a7974 Ash, jamais chromatiques.
Palette
Neutre
- Ink
#26251e— Texte principal, arrière-plan du bouton d'action principal, texte de navigation: une teinte chaude, presque noire, jamais le noir pur #000 - Parchment
#f7f7f4— Le fond de la page, la toile principale, est d'une teinte crème chaude qui adoucit le contraste et donne l'impression d'une impression à l'encre plutôt que d'une impression numérique. - Bone
#f2f1ed— Les surfaces en carton et les contenants surélevés, d'une teinte plus foncée que la toile, créent un effet de superposition « papier sur papier» sans bordure. - Linen
#e6e5e0— Remplissage neutre clair pour les boutons sur surfaces foncées. - Stone
#cdcdc9— Bordures fines, séparateurs, cloisons subtiles – lignes de 1 px dans des tons chauds - Mist
#a1a19f— Texte auxiliaire de troisième niveau, légendes - entre le texte muet et le texte secondaire.
Typographie
de 12 à 72 px · 6 étapes
- CursorGothic — remplacement: Inter · grandes lignes 400, 500 · Police principale de l'interface utilisateur, des titres, de la navigation, du corps du texte et du design produit. Les titres, en gras 400 points, avec un espacement des lettres décroissant progressivement (-0,005 em à 22 px → -0,03 em à 72 px), sont une caractéristique distinctive: les titres ne sont jamais en gras. Les fonctions ss08, ss09 et tnum activent les variantes stylistiques et les chiffres tabulaires.
- EB Garamond — remplacement: Iowan Old Style · grandes lignes 400, 500 · CursorGothic, une police de caractères à empattements de style éditorial conçue pour les sous-titres, le corps du texte et les données tabulaires, apporte une touche littéraire à l'interface.
- berkeleyMono — remplacement: ui-monospace · grandes lignes 400, 500 · Monospace – pour les blocs de code, les extraits de ligne de commande, les métadonnées, les chemins de fichiers et les étiquettes de développeur – un langage technique.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8px |
| Rayon du bouton | 4px |
| Rayon de la carte | 4px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 64-96px |
| Largeur de la page | 1300px |
L'IA construira votre site web dans le style Cursor 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
- Amplemarket — Un lieu de travail baigné de soleil et jonché de confettis
- Getharvest — Un bureau à l'heure dorée – une toile couleur crème chaude, des cartes postales blanches accrochées à la toile et une unique flamme orange vif.
- Drive Capital — Affiche rétro de road trip sur papier chaud
- Wealthsimple — Entrepôt tapissé de cachemire avec éclairage de galerie
- Huddle — Fiches d'inventaire pastel sur papier crème
- Fuser — Des polaroïds éparpillés sur le mur de travail d'un designer
- Campsite — Le poste de travail d'un rédacteur baigné de soleil – du papier crème chaud avec un seul tampon orange indiquant son intention
- Redis Agency — L'atelier éditorial, ouvert après les heures de bureau, est un lieu plongé dans l'obscurité où tout le travail de branding est réalisé à l'aide de polices à empattement et d'un unique radis rouge.
- AI Product Generation — Studio de photographie éditoriale sur papier blanc - titre en couverture, couleur orange pour la mise en valeur éditoriale
- Getanchor — Teinte terracotta chaude sur un fond crème délavé par le soleil
- Flatfile — Un journal de données silencieux sur un parchemin chaud
- Inthememory — Un dessin architectural sur marbre blanc, éclairé d'une unique lumière chaude. Une salle de données éditoriale silencieuse où une encre turquoise profonde et des commandes en forme de pilule flottent au-dessus de surfaces d'un blanc immaculé, seulement rehaussées d'une touche d'orange.