Carbon

カーボン / 2016– / Style / Systèmes de design

Le système de conception qu'IBM publie et maintient en accès libre, la forme utilisable en produit de l'IBM Design Language. Son ossature tient en trois choses, la grille 2x où une unité minimale de huit pixels se divise ou se multiplie par deux pour fixer toutes les dimensions, le caractère IBM Plex et un modèle de couleur qui empile des gris neutres en couches et réserve un bleu principal à l'action.

Des composants rectangulaires presque sans arrondi et des champs de saisie soulignés d'un filet sur le seul bord inférieur / Des surfaces blanches et #f4f4f4 empilées en alternance, le fond se décalant d'un cran de clarté à chaque couche / Un seul bleu, #0f62fe, qui n'apparaît que là où une action est possible, tout le reste restant presque neutre / Une seule famille, IBM Plex, des grands titres jusqu'aux légendes, sans aucune autre mêlée

Images sur la page d’origine

Entrée du dictionnaire

Usages idéaux
Quand un écran d'administration d'entreprise doit exister en thème clair et en thème sombre sans que l'un ou l'autre soit redessiné · Quand plusieurs équipes ont besoin d'une base commune et explicable pour les blancs et les largeurs de colonne
Typographie
Tout composer en IBM Plex, avec les styles productive, plus serrés, dans le produit et les styles expressive, plus grands, pour l'éditorial. Prendre les corps dans l'échelle publiée plutôt que les inventer.
Composition
Fonder la géométrie sur l'unité minimale de huit pixels. Déduire les colonnes en partant de une et en divisant par deux, et garder chaque marge extérieure et intérieure en multiple entier de l'unité.
Matière
Empiler les surfaces grises en couches et décaler le fond d'un cran de clarté partout où la couche change. Ne dépenser le bleu que sur ce qui est actionnable et tenir les couleurs d'alerte à part.
Précaution
Écrire les valeurs hexadécimales en dur casse l'empilement dès que le thème bascule du clair au sombre, car tout le système suppose que la couleur se choisit par son rôle.
Pour approfondir
Carbon の 2x Grid の解説にある mini unit の考え方 / productive と expressive という2つの型セットの使い分け / White テーマと Gray 100 テーマで層モデルがどう反転するか

Entrées liées

Citer cette entrée

Le dictionnaire est fait pour être lié. Prenez la forme qui convient là où vous écrivez.

Link
https://indexstyle.org/fr/styles/carbon
Markdown
[Carbon — IndexStyle](https://indexstyle.org/fr/styles/carbon)
HTML
<a href="https://indexstyle.org/fr/styles/carbon">Carbon — IndexStyle</a>

Revenir à sa position dans l’index