Design system

Texto sobre o koi: a chapa

O koi é desenho de linha: texto por cima dele perde contraste onde uma linha passa e recupera onde não passa, e é essa oscilação que cansa a leitura. Onde os dois se encontram entra uma chapa translúcida (color-mix(in srgb, var(--bg) 62%, transparent)) com borda em degradê. A borda macia é o ponto: chapa de corte reto sobre um desenho lê como adesivo colado, porque anuncia duas camadas separadas. Dissolvida, o koi atravessa e as duas viram a mesma imagem. Vale para .cta-band__inner e para o .panel dentro de um .split__media que tenha koi.

A chapa é a cor da própria superfície por cima do traço, e é por isso que ela só resolve legenda curta: lime a 62% sobre lime clareia o koi, nunca o apaga. Onde há texto de corpo do alto ao pé do cartão, o traço volta a cruzar linha por linha, e aí o que resolve não é mais opacidade e sim tirar o desenho de baixo do texto. Esse é o caso do .person em contato.html, o único painel-com-koi nessa situação. Ele usa a mesma chapa, só que mais densa no miolo (94% no centro, morrendo em transparente na borda). Nada muda em espécie, só em dose: o degradê continua sendo o mesmo desenho centrado, e o koi segue atravessando o cartão pelas bordas, que é o que impede a chapa de virar retângulo colado.

Fabio Augusto Ramalho, o Xuxa

Desenvolve negócios e tecnologia, cria produtos do zero e estrutura operações comerciais

Papel: Admin Situação: Ativo

Constrói produtos e estrutura áreas comerciais em startups. No mercado de energia, dobrou o faturamento anual de uma startup por 3 anos seguidos, montou o times técnicos do zero e desenhou processos que hoje sustentam a operação.

• /in/coachxuxa
• coachxuxa.com.br
• nome escrito por extenso

Quem acabou de entrar

Papel: Visitante Situação: Pendente

Perfil ainda não preenchido.

.member-card, sobre .card e .card--koi, dentro de .surface--lime

É o mesmo cartão em toda tela que mostra gente: a galeria do painel e a galeria pública de mentores usam o mesmo tamanho, a mesma lista de referências e a mesma bio de oito linhas. Existiu uma versão encolhida para caber num terço de tela, com ícone sem rótulo no lugar da lista; ela saiu porque lia mais como um crachá do que como a apresentação de alguém, e uma grade de três colunas já entrega a largura sem precisar apertar o conteúdo. Na galeria de mentores o selo de papel sai, porque a página já se chama "Nossos mentores" e um selo idêntico em cada cartão só repetiria o título.

A lima com o koi atrás é a composição do "Fale com a gente", e num cartão de pessoa ela paga duas contas de uma vez: é a marca, e é a textura que ocupa a sobra de quem escreveu pouco. A chapa radial em cima do koi é a mesma do .person, na dose fechada, porque aqui também há texto de corpo do alto ao pé. A ordem de pintura é fundo, koi, chapa, texto, e ela existe em duas linhas de z-index negativo dentro de um isolation: isolate.

Título corta em duas linhas e o "sobre" em oito, sempre no CSS e nunca na string: o texto inteiro continua no documento, então a busca do navegador acha e o diálogo de detalhe mostra tudo. Quem não tem foto recebe o koi no lugar dela, mais forte que o do fundo, para os dois não parecerem dois carimbos soltos.

O segundo cartão não tem rodapé, e não é esquecimento: quem não tem nenhuma referência não ganha o bloco, porque a borda de cima dele viraria um risco solto no pé do cartão.

Houve um "Ver perfil" no rodapé, e ele saiu quando cartão e diálogo diziam a mesma coisa. Isso mudou em mentores.html: o diálogo de lá mostra título e "sobre" por inteiro, sem o corte de duas e oito linhas que o cartão sempre teve, e o controle de verdade voltou. Só que não no rodapé: quando comDetalhe está ligado, o nome vira um <button> com a cara de título, que é o caminho de teclado e o que existe para leitor de tela. O clique em qualquer outro ponto do cartão abre o mesmo diálogo, atalho de mouse por cima do botão.

A terceira referência do primeiro cartão está de propósito sem link: assets/js/enderecos.js só monta href para http e https, e o que ele não consegue transformar em endereço continua na tela como texto. Some o link, não some a informação, e quem administra vê o que precisa ser corrigido.

Aceleradora

Seis meses ao lado de dez negócios que estão começando em Itajubá

Situação: Executando

Uma turma por semestre, com mentoria quinzenal, três workshops e uma banca no fim. O que se mede não é quantas empresas nascem, e sim quantas continuam de pé um ano depois.

Projeto recém-criado

Situação: Ideia

Descrição ainda não escrita.

.project-card, sobre .card e .card--koi, dentro de .surface--lime

Duas diferenças em relação ao cartão de pessoa, e as duas saem do que um projeto é. O logo não é redondo: círculo é recorte de rosto, onde a foto sobra por todos os lados, e marca quase sempre tem canto reto ou texto encostado na borda, que é justamente o que o círculo comeria.

E o cartão inteiro é um link, coisa que o de pessoa não é. Lá o clique abre um diálogo que repete o que o cartão já diz; aqui existe página de verdade do outro lado. Quem estica a área clicável é o .card__link::after que já existia, e o link continua sendo um só, com o nome do projeto como texto, para o leitor de tela anunciar "Aceleradora, link" em vez de uma lista de pedaços clicáveis.

O selo de situação aparece sempre, ao contrário do selo de papel na galeria de mentores. Numa página só de mentores o selo repetido não informava nada; aqui cada projeto está numa etapa diferente, e a etapa é metade do que se quer saber correndo os olhos pela grade. Destaque só para "Executando" e "Em conclusão", que são as duas em que existe trabalho acontecendo agora.

O segundo cartão é como um projeto nasce: sem logo, que vira o koi esmaecido no lugar da imagem, e sem descrição. Nenhum dos dois deixa buraco, porque um buraco desalinharia o topo de todos os cartões da fileira.