pswex-design-system 7.0.0

package/skill/references/cor.md

@@ -0,0 +1,166 @@
+# Cor e tipografia
+
+47 tokens em quatro famílias. A divisão não é estética, é funcional:
+o que o tema escuro redefine é de tema, o que fica em cima de cor de marca é de sobre-cor.
+Dentro da marca vale a divisão da casa: principais, secundárias, variações e neutros.
+
+### Cor da marca (20)
+
+Iguais nos dois temas. Cor de marca nunca vai direto em texto de corpo.
+
+**Principais**
+
+| | Valor | Token |
+|---|---|---|
+| Navy | `#232F3E` | `--navy` |
+| Vermelho | `#C7273E` | `--red` |
+| Teal | `#1F4768` | `--teal` |
+
+**Secundárias**
+
+| | Valor | Token |
+|---|---|---|
+| Mint | `#C1EDCC` | `--mint` |
+| Sky | `#7CCFDB` | `--sky` |
+| Leaf *(sem uso no CSS)* | `#669933` | `--leaf` |
+| Lime, o CTA | `#99CC33` | `--lime` |
+
+**Variações**
+
+| | Valor | Token |
+|---|---|---|
+| Navy 700 *(sem uso no CSS)* | `#35485F` | `--navy-700` |
+| Navy 800 | `#2B3A4D` | `--navy-800` |
+| Navy 900 *(sem uso no CSS)* | `#1B2531` | `--navy-900` |
+| Navy 950 | `#19212C` | `--navy-950` |
+| Vermelho 600 | `#A92135` | `--red-600` |
+| Vermelho 700 | `#941D2E` | `--red-700` |
+| Sky 800 | `#267F8C` | `--sky-800` |
+| Leaf 800 *(sem uso no CSS)* | `#4A6F25` | `--leaf-800` |
+
+**Neutros**
+
+| | Valor | Token |
+|---|---|---|
+| Carvão *(sem uso no CSS)* | `#353437` | `--charcoal` |
+| Cinza escuro | `#4D4D4C` | `--gray-dark` |
+| Cinza médio | `#656565` | `--gray-mid` |
+| Gelo *(sem uso no CSS)* | `#FFFCF1` | `--ice` |
+| Off-white *(sem uso no CSS)* | `#F4F4EE` | `--offwhite` |
+
+### Tema (16)
+
+Inverte inteira no tema escuro. Todo texto de tela e todo fundo de tela sai daqui.
+
+**Fundo e superfície**
+
+| | Claro | Escuro | Token |
+|---|---|---|---|
+| Fundo | `#FFFAFA` | `#12181F` | `--bg` |
+| Superfície *(sem uso no CSS)* | `#FFFFFF` | `#1B242F` | `--surface` |
+| Papel, superfície de card | `#FFFFFF` | `#1B242F` | `--paper` |
+| Snow | `#FFFAFA` | `#151D26` | `--snow` |
+| Bege | `#F8F4E3` | `#1E2732` | `--beige` |
+| Light *(sem uso no CSS)* | `#F2F3F4` | `#1A222C` | `--light` |
+| Teal claro | `#E9F0F7` | `#17222E` | `--teal-50` |
+
+**Texto**
+
+| | Claro | Escuro | Token |
+|---|---|---|---|
+| Texto principal | `#232F3E` | `#EEF3F8` | `--fg` |
+| Título | `#232F3E` | `#EEF3F8` | `--ink` |
+| Texto de apoio | `#4D4D4C` | `#C3CFDC` | `--ink-2` |
+| Texto terciário *(sem uso no CSS)* | `#656565` | `#A3B2C2` | `--ink-3` |
+| Texto discreto | `#656565` | `#9FB0C2` | `--muted` |
+
+**Acento**
+
+| | Claro | Escuro | Token |
+|---|---|---|---|
+| Acento | `#C7273E` | `#F4808F` | `--accent-txt` |
+| Acento secundário | `#1F4768` | `#8FC5DE` | `--accent-2-txt` |
+
+**Linha**
+
+| | Claro | Escuro | Token |
+|---|---|---|---|
+| Linha | `#D5DBE2` | `#2C3947` | `--line` |
+| Linha 300 | `#9CA7B4` | `#44566A` | `--line-300` |
+
+### Texto sobre cor (6)
+
+Fica em cima de cor de marca, por isso não inverte: o fundo também não inverte.
+
+**Texto**
+
+| | Valor | Token |
+|---|---|---|
+| Sobre lime e mint | `#232F3E` | `--lime-ink` |
+| Sobre cor clara da marca | `#232F3E` | `--on-bright` |
+| Apoio sobre fundo escuro | `#AFBCCC` | `--ondark-200` |
+| Texto menor sobre fundo escuro | `#94A6BC` | `--ondark-400` |
+| Vermelho sobre escuro | `#F4808F` | `--red-ondark` |
+
+**Linha**
+
+| | Valor | Token |
+|---|---|---|
+| Linha sobre fundo escuro | `rgba(196,219,241,.24)` | `--line-inv` |
+
+### Layout (5)
+
+**Medida**
+
+| | Valor | Token |
+|---|---|---|
+| Largura máxima do conteúdo | `1200px` | `--shell` |
+
+**Raio**
+
+| | Valor | Token |
+|---|---|---|
+| Raio padrão | `14px` | `--r` |
+| Raio grande | `22px` | `--r-lg` |
+
+**Sombra**
+
+| | Valor | Token |
+|---|---|---|
+| Sombra padrão | `0 1px 3px rgba(35,47,62,.08),0 6px 14px -8px rgba(35,47,62,.12)` | `--shadow` |
+| Sombra elevada | `0 2px 6px rgba(35,47,62,.10),0 14px 28px -14px rgba(35,47,62,.18)` | `--shadow-lg` |
+
+### A regra
+
+Texto sobre cor da família marca usa a família fixa.
+Texto sobre fundo de tela usa a semântica.
+Cor de marca nunca vai direto em texto.
+
+Dois casos que já custaram caro aqui:
+
+- Botão lime leva `--lime-ink`, que é navy. Branco no lime dá 1,90:1 e reprova.
+  Navy no lime dá 7,13:1. Se o branco for inegociável, o fundo tem que virar
+  `--leaf-800`, que dá 5,85:1, e aí o botão perde força de chamada.
+- Vermelho em cima de navy usa `--red-ondark`. O `--red` puro some no escuro.
+
+`guia/contraste.md` traz os pares medidos.
+
+## Tipografia
+
+Gilroy, cinco pesos, em `css/fonts/`. A pilha é `Gilroy, 'Segoe UI', system-ui, sans-serif`.
+
+| Papel | Tamanho | Peso | Detalhe |
+|---|---|---|---|
+| corpo | `17px` | 400 | `line-height:1.62` |
+| h1 | `clamp(2.3rem, 5.4vw, 4.05rem)` | 800 | |
+| h2 | `clamp(1.85rem, 3.5vw, 2.85rem)` | 800 | |
+| h3 | `clamp(1.12rem, 1.8vw, 1.4rem)` | 700 | `letter-spacing:-.015em` |
+| `.lead` | `clamp(1.06rem, 1.5vw, 1.24rem)` | 400 | `line-height:1.55` |
+| `.eyebrow` | `.73rem` | 700 | caixa alta, `letter-spacing:.15em` |
+| `.tag` | `.72rem` | 700 | caixa alta, `letter-spacing:.08em` |
+| `.sm` | `.93rem` | 400 | |
+| `.xs` | `.82rem` | 400 | |
+| navegação | `.875rem` | 600 | |
+
+Gilroy é fonte licenciada e não está no catálogo hospedado do Figma. Num arquivo do Figma
+ela precisa estar instalada na máquina de quem abre, senão o texto cai para o fallback.

package/skill/references/fundos.md

@@ -0,0 +1,43 @@
+# Fundos
+
+`grad` é a arte da casa: SVG vetorial, azul e ciano de um lado, navy quase preto no meio,
+magenta e vermelho do outro, com uma fita de luz atravessando e detalhe de circuito nas bordas.
+Ele já entra com o tratamento de texto do `dark`.
+
+Não existe um arquivo só escalado. Existe um arquivo por proporção, e o CSS escolhe:
+`grad` puxa a larga, `grad-v` a de retrato, `grad-card` a de card. O `Hero` troca sozinho
+em 1400px e em 980px.
+
+A regra do desenho, que é o que faz a fita não achatar numa peça alta:
+
+- X segue a largura
+- Y segue a altura
+- traço, desfoque e raio seguem o menor lado
+
+`fundos/gerar-fundo.py` gera qualquer formato novo seguindo essa regra.
+`grad-azul` e `grad-vermelho` são de um tom só e feitos em CSS, não são a arte vetorial.
+
+### Temas
+
+Existe uma segunda composição, a diagonal, com seis temas de cor. Escuro em cima à
+esquerda, a cor do tema no meio do quadro, o acento preso no canto de baixo à direita.
+`fundos/temas.json` traz cada tema com os tokens de que ele é feito e para que serve,
+e `fundos/gerar-tema.py` gera qualquer tema em qualquer tamanho.
+
+A regra de cor dos temas: o gradiente só anda entre cores vizinhas. Navy para teal,
+teal para sky, sky para mint, e navy para verde passando pelo teal, tudo isso pode ir
+direto. Navy para vermelho não pode, a passagem vira roxo sujo, então nos temas marca
+e vermelho os dois nunca se encostam, tem um trecho escuro separando.
+
+| Tema | O caminho |
+|---|---|
+| marca | navy, azul da identidade, escuro, vermelho |
+| azul | navy, teal, sky-800, sky |
+| vermelho | navy, escuro, red-700, red, red-ondark |
+| verde | navy, teal, leaf-800, leaf, lime |
+| menta | teal, sky-800, sky, mint |
+| grafite | navy-950, navy-800, line-300, ondark-200 |
+
+`fundos/temas/` traz os arquivos limpos, para quem vai compor por cima.
+`fundos/temas/com-marca-dagua/` traz os mesmos com a marca embutida na lateral,
+para quando o fundo vai sozinho. A flag é `--marca`.

package/skill/references/icones.md

@@ -0,0 +1,71 @@
+# Ícones
+
+46 ícones no catálogo, cada um com uma versão `-compact` para 20px ou menos,
+o que dá 72 arquivos. Todos 24 por 24, `stroke="currentColor"`, sem fill.
+A cor vem do texto ao redor e troca sozinha no tema escuro.
+
+Dentro de `Card` e `Caso` use a prop `icone`. Para uma grade de serviço use `Servicos`,
+que já monta o card com o ícone.
+
+Card de serviço sem ícone fica só texto, e uma grade de seis cards de texto puro não se lê.
+
+**Serviços, um por serviço da casa** (14)
+
+| Nome | Para que serve |
+|---|---|
+| `agentes-ia` | Agente de inteligência artificial que atende e qualifica sozinho. |
+| `aplicativos` | Aplicativo de celular, Android e iPhone. |
+| `aplicativos-maquininhas` | Aplicativo que roda dentro da maquininha de cartão. |
+| `automacao-ia` | Automação de processo, o trabalho repetido que a empresa paga duas vezes. |
+| `consultoria-mentoria` | Consultoria e mentoria, acompanhamento direto. |
+| `criacao-de-sites` | Site institucional, a presença principal da empresa na internet. |
+| `funis-de-vendas` | Funil e operação de vendas, do primeiro contato ao fechamento. |
+| `hospedagem` | Hospedagem e manutenção do que já está no ar. |
+| `landing-pages` | Página de campanha, feita para uma oferta só e uma ação só. |
+| `lojas-virtuais` | Loja virtual, venda de produto direto pelo site. |
+| `pagamentos` | Pagamento e checkout. |
+| `sistemas` | Sistema sob medida e integração entre sistemas que já existem. |
+| `trafego-pago` | Anúncio pago, Google e Meta. |
+| `whatsapp` | Atendimento e venda pelo WhatsApp. |
+
+**Campanhas** (12)
+
+| Nome | Para que serve |
+|---|---|
+| `apps-sob-medida` | Campanha Apps Sob Medida: aplicativo construído para um negócio específico. |
+| `certificado-digital` | Certificado Digital PJ: emissão para pessoa jurídica. |
+| `crescer` | Crescer precisa valer a pena: crescimento que sobra dinheiro no fim. |
+| `embaixador-ai` | Embaixador AI: programa de indicação e parceria. |
+| `empresa-do-tempo` | A Empresa do Tempo: o tempo que some dentro da própria operação. |
+| `empurra-a-vaca` | Empurra a Vaca: tirar do lugar o que está parado há tempo demais. |
+| `ia-bio` | IA.BIO: página de links com inteligência artificial. |
+| `kit-negocio-do-zero` | Kit Negócio do Zero: para quem está abrindo a empresa agora. |
+| `parceria-contadores` | Parceria com Contadores: indicação vinda de escritório contábil. |
+| `plataforma-upro` | Plataforma UPro: o método virando ferramenta que o cliente usa. |
+| `upro` | Método UPro: o jeito da casa de achar e cortar trabalho que volta. |
+| `whatsappx` | WhatsAppX: disparo e automação em escala no WhatsApp. |
+
+**Interface** (20)
+
+| Nome | Para que serve |
+|---|---|
+| `alert` | Atenção: algo que o leitor precisa notar antes de seguir. |
+| `arrow-left` | Voltar ao passo anterior. |
+| `arrow-right` | Avançar para o próximo passo. |
+| `arrow-up-right` | Sair para um destino fora daqui. |
+| `check` | Item incluído ou concluído. |
+| `check-circle` | Sucesso: a operação deu certo. |
+| `chevron-down` | Abrir o que está fechado, menu ou acordeão. |
+| `chevron-right` | Entrar num item de lista. |
+| `close` | Fechar modal, painel ou aviso. |
+| `copy` | Copiar o conteúdo. |
+| `download` | Baixar arquivo. |
+| `edit` | Editar o conteúdo. |
+| `external-link` | Link que abre fora do site. |
+| `file` | Arquivo ou material para consulta. |
+| `filter` | Refinar uma listagem. |
+| `info` | Informação complementar, que dá para pular sem perder o fio. |
+| `menu` | Abrir a navegação no celular. |
+| `play` | Iniciar vídeo ou demonstração. |
+| `search` | Buscar conteúdo. |
+| `whatsapp-chat` | Começar uma conversa no WhatsApp agora. É a ação, não o serviço. |

package/skill/references/voz.md

@@ -0,0 +1,76 @@
+# Voz e escrita
+
+O design system manda na forma. Isto manda no texto que vai dentro dela.
+
+## Quem é
+
+PSWEX Tecnologia, Belo Horizonte, mais de 10 anos. Fundador Lourenço Avelar,
+cientista da computação, especialista em IA, pós graduado em neurociência.
+Assinatura: **Nós fazemos seu negócio dar certo.**
+
+Tese central: a PSWEX não começa indicando IA. Começa achando o trabalho que a
+empresa paga duas vezes. Frase da casa: *"Seu time faz o trabalho. O processo faz
+o trabalho voltar. E você paga pelas duas vezes."*
+Método: elimina, simplifica, automatiza, ou continua com uma pessoa. Nessa ordem.
+
+## Regras que não se quebram
+
+1. **Nunca use travessão.** Vírgula, ponto ou dois pontos.
+2. **Nunca invente número.** Sem "+45%", sem "3x mais vendas". Sem fonte, não escreve.
+3. **Sem preço publicado.** Preço só em proposta comercial.
+4. **Google Ads AI, nunca Google Partner.**
+5. **Linguagem de dono, não de agência.**
+
+## Copy que se defende
+
+O briefing não vira texto de página. O padrão a evitar é a frase que responde a uma
+acusação que o leitor não fez, e que planta a dúvida que não existia. Ninguém escreve
+no próprio site que não inventa número, que o depoimento é verdadeiro ou que o
+resultado é real: dizer isso é o que faz o leitor desconfiar.
+
+O certo é só **Projetos** e os projetos. Só **Depoimentos** e os vídeos.
+
+**Teste antes de publicar qualquer linha de apoio:** essa frase informa alguma coisa,
+ou está se defendendo? Se está se defendendo, apaga.
+
+## Ritmo
+
+- Varia o tamanho do bloco. Um bloco de 4 palavras ao lado de um de 40. Se todos ficam
+  entre 7 e 10 palavras, o texto virou metrônomo.
+- Deixa frase longa existir. Gente fala frase longa, com vírgula no meio, emendando ideia.
+- Um parágrafo pode ter três frases. Não precisa quebrar tudo.
+- A construção "não é X, é Y" é a muleta mais visível de texto gerado.
+  Uma por peça, no máximo.
+
+**Muletas proibidas:** de verdade, isso muda tudo, e faz sentido, por um motivo prático,
+a régua é sempre a mesma, o sinal é sempre o mesmo, vale ressaltar, na verdade,
+basicamente, é importante entender.
+
+**Palavras proibidas:** transformação digital, potencializar resultados, soluções
+inovadoras, eficiência impulsionada por IA, jornada de inovação, desbloquear potencial,
+escalar com inteligência, levar ao próximo nível, sinergia, ecossistema fora de contexto
+técnico.
+
+## Arquétipo
+
+Criador. Mais Tony Stark, menos professor. Sincero, direto, sem cerimônia, zero mimimi.
+
+1. Fala de dentro. "Eu fiz", "eu quebrei a cara nisso", "já vi isso dar errado assim".
+   Nunca "você deve", "é importante que", "muitos empreendedores erram ao".
+2. Ironia mira no problema, nunca em quem lê. Essa linha não se cruza.
+3. Admite o que não sabe e o que deu errado. É isso que separa sincero de arrogante.
+4. Primeira pessoa. "A gente" soa como agência quando quem vende é o dono.
+
+**Termômetro:** se a frase cabe na boca de um professor de curso online, reescreve.
+Se cabe na boca de alguém explicando pro sócio no bar, está certa.
+
+## Clientes citáveis
+
+Ford Consórcio Nacional, Rodobens, Unimed, CDL, ACE, Líder, Clube Líder, Liberty
+Colchões, Supermercado Cícero, Rei do Frango, Grupo Cimentão, Laboratório Mansoni,
+UniAnálises, Carmo Clínica, Vital Clínicas, Construmarla, Móveis da Cunha, Nexo
+Imobiliária, Innovar Imóveis, Mais Sollar, Loja do Prematuro, Yaçaí, HabilitaBH,
+Cliex, FlyApp, Divino Ticket, Evenmart, PsPag, Ificha, Falaí, e 6 autoescolas.
+
+**Nunca cite Sebrae, Soluti, Conversion, Rock Content ou G4 como cliente.**
+São referência de pesquisa.