Logotipo WeBest
InícioSobre mimProjetosHabilidadesBlogEstude Comigo

Card de Produto - Criando variáveis CSS globais

21 de agosto, 2025
5 minutos
Gabriel Estéfono
Gabriel Estéfono
Card de Produto - Criando variáveis CSS globais

1 — O que é um Design System (visão geral)

Design System é o kit-base do projeto: cores, tipografia, espaçamentos e padrões que garantem consistência. Em vez de decidir tudo de novo a cada componente, você já tem as regras definidas. É isso que vamos aplicar aqui.

2 — Design System do projeto “Card de Produto”

No website Frontend Mentor, vamos trabalhar com este projeto:

https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa

Que é um projeto de card de produto (imagem, título, descrição, preço antigo/novo e botão de ação), perfeito para treinar organização de estilos e começar a estruturar componentes.

A ideia até aqui é aplicar os conhecimentos que adquiri durante a leitura da seção inicial do Vue.js (fundamentos).

Nesse caso, eu realmente paguei pelo Figma proposto pelo Frontend Mentor e, por motivos legais, não posso compartilhá-lo. Mas não tem problema algum em eu compartilhar como escrevi o código, o resultado pode ser igual, mas o código faz parte da minha propriedade intelectual.

Aqui vão as variáveis globais do projeto, pegas de acordo com o Figma (se você não quiser pagar por isso, pode usar direto):

:root {
  /* Colors */

  --black: #1c232b;
  --gray: #6c7289;
  --cream: #f2eae2;
  --white: #ffffff;
  --green-500: #3d8168;
  --green-700: #1a4032;

  /* Typography */

  --text-preset-1: 700 1rem/1 'Fraunces', serif;
  --text-preset-2: 700 0.875rem/1.1 'Montserrat', sans-serif;
  --text-preset-3: 500 0.875rem/1.6 'Montserrat', sans-serif;
  --text-preset-4: 500 0.75rem/1.2 'Montserrat', sans-serif;
  --text-preset-5: 400 0.8125rem/1.2 'Montserrat', sans-serif;

  /* Spacing */

  --spacing-50: 0.25rem;
  --spacing-100: 0.5rem;
  --spacing-200: 1rem;
  --spacing-300: 1.5rem;
  --spacing-400: 2rem;
  --spacing-500: 2.5rem;
}

O ponto aqui: não estamos estudando CSS agora e sim Vue. Seria ótimo você tentar fazer do seu jeito, mas não há problema em copiar o código e pular essa parte. Essas são as cores, fontes e espaçamentos que o design system fornece para o projeto.

Importando as fontes (passo a passo)

Além disso, será necessário importar duas fontes do Google Fonts: Montserrat e Fraunces.

Você pode fazer da forma que achar melhor, mas, de acordo com as boas práticas, as fontes devem ser importadas no <head> do HTML, para carregarem imediatamente junto com o site.

Passo 1 — O Google Fonts geralmente te entrega algo assim (com repetições):

<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"
      rel="stylesheet"
    />

Passo 2 — Remova as linhas repetidas (evita preconnect duplicado):

<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"
      rel="stylesheet"
    />

Passo 3 — Unifique as duas famílias em uma requisição:

<link
      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />

Pronto. Com isso, você mantém o design system organizado e otimiza o carregamento (menos requisições). No próximo passo, começo a montar o Card de Produto no Vue.

Tags

Sobre o Autor

Gabriel Estéfono

Gabriel Estéfono

Desenvolvedor Web

Desenvolvedor com mais de 3 anos de experiência em HTML, CSS e JavaScript.