# Sistema de diseño Vuestic UI

## Vista previa de la interfaz del sistema de diseño Vuestic UI

Valora la claridad, la jerarquía y la respuesta; añade una observación significativa y guarda una evaluación local.

## Referencia de diseño del sistema de diseño Vuestic UI

Vuestic UI 1.10.3. Los valores de los preajustes se obtienen del servicio de color instalado, y las variables de los componentes, de su CSS. La hoja de evaluación conserva el preajuste claro predeterminado, pero sobrescribe intencionadamente --va-font-family con system-ui. Las formas decorativas y la escala circundante son originales.

### Preajuste de color claro predeterminado

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| primary | #154EC1 | Puntuación y acción principal. |
| secondary | #767C88 | Rol secundario. |
| success | #3D9209 | Resultado guardado. |
| info | #158DE3 | Rol informativo. |
| danger | #E42222 | Rol de error. |
| warning | #FFD43A | Rol de advertencia. |
| backgroundPrimary | #f6f6f6 | Superficie principal predeterminada. |
| backgroundSecondary | #FFFFFF | Superficie elevada predeterminada. |
| backgroundElement | #ECF0F1 | Superficie del elemento. |
| backgroundBorder | #DEE5F2 | Rol de límite. |
| textPrimary | #262824 | Texto principal. |
| textInverted | #FFFFFF | Texto invertido. |
| focus | #49A8FF | Rol de foco. |
### Comparación con el preajuste oscuro predeterminado

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| primary | #3472F0 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| success | #66BE33 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| danger | #F34030 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| backgroundPrimary | #050A10 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| backgroundSecondary | #1F262F | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| backgroundElement | #131A22 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| backgroundBorder | #3D4C58 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| textPrimary | #F1F1F1 | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
| textInverted | #0B121A | Referencia oficial del preajuste oscuro; el ejemplo local sigue en modo claro. |
### CSS nativo y escalas explícitas de la aplicación

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --va-font-family | "Source Sans Pro", sans-serif | Valor predeterminado de la biblioteca; en el ejemplo se sobrescribe explícitamente con system-ui. |
| --va-button-border-radius | 0.25rem | Radio compilado de los botones nativos. |
| --va-form-element-border-radius | 0.25rem | Radio compilado compartido de los campos de formulario. |
| --va-button-content-py | 0.5rem | Relleno vertical del contenido de los botones. |
| --va-button-content-px | 0.75rem | Relleno horizontal del contenido de los botones. |
| --va-rating-number-item-margin | 0.1em | Referencia de espaciado del modo numérico nativo. |
| --va-rating-number-item-font-weight | 700 | Referencia de énfasis del modo numérico nativo. |
| Application title | 34px / 1.15; 29px narrow | Jerarquía original de títulos. |
| Application spacing | 6 / 7 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 24 / 28 / 32px | Valores reales de la hoja de estilos original, no una escala de tokens de Vuestic. |
| Application panel radius | 14px | Geometría original del entorno. |
| Layout | Flexible form + 280px summary; stack below 760px | Disposición integrada con altura ajustada al contenido. |
## Guía completa del sistema de diseño Vuestic UI

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Sistema de diseño Vuestic UI: una biblioteca Vue configurable con preajustes de color con nombre

### Una biblioteca Vue configurable con preajustes de color con nombre

> Vuestic registra sus servicios compartidos mediante createVuestic. El ejemplo usa componentes nativos importados de vuestic-ui y el preajuste de color claro predeterminado. La puntuación, los botones, el progreso y la alerta de éxito resuelven los nombres de color semánticos a través de ese mismo servicio.

La hoja de evaluación es una aplicación concreta de esos componentes: separa tres preguntas de revisión, recopila una observación de apoyo, calcula un promedio y bloquea el resultado local guardado. Las marcas de color de los criterios y la composición en dos columnas son diseños originales de la aplicación, no componentes adicionales de Vuestic.

Consulta la especificación complementaria

## Sistema de diseño Vuestic UI: distingue los preajustes del servicio de las variables geométricas de CSS

### Distingue los preajustes del servicio de las variables geométricas de CSS

El preajuste claro verificado define primary #154EC1, success #3D9209 y textPrimary #262824. Su preajuste oscuro utiliza valores distintos para primary, texto y superficies, en lugar de limitarse a invertir la página clara. La tabla de referencia registra ambos preajustes, mientras que la vista previa permanece intencionadamente en modo claro.

La geometría de los componentes se configura mediante variables de CSS como --va-button-border-radius y --va-form-element-border-radius, ambas con valor 0.25rem en la hoja de estilos instalada. Un preajuste de color y una sobrescritura de una variable de CSS resuelven problemas distintos: usa el servicio para los roles semánticos y la variable documentada para la geometría compatible de los componentes.

Consulta la especificación complementaria

## Sistema de diseño Vuestic UI: carga los iconos necesarios e indica la sobrescritura de la fuente

### Carga los iconos necesarios e indica la sobrescritura de la fuente

La variable predeterminada --va-font-family de Vuestic especifica Source Sans Pro. El ejemplo sobrescribe esa variable con system-ui, en lugar de depender silenciosamente de una fuente que nunca se cargó. Así, las etiquetas de los componentes nativos y el texto de la aplicación comparten una pila de fuentes disponible y definida explícitamente.

Los iconos de valoración predeterminados usan nombres de Material Icons, como star y star_outline. Su hoja de estilos de fuente local se importa desde @quasar/extras y se incluye junto con los archivos de fuente. Sin ese recurso, podrían aparecer las palabras literales de los iconos en lugar de las formas de estrella esperadas. La fuente de iconos se mantiene separada de la sobrescritura de la familia tipográfica de la aplicación.

Consulta la especificación complementaria

## Sistema de diseño de Vuestic UI: usa el cero como estado sin respuesta, no como una puntuación baja

### Usa cero como estado sin responder, no como una puntuación baja

Cada VaRating se vincula al valor numérico de un criterio. El máximo es cinco y la opción clearable está activada, por lo que al volver a elegir la puntuación actual se puede restablecer ese criterio a cero. Para el cero, la interfaz muestra Sin calificar, en lugar de presentarlo como un juicio completado de cero sobre cinco.

El promedio se calcula dividiendo por la cantidad de valoraciones positivas. Así se evita penalizar los criterios sin respuesta mientras la hoja de evaluación está en curso. Para guardar, es necesario responder los tres criterios, de modo que el promedio final siempre represente la evaluación completa. Al cambiar una valoración, se actualizan de inmediato el indicador de finalización, la barra de progreso y el resumen.

1. Guarda la hoja de evaluación en blanco y revisa los avisos de valoraciones faltantes y notas.

2. Asigna Claridad 4, Jerarquía 3 y Comentarios 2; el promedio pasa a 3,0.

3. Escribe una observación concreta y guarda; luego selecciona Empezar de nuevo para restablecer toda la hoja de evaluación.

Consulta la especificación complementaria

## Sistema de diseño de Vuestic UI: una observación útil requiere texto significativo y espacio suficiente

### Una observación útil necesita texto significativo y espacio suficiente

VaTextarea tiene una etiqueta visible, un límite de cuatrocientos caracteres y un contador. Tras intentar guardar, la aplicación comprueba que el valor, una vez eliminados los espacios iniciales y finales, tenga al menos veinte caracteres. Por tanto, una cadena de espacios no cumple el requisito, aunque su longitud nominal incluya caracteres.

El área de texto activa el autoajuste, con un mínimo de cuatro filas y un máximo de doce. Es una configuración funcional, no solo una propiedad de ejemplo: sin el autoajuste, la configuración del mínimo de filas no producía el área de notas expansible prevista. La versión corregida mantiene visible la observación en pantallas estrechas y permite el desplazamiento normal para notas excepcionalmente largas.

Consulta la especificación complementaria

## Sistema de diseño de Vuestic UI: calcula el progreso según la finalización, no según el promedio de las valoraciones

### Deriva el progreso del grado de finalización, no del promedio de las puntuaciones

La barra de progreso mide cuántos criterios tienen una respuesta positiva y lo expresa como valorados dividido por tres, multiplicado por cien. El número grande que aparece junto a ella indica el promedio de calidad. Son denominadores distintos y no deben confundirse: incluso tres puntuaciones bajas pueden dar como resultado un cien por ciento de finalización.

La frase de finalización indica directamente el numerador y el denominador. El promedio lleva la etiqueta Promedio de los criterios valorados y el resumen repite la puntuación de cada criterio. Estas etiquetas permiten entender el cálculo, en lugar de interpretar una barra de progreso sin explicación como un juicio general de calidad.

Consulta la especificación complementaria

## Sistema de diseño de Vuestic UI: bloquea una evaluación local completada hasta que se restablezca explícitamente

### Bloquea una evaluación local completada hasta que se restablezca explícitamente

Al guardar, primero se establece attempted y luego se comprueban todas las valoraciones y la observación antes de activar el estado guardado. El indicador de guardado vuelve de solo lectura las valoraciones y el área de texto, y desactiva el botón Guardar. La alerta de éxito indica que la evaluación se guardó localmente y que no se envió nada.

Empezar de nuevo borra todas las valoraciones, la nota, la visibilidad de los errores de validación y el estado guardado mediante un único controlador. La acción es deliberadamente explícita, porque, de lo contrario, cambiar un valor después de guardar dejaría desactualizada la confirmación. El ejemplo no implica que haya un backend, una cuenta o un destinatario de la evaluación.

Consulta la especificación complementaria

## Sistema de diseño de Vuestic UI: identifica cada elemento de valoración con el criterio y su valor

### Identifica cada elemento de valoración con el criterio y su valor

Los elementos nativos de VaRating exponen botones en el árbol de accesibilidad. aria-item-label incluye el nombre del criterio y los marcadores de posición de valor y máximo, y genera etiquetas como Puntuación de Claridad: 4 de 5. Así se evitan quince controles de estrella indistinguibles cuando aparecen tres valoraciones en la misma página.

El área de texto tiene su propia etiqueta visible, la barra de progreso tiene una etiqueta de finalización y la alerta de guardado es una región de estado. Las marcas decorativas de los criterios se ocultan a las tecnologías de asistencia. Las comprobaciones locales hicieron clic en botones de valoración reales y etiquetados, probaron la validación e inspeccionaron el diseño final a 280 px, en lugar de limitarse a comprobar la presencia de atributos ARIA.

- Asigna a cada valoración repetida una etiqueta de elemento específica para el criterio.

- Distingue visualmente los estados sin respuesta y de solo lectura.

- Verifica el resumen numérico después de interactuar con los controles nativos reales.

Consulta la especificación complementaria

## Sistema de diseño de Vuestic UI: incluye el complemento, el componente CSS y el recurso de iconos local

### Incluye el complemento, el CSS del componente y el recurso de iconos local

La entrada registra createVuestic e importa vuestic-ui/css antes de la hoja de estilos original del diseño. App.vue importa todos los componentes que utiliza, de modo que el ejemplo no depende de una configuración de importación automática sin documentar. La sobrescritura de fuente compartida se aplica después de la biblioteca CSS.

El comando del paquete incluye @quasar/extras únicamente como fuente de la fuente local de Material Icons; no registra Quasar ni mezcla sus componentes con la hoja de evaluación. El SFC completo y la hoja de estilos anteriores se pueden incorporar directamente a la configuración de Vite con Vue que se muestra a continuación. La vista previa independiente generada incluye los recursos necesarios y no descarga ninguna fuente remota.

Consulta la especificación complementaria

## Ejemplos de componentes del sistema de diseño de Vuestic UI

### Hoja de evaluación crítica nativa completa

VaRating, VaTextarea, VaButton, VaChip, VaProgressBar y VaAlert están conectados a un único modelo de evaluación.

```
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&&note.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&&note.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
```

Referencia de código

- Cero significa sin calificar y se excluye del promedio.

- Para guardar, se necesitan las tres valoraciones y una nota de veinte caracteres, sin contar los espacios iniciales y finales.

- Las valoraciones y el texto guardados pasan a ser de solo lectura hasta que se seleccione Empezar de nuevo.

### Diseño original completo y configuración tipográfica

Sobrescritura de fuente explícita, tarjetas adaptables y marcas decorativas de criterios.

```
:root{--va-font-family:system-ui,sans-serif}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:#f3f5f8;color:#262824;font-family:system-ui,sans-serif}.review-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:#667182}h1{font-size:34px;line-height:1.15;margin:12px 0;max-width:710px}header>p:last-child{max-width:640px;line-height:1.6;font-size:15px;color:#677080}.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:28px}.review-form,.summary{background:white;border:1px solid #dee5f2;border-radius:14px;padding:24px;min-width:0}.form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.form-head h2{font-size:20px;font-weight:650}.criterion{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid #e6eaf0}.criterion:last-of-type{margin-bottom:24px}.criterion-body{min-width:0;flex:1}.criterion h3{font-size:16px;font-weight:650;margin:0 0 6px}.criterion p{font-size:13px;line-height:1.5;color:#677080;margin:0 0 12px}.criterion-mark{width:58px;height:58px;border-radius:12px;flex-shrink:0;position:relative;overflow:hidden;background:#e8efff}.criterion-mark i,.criterion-mark b{position:absolute;display:block}.mark-0 i{width:27px;height:27px;background:#7a9cdf;border-radius:50%;left:10px;top:14px}.mark-0 b{width:14px;height:14px;background:#154ec1;border-radius:50%;left:31px;top:22px}.mark-1{background:#eee8f8}.mark-1 i{width:15px;height:34px;background:#9273b6;left:10px;top:13px}.mark-1 b{width:15px;height:19px;background:#c2aedb;left:32px;top:28px}.mark-2{background:#e6f0e0}.mark-2 i{width:36px;height:23px;border-radius:6px;background:#86a16f;left:11px;top:14px}.mark-2 b{border:8px solid transparent;border-top-color:#86a16f;left:17px;top:33px}.score{display:block;font-size:11px;color:#667182;margin-top:7px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.average{font-size:64px;line-height:1.2;font-weight:650;margin-top:16px;color:#154ec1}.average span{font-size:19px;color:#78828f;font-weight:400;margin-left:8px}.average-label{font-size:12px;color:#697482;margin:5px 0 24px}.completion{font-size:11px;color:#687387;margin-top:10px}.guidance{font-size:14px;line-height:1.6;margin:24px 0}.summary dl>div{display:flex;justify-content:space-between;border-top:1px solid #e6eaf0;padding:12px 0;font-size:13px}.summary dd{font-weight:700}.saved{margin-top:16px;font-size:13px;line-height:1.6}.saved p{margin-top:7px}.local-note{font-size:12px;line-height:1.6;color:#687387;padding:16px 5px}.error{font-size:13px;color:#b71717;margin-bottom:16px}@media(max-width:760px){.review-shell{padding:20px}.review-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.review-shell{padding:14px}.review-form,.summary{padding:16px}.criterion{gap:12px}.criterion-mark{width:38px;height:48px}.criterion-mark i,.criterion-mark b{transform:scale(.7);transform-origin:left}.criterion-mark i{left:4px}.criterion-mark b{left:18px}.actions>*{width:100%}.va-textarea{max-width:100%}}
```

Referencia de código

- Material Icons conserva su propia familia tipográfica.

- No se establece una altura mínima para el documento.

## Configuración del agente de IA de sistema de diseño Vuestic UI

### Punto de partida para la implementación

Verifiqué Vuestic UI 1.10.3 y Material Icons local de @quasar/extras 2.1.0. Se proporcionan ambos ejemplos completos del código fuente; no se necesita ningún servicio externo de fuentes.

```
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install vuestic-ui@1.10.3 @quasar/extras@2.1.0
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Una instrucción para tu proyecto

```
Usa Vuestic UI 1.10.3 para reproducir la hoja de evaluación de diseño con tres criterios nativos de VaRating, VaTextarea, progreso, estado y controles para guardar y restablecer. Calcula el promedio de los criterios evaluados y exige las tres puntuaciones y una nota de veinte caracteres, una vez eliminados los espacios sobrantes, antes de guardar. Conserva el ajuste automático de tamaño del área de texto para que la evaluación completa siga visible, y mantén la coherencia entre el estado guardado de solo lectura y el comportamiento de restablecimiento. Incluye createVuestic, CSS nativo y la fuente de iconos local. Se trata de un registro local de evaluación, no de un servicio para gestionar lotes de inspección.
```

## Fuentes y alcance del sistema de diseño Vuestic UI

Vuestic UI 1.10.3 con el ajuste preestablecido de color claro predeterminado y una sobreescritura explícita de la fuente del sistema. Preguntas originales de evaluación e ilustraciones. El estado guardado es local, sin envío de evaluaciones a servicios externos ni persistencia tras recargar la página.

- Instalación Configuración del complemento y la hoja de estilos.

- Configuración de colores Ajustes preestablecidos semánticos con nombre.

- Variables de CSS Geometría de componentes y sobreescrituras de fuente compatibles.

- Valoración Estado que permite borrar, etiquetas y modelo.

- Área de texto Ajuste automático de tamaño, límites de filas y visualización de validación.

- Barra de progreso Semántica de los valores y del máximo.

- Alerta Tratamiento visual del resultado.

## Recursos relacionados con el sistema de diseño Vuestic UI

### Web Awesome

Examina los tokens semánticos reales de Web Awesome en elementos personalizados nativos, incluidos los cambios de radio y espaciado con alcance definido, el estilo de shadow-DOM, el comportamiento de selección y la validación de entradas.

### Ariakit

Ariakit ofrece componentes React sin estilos, con un estado compartido explícito y partes accesibles que se pueden combinar. Su combobox separa el texto introducido de la selección confirmada, por lo que resulta útil para selectores basados en búsquedas; el buscador de referencias de abajo muestra esa diferencia con resultados agrupados y no disponibles.

### Bits UI

Bits UI ofrece componentes headless de Svelte que se componen mediante partes nativas y el estado de Svelte 5. El ejemplo combina una casilla de verificación con estado mixto calculado, secciones de acordeón que se expanden de forma independiente y un diálogo de revisión basado en portal, e incluye toda la configuración de estilos.


- [Referencia de implementación](https://ui.vuestic.dev/ui-elements/rating/)
- [Fuente](https://ui.vuestic.dev/services/colors-config/)
- [Fuente](https://ui.vuestic.dev/styles/css-variables/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/getting-started/installation/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/services/colors-config/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/styles/css-variables/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/ui-elements/rating/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/ui-elements/textarea/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Consulta la especificación complementaria](https://ui.vuestic.dev/ui-elements/alert/)
- [Referencia de código](https://ui.vuestic.dev/ui-elements/rating/)
- [Referencia de código](https://ui.vuestic.dev/styles/css-variables/)
- [Instalación Configuración del complemento y la hoja de estilos.](https://ui.vuestic.dev/getting-started/installation/)
- [Configuración de colores Ajustes preestablecidos semánticos con nombre.](https://ui.vuestic.dev/services/colors-config/)
- [Variables de CSS Geometría de componentes y sobreescrituras de fuente compatibles.](https://ui.vuestic.dev/styles/css-variables/)
- [Valoración Estado que permite borrar, etiquetas y modelo.](https://ui.vuestic.dev/ui-elements/rating/)
- [Área de texto Ajuste automático de tamaño, límites de filas y visualización de validación.](https://ui.vuestic.dev/ui-elements/textarea/)
- [Barra de progreso Semántica de los valores y del máximo.](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Alerta Tratamiento visual del resultado.](https://ui.vuestic.dev/ui-elements/alert/)