Arrondi · Documentation

Système de conceptionArrondi

Vue d’ensembleLien vers la section

Le rayon d'angle est l'un des signaux visuels les plus forts d'un système d'interface utilisateur.

Il influence directement la façon dont votre produit se sent:

tranchant ou doux
dense ou respirant
utilitaire ou premium
rigide ou amical

PyColors définit un petite échelle de rayon contrôlée Ainsi, chaque surface semble cohérente à travers:

composants
tableaux de bord
formulaires
documentation
pages marketing

Pourquoi cela compte

Le rayon incohérent est l’un des moyens les plus rapides de briser la cohérence visuelle. Même de petites différences créent un sentiment subtil de «quelque chose ne va pas».

Ce que vous allez définirLien vers la section

Rayon de base

Une source de vérité unique qui contrôle la sensation globale de l'interface utilisateur.

Échelle

Un ensemble limité de tailles utilisées sur tous les composants.

Règles d'utilisation

Contraintes claires pour éviter la dérive visuelle dans le temps.

ÉtapesLien vers la section

Définir un rayon de baseLien vers la section

Commencez à partir d'une seule variable.

tokens.css

:root {
  --radius: 0.625rem;
}

Ensuite, vous en tirerez toute l’ampleur.

tokens.css

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

Cela vous permet d'ajuster l'ensemble du produit à partir d'un seul endroit.

La carte des rayons à TailwindLien vers la section

Exposez les tokens via Tailwind pour que les composants restent cohérents.

tailwind.config.ts

borderRadius: {
  sm: "var(--radius-sm)",
  DEFAULT: "var(--radius-md)",
  md: "var(--radius-md)",
  lg: "var(--radius-lg)",
  xl: "var(--radius-xl)",
}

À partir de là, les composants n'utilisent que des utilitaires sémantiques.

Appliquer de manière cohérente dans les composantsLien vers la section

arrondi sm

md-arrondi

arrondis

arrondi-xl

Échelle de rayonLien vers la section

Token	Utilisation
`--radius-sm`	interface utilisateur dense, éléments compacts
`--radius-md`	contrôles par défaut
`--radius-lg`	cartes et surfaces
`--radius-xl`	modaux et conteneurs exceptionnels

Guide de décisionLien vers la section

Utilisez ce système si :

vous voulez une cohérence visuelle à travers de nombreux composants
vous créez des tableaux de bord ou des produits SaaS
vous voulez des thèmes prévisibles
vous voulez que les composants restent réutilisables

Évitez les remplacements locaux si :

la valeur est utilisée à plusieurs endroits
il casse la cohérence avec les composants existants
il introduit le bruit visuel
il n'appartient pas à un modèle réutilisable

Préférez

utiliser des tokens de rayon sémantique
Garder une petite échelle contrôlée
Réutiliser les valeurs entre les composants
ajuster via la variable de base

Éviter

rayon aléatoire par composant
mélange de plusieurs styles visuels
valeurs de codage dur
la cohérence de rupture entre les surfaces

Pourquoi c'est importantLien vers la section

Le rayon est subtil, mais il façonne la perception instantanément.

rayon constant au produit se sent intentionnel
rayon incohérent au produit se sent non poli

Garder le rayon contrôlé garantit que votre interface utilisateur reste:

prévisible
évolutif
visuellement calme