Design com Tipografia em Primeiro Lugar

"As palavras são a interface. Sem distrações, apenas texto bonito."

Quando Usar

Use este sub-estilo quando o pedido do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Tipografia Hiper-Dimensionada: O título principal é tão grande que se torna um elemento gráfico abstrato.
2. Cromagem Mínima da UI: Botões são apenas texto. Navegação é apenas texto. Sem caixas, sem fundos.
3. Tipografia Cinética: Texto que se move, rola ou reage ao cursor do usuário.

DNA Visual

• Cores: Contraste extremo. Preto e branco puros, ou um fundo muito escuro com uma única cor de destaque neon. Luxo da Meia-Noite funciona bem.
• Tipografia: Fontes de exibição com caráter extremo. Tente Oswald, Anton ou Bebas Neue para impacto, ou uma fonte serifada massiva.
• Layout: Frequentemente centraliza o texto massivo perfeitamente na viewport, cortando nas bordas.

Implementação Web

• Confie nas unidades vw e vh para o dimensionamento da fonte, para que o texto preencha perfeitamente a tela.
• Exemplo de CSS:

body {
  background-color: #0A0A0A;
  color: #F5F5F0;
  overflow-x: hidden;
  margin: 0;
}

.hero-type {
  font-family: 'Anton', sans-serif;
  font-size: 25vw; /* Fills the width of the screen */
  text-transform: uppercase;
  line-height: 0.8;
  white-space: nowrap;
  
  /* Outline effect */
  color: transparent;
  -webkit-text-stroke: 2px #F5F5F0;
  transition: color 0.3s;
}

.hero-type:hover {
  color: var(--cta-highlight);
  -webkit-text-stroke: 0;
}

.nav-text-btn {
  background: none;
  border: none;
  color: #F5F5F0;
  font-size: 2rem;
  font-family: 'Helvetica Neue', sans-serif;
  text-decoration: underline;
  text-underline-offset: 8px;
  cursor: pointer;
}

Implementação de Aplicativos

SwiftUI

struct TypographyFirstView: View {
    var body: some View {
        ZStack {
            Color(hex: "0A0A0A").ignoresSafeArea()
            
            VStack {
                // Massive Typography Bleeding Off Edge
                Text("THE WORDS ARE THE INTERFACE")
                    .font(.custom("Anton", size: 200)) // Absurdly large
                    .foregroundColor(Color(hex: "F5F5F0"))
                    .lineLimit(1)
                    .fixedSize(horizontal: true, vertical: false) // Force no wrapping
                    .minimumScaleFactor(1.0) // Prevent auto-shrinking
                
                // Outlined variant
                Text("NO CHROMING")
                    .font(.custom("Anton", size: 150))
                    .foregroundColor(.clear)
                    .overlay(
                        Text("NO CHROMING")
                            .font(.custom("Anton", size: 150))
                            .foregroundColor(Color(hex: "0A0A0A"))
                            // Hack for text stroke in SwiftUI
                            .shadow(color: Color(hex: "F5F5F0"), radius: 1)
                    )
                    .lineLimit(1)
                    .fixedSize()
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.leading, -20) // Intentionally cut off
        }
    }
}

• Use .fixedSize(horizontal: true, vertical: false) e .lineLimit(1) para forçar fontes massivas a transbordarem da borda da tela em vez de quebrarem em um parágrafo.
• O contorno de texto nativo é difícil no SwiftUI; sobrepor um texto mascarado ou usar sombras finas é a solução comum.

Flutter

class TypographyFirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0A0A0A),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Texto principal com auto-escala
            FittedBox(
              fit: BoxFit.cover,
              child: Text(
                'AS PALAVRAS SÃO',
                style: TextStyle(fontFamily: 'Anton', color: const Color(0xFFF5F5F0), height: 0.8),
              ),
            ),
            
            // Texto com contorno
            FittedBox(
              fit: BoxFit.cover,
              child: Stack(
                children: [
                  // Contorno
                  Text(
                    'A INTERFACE',
                    style: TextStyle(

…