Design Editorial

"A revista digital. Combinações sofisticadas de tipografia e um ritmo deliberado e elegante."

Quando Usar

Use este subestilo 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. Combinação de Serif e Sans-Serif: A marca registrada do design editorial. Uma serifada bonita e de alto contraste para títulos, combinada com uma sans-serif limpa para o corpo do texto.
2. Letras Capitulares Grandes e Citações em Destaque: Florescimentos tipográficos que guiam o olhar e quebram blocos longos de texto.
3. Layouts em Colunas: O conteúdo flui em colunas distintas, muitas vezes com linhas finas (filetes) separando-as.

DNA Visual

• Cores: Editorial Moderno ou Clube de Iates. Fundos quentes, semelhantes a papel, com pretos profundos, como tinta, ou azuis-marinho.
• Tipografia:
  • Títulos: Playfair Display, Merriweather, Bodoni.
  • Corpo: Lato, Open Sans, Source Sans Pro.
• Bordas: Linhas horizontais finas e elegantes (filetes) usadas para separar seções.

Implementação Web

• Exemplo de CSS:

body {
  background-color: #F9F9F9; /* Paper white */
  color: #121212; /* Ink black */
}

/* Typography Pairing */
.editorial-headline {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 24px;
  border-bottom: 1px solid #121212;
  padding-bottom: 24px;
}

.editorial-body {
  font-family: 'Lato', sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  column-count: 2; /* Magazine columns */
  column-gap: 40px;
}

/* Drop Cap */
.editorial-body::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  float: left;
  line-height: 0.8;
  padding-right: 12px;
  color: var(--cta-highlight);
}

.pull-quote {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  text-align: center;
  margin: 48px 0;
  padding: 24px 0;
  border-top: 2px solid #121212;
  border-bottom: 2px solid #121212;
}

Implementação em Aplicativos

SwiftUI

struct EditorialView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                // Editorial Headline
                Text("The Digital\nMagazine")
                    .font(.custom("Playfair Display", size: 48))
                    .fontWeight(.bold)
                    .italic()
                    .foregroundColor(Color(white: 0.05))
                    .padding(.bottom, 16)
                
                Divider().background(Color.black)
                
                // Drop Cap and Body
                HStack(alignment: .top, spacing: 8) {
                    Text("I")
                        .font(.custom("Playfair Display", size: 64))
                        .foregroundColor(Color(red: 0.7, green: 0.2, blue: 0.2))
                        // Negative padding to pull the body text tighter to the drop cap
                        .padding(.top, -10) 
                    
                    Text("n an era of sterile, flat interfaces, the return to elegant typography feels like a breath of fresh air. The interplay of serif and sans-serif...")
                        .font(.custom("Lato", size: 16))
                        .lineSpacing(6)
                        .foregroundColor(Color(white: 0.1))
                }
                
                // Pull Quote
                VStack {
                    Divider().background(Color.black)
                    Text("“Sophistication is in the spacing.”")
                        .font(.custom("Playfair Display", size: 28))
                        .italic()
                        .multilineTextAlignment(.center)
                        .padding(.vertical, 24)
                    Divider().background(Color.black)
                }
                .padding(.vertical, 24)
            }
            .padding(24)
        }
        .background(Color(red: 0.98, green: 0.98, blue: 0.96)) // Warm paper white
    }
}

• O uso extensivo de .font(.custom()) é obrigatório. Fontes do sistema parecem muito com aplicativos.
• Use Divider() para criar os filetes que são tão comuns no design impresso.
• Uma "letra capitular" falsa pode ser obtida com um HStack alinhado no topo.

Flutter

class EditorialScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF9F9F8), // Fundo de papel
      body: SingleChildScrollView(

…