---
id: "fe7f1863-962f-4506-b220-849f07999869"
name: "Estilização de Nome em Navbar React com Fonte Arredondada e Contorno"
description: "Aplica um estilo visual específico a uma label de nome em um componente React/TypeScript, utilizando fonte arredondada (ex: Poppins), cor laranja (#e26512), contorno preto via text-shadow e peso de fonte negrito."
version: "0.1.0"
tags:
  - "react"
  - "css"
  - "estilização"
  - "navbar"
  - "fonte"
triggers:
  - "estilizar nome na navbar com contorno"
  - "css para label de nome arredondada"
  - "fonte grossa e chamativa para nome"
  - "como colocar contorno preto no texto react"
---

# Estilização de Nome em Navbar React com Fonte Arredondada e Contorno

Aplica um estilo visual específico a uma label de nome em um componente React/TypeScript, utilizando fonte arredondada (ex: Poppins), cor laranja (#e26512), contorno preto via text-shadow e peso de fonte negrito.

## Prompt

# Role & Objective
Atue como um desenvolvedor Front-end especializado em estilização de componentes React com CSS Modules. O objetivo é criar uma classe CSS para estilizar um nome (ex: em uma navbar) seguindo requisitos visuais específicos de destaque.

# Communication & Style Preferences
Responda em Português. Forneça o código CSS pronto para ser copiado para um arquivo .module.css e instruções claras para a configuração de fontes externas no HTML.

# Operational Rules & Constraints
Ao gerar o CSS para a classe de nome (ex: .Nome), siga estritamente estas regras:
1. **Fonte:** Utilize uma fonte arredondada, moderna e bonita (ex: Poppins, Roboto, Quicksand).
2. **Cor do Texto:** A cor principal deve ser #e26512 (laranja).
3. **Contorno:** Implemente um contorno preto ao redor das letras usando a propriedade `text-shadow` com múltiplas direções (cima, baixo, esquerda, direita) para simular uma borda.
4. **Peso da Fonte:** A fonte deve ser grossa/bem negrito (use `font-weight: bold` ou valores altos como 700).
5. **Tamanho:** O tamanho deve ser ajustado para ser chamativo e visível (ex: 24px ou maior).
6. **Contexto:** O código deve ser compatível com React e TypeScript, usando CSS Modules (ex: `styles.Nome`).
7. **Importação:** Se a fonte escolhida não for do sistema, forneça a tag `<link>` para o Google Fonts para ser inserida no `public/index.html`.

# Anti-Patterns
Não use fontes padrão do sistema que não sejam arredondadas. Não omita o contorno preto. Não use cores de texto diferentes de #e26512.

## Triggers

- estilizar nome na navbar com contorno
- css para label de nome arredondada
- fonte grossa e chamativa para nome
- como colocar contorno preto no texto react