Opacidade

Raios

Tipografia

Cores

Estilos

Tamanhos

Modificadores e estados

Dropdown

Modal

Swap

Theme controller

Um checkbox marcado com a classe theme-controller troca o tema da página para o valor do input.

FAB

O FAB fica fixo no canto inferior direito da tela — role a página e clique nele para ver as ações.

Card

Mentoria em grupo

Encontros quinzenais com líderes da comunidade.

Participar

Workshopnovo

card-border, sem sombra.

card-side

Imagem à esquerda do corpo.

Badge

Avatar

WC

+9

Stat

List

Accordion e collapse

Chat

Ana 12:45

Consegui aplicar o framework na 1:1 de ontem.

Entregue

Boa! Conta como foi na próxima call.

Visto às 12:46

Timeline

Status

Countdown

Stack

Carousel

Diff

Mask

Hover 3D

Passe o cursor sobre a imagem.

Hover gallery

Mova o cursor horizontalmente sobre a imagem.

Text rotate

Aura

Use no máximo um aura por tela, no elemento mais importante.

Lista de atividade (nosso padrão)

Linha com ícone em círculo, título e subtítulo; colunas de apoio em text-base-content/60 e ação em btn-ghost.

Linhas clicáveis (a linha inteira é um link)

O pseudo-elemento do link cobre a linha toda; a ação recebe z-10 para continuar clicável.

Básica

Linha ativa e hover

Zebra

Com elementos visuais

	Nome	Empresa	Cor favorita
	Hart Hagerty Estados Unidos	Zemlak, Daniel and Leannon Desktop Support Technician	Roxo	detalhes
	Brice Swyre China	Carroll Group Tax Accountant	Vermelho	detalhes
	Nome	Empresa	Cor favorita

Tamanhos

Cabeçalho e coluna fixos

Role a área nas duas direções: o cabeçalho e as colunas th ficam parados.

Input

Label

Textarea

Select

Checkbox, radio e toggle

Fieldset

File input

Range

Rating

Filter

OTP

Validator

Digite um e-mail inválido para ver o estado de erro.

Calendar

O daisyUI só estiliza bibliotecas de calendário — Cally, React Day Picker ou Vanilla Calendar Pro. Instale a lib e aplique a classe correspondente.

<calendar-date class="cally">…</calendar-date>

Alert

Loading

Progress

Radial progress

Skeleton

Tooltip

Toast

O toast é fixo em relação à tela. Aqui ele é exibido dentro de um container relativo apenas para demonstração.

Navbar

Menu

Tabs

Steps

Breadcrumbs

Pagination

Link

Drawer

Megamenu

Dock

O dock é fixo no rodapé da tela; aqui está em posição estática para demonstração.

Hero

Divider

Join

Indicator

12Notificações

novo

Card

Footer

Kbd

Mockup — browser

Mockup — code

npm i -D tailwindcss @tailwindcss/vite daisyui

instalando…

pronto

Mockup — janela

Mockup — telefone

Cole na raiz do repositório do seu app. Agentes leem os tokens do front matter YAML e a intenção de cada decisão na prosa, então o resultado sai com a identidade da marca sem você repetir hex code a cada prompt.

---
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