Design System
Tech Leads club

$ open --marca

Marca & logo

Hexágono isométrico de cubos. Lê-se como bloco/módulo/construção, coerente com engenharia de software. Wordmark em Roboto: TechLeads bold + .club regular.

$ open --cores

Cores

5 cores + 1 tom de cinza/preto + azul select. Quatro conceitos são pilares oficiais. Verde neon é identidade; no produto light, success/warning/info usam tons mais pesados. O vermelho live é exceção — só ícones de Live / ao vivo. Accent do app é o roxo, para conviver com primary.

Cores de marca

O hex do chip acompanha o toggle Dark / Light no canto. Verde, amarelo, info e accent ficam mais pesados no light. Live e azuis de marca não mudam.

Paleta semântica

Tokens agrupados por matiz, em gradual escuro → claro e frio → quente. Hex atualiza com o toggle de tema. No light, info / success / warning ficam mais pesados para contraste em fundo claro. Accent é o roxo — não o vermelho live.

$ render --circulo-cromatico

Círculo cromático

O motor da paleta e, ao mesmo tempo, um elemento gráfico. Cria subtons e transições, e “circula” fotos e áreas de conteúdo. É o gesto que representa o acolhimento em nichos.

$ render --gradientes

Gradientes

Azul é o gradiente padrão de títulos e da marca. O roxo (#BF38FF) é o accent de produto. O vermelho sólido (#FF3862) é exceção para ícones de Live / ao vivo — compete com o vermelho de erro. Labels de capa usam cor sólida (azul ou accent), nunca o live.

$ open --tipografia

Tipografia

Três famílias, três papéis. Nunca misture papéis: mono só no terminal, Bahnschrift só no display condensado.

Escala proporcional (regra da capa)

$ open --grid

Grid & espaçamento

Escala de espaço (base 4)

Raios

$ layout --estrutura-capa

Estrutura de capa

Conteúdo alinhado ao centro, dentro de uma janela de prompt. Blocos: Label → Título → Subtítulo → Descrição. Fotos vão em label retangular ou circuladas pelo aro.

Responsividade

Exemplo · 1600×300 · centralizado · com logo

Capa wide para evento/carrossel. Conteúdo centralizado · símbolo TLC no canto inferior direito.

1600×300 · centralizado · símbolo canto inferior direito · margem var(--cover-pad)

Logo em capas: símbolo isolado (`.ic`) · 24–32px · canto inferior direito · margem var(--cover-pad) · azul logo #3B82FF.

Exemplo · 1600×300 · alinhado à esquerda · com logo

Mesma faixa wide, conteúdo à esquerda · símbolo TLC no canto inferior direito (padrão em todos os layouts).

1600×300 · alinhado à esquerda · símbolo canto inferior direito · pill + título + subtítulo

$ theme --list

Temas

Paridade: todo componente existe nos dois temas. Neutros trocam; info / success / warning no light são mais pesados (contraste). Gradientes de marca permanecem iguais. Use o toggle no canto para pré-visualizar este documento nos dois.

Fundos com gradiente: só em peças internas da comunidade (de preferência em azul), como capas de evento e carrosséis. Social media usa fundo navy liso. Cards translúcidos aplicam glass (blur no fundo); o aro cromático de fotos tem 1px.

$ render --componentes

Componentes

Pills & tags

Roboto Regular/Medium · 14px mínimo · minúsculo · cor sólida (sem gradiente).

Card de post social (carrossel)

Card de evento (TLC Commit)

Card de meetup & Clube do Livro

Card de workshop · Dark e Light

$ lint --voz

Voz & do / don't

Tom técnico e direto, de par para par com pessoas seniores. Sem infantilização nem hype vazio. Vocabulário de terminal quando fizer sentido, sem forçar. Escrevemos Dev sempre com D maiúsculo, para valorizar o profissional.

$ cat tokens.css

Tokens

:root{
  /* marca */
  --green:#7AFA8F; --yellow:#F1D15F; --red:#FF3862;
  --purple:#BF38FF; --blue:#1D4BFA; --blue-light:#3B82FF; --ink:#101010;
  /* funcionais */
  --success:#7AFA8F; --live:#FF3862; --warning:#F1D15F; --select:#2F6BFF;
  /* gradientes */
  --grad-primary: linear-gradient(90deg,#1D4BFA,#BF38FF);
  --grad-accent:  linear-gradient(90deg,#BF38FF,#FF3862);
  --grad-blue:    linear-gradient(90deg,#3B82FF,#1D4BFA); /* títulos */
  --grad-spectrum: conic-gradient(#7AFA8F,#1D4BFA,#BF38FF,#FF3862,#F1D15F,#7AFA8F);
  /* raios / tipo */
  --r-pill:999px; --r-card:20px; --r-window:14px; --r-field:10px;
  --font-primary:"Roboto"; --font-display:"Bahnschrift","Roboto Condensed";
  --font-mono:"JetBrains Mono";
}
:root[data-theme="dark"]{
  --bg:#0A0E1A; --surface:#111725; --surface-2:#1A2233;
  --text:#EAEEF7; --text-muted:#9AA3B8; --text-dim:#616B82;
  /* semânticos (daisyUI) */
  --b1:#0A0E1A; --b2:#111725; --b3:#1A2233; --bc:#EAEEF7;
  --p:#1D4BFA; --pc:#FFFFFF;
  --s:#17181C; --sc:#9AA3B8;
  --a:#BF38FF; --ac:#FFFFFF;
  --n:#101010; --nc:#616B82;
  --in:#2F6BFF; --inc:#FFFFFF;
  --su:#7AFA8F; --suc:#101010;
  --wa:#F1D15F; --wac:#101010;
  --er:#FF5F57; --erc:#101010;
}
:root[data-theme="light"]{
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#E6EAF4;
  --text:#101010; --text-muted:#3D4454; --text-dim:#5C6478;
  --b1:#F4F6FB; --b2:#FFFFFF; --b3:#E6EAF4; --bc:#101010;
  --p:#1D4BFA; --pc:#FFFFFF;
  --s:#E6EAF4; --sc:#3D4454;
  --a:#9333EA; --ac:#FFFFFF;
  --n:#101010; --nc:#5C6478;
  --in:#1D4ED8; --inc:#FFFFFF;
  --su:#20C95B; --suc:#101010;
  --wa:#E8B923; --wac:#101010;
  --er:#FF5F57; --erc:#101010;
  --green:#20C95B; --yellow:#E8B923; --purple:#9333EA;
}