Carbon
カーボン / 2016– / Estilo / Sistemas de diseño
El sistema de diseño que IBM publica y mantiene en abierto, la forma utilizable en producto del IBM Design Language. Su esqueleto son la retícula 2x, donde una unidad mínima de ocho píxeles se divide o se multiplica por dos para fijar cualquier medida, la tipografía IBM Plex y un modelo de color que apila grises neutros como capas y reserva un azul principal para la acción.
Controles rectangulares casi sin radio en las esquinas y campos de formulario con una línea solo en el borde inferior / Superficies blancas y #f4f4f4 apiladas de forma alterna, con el fondo moviéndose un paso de claridad en cada capa / Un único azul, #0f62fe, que aparece solo donde se puede actuar, y el resto casi sin color / Una sola familia, IBM Plex, desde los títulos grandes hasta los pies de nota, sin ninguna otra mezclada
Imágenes en la página de origen
Entrada del diccionario
- Usos idóneos
- Cuando una pantalla de administración de empresa debe salir en tema claro y oscuro sin rediseñar ninguno de los dos · Cuando varios equipos necesitan una base compartida y explicable para los espacios y los anchos de columna
- Tipografía
- Componlo todo en IBM Plex, con los estilos productive, más apretados, en producto y los expressive, más grandes, en lo editorial. Elige los tamaños de la escala publicada en vez de inventarlos.
- Composición
- Basa la geometría en la unidad mínima de ocho píxeles. Deriva las columnas empezando por una y partiendo por la mitad, y mantén cada margen y cada relleno como múltiplo entero de la unidad.
- Material
- Apila las superficies grises como capas y mueve un paso de claridad allí donde cambia la capa. Gasta el azul solo en lo que se puede accionar y guarda aparte los colores de aviso.
- Precaución
- Escribir los valores hex a mano rompe el sistema de capas en cuanto el tema pasa de claro a oscuro, porque todo el conjunto da por supuesto que el color se elige por su papel.
- Para profundizar
- Carbon の 2x Grid の解説にある mini unit の考え方 / productive と expressive という2つの型セットの使い分け / White テーマと Gray 100 テーマで層モデルがどう反転するか
Entradas relacionadas
Citar esta entrada
El diccionario existe para que se enlace. Toma la forma que encaje donde estés escribiendo.
- Link
- https://indexstyle.org/es/styles/carbon
- Markdown
- [Carbon — IndexStyle](https://indexstyle.org/es/styles/carbon)
- HTML
- <a href="https://indexstyle.org/es/styles/carbon">Carbon — IndexStyle</a>