# Design System — Faculdade Phorte

> Componentes, tokens e regras do design system da Faculdade Phorte (graduação e pós-graduação). 81 peças em React 19, Next e Tailwind v4. Texto em pt-BR.

Como usar este índice: escolha a peça pela frase ao lado do nome e abra o Markdown dela. Cada Markdown traz a importação, as propriedades lidas do código, os tokens de cor, o teclado e o estado de acessibilidade. A página da mesma peça, com a prévia ao vivo, fica em https://phorte-design-system.vercel.app/styleguide/peca/<peça>. As 81 páginas num arquivo só: https://phorte-design-system.vercel.app/llms-full.txt.

Regras que valem para toda peça: cor só por token semântico (nunca hexadecimal nem paleta do Tailwind); foco com `focus-visible:`; alvo de toque de 44×44px; estado nunca só por cor; todo texto para o usuário em pt-BR, inclusive `aria-label`; classes com `cn()`, variantes com `cva`.

## Começar

- [Para quem desenvolve](https://phorte-design-system.vercel.app/styleguide/md/comecar/desenvolvimento.md): O que instalar antes de mexer no projeto, as dependências e para que serve cada uma, os comandos e o gate que roda antes de todo commit.
- [Para quem desenha](https://phorte-design-system.vercel.app/styleguide/md/comecar/design.md): O que o arquivo do Figma tem de refletir do sistema — cor, tipografia, espaço, grade, ícones e interação — e o que uma peça precisa ter no desenho antes de ir para o código.

## Fundação

- [Cores](https://phorte-design-system.vercel.app/styleguide/md/fundacao/cores.md): A paleta: cada token com nome, variável, valor, uso e sobre o que pode ir. Use o token pelo nome, nunca o valor.
- [Tipografia](https://phorte-design-system.vercel.app/styleguide/md/fundacao/tipografia.md): Poppins, auto-hospedada, cinco pesos e sem itálico; a escala do componente Typography por variante.
- [Espaçamento](https://phorte-design-system.vercel.app/styleguide/md/fundacao/espacamento.md): A escala de espaço: os degraus `espaco-N`, em pixels, e qual faixa usar dentro de um elemento, entre elementos e entre seções.
- [Efeitos & Tokens](https://phorte-design-system.vercel.app/styleguide/md/fundacao/efeitos.md): Raios (derivados de um raio base) e os quatro degraus de sombra, com o uso de cada um contado do código.
- [Grids & Layout](https://phorte-design-system.vercel.app/styleguide/md/fundacao/grids.md): Como montar a página: o contêiner `pagina` (1320px), a grade de uma coluna que vira duas, três ou quatro, a medianiz e as larguras de leitura.
- [Breakpoints](https://phorte-design-system.vercel.app/styleguide/md/fundacao/breakpoints.md): As três faixas de tela — Celular (base), Tablet (`md:`, 768px) e Computador (`lg:`, 1024px) — e em que largura testar.
- [Ícones](https://phorte-design-system.vercel.app/styleguide/md/fundacao/icones.md): A Lucide (`lucide-react`) como biblioteca oficial, a escala do `Icone` em cinco degraus, o processo de ícone novo e os ícones em uso, com o que cada um mostra.
- [Logotipos](https://phorte-design-system.vercel.app/styleguide/md/fundacao/logotipos.md): As marcas da Faculdade Phorte, da Phorte Educacional e dos parceiros: cada arquivo, para que serve e o que ainda falta.
- [Acessibilidade](https://phorte-design-system.vercel.app/styleguide/md/fundacao/acessibilidade.md): O que o repositório verifica sozinho a cada push (e reprova o CI), o alvo de toque de 44×44px e o que ainda depende de uma pessoa conferir.

## Formulário e ação

- [Button](https://phorte-design-system.vercel.app/styleguide/md/Button.md): Botão de ação, ou link com aparência de botão quando recebe `href`; tem estado de carregando que mantém o foco. (Base)
- [Checkbox](https://phorte-design-system.vercel.app/styleguide/md/Checkbox.md): Caixa de marcar com rótulo, para escolhas independentes ou o aceite de termos (`variant="aceite"`). (Base)
- [Dropdown](https://phorte-design-system.vercel.app/styleguide/md/Dropdown.md): Menu de ações que abre de um botão, navegável por setas; para escolher um valor, use o Select. (Base)
- [Input](https://phorte-design-system.vercel.app/styleguide/md/Input.md): Campo de texto de uma linha, com borda de foco que indica dado insuficiente ou suficiente e estado de erro. (Base)
- [Label](https://phorte-design-system.vercel.app/styleguide/md/Label.md): Rótulo de campo de formulário, com marca de obrigatório, "(opcional)" e dica de ajuda. (Base)
- [Radio](https://phorte-design-system.vercel.app/styleguide/md/Radio.md): Opção de escolha única dentro de um grupo, com descrição opcional. (Base)
- [Select](https://phorte-design-system.vercel.app/styleguide/md/Select.md): Lista de opções nativa para escolher um valor, com placeholder e estado de erro. (Base)
- [Slider](https://phorte-design-system.vercel.app/styleguide/md/Slider.md): Controle deslizante para escolher um número numa faixa, com paradas e rótulos nas pontas. (Base)
- [Textarea](https://phorte-design-system.vercel.app/styleguide/md/Textarea.md): Campo de texto de várias linhas, no mesmo contrato visual do Input; dentro do FormField ganha rótulo, dica, contador e erro. (Base)
- [Toggle](https://phorte-design-system.vercel.app/styleguide/md/Toggle.md): Interruptor liga/desliga de efeito imediato; para escolha que só vale ao enviar, use o Checkbox. (Base)
- [FilterGroup](https://phorte-design-system.vercel.app/styleguide/md/FilterGroup.md): Grupo de filtros em pílulas de escolha única, com rótulo. (Complexos)
- [FormField](https://phorte-design-system.vercel.app/styleguide/md/FormField.md): Envolve um controle com rótulo, dica e mensagem de erro ligados por `aria-describedby`; é a fonte do `aria-invalid`. (Complexos)
- [ResumoDeErros](https://phorte-design-system.vercel.app/styleguide/md/ResumoDeErros.md): O resumo do padrão GOV.UK no topo do formulário: quantos problemas há e um link para cada campo; recebe o foco quando o envio falha. (Complexos)
- [SearchBar](https://phorte-design-system.vercel.app/styleguide/md/SearchBar.md): Campo de busca com botão, rótulo acessível e envio por Enter. (Complexos)
- [ContactForm](https://phorte-design-system.vercel.app/styleguide/md/ContactForm.md): Formulário "Fale conosco" — nome, e-mail, telefone, mensagem e o aceite de privacidade —, com confirmação de envio. (Marketing Assets)

## Navegação e estrutura

- [Link](https://phorte-design-system.vercel.app/styleguide/md/Link.md): Link de texto, sempre sublinhado, interno pelo roteador ou externo; com `novaAba`, avisa que abre em outra aba. (Base)
- [LinkDeNavegacao](https://phorte-design-system.vercel.app/styleguide/md/LinkDeNavegacao.md): O link de uma barra de navegação, que marca a seção atual com aria-current e sublinhado; claro na barra principal, escuro na faixa de cima. (Base)
- [PularParaOConteudo](https://phorte-design-system.vercel.app/styleguide/md/PularParaOConteudo.md): O primeiro foco da página: leva o teclado direto ao conteúdo, por cima da navegação; invisível até receber o foco. (Base)
- [Abas](https://phorte-design-system.vercel.app/styleguide/md/Abas.md): Abas no padrão da WAI-ARIA: uma parada de Tab, setas para trocar, painéis ligados; para alternar conteúdo na mesma página. (Complexos)
- [Breadcrumb](https://phorte-design-system.vercel.app/styleguide/md/Breadcrumb.md): Trilha de navegação do início até a página atual. (Complexos)
- [CarouselNavButton](https://phorte-design-system.vercel.app/styleguide/md/CarouselNavButton.md): Botão redondo de anterior/próximo para carrosséis, com versão clara e escura. (Complexos)
- [CourseTabs](https://phorte-design-system.vercel.app/styleguide/md/CourseTabs.md): Abas horizontais que rolam no celular, para alternar entre grupos de cursos. (Complexos)
- [Footer](https://phorte-design-system.vercel.app/styleguide/md/Footer.md): Rodapé institucional com links, contatos, redes sociais e o botão de WhatsApp. (Complexos)
- [Navbar](https://phorte-design-system.vercel.app/styleguide/md/Navbar.md): Cabeçalho do site com menus de Graduação, Pós e Cursos Livres, busca e menu do celular. (Complexos)
- [PageLayout](https://phorte-design-system.vercel.app/styleguide/md/PageLayout.md): Moldura de página com Navbar, conteúdo principal, rodapé e link de pular para o conteúdo. (Complexos)
- [Pagination](https://phorte-design-system.vercel.app/styleguide/md/Pagination.md): Paginação numérica com anterior e próximo; vira "Página X de Y" no celular. (Complexos)

## Estado e aviso

- [Badge](https://phorte-design-system.vercel.app/styleguide/md/Badge.md): Rótulo estático de estado ou categoria (sucesso, aviso, informação); não é clicável. (Base)
- [Esqueleto](https://phorte-design-system.vercel.app/styleguide/md/Esqueleto.md): A forma do conteúdo que ainda está chegando, para a página não pular; decorativa, com o Carregando dito uma vez pelo grupo. (Base)
- [Progress](https://phorte-design-system.vercel.app/styleguide/md/Progress.md): Barra de progresso de uma tarefa ou etapa, com rótulo e valor. (Base)
- [ScrollProgress](https://phorte-design-system.vercel.app/styleguide/md/ScrollProgress.md): Barra fina no topo que mostra quanto da página já foi lido. (Base)
- [Tag](https://phorte-design-system.vercel.app/styleguide/md/Tag.md): Etiqueta curta em caixa alta, como "Matrículas abertas" ou "Ao vivo agora" (com ponto pulsante). (Base)
- [Alert](https://phorte-design-system.vercel.app/styleguide/md/Alert.md): Mensagem de erro, atenção, informação ou sucesso, com ícone e tipo em texto; erro e atenção interrompem o leitor de tela. (Complexos)
- [Aviso](https://phorte-design-system.vercel.app/styleguide/md/Aviso.md): Confirmação passageira no canto da tela (toast) — "Inscrição salva" —, pela região viva; some sozinha, menos o erro. (Complexos)
- [Gaveta](https://phorte-design-system.vercel.app/styleguide/md/Gaveta.md): Painel que entra pela direita ou por baixo, sobre a página: prende o foco, deixa o fundo inerte e devolve o foco ao fechar, como o Modal. (Complexos)
- [EstadoVazio](https://phorte-design-system.vercel.app/styleguide/md/EstadoVazio.md): O lugar do conteúdo que não há: diz o que falta e o próximo passo, com uma ação; anuncia quando responde a um filtro. (Complexos)
- [Modal](https://phorte-design-system.vercel.app/styleguide/md/Modal.md): Janela sobre a página que prende o foco e o devolve ao fechar, para decisão ou formulário curto. (Complexos)
- [Tooltip](https://phorte-design-system.vercel.app/styleguide/md/Tooltip.md): Dica curta no hover e no foco de um controle, ligada por `aria-describedby`; some com Esc. (Complexos)

## Conteúdo

- [Avatar](https://phorte-design-system.vercel.app/styleguide/md/Avatar.md): Foto redonda de uma pessoa, com as iniciais do nome quando a foto falta ou não carrega. (Base)
- [Card](https://phorte-design-system.vercel.app/styleguide/md/Card.md): Superfície que agrupa um conteúdo, com cabeçalho, corpo, rodapé e mídia de ponta a ponta; pode ser clicável inteiro. (Base)
- [IconBox](https://phorte-design-system.vercel.app/styleguide/md/IconBox.md): Ícone dentro de um quadrado de fundo suave, para ilustrar um item de lista ou de grade. (Base)
- [Typography](https://phorte-design-system.vercel.app/styleguide/md/Typography.md): Texto com a escala tipográfica do sistema (h1 a tiny), cor e alinhamento, desacoplando o visual da tag. (Base)
- [Accordion](https://phorte-design-system.vercel.app/styleguide/md/Accordion.md): Seção recolhível com título-botão, para perguntas e conteúdos longos que não precisam aparecer de uma vez. (Complexos)
- [AvatarGroup](https://phorte-design-system.vercel.app/styleguide/md/AvatarGroup.md): Avatares sobrepostos com "+N" para os que excedem o limite, como prova social. (Complexos)
- [ChatWindow](https://phorte-design-system.vercel.app/styleguide/md/ChatWindow.md): Janela de conversa com mensagens e campo de envio, com pausa para a simulação ao vivo. (Complexos)
- [FAQ](https://phorte-design-system.vercel.app/styleguide/md/FAQ.md): Seção de perguntas frequentes em acordeão, em tema claro ou escuro. (Complexos)
- [Tabela](https://phorte-design-system.vercel.app/styleguide/md/Tabela.md): Dado em linhas e colunas, com legenda obrigatória; ordena pelo botão do cabeçalho e rola dentro da própria caixa quando não cabe. (Complexos)
- [SectionTitle](https://phorte-design-system.vercel.app/styleguide/md/SectionTitle.md): Título de seção com chapéu, título e descrição, alinhado à esquerda ou ao centro. (Complexos)
- [StatCard](https://phorte-design-system.vercel.app/styleguide/md/StatCard.md): Número em destaque com um rótulo, como "+250 mil alunos formados". (Complexos)
- [TimelineItem](https://phorte-design-system.vercel.app/styleguide/md/TimelineItem.md): Item de linha do tempo com ano, título e descrição; pode marcar o momento atual. (Complexos)
- [VideoPlayer](https://phorte-design-system.vercel.app/styleguide/md/VideoPlayer.md): Vídeo do YouTube com capa, que só carrega o player ao clicar (sem cookies). (Complexos)

## Cursos e matrícula

- [CourseCard](https://phorte-design-system.vercel.app/styleguide/md/CourseCard.md): Cartão de curso com imagem, modalidade, duração e preço opcional; inativo deixa de ser link. (Complexos)
- [CourseFilterSidebar](https://phorte-design-system.vercel.app/styleguide/md/CourseFilterSidebar.md): Barra lateral de busca e filtros do catálogo de cursos: tipo, modalidade, polo e área. (Complexos)
- [KnowledgeAreas](https://phorte-design-system.vercel.app/styleguide/md/KnowledgeAreas.md): Grade das áreas de conhecimento (Educação, Saúde, Direito, Gestão…) com ícone e link. (Complexos)
- [TopCourses](https://phorte-design-system.vercel.app/styleguide/md/TopCourses.md): Lista dos cursos mais procurados, com modalidade, duração e link para detalhes. (Complexos)
- [TurmaCard](https://phorte-design-system.vercel.app/styleguide/md/TurmaCard.md): Cartão de turma com datas de matrícula e início, local, modalidade e situação das vagas. (Complexos)
- [CurriculumAccordion](https://phorte-design-system.vercel.app/styleguide/md/CurriculumAccordion.md): Conteúdo programático de um curso em acordeão, por semestre. (Marketing Assets)

## Eventos

- [EventCard](https://phorte-design-system.vercel.app/styleguide/md/EventCard.md): Cartão de evento com imagem, data, tipo e link de inscrição. (Complexos)
- [EventDate](https://phorte-design-system.vercel.app/styleguide/md/EventDate.md): Data e duração de um evento em bloco compacto, com ícones. (Complexos)
- [EventSchedule](https://phorte-design-system.vercel.app/styleguide/md/EventSchedule.md): Programação de um evento dividida por dia, com horários e palestrantes. (Complexos)
- [EventSpeaker](https://phorte-design-system.vercel.app/styleguide/md/EventSpeaker.md): Palestrante com foto, nome e cargo. (Complexos)
- [HeroCarousel](https://phorte-design-system.vercel.app/styleguide/md/HeroCarousel.md): Carrossel de topo que destaca eventos, com chamada de inscrição. (Complexos)

## Institucional

- [Blog](https://phorte-design-system.vercel.app/styleguide/md/Blog.md): Seção "Blog" da página inicial: grade de três posts recentes e o link para o blog inteiro. (Complexos)
- [BlogCard](https://phorte-design-system.vercel.app/styleguide/md/BlogCard.md): Cartão de post do blog, em tamanho padrão ou de destaque. (Complexos)
- [Hero](https://phorte-design-system.vercel.app/styleguide/md/Hero.md): Topo da página inicial: carrossel de três slides com a busca de cursos logo abaixo. (Complexos)
- [Newsletter](https://phorte-design-system.vercel.app/styleguide/md/Newsletter.md): Bloco de inscrição na newsletter semanal, com campo de e-mail. (Complexos)
- [Testimonials](https://phorte-design-system.vercel.app/styleguide/md/Testimonials.md): Seção de depoimentos de alunos em vídeo e texto. (Complexos)
- [Units](https://phorte-design-system.vercel.app/styleguide/md/Units.md): Lista recolhível das unidades da Phorte, com endereço de cada uma. (Complexos)
- [WhyChoose](https://phorte-design-system.vercel.app/styleguide/md/WhyChoose.md): Seção "Por que escolher a Phorte" com os diferenciais da instituição. (Complexos)

## Campanha (marketing)

- [FeaturesGrid](https://phorte-design-system.vercel.app/styleguide/md/FeaturesGrid.md): Grade de diferenciais com ícone, título e texto curto. (Marketing Assets)
- [FloatingPricingCard](https://phorte-design-system.vercel.app/styleguide/md/FloatingPricingCard.md): Cartão de preço com desconto, parcelamento, prazo da oferta e benefícios. (Marketing Assets)
- [InstructorCards](https://phorte-design-system.vercel.app/styleguide/md/InstructorCards.md): Cartões de professores com foto, titulação e selo. (Marketing Assets)
- [JobsList](https://phorte-design-system.vercel.app/styleguide/md/JobsList.md): Lista de vagas abertas, filtrável por área. (Marketing Assets)
- [LogoMarquee](https://phorte-design-system.vercel.app/styleguide/md/LogoMarquee.md): Faixa rolante de logotipos, pausável. (Marketing Assets)
- [MarketingHero](https://phorte-design-system.vercel.app/styleguide/md/MarketingHero.md): Topo de campanha com título, chamada e cartão de preço opcional. (Marketing Assets)
- [MetricsBanner](https://phorte-design-system.vercel.app/styleguide/md/MetricsBanner.md): Faixa de números da instituição, como alunos impactados e satisfação. (Marketing Assets)
- [NewsletterStrip](https://phorte-design-system.vercel.app/styleguide/md/NewsletterStrip.md): Faixa de chamada com campo de e-mail, para fechar uma página de campanha. (Marketing Assets)
- [PricingCards](https://phorte-design-system.vercel.app/styleguide/md/PricingCards.md): Planos lado a lado para comparar preço e benefícios, com o mais popular em destaque. (Marketing Assets)
- [PromoMarquee](https://phorte-design-system.vercel.app/styleguide/md/PromoMarquee.md): Faixa rolante de mensagens promocionais, pausável. (Marketing Assets)
- [TeamGrid](https://phorte-design-system.vercel.app/styleguide/md/TeamGrid.md): Grade da equipe com foto, cargo e redes sociais. (Marketing Assets)
- [TestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/TestimonialCarousel.md): Carrossel de depoimentos escritos. (Marketing Assets)
- [VideoTestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/VideoTestimonialCarousel.md): Depoimentos em vídeo do YouTube ou do Vimeo, que tocam no próprio cartão, vertical ou horizontal. (Marketing Assets)

## Fora do catálogo — Cursos Livres (E-commerce)

Peças de produto do fluxo de cursos livres. Não são peças do kit, não têm estado de promoção e não foram feitas para reuso em outras páginas; seguem as mesmas regras de cor e acessibilidade.

- [PhorteCatalogHero](https://phorte-design-system.vercel.app/styleguide/md/PhorteCatalogHero.md): Topo do catálogo de cursos livres, com a busca.
- [PhorteCatalogFilters](https://phorte-design-system.vercel.app/styleguide/md/PhorteCatalogFilters.md): Filtros de área, modalidade e nível.
- [PhorteCourseCard](https://phorte-design-system.vercel.app/styleguide/md/PhorteCourseCard.md): Cartão de curso na grade do catálogo.
- [PhorteCourseCatalogClient](https://phorte-design-system.vercel.app/styleguide/md/PhorteCourseCatalogClient.md): A página inteira do catálogo, com busca e filtros.
- [PhorteCourseCatalogClientDark](https://phorte-design-system.vercel.app/styleguide/md/PhorteCourseCatalogClientDark.md): A mesma página, na variação escura de campanha.
- [PhorteCourseDetail](https://phorte-design-system.vercel.app/styleguide/md/PhorteCourseDetail.md): Página de detalhe do curso.
- [PhorteCurriculumAccordion](https://phorte-design-system.vercel.app/styleguide/md/PhorteCurriculumAccordion.md): Grade curricular recolhível.
- [PhorteStickyEnrollCard](https://phorte-design-system.vercel.app/styleguide/md/PhorteStickyEnrollCard.md): Cartão de matrícula que acompanha a rolagem.
- [PhorteLandingMultiStyle](https://phorte-design-system.vercel.app/styleguide/md/PhorteLandingMultiStyle.md): Landing de campanha, em três tratamentos.
- [CohortTimelineBlock](https://phorte-design-system.vercel.app/styleguide/md/CohortTimelineBlock.md): Linha do tempo das próximas turmas.
- [CourseQuizBlock](https://phorte-design-system.vercel.app/styleguide/md/CourseQuizBlock.md): Quiz que indica um curso.
- [TrackComparisonBlock](https://phorte-design-system.vercel.app/styleguide/md/TrackComparisonBlock.md): Comparação entre as trilhas.