UniFECAF Design System

Brand Colors / cores da identidade visual

Navy / Azul Primário

Aa

Navy 900#002156--color-navy-900

Aa

Navy 800 ★#1A3666--color-navy-800

Aa

Navy 600#254AB9--color-navy-600

Green / Verde

Aa

Green 900#01562C--color-green-900

Aa

Green 700 ★#17A460--color-green-700

Aa

Green 400#95DE68--color-green-400

Accent Colors

Aa

Teal 500#00B1D2--color-teal-500

Aa

Pink 500 ★#FF2B5F--color-pink-500

Aa

Yellow 500#F2CB0A--color-yellow-500

Aa

Purple 700#351B65--color-purple-700

Neutrals

Aa

Neutral 900#191919--color-neutral-900

Aa

Neutral 600#5c5c5c--color-neutral-600

Aa

Neutral 300#c2c2c2--color-neutral-300

Aa

Neutral 100#F0EEE9--color-neutral-100

Aa

White#ffffff--color-white

Semantic Colors / cores por significado

Primary

Botão primário --color-semantic-primary

Success

Concluído --color-semantic-success

Warning

⚠ Atenção --color-semantic-warning

Danger

Bloqueado --color-semantic-danger

Info

ℹ Informação --color-semantic-info

CTA Marketing

VEM VER! --color-semantic-cta

Platform Accents / cor de cada plataforma

One / Cursos

--color-platform-one

Portal Acadêmico

--color-platform-academico

Em Dia

--color-platform-financeiro

Conquistas

--color-platform-conquistas

Estágios

--color-platform-estagios

Carreiras

--color-platform-carreiras

Eventos

--color-platform-eventos

Tipografia / escala e pesos

🔤

Fontes do Brand Guide

Zalando Sans (títulos bold, caixa alta) e Paralucent Condensed (texto de apoio) são as fontes oficiais. Para web, confirmar licença de uso digital. Enquanto não disponíveis como webfont, usar DM Sans como fallback de qualidade.

Escala de Tamanhos

4xl / 48pxUniFECAF One

3xl / 36pxBem-vindo ao Portal

2xl / 30pxMeus documentos

xl / 24pxNotas e Faltas

lg / 20pxDiplomas e Certificados

base / 16pxEntregue seus documentos dentro do prazo

sm / 14pxAcesse o ambiente virtual, acompanhe notas e faltas

xs / 12pxEXTENSÃO • EAD • PRESENCIAL

Font Weights

Ag

Regular — 400
--weight-regular
Body text

Ag

Medium — 500
--weight-medium
Labels, nav

Ag

Semibold — 600
--weight-semibold
Subtítulos

Ag

Bold — 700
--weight-bold
Títulos, CTAs

Letter Spacing (caixa alta — padrão da marca)

--tracking-widest ESTÁGIO OBRIGATÓRIO

--tracking-wide SEÇÃO / LABEL

--tracking-tight Meus cursos

Espaçamento / base 4px

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

Border Radius / arredondamento

xs
2px

sm
4px

md
8px

lg
12px

xl
16px

2xl
20px

full
pills

Uso padrão: Cards grandes → --radius-xl (16px) | Cards pequenos → --radius-lg (12px) | Inputs → --radius-lg (12px) | Botões → --radius-full | Badges → --radius-full

Sombras / elevação

xs
hover subtil

sm
cards padrão

md
dropdowns

lg
cards elevados

xl
popovers

modal
overlays

card-hover
navy tinted

Motion / duração e easing

Passe o mouse sobre os cards para ver a animação com a duração e easing correspondente.

Fast

100ms · ease-default
--duration-fast

Normal ★

200ms · ease-default
--duration-normal

Slow

350ms · ease-default
--duration-slow

Spring

350ms · ease-spring
badges, toasts

Z-Index / camadas

Token	Valor	Uso
--z-below	-1	Elementos atrás do background
--z-base	0	Fluxo normal do documento
--z-raised	10	Cards com hover elevado
--z-dropdown	100	Dropdowns, selects customizados
--z-sticky	200	Header fixo, sidebar
--z-overlay	300	Overlay/backdrop do modal
--z-modal	400	Modais, drawers
--z-toast	500	Toasts, notificações temporárias
--z-tooltip	600	Tooltips (sempre no topo)

Padrão Unificado / decisões de design para todas as plataformas

🎯

Objetivo: Uma experiência, seis plataformas

O aluno não deve sentir que saiu do sistema ao navegar entre One, Conquistas, Eventos, Estágios, Carreiras e Em Dia. As regras abaixo são obrigatórias em todas as plataformas. Componentes opcionais ou de identidade própria ficam sinalizados com ★.

🏗️ Shell Global — estrutura comum a todas as plataformas

Topbar (44px)

Links de navegação cross-plataforma

One Conquistas Eventos Carreiras

Fundo: --color-neutral-900
Plataforma ativa: --color-green-400
Demais links: --color-neutral-400 / hover white
Altura fixa: --topbar-height: 44px

Header (64px)

UniFECAF

Thiago ▾

Logo UniFECAF centralizado em todas as plataformas
User dropdown no canto direito sempre
Ação secundária (hamburguer/sino) no canto esquerdo
Fundo sempre --color-white
Border-bottom: 1px --color-neutral-200

Sidebar (apenas One / plataformas com muitas seções)

Home

Meus cursos

Fundo: --color-navy-900
Item ativo: bg rgba(255,255,255,0.08) + borda esquerda 3px --color-green-400
Ícone ativo: white | Texto ativo: white bold
Item inativo: ícone + texto rgba(255,255,255,0.55)
Nunca usar rosa ou verde sólido como fundo ativo

Page Header (padrão de todas as páginas internas)

Meus documentos

Entregue seus documentos dentro do prazo

H1: --text-2xl, --weight-bold, --color-navy-800
Subtítulo: --text-sm, --weight-regular, --color-neutral-600
Sem fundo especial — herda o fundo da página
Padding-bottom: --space-6 antes do conteúdo

🔘 Botões — hierarquia única para todo o sistema

Primary

Secondary

Ghost (volta/cancel)

Danger (só destrutivo)

CTA Marketing ★

Disabled

Regra de ouro: Primary = navy-800 | Ghost/Voltar = outlined neutral (nunca vermelho) | Vermelho = só ação destrutiva irreversível | Rosa CTA = só em contextos de marketing/captação (nunca em fluxos internos do aluno)

📝 Inputs — padrão outline universal

Default

Digite aqui...

Focus

thiago_lopez

Error

campo inválido

⚠ Campo obrigatório

Proibido: estilo underline (usado no Estágios atual). Todos os inputs devem ter borda completa outline com --radius-lg. Labels sempre acima, nunca placeholder como substituto de label.

🚦 Alertas — semântica de cores unificada

ℹ️Se a empresa já tiver o documento assinado, preencha o formulário e finalize o envio.

⚠️Disponível para estágios Não Obrigatórios. Versão Beta para Obrigatórios em breve.

✅thiago_lopez está disponível como username.

🚫Há campos obrigatórios não preenchidos. Complete-os para continuar.

Proibido: fundo amarelo full-width para erros de validação (atual em Estágios). Sempre usar a variante danger com border-left. Fundo amarelo full-width só para banners de sistema (ex: "Ambiente de Pré-lançamento").

📑 Tabs — padrão único

Padrão (linha inferior) — para navegação dentro de uma página

Extensão

Graduação

Pós-Graduação

Pill tabs — para filtros/estados dentro de uma seção

Eventos inscritos

Realizados

Favoritos

Proibido: tabs full-width com fundo sólido navy como único padrão (atual em Eventos/Meus eventos). Usar "linha inferior" para navegação principal e "pill" para filtros. Nunca misturar os dois estilos na mesma plataforma.

📌 Section Headers — hierarquia de títulos padronizada

Page title (H1) Meus cursos

Section (H2)

PRÓXIMOS EVENTOS Ver tudo →

Card title (H3) Semana da Enfermagem

Body text Acesse o ambiente virtual, acompanhe notas e faltas da sua graduação.

Metadata / label EXTENSÃO • 1º SEMESTRE

Proibido: títulos H2 de seção em azul --color-navy-600 (atual em Conquistas). Todos os títulos de seção devem ser --color-navy-800 uppercase + letter-spacing wide.

🪟 Modais — anatomia padrão

Título do modal

✕

Conteúdo do modal aqui. Pode ser lista, form, ou informação.

Regras: X de fechar sempre como ícone circular neutro (nunca vermelho puro). Ações no footer alinhadas à direita: Ghost (cancelar) + Primary (confirmar). Fundo sempre branco, radius-2xl, shadow-modal.

🕳️ Empty States — padrão para conteúdo vazio

🏅

Nenhum badge ainda Conquiste badges completando atividades e eventos.

📅

Nenhuma inscrição Explore nossos eventos e participe!

Regra: Empty states sempre com borda tracejada, ícone circular em neutral-100, título neutro-700, subtexto neutro-400. Quando tiver ação possível, incluir botão primary. Texto simples centralizado sem borda (estilo Eventos atual) é fraco — use sempre o padrão com borda tracejada.

Inconsistências Mapeadas / o que o DS resolve

❌ Problemas Atuais

Sidebar ativa inconsistente

One usa rosa #FF2B5F, Estágios usa verde #17A460. Deve ser sempre --color-semantic-primary (navy).

Botão "Voltar" vermelho

Vermelho = destrutivo/perigo. Navegação de volta deve ser ghost/outlined neutral.

Input styles diferentes

Login usa outline, Estágios usa underline. Padrão definido: outline com border-radius-lg.

CTA principal varia de cor

Login usa verde, One usa azul, Estágios usa verde novamente. Deve ser sempre --color-semantic-primary.

Info banner sem cor semântica

Banners ⓘ usam fundo cinza neutro. Deve usar --color-semantic-info-light com borda azul.

Títulos de seção sem padrão

Conquistas usa #254AB9, One usa #191919. Deve ser sempre --color-navy-800.

✅ Definições do DS

Sidebar item ativo

Fundo: navy-800 com tint branco 10%. Ícone e texto: white. Indicador esquerdo: 3px sólido green-400.

Botão voltar/secundário

Variante ghost: borda 1px neutral-300, texto neutral-700. Hover: bg neutral-100.

Inputs

Sempre outline: border 1px neutral-300, radius-lg. Focus: border 2px navy-600 + shadow azul 0 0 0 3px rgba(37,74,185,0.15).

Botão primário único

bg: navy-800, hover: navy-700, texto: white, radius: full. Variante CTA marketing: pink-500.

Alertas semânticos

Info: bg info-light + border-left 3px teal. Warning: bg warning-light + border-left yellow. Danger: bg danger-light + border-left red.

Títulos de seção

H1 páginas: navy-800, bold, tracking-tight. H2 seções: navy-800, semibold. Subtítulos: neutral-600, regular.