Atividade 10: Cores e Tipografia
O que separa um app amador de um profissional é a escolha delicada das fontes e das cores.
🎯 Objetivos desta aula
- ✓ Entender o formato Hexadecimal (HEX) versus RGB/RGBA
- ✓ Aplicar hierarquia visual de tipografia (Títulos X Textos padrão)
- ✓ Dominar a transparência para visuais modernos (Glassmorfismo e Overlays)
🔤 Formatos de Cor
Muitos desenvolvedores iniciantes usam termos em inglês rudimentares (como color: 'red'
ou 'blue'). Para apps reais você deve usar cores finamente ajustadas e transparentes:
1. Hexadecimal (HEX) - Sólido
Um código de 6 digitos e letras como
'#8b5cf6'. Extremamente leve e fácil de copiar da web (A cor do bloquinho
ao lado é exatamente esse Hex!).
2. RGBA - Com Transparência (Alpha)
Usado quando você precisa que o fundo do App apareça sutilmente *através* do botão ou card. O último valor é um nível de visibilidade (1 é nítido, 0.3 é transparente como vidro).
backgroundColor: 'rgba(139, 92, 246, 0.3)'
Hierarquia de Fontes
Nem todo texto importa o mesmo. Dê peso (fontWeight) a Títulos e cores acinzentadas fracas para Textos
padrão.
Isso é um Título Chamativo
Já isso é o texto complementar de apoio...
Note como não fica "pesado" aos olhos para leitura contínua, uma vez que a sua cor é um
cinza não agressivo e seu tamanho e o peso (fontWeight: 'normal') não
competem com a frase de cima!
💻 Exemplo Prático
Esse aplicativo exemplifica a hierarquia visual. Note que as cores secundárias são cinzas ou cores mais escuras.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.cardInfo}>
{/* Título com peso altíssimo (900) */}
<Text style={styles.textoBalao}>NOVIDADE</Text>
{/* Texto do meio (Secundário) */}
<Text style={styles.tituloSecundario}>
Suas cores ficaram fantásticas! ⚡
</Text>
{/* Texto descritivo base (Mais fraco/opaco) */}
<Text style={styles.textoBase}>
Uma boa hierarquia visual diz ao usuário exatamente o
que ele deve ler primeiro, segundo e por último.
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0f172a', // Fundo bem escuro
alignItems: 'center',
justifyContent: 'center',
padding: 24,
},
cardInfo: {
backgroundColor: 'rgba(255, 255, 255, 0.05)', // Branco mas APENAS 5% visível (quase transparente!)
padding: 30,
borderRadius: 24,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
textoBalao: {
color: '#38bdf8', // Azul vivo
fontSize: 12,
fontWeight: '900', // Pesaçço pra destacar, mesmo com texto miúdo
letterSpacing: 2, // Espaçamento entre letras! (Uppercase combina com Letras esparsas)
marginBottom: 8,
},
tituloSecundario: {
color: '#ffffff', // Branco solido (Muito Destaque)
fontSize: 28,
fontWeight: 'bold',
marginBottom: 16,
lineHeight: 34
},
textoBase: {
color: '#94a3b8', // Cinza escuro (Pouco Destaque, Descritivo)
fontSize: 16,
lineHeight: 24,
}
});🎮 Desafios Práticos
Ajustes visuais são a alma do Designer. Quebre a cabeça com o Snack:
Modificar 🛠️
- Altere a propriedade
letterSpacingde `2` para `10` na classe de estilo `textoBalao` e veja no que dá! Formatar Títulos Uppercase assim cria visuais muito "Premium". - A cor interna do botão (`backgroundColor` da `cardInfo`) está em `rgba(255, 255, 255, 0.05)`. E se fosse um preto opaco e liso igual do fundo do App (`#0f172a`)? Ele ficaria invisível, sobrando só a borda! Tente.
Melhorar 🚀
Ajustando alinhamento de texto local.
- Neste momento os textos estão alinhados a esquerda do Card. E se quisermos focar eles no centro?
- Basta você adicionar dentro de cada classe de estilo a propriedade cruzada:
textAlign: 'center'! Adicione ela na `tituloSecundario` e na linha `textoBase` e veja a mágica fluída.