Rede Sesc de Educação

Uma rede nacional que se parece com uma instituição só

Este documento é o sistema de design da Rede em funcionamento. Os botões abaixo são os botões reais; as cores vêm dos tokens; os números foram contados no próprio repositório. Nada aqui é uma imagem de como o sistema ficaria — é o sistema rodando.

Experimente: troque o tema no topo da página. Claro, escuro e alto contraste. A página inteira acompanha — cada componente, cada superfície, cada texto — sem nenhum código novo. É essa camada que faz a Rede parecer uma instituição só, em qualquer canal.

Todos os números desta faixa são lidos do repositório quando a página carrega. Se um componente for criado amanhã, o número muda sozinho.

O argumento

A diferença entre fazer peças e ter um sistema

À esquerda, uma página feita do zero, como se faz quando cada peça começa em branco. À direita, a mesma informação montada com o sistema. O conteúdo é idêntico. O que muda é tudo o que a Rede comunica sem dizer: cuidado, consistência e credibilidade.

Velocidade

Uma página nova não começa em branco: começa em um dos quatro modelos prontos. O trabalho passa a ser escolher e escrever, não redesenhar o que já existe.

Consistência

Ninguém digita uma cor à mão. Toda cor, tamanho de texto e espaçamento vem de um token nomeado — e uma verificação automática recusa o que sair da regra.

Alcance

O mesmo sistema serve site, apresentação, formulário impresso e peça gráfica. As 21 cores oficiais já vêm com CMYK, então o que sai na gráfica é o que se vê na tela.

Fundamentos

O selo, o motivo e as regras que os protegem

O selo tem três versões e uma geometria fixa. O sistema carrega essas regras junto com os arquivos, para que ninguém precise lembrar delas de cor.

As três versões

Principalbadge-solid.svg — como carimbo em superfícies claras

Secundáriabadge-outline.svg — onde o sólido pesaria demais

Simplificadawordmark — abaixo do tamanho mínimo

Área de respiro e tamanho mínimo

X em todos os lados — X é a altura da haste do E. Mais que X é sempre preferível. Nada entra nessa faixa: nem texto, nem imagem, nem a assinatura do Sesc, que fica a distância e nunca é travada junto ao selo.

Tamanho mínimo: 45 mm de largura no impresso, 150 px no digital. Abaixo disso, o selo dá lugar à versão simplificada.

Nunca

O cubo impossível

O motivo é obra, não enfeite: a geometria nunca é redesenhada, girada ou distorcida, e não muda com o tema — troque o tema no topo e as construções seguem iguais. A cor, essa sim, alterna entre as famílias da paleta. O material oficial traz verde, azul e rosa; as outras três são derivadas da paleta publicada no manual, e não amostradas da arte. O que a alternância preserva é a ordem de luz e sombra entre as faces — é ela que faz o cubo impossível se sustentar. Uma construção por composição.

Padrões de fundo

Quatro campos de cubos para uso em sangria — impresso e peças sociais.

Fundamentos

Vinte e uma cores oficiais, com CMYK publicado

Estes valores vêm do manual da marca, não de uma amostragem dos arquivos de arte. Clique em qualquer cor para copiar o hexadecimal. O CMYK ao lado é o que vai para a gráfica.

A camada semântica

Nenhuma página usa a cor da marca diretamente: usa um papel — superfície da página, superfície do cartão, texto de título, borda sutil. É essa indireção que permite trocar o tema. A tabela abaixo mostra o valor que o navegador está resolvendo neste exato momento; troque o tema no topo e ela se recalcula.

Fundamentos

Montserrat, do 400 ao 900

Uma família só, em uma escala fechada. Títulos em Extrabold com entrelinha justa; corpo em Regular com entrelinha generosa. O texto abaixo está sendo renderizado na fonte real, nos tamanhos reais.

Pesos

A única caixa alta do sistema é o eyebrow — aquele rótulo curto acima do título, em Bold com entreletra aberta. Títulos e corpo são sempre em caixa de sentença. Isso mantém a leitura próxima em vez de institucional-distante.

Fundamentos

Espaçamento, cantos e profundidade

Uma escala de 4 px na base, cantos generosos e três sombras. O ritmo largo entre blocos é deliberado: comunica uma instituição sem pressa, não um produto disputando cliques.

Escala de espaçamento

Cantos

Sombras

Ícones

A biblioteca

Trinta e seis componentes, funcionando de verdade

Não são capturas de tela. Cada peça abaixo é o componente real, carregado do mesmo arquivo que as páginas da Rede usam. Abra as abas, marque as caixas, arraste o interruptor, navegue pelo teclado. É assim que ele vai se comportar em produção.

A prova

O mesmo componente, nos três temas, ao mesmo tempo

Os três painéis abaixo estão lado a lado na mesma página, cada um em um tema. Não há três versões do componente: há um componente e três mapeamentos da camada semântica. Os valores da marca nunca mudam — só o papel que cada um cumpre.

Por que isso importa para a Rede: alto contraste não é um enfeite técnico. É o que permite que um estudante com baixa visão use a mesma página que todo mundo, sem uma versão à parte, sem pedir ajuda.

O piso

Contraste medido agora, nesta página

A tabela abaixo não é uma declaração de intenções. Ela lê as cores que o navegador está aplicando neste momento, calcula a razão de contraste pela fórmula da WCAG e mostra o resultado — inclusive quando o resultado é ruim. Troque o tema no topo e cada linha se recalcula.

Esta tabela já corrigiu o sistema três vezes. Quando ela foi ligada pela primeira vez, três linhas estavam vermelhas: o cinza de texto secundário a 3,56:1 sobre a página, a nota do rodapé a 3,53:1, e a borda dos campos de formulário a 1,61:1 — abaixo do que o próprio sistema exige, e ninguém sabia, porque os números nunca tinham sido calculados. As três foram corrigidas com tons que já existiam na escala, sem inventar cor nova. É a diferença entre declarar acessibilidade e medi-la: o que não se mede volta a acontecer, e esta tabela volta a acusar no dia em que voltar.

O que mais está garantido

Foco sempre visível. Navegue esta página inteira com Tab: nenhum elemento some ao receber o foco.
Tudo pelo teclado. As abas andam com as setas, os menus e diálogos fecham com Esc, e o diálogo devolve o foco a quem o abriu.
Alvo de toque de 44 px. O mínimo para quem usa o celular em movimento.
Movimento contido. Quem pediu menos animação no sistema operacional recebe menos animação aqui — automaticamente.
Texto alternativo em pt-BR em toda imagem que carrega informação.

Teste você mesmo

Clique no campo abaixo e pressione Tab várias vezes. O anel de foco acompanha cada parada, inclusive dentro do grupo de abas, onde as setas do teclado assumem.

Entregáveis

Quatro peças completas, prontas para copiar

Estes não são exemplos ilustrativos: são arquivos do repositório, rodando dentro desta página agora. Passe o cursor sobre qualquer um e abra em tamanho real.

Sobre o conteúdo destas peças: os números, endereços, prazos e depoimentos são exemplos de preenchimento, não dados do Sesc. As fotografias são espaços reservados com a descrição da imagem necessária. Tudo isso precisa ser verificado e substituído antes de qualquer publicação.

Adoção

Três formas de consumir, conforme quem está do outro lado

O sistema não obriga ninguém a adotar uma tecnologia. Ele se entrega em três formatos, e o terceiro nem precisa de navegador.

1. Página estática

Para apresentações, peças e protótipos entregues como arquivo. Sem instalação, sem compilação. É o que esta página faz.

<link rel="stylesheet" href="styles.css">
<script src="_ds_bundle.js"></script>

2. Projeto React

Para código de produção. Uma única porta de entrada, para que um componente possa ser reescrito por dentro sem quebrar quem o usa.

import { Button, Card, Stat }
  from './index.js';

3. Fora do navegador

Para geradores em Python, fluxos de impressão, ferramentas de design. Um único arquivo descreve a marca inteira em formato de dados.

brand = json.load(open('brand.json'))
brand['palette'][0]['cmyk']

Para levar o sistema a outro projeto: um comando copia uma cópia autocontida e carimbada, junto com as regras que viajam com ela. A mesma verificação que roda aqui roda lá, e avisa quando a cópia ficar velha.