---
version: alpha
name: Tech Leads club
description: Design system da Tech Leads club, tema daisyUI 5 sobre Tailwind CSS 4.

colors:
  base-100: "#0A0E1A"
  base-200: "#111725"
  base-300: "#1A2233"
  base-content: "#EAEEF7"
  primary: "#1D4BFA"
  primary-content: "#FFFFFF"
  secondary: "#1A2233"
  secondary-content: "#9AA3B8"
  accent: "#BF38FF"
  accent-content: "#FFFFFF"
  neutral: "#101010"
  neutral-content: "#EAEEF7"
  info: "#2F6BFF"
  info-content: "#FFFFFF"
  success: "#7AFA8F"
  success-content: "#101010"
  warning: "#F1D15F"
  warning-content: "#101010"
  error: "#FF5F57"
  error-content: "#101010"
  base-100-light: "#FFFFFF"
  base-200-light: "#F4F6FB"
  base-300-light: "#E6EAF4"
  base-content-light: "#101010"
  secondary-light: "#E6EAF4"
  secondary-content-light: "#3D4454"
  accent-light: "#9333EA"
  neutral-content-light: "#F4F6FB"
  info-light: "#1D4ED8"
  success-light: "#20C95B"
  warning-light: "#E8B923"
  live: "#FF3862"
  logo-symbol: "#3B82FF"

typography:
  display-lg:
    fontFamily: "Bahnschrift, Roboto Condensed, Segoe UI, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0.02em
  display-md:
    fontFamily: "Bahnschrift, Roboto Condensed, Segoe UI, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.01em
  title-md:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
  body-lg:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
  subtitle-light:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.4
  label-md:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-sm:
    fontFamily: "Roboto, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  code:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6

rounded:
  selector: 2rem
  field: 0.5rem
  box: 1rem

spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  grid: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-content}"
    rounded: "{rounded.field}"
    typography: "{typography.label-md}"
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-content}"
    rounded: "{rounded.field}"
  card:
    backgroundColor: "{colors.base-200}"
    textColor: "{colors.base-content}"
    rounded: "{rounded.box}"
  input:
    backgroundColor: "{colors.base-100}"
    textColor: "{colors.base-content}"
    rounded: "{rounded.field}"
  badge:
    rounded: "{rounded.selector}"
    typography: "{typography.label-md}"
  badge-live:
    backgroundColor: "{colors.live}"
    textColor: "{colors.base-100}"
    rounded: "{rounded.selector}"
---

# Tech Leads club

## Overview

A Tech Leads club fala de par para par com pessoas seniores: tom técnico e
direto, sem infantilização nem hype vazio. Vocabulário de terminal quando faz
sentido, sem forçar. A identidade nasce do hexágono isométrico de cubos, que lê
como bloco, módulo e construção, coerente com engenharia de software.

A interface é densa e escura por padrão (`tlc-dark`), com o tema claro
(`tlc-light`) como par obrigatório: toda peça é entregue nos dois temas. O grid de
fundo de 48px é assinatura visual e aparece atrás do conteúdo em baixa opacidade.

Escrevemos Dev sempre com D maiúsculo, para valorizar o profissional.

## Colors

O azul é a cor de ação; o roxo é o segundo destaque, não um substituto.

- **Primary (#1D4BFA):** azul da marca, usado em ação principal, links e foco.
- **Accent (#BF38FF):** roxo, para telas que precisam de dois destaques ao lado
  do primary. No tema claro fecha em #9333EA para manter contraste.
- **Base (#0A0E1A / #FFFFFF):** fundo da página, com base-200 e base-300 como
  elevações 1 e 2.
- **Live (#FF3862):** vermelho exclusivo de ícones de Live e ao vivo. Não é
  token daisyUI e não substitui `error`, porque competiria com ele.
- **Logo (#3B82FF):** azul do símbolo do logo, mais claro que o primary da marca.

Tokens com sufixo `-light` valem para o tema `tlc-light`; sem sufixo, para
`tlc-dark`. Onde os dois temas compartilham o mesmo valor, existe só o token base.

## Typography

Três famílias, três papéis, e os papéis nunca se misturam.

- **Roboto** é a primária: título em Bold, subtítulo em Light, corpo em Regular.
- **Bahnschrift** é o display condensado, só em headline caixa alta e chamadas
  técnicas.
- **JetBrains Mono** é utilitária, só em terminal, tagline e metadados.

Os tokens abaixo descrevem a escala de tela, que segue a escala padrão do
Tailwind usada nas páginas do design system. Peças de capa usam outra regra, a
proporcional: o título é a base (100%) e label, subtítulo e descrição são
derivados dele em 60%, 50% e 50%.

## Layout

Escala de espaço base 4: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px.

O grid de fundo de 48px atravessa a página inteira e é parte da marca,
não decoração. Fotos e áreas de destaque são circuladas com o aro cromático, e o
gradiente de fundo fica em torno de 20% de opacidade para nunca competir com o texto.

## Elevation & Depth

A profundidade vem de camadas tonais, não de sombra. O tema define `--depth: 0`
e `--noise: 0`: a hierarquia é construída por base-100, base-200 e base-300, mais
uma borda de 1px. Não há escala de sombra no design system.

## Shapes

Cantos suaves e consistentes: campo em 0.5rem, container em 1rem e
seletor/pill em 2rem. Não misture cantos arredondados e retos na mesma tela.

## Components

Os componentes vêm do daisyUI 5 com o tema da marca aplicado; os tokens abaixo
fixam só o que a marca decide, e o resto segue o default da biblioteca. Variantes
de estado (hover, active) são derivadas pelo daisyUI a partir do token base.

## Do's and Don'ts

- Do derivar label, subtítulo e descrição do título (60% / 50% / 50%)
- Do usar primary e accent juntos quando a tela precisa de dois destaques
- Do entregar toda peça nos dois temas
- Do escrever Dev com D maiúsculo, sempre
- Do respeitar a área de proteção do logo de no mínimo meio símbolo
- Don't recolorir o wordmark com cores de pilar
- Don't usar o vermelho live (#FF3862) fora de ícones de Live, porque compete com error
- Don't tratar o live como accent do daisyUI: accent é o roxo
- Don't deixar o gradiente competir com o texto
- Don't misturar os papéis das fontes