> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Guia rápido de Estilos

> Guia completo para personalizar fontes, cores, fundos, imagens de capa e elementos decorativos em seus Documentos.

Craft facilita criar Documentos visualmente impressionantes sem qualquer conhecimento de design. O recurso Estilos permite personalizar planos de fundo, imagens de capa, cores do texto e até a cor de todo o Documento. Fitas Washi como separadores adicionam um toque decorativo único às suas páginas.

Para entender melhor como o recurso de Estilos funciona, comece com nosso artigo sobre [Documentos, Páginas e Blocos](/pt-BR/introduction/documents).

## Menu Estilos

<Tabs>
  <Tab title="macOS">
    No app para macOS, encontre a aba **Estilos** na sidebar à esquerda:

    <img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png?s=eeec64a237c912f088c787445755e7e1" alt="Menu Estilos na sidebar esquerda" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png" />
  </Tab>

  <Tab title="Web">
    No app Web, encontre a aba **Estilos** na sidebar à esquerda:

    <img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png?s=eeec64a237c912f088c787445755e7e1" alt="Menu Estilos na sidebar esquerda" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/styles-sidebar.png" />
  </Tab>
</Tabs>

## Visualização de Estilo e Galeria de Estilos

O menu Estilos mostra uma pré-visualização minimalista das suas configurações atuais de fonte, capa e plano de fundo - uma referência visual rápida de como os elementos de estilo do seu Documento funcionam em conjunto.

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/style-preview-1.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=0129a124f65d801c8869a4fe08b3c0ce" alt="Exemplo de pré-visualização de estilo 1" width="289" height="223" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-1.png" />

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/style-preview-2.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=8b9989c9e3feb864e536ec6dd41721be" alt="Exemplo de pré-visualização de estilo 2" width="283" height="217" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-2.png" />

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/style-preview-3.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=bae07e2a5e816779ece33c4a81a7f647" alt="Exemplo de pré-visualização de estilo 3" width="277" height="216" data-path="images/write-and-edit/styling/quick-guide/en/content/style-preview-3.png" />

Clique na **Pré-visualização de Estilo** para acessar a **Galeria de Estilos** e navegar pela nossa coleção selecionada de estilos pré-definidos para seus Documentos.

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/styles-gallery.gif?s=62ec4bc1e0ad9fa6ddc9845ef44b59b7" alt="Abrindo a galeria de estilos" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/styles-gallery.gif" />

## Estilo personalizado

Além dos estilos pré-definidos, você pode criar suas próprias cores personalizadas para o plano de fundo, o texto e o Documento em si.

A função de plano de fundo oferece várias opções:

* **Cores sólidas** - Escolha de uma paleta ou crie cores personalizadas
* **Gradientes** - Misture duas ou mais cores
* **Imagens** - Faça upload das suas ou selecione no Unsplash

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/custom-styling.gif?s=83ee42ce92078710e3acca683ec82ec0" alt="Criando estilos personalizados" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-styling.gif" />

## Enviando imagens personalizadas

Você pode enviar qualquer imagem do seu dispositivo como plano de fundo ou imagem de capa.

**Para planos de fundo:**

<Steps>
  <Step>
    Selecione a opção **imagem** nas configurações de plano de fundo
  </Step>

  <Step>
    Escolha **Upload** e selecione sua imagem
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/upload-backdrop.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=37096d20142bf302b8b642af18df45ee" alt="Opção de upload de imagem de plano de fundo" width="346" height="450" data-path="images/write-and-edit/styling/quick-guide/en/content/upload-backdrop.png" />

**Para imagens de capa:**

<Steps>
  <Step>
    Clique na área da imagem de capa
  </Step>

  <Step>
    Selecione **Inserir Arquivo** e escolha sua imagem
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/upload-cover.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=10c428878bdb58edca741dd229e34965" alt="Opção de upload de imagem de capa" width="352" height="360" data-path="images/write-and-edit/styling/quick-guide/en/content/upload-cover.png" />

## Integração com o Unsplash

Sem tempo para procurar a imagem perfeita? A integração do Craft com o Unsplash facilita encontrar fotos profissionais com apenas alguns cliques.

Ao definir seu plano de fundo ou imagem de capa, selecione o botão **Unsplash** para acessar o banco de imagens do Unsplash. Busque por palavras-chave para encontrar imagens que combinem com o seu tema.

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/unsplash-integration.gif?s=82de269fe5f0f12217c14201f88994a3" alt="Buscando imagens no Unsplash" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/unsplash-integration.gif" />

## Separadores e fitas Washi

Separadores ajudam a estruturar o conteúdo dentro de um Documento. O Craft eleva isso com fitas Washi - tiras decoradas e únicas que funcionam como separadores visuais.

Escolha entre:

* **Linhas padrão** - Estilo clássico de separador
* **Fitas Washi** - Separadores decorativos com padrão
* **Rabiscos** - Separadores em estilo desenhado à mão

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/separators.gif?s=72c338272195774355f463276a46264c" alt="Diferentes estilos de separadores" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/separators.gif" />

<Info title="Dica rápida">
  Digite três traços (`---`) para adicionar instantaneamente um separador no estilo que você definiu para seu Documento.
</Info>

### Estilizando fitas Washi

Semelhante às opções de plano de fundo e imagem de capa, você pode personalizar os separadores de fita Washi com cores sólidas ou padrões.

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/washi-styling.gif?s=cc832858117b1aa2e4407cd3d0433971" alt="Estilizando fitas Washi" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/washi-styling.gif" />

Acesse a **Galeria de fitas Washi** para encontrar padrões pré-definidos e bonitos:

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/washi-gallery.gif?s=8435350d7507d46cde5b5097bca4fb62" alt="Navegando pela galeria de fitas Washi" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/washi-gallery.gif" />

Você pode ser tão específico quanto quiser com as cores das fitas Washi. Crie seu tom preferido manualmente ou insira o código RGB no seletor de cores.

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/custom-color.gif?s=4a5d3a415f66b08b37a96623c5b50cb0" alt="Criando cores personalizadas para fitas Washi" width="800" height="673" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-color.gif" />

## Cor do Texto e do Documento

Documentos do Craft usam a cor **padrão do sistema** por padrão - preto no Modo Escuro ou branco no Modo Claro. Isso é representado pelo ícone preto e branco no seletor de cores.

<img src="https://mintcdn.com/craft-support/jHjNTJCRmpMXi5vN/images/write-and-edit/styling/quick-guide/en/content/system-color.png?fit=max&auto=format&n=jHjNTJCRmpMXi5vN&q=85&s=b277771553b8fd81b717eae717ff09e3" alt="Ícone de cor padrão do sistema" width="281" height="166" data-path="images/write-and-edit/styling/quick-guide/en/content/system-color.png" />

No entanto, você tem controle total sobre as cores do seu Documento e do texto. Escolha a tonalidade preferida manualmente ou insira o código RGB no seletor de cores para obter a cor exata que deseja.

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/custom-doc-color.gif?s=7c3927c0a80033062ad48fab51b026b1" alt="Personalizando cores do Documento" width="800" height="673" data-path="images/write-and-edit/styling/quick-guide/en/content/custom-doc-color.gif" />

<Info title="Restaurando cores">
  Use o botão de redefinir para voltar instantaneamente seu Documento à cor padrão do sistema.
</Info>

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/reset-color.gif?s=52d971ac666bddfd6773f2afaf74d1a9" alt="Redefinindo cores do Documento" width="426" height="390" data-path="images/write-and-edit/styling/quick-guide/en/content/reset-color.gif" />

## Fontes

Altere o estilo de fonte de todo o Documento com um clique. Escolha entre:

* **System** - Usa a fonte padrão do seu dispositivo
* **Serif** - Fonte serif tradicional e legível
* **Mono** - Fonte monoespaçada para código ou conteúdo técnico
* **Rounded** - Fonte arredondada, moderna e amigável

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/fonts.gif?s=11732e87e5fcc8c62ace8900cbb879bf" alt="Alterando fontes do Documento" width="800" height="685" data-path="images/write-and-edit/styling/quick-guide/en/content/fonts.gif" />

<Warning title="Fontes personalizadas">
  Atualmente não é possível enviar fontes personalizadas para o Craft.
</Warning>

## Exportando Documentos Estilizados para PDF

O recurso Estilos foi criado para ajudar você a se expressar e criar o ambiente visual preferido enquanto edita. Se precisar desativar os estilos ao exportar seu conteúdo para PDF, você pode fazer isso facilmente nas opções de exportação.

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/quick-guide/en/content/export-styles.gif?s=0b04cf70df6513a5d9144629f0400399" alt="Desativando estilos durante a exportação para PDF" width="800" height="638" data-path="images/write-and-edit/styling/quick-guide/en/content/export-styles.gif" />

## Artigos relacionados

<CardGroup cols={2}>
  <Card title="Imagens de Capa" href="/pt-BR/write-and-edit/styling/cover-images">
    Personalize imagens de capa para seus Documentos
  </Card>

  <Card title="Cartões" href="/pt-BR/write-and-edit/styling/cards">
    Transforme páginas em layouts visuais tipo cartão
  </Card>

  <Card title="Estilos do app" href="/pt-BR/write-and-edit/styling/app-styles">
    Estenda os estilos do Documento para a interface do app
  </Card>

  <Card title="Estilos padrão" href="/pt-BR/write-and-edit/styling/default-styles">
    Defina seu estilo preferido como padrão
  </Card>
</CardGroup>