PresencialArquitetura e Urbanismo
Projete espaços urbanos inovadores e sustentáveis.
Fundamentos
Tokens e regras base que definem a linguagem visual do sistema. Layout, espaçamento, tipografia, cores e motion formam a fundação para todos os componentes.
Layout & Grid
Sistema de layout responsivo com container de largura máxima e grid de 12 colunas.
Container
O container centraliza o conteúdo e define a largura máxima da área de conteúdo.
Variante Max-width Padding
.ba-container--narrow 768px 24px .ba-container 1280px 24px .ba-container--wide 1440px 24px Narrow (768px)
Default (1280px)
Wide (1440px)
Grid System
Sistema de grid responsivo que se adapta ao viewport.
Breakpoint Colunas Gutter
Mobile (<640px) 4 colunas 16px
Tablet (640-1023px) 8 colunas 20px
Desktop (≥1024px) 12 colunas 24px
12 Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
Grid Layout Examples
3 cols
6 cols
3 cols
4 cols
4 cols
4 cols
8 cols (content)
4 cols (sidebar)
Espaçamentos
Escala de espaçamento consistente baseada em múltiplos de 4px.
Spacing Scale
--ba-space-4 0.25rem 4px --ba-space-8 0.5rem 8px --ba-space-12 0.75rem 12px --ba-space-16 1rem 16px --ba-space-24 1.5rem 24px --ba-space-32 2rem 32px --ba-space-48 3rem 48px --ba-space-64 4rem 64px --ba-space-96 6rem 96px Semantic Aliases
Aliases semânticos para facilitar a leitura do código.
Token Valor Uso
--ba-space-xs 4px Micro gaps --ba-space-sm 8px Tight spacing --ba-space-md 12px Component padding --ba-space-lg 16px Default gap --ba-space-xl 24px Section spacing --ba-space-2xl 32px Large spacing --ba-space-3xl 48px Section breaks --ba-space-4xl 64px Page sections Tipografia
Escala tipográfica com Futura PT para texto e Dazzle Unicase para display.
Type Scale
Display XL
.ba-text-display-xl Belas Artes
Hero headlines Display LG
.ba-text-display-lg Belas Artes
Section headlines Title 1
.ba-text-title-1 Belas Artes
Page titles Title 2
.ba-text-title-2 Belas Artes
Section titles Title 3
.ba-text-title-3 Belas Artes
Subsection titles Headline
.ba-text-headline Belas Artes
Component titles Body LG
.ba-text-body-lg Belas Artes
Lead paragraphs Body
.ba-text-body Belas Artes
Body text Body SM
.ba-text-body-sm Belas Artes
Small text Caption
.ba-text-caption Belas Artes
Metadata Label
.ba-text-label Belas Artes
Labels & tagsFont Families
Futura PT
--ba-font-sans Texto principal, UI, navegação Dazzle Unicase
--ba-font-display Headlines, hero, branding Cores
Sistema de cores em três camadas: primitivos, semânticos e temas de área.
Brand Colors
Cores institucionais da marca Belas Artes.
Brand Primary
--ba-color-brand-primary #1F419B Brand Secondary
--ba-color-brand-secondary #BC032F Produtos Institucionais
Cores por produto/modalidade da instituição. Use data-ba-theme="nome" para aplicar.
Graduação
--ba-graduacao-primary #002843 Pós-Graduação
--ba-pos-primary #7AA820 Cursos Livres
--ba-cursos-livres-primary #E6007E Mestrado
--ba-mestrado-primary #6A05FA BA Online
--ba-online-primary #04D424 BA Play
--ba-play-primary #0099DB Tokens Adicionais
Cores complementares para cada produto institucional.
Graduação Creme
--ba-graduacao-creme #EFE1AE Graduação Laranja
--ba-graduacao-laranja #F99D1C BA Online Dark
--ba-online-dark #231C43 BA Play Pink
--ba-play-pink #E6007E BA Play Yellow
--ba-play-yellow #FFEE00 Neutral Scale
Escala de cinzas para superfícies, texto e bordas.
0
50
100
200
300
400
500
600
700
800
900
Feedback Colors
Success
#1FA862 Warning
#F6A300 Error
#D64045 Info
#2F80ED Iconografia
Sistema de ícones baseado em Lucide Icons. Ícones consistentes, otimizados e acessíveis para toda a plataforma Belas Artes.
Biblioteca
Componente <Icon /> com SVGs inline no estilo Lucide Icons.
Otimizado para SSR e com suporte completo a TypeScript.
Importação do Componente
import { Icon } from '@belas-artes/design-system' Uso
<Icon name="search" size={24} /> <Icon name="arrow-right" size={16} /> <Icon name="check-circle" label="Sucesso" /> Tamanhos
Tamanhos padronizados para garantir consistência e alinhamento com texto e componentes.
Tamanho Uso Contexto
16px Ícones inline Dentro de texto, badges 20px UI pequena Botões sm, inputs 24px Padrão Botões md/lg, navegação 32px Destaque Cards, empty states Stroke & Cor
Todos os ícones usam stroke-width de 2px e herdam a cor do texto pai.
Categorias
Ícones organizados por categoria de uso na plataforma Belas Artes.
Uso em Componentes
Exemplos de como os ícones são integrados em componentes do sistema.
Acessibilidade
Diretrizes para uso acessível de ícones.
Motion
Sistema de micro-interações sutis e performáticas. Motion deve ser rápido, proposital e respeitar preferências de acessibilidade.
Princípios
Sutil Evite animações exageradas. Motion deve aprimorar, não distrair.
Rápido Transições entre 120ms-240ms. Feedback imediato para interações.
Proposital Cada animação tem uma função clara: feedback, hierarquia ou estado.
Performático Use apenas transform e opacity. Evite animar width, height ou margin.
Duration Tokens
Passe o mouse sobre cada item para ver a velocidade da transição.
--ba-motion-fast 120ms Micro-interações --ba-motion-base 180ms Interações padrão --ba-motion-slow 240ms Transições visuais --ba-motion-slower 320ms Animações expressivas Easing Functions
Token Curva Uso
--ba-easing-default ease-out Interações padrão --ba-easing-productive ease-in-out Movimentos contínuos --ba-easing-expressive cubic-bezier(0.34, 1.56, 0.64, 1) Destaques e feedback Sistema de Elevação
Escala de sombras para indicar hierarquia e estados de interação.
1
--ba-elevation-1 Cards em repouso 2
--ba-elevation-2 Cards em hover 3
--ba-elevation-3 Elementos elevados 4
--ba-elevation-4 Modais e dropdowns Comportamentos Interativos
Demonstração de hover e active states nos componentes. Passe o mouse para ver os efeitos.
Botão
translateY(-1px) + elevation-2 Card
Card interativo Passe o mouse
translateY(-4px) + elevation-3 Course Card Motion
Cards de curso incluem hover com elevação e zoom sutil na imagem.
Presencial Propriedades animadas
transform: translateY(-4px) box-shadow: var(--ba-elevation-3) img transform: scale(1.03) Acessibilidade
Motion é desabilitado automaticamente para usuários que preferem movimento reduzido.
CSS para prefers-reduced-motion
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } Classes Utilitárias
Classe Efeito Uso
.ba-hover-lift translateY(-4px) + elevation-3 Cards, elementos clicáveis .ba-hover-lift-sm translateY(-2px) + elevation-2 Botões, ítens menores .ba-interactive hover com borda e sombra Surfaces clicáveis .ba-link-animated underline reveal Links com animação .ba-transition transição padrão (180ms) Qualquer elemento .ba-transition-fast transição rápida (120ms) Micro-interações Componentes
Elementos de interface reutilizáveis construídos sobre os fundamentos. Cada componente segue as regras de espaçamento, tipografia e cores definidas anteriormente.
Formulários
Sistema de formulários para busca, filtros e captura de leads. Projetados para alta conversão e excelente experiência em dispositivos móveis.
Busca Principal
Campo de busca hero para landing pages. Tamanho grande com destaque visual.
Filtros de Busca
Combinação de campos para refinar resultados de cursos.
Checkbox
Seleção múltipla com estados visuais claros.
Radio
Seleção única entre opções mutuamente exclusivas.
Estados de Campo
Demonstração dos diferentes estados visuais dos campos de entrada.
Default
Com valor
Com helper
Com erro
Obrigatório
Desabilitado
Formulário de Captação
Formulário completo para landing pages com foco em conversão.
Receba informações
Preencha seus dados e entraremos em contato
Cards & Badges
Cards são containers para agrupar informações relacionadas. Badges são marcadores visuais para destacar status, categorias ou informações contextuais.
Badges
Marcadores visuais para categorização e destaque. Use badges para comunicar status, categorias ou informações contextuais de forma compacta.
Status
Nova turma Inscrições abertas
Destaque
Últimas vagas Bolsa disponível Novo curso
Modalidade
Presencial Online ao vivo Híbrido EAD
Área
Arquitetura Design Moda Cinema Publicidade
Card Base
Container básico para agrupar informações. Estrutura flexível com título, descrição e ações opcionais.
Simples
Título do Card
Descrição breve que fornece contexto adicional sobre o conteúdo do card.
Com ação
Título do Card
Descrição breve que fornece contexto adicional sobre o conteúdo do card.
Com múltiplas ações
Título do Card
Descrição breve que fornece contexto adicional sobre o conteúdo do card.
Card Informacional
Card com badge para destacar informações contextuais. Útil para blocos de conteúdo com categorização.
Com badge
Destaque
Processo Seletivo Aberto
Inscrições para o primeiro semestre de 2026 já estão disponíveis.
Informativo
Bolsas
Programa de Bolsas
Até 50% de desconto para novos alunos que se inscreverem até dezembro.
Navegação
Componentes de navegação para menus, dropdowns, breadcrumbs e acordeões. Todos utilizam motion tokens para micro-interações consistentes e profissionais.
Dropdown Navigation
Menu com submenus que abrem em hover (desktop) ou click.
Animação: opacity 0→1 + translateY(-4px)→0 em 180ms.
Comportamento
Hover para abrir (desktop) Click para toggle (touch) Esc para fechar
Mega Menu Full – Graduação
Layout 3 colunas: Áreas de conhecimento + Carrosséis de cursos + Banner promocional. Carrosséis navegáveis para exibir cursos em alta e novidades com imagens.
Estrutura
3 colunas: Áreas | Carrosséis | Banner Carrosséis navegáveis com setas Banner com headline e CTA
Mega Menu Full – Pós-Graduação
Variação com tema verde institucional para navegação de pós-graduação. Mesma estrutura de carrosséis, cor diferente para identificação visual.
Dropdown Menu com Badges
Dropdown simples para navegação secundária com suporte a badges de novidade. Perfeito para destacar novos cursos, promoções ou funcionalidades.
Badges disponíveis
Novo Hot Em breve Default
Mobile Menu
Menu lateral para dispositivos móveis. Abre com animação slide (translateX) em 240ms.
Inclui overlay, accordion para submenus e área de CTA.
Animações
Panel: translateX slide Overlay: opacity fade Submenu: grid-template-rows
Tooltip
Dica de contexto que aparece em hover ou focus. Animação: opacity + translateY(4px) em 120ms.
Accordion
Componente colapsável para FAQs e navegação. Animação usa grid-template-rows
e opacity com duração de 240ms.
Informações detalhadas sobre o curso, grade curricular e metodologia de ensino.
Valores, parcelamento, bolsas de estudo e financiamento estudantil disponíveis.
Etapas do processo seletivo, documentação necessária e prazos de inscrição.
Breadcrumb
Navegação hierárquica para indicar localização.
Breadcrumb Compacto
Versão com ícones para mobile.
Motion Tokens de Navegação
Interação Token Duração Propriedades
Tooltip
--ba-motion-fast 120ms opacity, translateY Dropdown
--ba-motion-base 180ms opacity, translateY Accordion
--ba-motion-slow 240ms grid-template-rows, opacity Mobile menu
--ba-motion-slow 240ms translateX, opacity Cursos
Componentes especializados para apresentação de cursos por produto institucional. Cada variação possui estrutura de dados e visual específico.
Variações por Produto
Cada produto institucional tem um card específico com metadados relevantes.
Produto Metadados Cor Primária
Graduação Área, Modalidade, Duração, Campus
--ba-graduacao-primary Pós-Graduação Área, Modalidade, Duração, Campus
--ba-pos-primary Cursos Livres Área, Carga horária, Modalidade, Datas
--ba-cursos-livres-primary BA Play Tópicos, Benefícios, Preço, Desconto
--ba-play-primary Card Graduação
Design focado em conversão para cursos de graduação. Badge de modalidade na imagem, área como tag, Quick Info com duração e campus em destaque e CTA único com link secundário.
PresencialArquitetura e Urbanismo
Planeje e projete espaços urbanos inovadores e sustentáveis.
Estrutura do Card
- Badge na imagem — Modalidade (Presencial/EAD/Híbrido)
- Área como tag — Categoria com fundo colorido
- Quick Info — Duração e Campus em destaque
- CTA único — "Matricule-se" com seta
- Link secundário — "Conhecer o curso"
Card Pós-Graduação
Mesma estrutura da Graduação, adaptado para pós com modalidades variadas. Cor verde institucional aplicada no badge, área e elementos de destaque.
Online ao VivoAnimação e Cenários Digitais
Desenvolva habilidades em gestão e produção digital.
Estrutura do Card
- Badge na imagem — Modalidade (Online ao Vivo/Híbrido/etc.)
- Área como tag — Categoria com fundo verde
- Quick Info — Duração e Campus em destaque
- CTA único — "Matricule-se" com seta
- Link secundário — "Conhecer o curso"
Card Cursos Livres
Design focado em conversão rápida para cursos de curta duração. Badge de modalidade na imagem, área destacada como tag, informações essenciais (carga horária e datas) em destaque e CTA único com senso de urgência.
PresencialPersonal Stylist: Técnicas Profissionais
Aprenda a criar looks e orientar clientes com confiança.
Estrutura do Card
- Badge na imagem — Modalidade (Presencial/Online/Híbrido)
- Área como tag — Categoria com fundo colorido
- Quick Info — Carga horária e datas em destaque
- CTA único — "Garantir Vaga" com senso de urgência
- Link secundário — "Ver programa completo"
Card BA Play
Plataforma de cursos online com foco em conversão. Destaque para tópicos, benefícios, preço com desconto e badge promocional na imagem.
-20%Produção de Conteúdo para Redes Sociais
Domine a criação de conteúdo que engaja e converte.
- Estratégias de planejamento de conteúdo
- Técnicas de storytelling visual
- Otimização para cada plataforma
1 ano de acesso Certificado
R$ 165,00R$ 132,00
Dados necessários
title— Nome do cursodescription— Descrição curtaimage— URL da imagemtopics— Array de tópicosaccessDuration— Ex: "1 ano"hasCertificate— BooleanoriginalPrice— Preço originalprice— Preço atualdiscount— % desconto (badge)
Grid de Cards
Layout responsivo para listagem de cursos. Desktop: até 3 colunas. Cards mantêm proporção e elevação no hover.
PresencialDesign de Interiores
Transforme espaços com criatividade e funcionalidade.
HíbridoUX Design
Crie experiências digitais centradas no usuário.
PresencialFotografia de Moda
Técnicas profissionais de iluminação e composição.
Course List
Lista interativa de cursos com hover premium. No hover: barra de destaque à esquerda aparece, conteúdo desliza suavemente para a direita e seta de navegação surge.
Graduação
Hover Behavior
Barra lateral aparece (scaleY) Conteúdo desliza 8px (translateX) Seta surge (opacity + translateX) Background sutil