# Sistema de design Vuestic UI

## Prévia da interface do sistema de design Vuestic UI

Avalie clareza, hierarquia e feedback; acrescente uma observação relevante e salve uma avaliação local.

## Referência de design do sistema sistema de design Vuestic UI

Vuestic UI 1.10.3. Os valores das predefinições são lidos do serviço de cores instalado, e as variáveis dos componentes, do CSS. A planilha mantém a predefinição clara padrão, mas substitui intencionalmente --va-font-family por system-ui. As formas decorativas e a escala ao redor são originais.

### Predefinição de cor clara padrão

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| primary | #154EC1 | Avaliação e ação principal. |
| secondary | #767C88 | Função secundária. |
| success | #3D9209 | Resultado salvo. |
| info | #158DE3 | Função informativa. |
| danger | #E42222 | Função de erro. |
| warning | #FFD43A | Função de aviso. |
| backgroundPrimary | #f6f6f6 | Superfície principal padrão. |
| backgroundSecondary | #FFFFFF | Superfície elevada padrão. |
| backgroundElement | #ECF0F1 | Superfície do elemento. |
| backgroundBorder | #DEE5F2 | Função de limite. |
| textPrimary | #262824 | Texto principal. |
| textInverted | #FFFFFF | Texto invertido. |
| focus | #49A8FF | Função de foco. |
### Comparação com a predefinição escura padrão

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| primary | #3472F0 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| success | #66BE33 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| danger | #F34030 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| backgroundPrimary | #050A10 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| backgroundSecondary | #1F262F | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| backgroundElement | #131A22 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| backgroundBorder | #3D4C58 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| textPrimary | #F1F1F1 | Referência oficial da predefinição escura; o exemplo local permanece claro. |
| textInverted | #0B121A | Referência oficial da predefinição escura; o exemplo local permanece claro. |
### CSS nativos e escalas explícitas do aplicativo

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --va-font-family | "Source Sans Pro", sans-serif | Padrão da biblioteca; substituído explicitamente por system-ui no exemplo. |
| --va-button-border-radius | 0.25rem | Raio nativo compilado dos botões. |
| --va-form-element-border-radius | 0.25rem | Raio compartilhado compilado dos formulários. |
| --va-button-content-py | 0.5rem | Preenchimento vertical do conteúdo do botão. |
| --va-button-content-px | 0.75rem | Preenchimento horizontal do conteúdo do botão. |
| --va-rating-number-item-margin | 0.1em | Referência nativa de espaçamento para o modo numérico. |
| --va-rating-number-item-font-weight | 700 | Referência nativa de ênfase para o modo numérico. |
| Application title | 34px / 1.15; 29px narrow | Hierarquia original dos títulos. |
| Application spacing | 6 / 7 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 24 / 28 / 32px | Valores reais da folha de estilos original, não uma escala de tokens Vuestic. |
| Application panel radius | 14px | Geometria original ao redor. |
| Layout | Flexible form + 280px summary; stack below 760px | Layout incorporado com altura ajustada ao conteúdo. |
## Guia completo do sistema de design Vuestic UI

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Sistema de design Vuestic UI — uma biblioteca Vue configurável com predefinições de cores nomeadas

### Uma biblioteca Vue configurável com predefinições de cores nomeadas

> O Vuestic registra seus serviços compartilhados por meio de createVuestic. O exemplo usa componentes nativos importados de vuestic-ui e a predefinição de cor clara padrão. A avaliação, os botões, a barra de progresso e o alerta de sucesso resolvem os nomes de cores semânticas por meio desse mesmo serviço.

A planilha aplica esses componentes em um exemplo concreto: separa três perguntas de avaliação, coleta uma observação de apoio, calcula uma média e bloqueia um resultado local salvo. As marcas coloridas dos critérios e a composição em duas colunas são elementos originais do design do aplicativo, não componentes adicionais do Vuestic.

Consulte a especificação de apoio

## Sistema de design Vuestic UI — diferencie predefinições do serviço das variáveis de geometria do CSS

### Diferencie predefinições do serviço das variáveis de geometria do CSS

A predefinição clara verificada define primary #154EC1, success #3D9209 e textPrimary #262824. A predefinição escura usa valores diferentes para primary, texto e superfícies, em vez de apenas inverter a página clara. A tabela de referência registra as duas predefinições, enquanto a prévia permanece intencionalmente no modo claro.

A geometria dos componentes é configurada por meio de variáveis CSS, como --va-button-border-radius e --va-form-element-border-radius, ambas com valor 0.25rem na folha de estilos instalada. Uma predefinição de cor e uma substituição de variável CSS resolvem problemas diferentes: use o serviço para funções semânticas e a variável documentada para a geometria compatível dos componentes.

Consulte a especificação de apoio

## Sistema de design Vuestic UI — carregue os ícones necessários e declare a substituição da fonte

### Carregue os ícones necessários e declare a substituição da fonte

O --va-font-family padrão do Vuestic especifica Source Sans Pro. Em vez de depender silenciosamente de uma fonte que nunca foi carregada, o exemplo substitui essa variável por system-ui. Assim, os rótulos dos componentes nativos e o texto do aplicativo compartilham uma pilha de fontes disponível e declarada explicitamente.

Os ícones de classificação padrão usam nomes do Material Icons, como star e star_outline. A folha de estilos da fonte local é importada de @quasar/extras e empacotada com os arquivos da fonte. Sem esse recurso, palavras literais podem aparecer no lugar dos formatos de estrela esperados. A fonte dos ícones é mantida separada da substituição da família tipográfica do aplicativo.

Consulte a especificação de apoio

## Sistema de design Vuestic UI — use zero para indicar que ainda não há resposta, e não uma pontuação ruim

### Use zero para indicar que ainda não há resposta, e não uma pontuação ruim

Cada VaRating é associado ao valor numérico de um critério. O limite máximo é cinco e a opção clearable está ativada, então selecionar novamente a pontuação atual pode retornar esse critério a zero. Para zero, a interface exibe Não avaliado, em vez de apresentá-lo como um julgamento concluído de zero em cinco.

A média é dividida pela quantidade de avaliações positivas. Isso evita penalizar critérios sem resposta enquanto a planilha está em andamento. Ainda é necessário responder aos três critérios para salvar, portanto a média final sempre representa a avaliação completa. Alterar uma avaliação atualiza imediatamente o indicador de conclusão, a barra de progresso e o resumo.

1. Salve a planilha em branco e confira os avisos de avaliação ausente e de observação.

2. Atribua Clareza 4, Hierarquia 3 e Feedback 2; a média será 3.0.

3. Escreva uma observação concreta e salve; em seguida, use Começar de novo para redefinir toda a planilha.

Consulte a especificação de apoio

## Sistema de design Vuestic UI — uma observação útil precisa de texto relevante e espaço suficiente

### Uma observação útil precisa de texto relevante e espaço suficiente

VaTextarea tem um rótulo visível, limite de quatrocentos caracteres e contador. Após uma tentativa de salvamento, o aplicativo verifica se o valor, sem espaços no início e no fim, tem pelo menos vinte caracteres. Portanto, uma sequência de espaços não atende ao requisito, mesmo que tenha um comprimento nominal de caracteres.

O textarea ativa o ajuste automático de tamanho, com mínimo de quatro linhas e máximo de doze. Essa é uma configuração funcional, não apenas uma prop de exemplo: sem o ajuste automático, a configuração de linhas mínimas não produzia a área de observação expansível esperada. A versão corrigida mantém visível uma observação em telas estreitas e preserva a rolagem normal para observações excepcionalmente longas.

Consulte a especificação de apoio

## Sistema de design Vuestic UI: derive o progresso da conclusão, não da média das avaliações

### Derive o progresso da conclusão, não da média das avaliações

A barra de progresso mede quantos critérios receberam uma resposta positiva, calculada como avaliações preenchidas dividido por três vezes cem. O número em destaque ao lado mede a média de qualidade. São denominadores diferentes e não devem ser confundidos: três notas baixas ainda podem resultar em cem por cento de conclusão.

A frase de conclusão informa diretamente o numerador e o denominador. A média tem o rótulo Média dos critérios avaliados, e o resumo repete a pontuação de cada critério. Esses rótulos ajudam as pessoas a entender o cálculo, em vez de interpretar uma barra de progresso sem explicação como uma avaliação geral da qualidade.

Consulte a especificação de apoio

## Sistema de design Vuestic UI: bloqueie uma avaliação local concluída até que haja uma redefinição explícita

### Bloqueie uma avaliação local concluída até que ela seja redefinida explicitamente

Ao salvar, primeiro define-se attempted e, em seguida, verificam-se todas as avaliações e a observação antes de ativar o estado salvo. A flag saved torna as avaliações e o textarea somente leitura e desativa o botão Salvar. O alerta de sucesso informa que a avaliação foi salva localmente e que nenhum dado foi enviado.

Começar de novo limpa todas as avaliações, a observação, a exibição da validação e o estado salvo em um único manipulador. Essa ação é intencionalmente explícita, pois alterar um valor após o salvamento deixaria a confirmação desatualizada. O exemplo não pressupõe backend, conta nem destinatário da avaliação.

Consulte a especificação de apoio

## Sistema de design Vuestic UI: identifique cada item de avaliação pelo critério e pelo valor

### Identifique cada item de avaliação pelo critério e pelo valor

Os itens nativos de VaRating expõem botões na árvore de acessibilidade. aria-item-label inclui o nome do critério e os espaços reservados de valor/máximo, gerando rótulos como Pontuação de clareza: 4 de 5. Isso evita que os quinze controles de estrelas pareçam indistinguíveis quando há três avaliações na mesma página.

O textarea tem seu próprio rótulo visível, a barra de progresso tem um rótulo de conclusão e o alerta de salvamento é uma região de status. As marcas decorativas dos critérios ficam ocultas para tecnologias assistivas. As verificações locais clicaram nos botões de avaliação realmente rotulados, testaram a validação e inspecionaram o layout final em 280px, em vez de depender apenas da presença de atributos ARIA.

- Atribua a cada item de avaliação repetido um rótulo específico para o critério.

- Diferencie visualmente os estados sem resposta e somente leitura.

- Verifique o resumo numérico após interagir com os controles nativos reais.

Consulte a especificação de apoio

## Sistema de design Vuestic UI: inclua o plugin, o componente CSS e o recurso de ícone local

### Inclua o plugin, o CSS do componente e o recurso local de ícones

O ponto de entrada registra createVuestic e importa vuestic-ui/css antes da folha de estilos original do layout. App.vue importa todos os componentes que utiliza, portanto o exemplo não depende de uma configuração de importação automática não documentada. A substituição compartilhada de fontes é aplicada após CSS da biblioteca.

O comando do pacote inclui @quasar/extras apenas como fonte da fonte local Material Icons; ele não registra Quasar nem combina seus componentes com a ficha de avaliação. O SFC completo e a folha de estilos acima podem ser adicionados à configuração Vite Vue a seguir. A prévia independente gerada incorpora os recursos necessários e não busca fontes remotas.

Consulte a especificação de apoio

## Vuestic UI Exemplos de componentes do sistema de design

### Ficha de avaliação completa com componentes nativos

VaRating, VaTextarea, VaButton, VaChip, VaProgressBar e VaAlert estão conectados a um único modelo de avaliação.

```
<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>
```

Referência de código

- Zero significa sem avaliação e não é incluído na média.

- Para salvar, é necessário preencher as três avaliações e escrever uma observação com vinte caracteres, desconsiderando espaços no início e no fim.

- As avaliações e o texto salvos ficam somente leitura até selecionar Começar de novo.

### Configuração original completa de layout e tipografia

Substituição explícita de fontes, cartões responsivos e marcas decorativas para os critérios.

```
: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%}}
```

Referência de código

- Material Icons mantém sua própria família tipográfica.

- Não é usado um valor mínimo para a altura do documento.

## Vuestic UI Configuração de agente do sistema de design

### Ponto de partida para implementação

Verificado com Vuestic UI 1.10.3 e Material Icons local do @quasar/extras 2.1.0. Os dois exemplos completos de código-fonte estão incluídos; não é necessário usar um serviço externo de fontes.

```
// 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
```

### Um prompt para seu projeto

```
Use Vuestic UI 1.10.3 para reproduzir a ficha de avaliação de design com três critérios VaRating nativos, VaTextarea, progresso, status e controles para salvar e redefinir. Calcule a média com base nos critérios avaliados e exija as três pontuações, além de uma observação com vinte caracteres, desconsiderando espaços no início e no fim, antes de salvar. Preserve o ajuste automático de tamanho do textarea para manter toda a avaliação visível e mantenha consistentes o estado salvo somente leitura e o comportamento de redefinição. Inclua createVuestic, CSS nativo e a fonte de ícones local. Este é um registro local de avaliação, não um serviço para lotes de inspeção.
```

## Vuestic UI Fontes e escopo do sistema de design

Vuestic UI 1.10.3 com a predefinição de cores claras padrão e uma substituição explícita da fonte do sistema. Perguntas e ilustrações originais da avaliação. O estado salvo é local, sem envio para uma avaliação externa nem persistência após recarregar a página.

- Instalação Configuração do plugin e da folha de estilos.

- Configuração de cores Predefinições semânticas nomeadas.

- Variáveis CSS Geometria de componentes compatível e substituições de fontes.

- Avaliação Estado limpável, rótulos e modelo.

- Área de texto Ajuste automático de tamanho, limites de linhas e exibição da validação.

- Barra de progresso Semântica de valor e máximo.

- Alerta Tratamento visual do resultado.

## Vuestic UI Recursos relacionados ao sistema de design

### Web Awesome

Analise os tokens semânticos reais de Web Awesome em elementos personalizados nativos, incluindo alterações localizadas de raio e espaçamento, estilo do shadow DOM, comportamento de seleção e validação de entrada.

### Ariakit

Ariakit oferece componentes React sem estilo, com estado compartilhado explícito e partes acessíveis que podem ser compostas. Seu combobox separa o texto digitado da seleção confirmada, sendo útil para seletores com busca; o localizador de referências abaixo demonstra essa distinção com resultados agrupados e indisponíveis.

### Bits UI

Bits UI oferece componentes Svelte sem interface visual, compostos com partes nativas e o estado do Svelte 5. O exemplo combina uma caixa de seleção com estado misto derivado, seções de acordeão expansíveis de forma independente e uma caixa de diálogo de revisão baseada em portal, incluindo a configuração completa de estilos.


- [Referência de implementação](https://ui.vuestic.dev/ui-elements/rating/)
- [Fonte](https://ui.vuestic.dev/services/colors-config/)
- [Fonte](https://ui.vuestic.dev/styles/css-variables/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/getting-started/installation/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/services/colors-config/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/styles/css-variables/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/ui-elements/rating/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/ui-elements/textarea/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Consulte a especificação de apoio](https://ui.vuestic.dev/ui-elements/alert/)
- [Referência de código](https://ui.vuestic.dev/ui-elements/rating/)
- [Referência de código](https://ui.vuestic.dev/styles/css-variables/)
- [Instalação Configuração do plugin e da folha de estilos.](https://ui.vuestic.dev/getting-started/installation/)
- [Configuração de cores Predefinições semânticas nomeadas.](https://ui.vuestic.dev/services/colors-config/)
- [Variáveis CSS Geometria de componentes compatível e substituições de fontes.](https://ui.vuestic.dev/styles/css-variables/)
- [Avaliação Estado limpável, rótulos e modelo.](https://ui.vuestic.dev/ui-elements/rating/)
- [Área de texto Ajuste automático de tamanho, limites de linhas e exibição da validação.](https://ui.vuestic.dev/ui-elements/textarea/)
- [Barra de progresso Semântica de valor e máximo.](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Alerta Tratamento visual do resultado.](https://ui.vuestic.dev/ui-elements/alert/)