Ui
Plan clinique sur papier mat
shadcn/ui est un atelier de création d'un système de design monochrome: une toile blanche épurée, des surfaces gris chaud et doux, et des cartes aux grands rayons positionnées sur des bordures discrètes. L'interface est presque entièrement achromatique — texte noir, surfaces blanches, nuances de gris secondaires — avec une unique touche de rouge, réservée aux états d'erreur. La typographie s'appuie sur la neutralité géométrique de Geist, avec une hauteur de caractères réduite à l'écran, créant une ambiance sereine et épurée, évoquant davantage une infrastructure de développement qu'un produit grand public.
Images minimales: le système se compose presque exclusivement de l’interface utilisateur. Aucune photo clé, illustration ni élément graphique décoratif. Les démonstrations de produits sont présentées sous forme de maquettes de composants (cartes, champs de saisie, boutons) disposées en grille, servant à la fois de documentation et de contenu visuel. Les icônes sont de fines lignes géométriques (probablement inspirées de Lucide) de 1,5 à 2 px d’épaisseur, en #0a0a0a ou #737373, utilisées avec parcimonie comme repères fonctionnels. Le langage visuel est constitué par les composants d’interface eux-mêmes: la page fait office de guide de style vivant, où chaque élément visible est un élément de design.
Palette
Neutre
- Canvas
#f5f5f5— Fond de page, remplissage de surface discret, boutons supplémentaires. - Paper
#ffffff— Surfaces des cartes, arrière-plans des fenêtres contextuelles, remplissages des boutons principaux - Surface Alt
#fafafa— Arrière-plan de la barre latérale, option de carte discrète, état inactif du champ de saisie. - Ink
#0a0a0a— Texte principal, titres, étiquettes des boutons, contours des icônes. - Ink Soft
#171717— Images de fond pour boutons avec remplissage, texte supplémentaire sur les surfaces claires. - Mid Gray
#737373— Le texte principal, le texte d'espace réservé, les étiquettes auxiliaires et le remplissage des icônes au repos sont tous en sourdine.
Typographie
de 12 à 48 px · 8 étapes
- Geist — remplacement: Inter · grandes lignes 400, 500, 600 · Tous les textes de l'interface — corps de texte avec une épaisseur de ligne de 14 px/400, titres avec une épaisseur de ligne de 24 à 48 px/600 et boutons avec une épaisseur de ligne de 13 à 14 px/500 — bénéficient d'une police géométrique et d'une épaisseur de ligne uniforme, conférant aux outils de développement une apparence neutre. Une épaisseur de ligne de 600, un espacement entre les lettres de 48 px et un espacement de -0,05 em garantissent des titres clairs et affirmés, d'une apparence soignée plutôt que artificielle.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8px |
| Rayon du bouton | 18px |
| Rayon de la carte | 24px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 48-80px |
| Largeur de la page | 1280px |
L'IA construira votre site web dans le style Ui 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
- Ventriloc — Un observatoire éditorial de données sur papier chaud – une simple braise orange soulignant la précision monochrome
- Geniestudio — Un carnet à lumière douce du jour, du genre avec de larges marges et un trait de stylo épais.
- xAI — Laboratoire de crème chaude avec pilule noire
- Cal — Une praticité monochrome, une approche humaine. Un système qui privilégie la clarté et la fonctionnalité grâce à une palette noir et blanc stricte, adoucie par une typographie conviviale et des formes arrondies.
- Scale — Un laboratoire photo de qualité muséale associé à un projet technique
- Contractbook — contrats de papier crème sous un ciel outremer
- AutoSend — Un studio en pierre confortable éclairé par une unique lumière violette, où les titres à empattements et les appels à l'action d'un bleu indigo éclatant coexistent dans un espace calme, presque blanc.
- Air — sculpture « Ciel de minuit à travers le verre»
- SpatialChat — impulsion violette sur parchemin blanc
- Squarespace — Galerie monochrome cinématographique
- Giga — Horizon de minuit sur de l'obsidienne givrée
- Supabase — Un éditeur de code à minuit, avec un point vert phosphorescent — une unique pulsation chromatique sur un océan de poussière de charbon