Astra profundo · Capítulo 7 de 31 · 30 min
Construir uma amostra de tipografia e cor
Você sai com uma amostra visual que transforma escolhas de fonte e cor em funções reutilizáveis.
Este capítulo faz parte do curso gratuito Astra profundo.
O Estúdio Aurora, caso fictício, já tem uma composição aprovada e agora precisa manter a mesma identidade na agenda, na galeria e na reserva. Você vai construir uma amostra de tipografia e cor para revisar essas decisões em conjunto. O resultado será uma referência pequena o suficiente para consultar e completa o suficiente para orientar novas telas.
Se você já montou uma apresentação, percebeu como títulos, legendas e números precisam de tratamentos diferentes. Em uma interface, essas funções se repetem. O conceito desta aula é token semântico: um nome que representa o papel de uma escolha visual. Texto principal, texto de apoio e ação expressam intenção; um valor de cor isolado informa apenas a aparência daquela ocorrência.
Funções antes dos valores visuais
| Função | Aplicação no Aurora | Critério de revisão |
|---|---|---|
| Título | Nome da experiência | Hierarquia e quebra de linha |
| Corpo | Descrição da visita | Leitura contínua e acentos |
| Rótulo e número | Data, horário e quantidade | Comparação e clareza |
| Cor de ação | Escolher horário | Reconhecimento do próximo passo |
| Estado | Reserva confirmada | Texto e sinal visual coerentes |
No exemplo resolvido, a equipe prepara uma única página de amostra com título, parágrafo, agenda e botão. A base é clara, o texto tem contraste legível e uma cor concentra as ações principais. A confirmação da reserva recebe mensagem própria e um sinal visual complementar. A cor da marca continua expressando identidade; o estado comunica o resultado da ação. As duas funções convivem sem depender do mesmo significado.
Aprofunde as decisões desta aula
Como nomear as funções da tipografia e da cor?
Comece pelas funções de leitura. O título anuncia a experiência, o corpo explica a visita, o rótulo acompanha um controle e o horário permite comparar opções. Escolha uma família disponível que apresente bem acentos e números. Depois ajuste escala, peso e espaçamento olhando o conteúdo em português. Uma fonte deve ser julgada nas palavras e tarefas em que será usada.
Como conferir a amostra e reaproveitar o sistema?
A amostra precisa incluir situações que façam as escolhas trabalhar. Use um título curto e outro longo, uma descrição com acentuação e uma agenda com informações de extensão diferente. Compare a versão clara com uma versão escura, caso o projeto ofereça ambas. Ajuste as relações entre texto, fundo e superfícies em cada tema. O objetivo é conservar a hierarquia percebida. Ao trabalhar em projeto existente, peça ao Astra que localize as definições atuais antes de criar novos valores. Um componente reaproveitado transmite a decisão para várias telas. Quando cada ocorrência recebe uma escolha independente, a manutenção fica dispersa. No Aurora, um ajuste no tratamento de rótulos deve chegar à agenda e à reserva porque ambas exercem a mesma função de leitura.
Conclua a amostra antes de aplicar mudanças extensas. Se o corpo parece pequeno ao lado do título, revise a relação na amostra e examine novamente o conjunto. Se o botão disputa atenção com muitos elementos, confira onde a cor de ação foi usada. Essas observações apontam para decisões de sistema, capazes de melhorar várias partes da experiência com uma alteração compreensível.
Faça agora: aprove uma referência de sistema
Separe 12 minutos para leitura e inventário e 18 para amostra e refinamento.
Passo 1: Reúna as funções
Escolha os textos e controles que representam a experiência.
Deu certo quando: A amostra cobre leitura e ação.
Passo 2: Peça a primeira amostra
Use os componentes e escolhas disponíveis no projeto.
Deu certo quando: As funções aparecem juntas em uma página.
Passo 3: Experimente conteúdo variado
Troque título, descrição e horários por versões mais longas.
Deu certo quando: A hierarquia permanece compreensível.
Passo 4: Registre a decisão
Ajuste uma relação e salve a ficha de funções.
Deu certo quando: Você consegue explicar como repetir a identidade.
No fim você tem: Uma amostra aprovada e uma ficha de tipografia e cor pronta para orientar a implementação.
A próxima tela do Aurora já pode começar com decisões de leitura resolvidas. Use a amostra como referência visível durante a criação e acrescente uma função somente quando uma necessidade nova justificar a expansão do sistema.
As escolhas têm nomes que expressam sua função. A amostra usa conteúdo real e variado. A ficha permite repetir a identidade em outra tela.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- Frontend vs Backendsugerido pelo grafoApresenta o conceito “Frontend”, usado em “Construir uma amostra de tipografia e cor”.
- CursoEscrever bem com IAsugerido pelo grafoAs primeiras aulas do Astra pedem um briefing com referências e dirigem cada iteração por texto. O curso de escrita ensina a decidir o que pedir, dar contexto e conferir a saída, que é a base dessas aulas. Ordem decidida quando o Astra ganhou uma página por aula (Etapa 4, wave 3), para que as 31 aulas mostrem o que estudar antes.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo4 capítulos de “Astra profundo” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
