IUCIUC Design System

The Global
Cooperative

Sistema de design da IUC — International Union of Cooperatives. Organic Professionalism aplicado a uma experiência editorial de alto nível, refletindo autoridade acadêmica e soberania institucional.

4

Cores Institucionais

11

Tokens Tipográficos

5

Níveis de Superfície

4

Curvas de Motion

GOVERNANÇA COOPERATIVAINTERCOOPERAÇÃO GLOBALEDUCAÇÃO EXECUTIVASOBERANIA INSTITUCIONAL7° PRINCÍPIOINOVAÇÃO ACADÊMICAFORMAÇÃO DE LÍDERESCOOPERATIVISMO DE CRÉDITO
GOVERNANÇA COOPERATIVAINTERCOOPERAÇÃO GLOBALEDUCAÇÃO EXECUTIVASOBERANIA INSTITUCIONAL7° PRINCÍPIOINOVAÇÃO ACADÊMICAFORMAÇÃO DE LÍDERESCOOPERATIVISMO DE CRÉDITO
GOVERNANÇA COOPERATIVAINTERCOOPERAÇÃO GLOBALEDUCAÇÃO EXECUTIVASOBERANIA INSTITUCIONAL7° PRINCÍPIOINOVAÇÃO ACADÊMICAFORMAÇÃO DE LÍDERESCOOPERATIVISMO DE CRÉDITO
GOVERNANÇA COOPERATIVAINTERCOOPERAÇÃO GLOBALEDUCAÇÃO EXECUTIVASOBERANIA INSTITUCIONAL7° PRINCÍPIOINOVAÇÃO ACADÊMICAFORMAÇÃO DE LÍDERESCOOPERATIVISMO DE CRÉDITO

brand

Marca IUC

International Union of Cooperatives. Versões, variações, espaçamento de proteção e regras de aplicação do símbolo e lockups da marca.

IUC

Locomarca

Favicon, app icon, avatares, espaços reduzidos. Usar sozinha — sem texto ao lado. Mínimo: 24×24px.

IUC

Lockup Horizontal

Navbar, cabeçalhos, assinatura de e-mail, documentos. Versão primária de uso.

IUC

Lockup Vertical

Capas de relatórios, apresentações, materiais impressos e certificados.

Variantes de cor

IUC

Positivo

Fundo claro — uso padrão

IUC

Negativo Verde

Fundo verde soberano

IUC

Negativo Azul

Fundo azul institucional

IUC

Fundo Escuro

Fundos pretos e escuros

Espaço de Proteção

½x
½x
½x
½x
IUC

Manter ao redor da logo uma área de proteção equivalente a ½x, onde x é a altura do símbolo. Nenhum elemento externo deve invadir essa zona.

Tamanhos Mínimos

Símbolo digital

Favicon, badge

24px

Símbolo impresso

Rodapé, carimbos

8mm

Lockup horizontal

Navbar, e-mail

120px

Lockup vertical

Documentos

80px

Usos Proibidos

Não distorcer

Nunca alterar proporções

Não recolorizar

Apenas as variantes aprovadas

Não aplicar sombra

A marca não usa drop shadow

Não invadir zona

Respeitar o espaço de proteção

Arquivos para exportar

iuc-symbol.svg
iuc-horizontal.svg
iuc-vertical.svg
iuc-symbol-white.svg
iuc-horizontal-white.svg
iuc-symbol-mono.svg
favicon.ico
iuc-icon-512.png

Exporte em SVG do seu editor (Figma / Illustrator) e PNG @2x para cada tamanho. Salve em src/assets/brand/.

color palette

Paleta de Cores

Quatro cores institucionais derivadas do rebranding da IUC. Aplicação sofisticada e consistente em todos os meios.

Verde Soberano

#0D5C35

Primaria — logotipo, headers, CTAs, selos de autoridade

Azul Institucional

#2171B5

Secundaria — trust, financeiro, conexoes internacionais

Cinza Neutro

#757575

Terciaria — labels, metadados, textos de apoio

Branco Gelo

#F8F9FA

Neutral — backgrounds, respiro, areas de leitura

Verde Tint

#0E7A42

Gradiente hero

Error

#BA1A1A

Erros (sofisticado)

Text Primary

#1A1A1A

Corpo de texto

Text Secondary

#5A5A5A

Texto secundario

Text Muted

#757575

Labels e metadata

Focus Ring

rgba(13,92,53,0.6)

Foco acessivel

surfaces

Hierarquia de Superfícies

Tonal layering ao invés de bordas. Cada nível cria profundidade natural sem linhas estruturais.

surface

Base — Canvas principal

#FFFFFF
Level 0

surface-dim

Areas de leitura confortavel

#F8F9FA
Level 1

surface-container-low

Secoes secundarias

#F1F3F5
Level 2

surface-container-high

Cards elevados

#E8EAED
Level 3

surface-container-highest

Elementos flutuantes

#DFE1E5
Level 4

No-Line Rule

Bordas de 1px são proibidas para seccionar conteúdo. Use transições tonais, mudanças de background e espaçamento generoso.

typography

Tipografia

Manrope exclusivamente. Proporções geométricas equilibradas que oferecem autoridade em display e legibilidade em body.

display-lg

3.5rem / 700

Governança Soberana

Hero headers, anuncios

display-md

2.5rem / 700

Intercooperação Global

Titulos de secao

headline-lg

2rem / 600

Formação de Lideranças

Titulos de pagina

headline-sm

1.5rem / 600

MBA em Gestao Cooperativa

Titulos de cards

title-lg

1.25rem / 600

Programa de Formação Continuada

Subtitulos

title-md

1rem / 600

Missao Internacional — Alemanha 2026

Titulos de componentes

body-lg

1rem / 400

A IUC conecta cooperativas brasileiras a centros de inovação na Europa e América do Norte, transformando conhecimento em prosperidade compartilhada.

Corpo principal

body-md

0.875rem / 400

Nosso corpo docente é formado por PhDs e Doutores que atuam no dia a dia das maiores cooperativas do Brasil.

Corpo secundario

label-lg

0.875rem / 600

INSCREVA-SE AGORA

Botoes e labels

label-md

0.75rem / 500

GOVERNANÇA COOPERATIVA

Captions e tags

label-sm

0.75rem / 500

NOVO

Badges (min 12px)

buttons

Botoes

Três variantes com interações profissionais: hover com shift de brilho, press com scale 0.97.

Primary — Verde Soberano

Secondary — Azul Institucional

Ghost — Transparente

Destructive — Error Token

inputs

Campos de Entrada

Background surface-container-low, borda sutil para WCAG 1.4.11. Foco com Verde Soberano.

Documento invalido. Verifique o formato.

Máximo 500 caracteres

cards

Cards

Sem linhas divisórias. Separação por tonal layering, espaçamento generoso e hover interativo.

FORMACAO

MBA em Gestao Cooperativa

480h — Reconhecido pelo MEC

O único MBA do Brasil feito por uma cooperativa. Corpo docente de PhDs atuantes no mercado.

Saiba mais
MISSAO

Missão Alemanha 2026

Berlim — Março 2026

Benchmarking com as maiores cooperativas de crédito europeias. Rabobank, DZ Bank e Bundesbank.

Saiba mais
GOVERNANÇA

PFGC — Programa de Formação

80h — Alto Escalão

Formação exclusiva para Conselheiros e Presidentes. Governança Cooperativa aplicada com rigor executivo.

Saiba mais

motion

Motion & Animacao

Quatro tokens de duração + três curvas de easing. Entradas escalonadas com 60ms de delay entre irmãos.

duration-subtle

150ms

Hover, focus, toggle

duration-standard

300ms

Expand/collapse, tabs

duration-expressive

450ms

Entrada de cards

duration-formal

700ms

Hero reveals

easing-standard

cubic-bezier(0.2, 0, 0.38, 0.9)

Propósito geral

easing-enter

cubic-bezier(0, 0, 0.38, 0.9)

Elementos entrando

easing-exit

cubic-bezier(0.2, 0, 1, 0.9)

Elementos saindo

Staggered Entrance Demo — 60ms entre irmãos

+0ms
+60ms
+120ms
+180ms
+240ms
+300ms
+360ms
+420ms

icons

Sistema de Icones

Lucide para interface funcional. Phosphor (duotone) para hero sections e elementos decorativos de destaque.

Lucide — Icones Funcionais

Search
Settings
Bell
User
Globe
BookOpen
Building
Users
Trending
Shield

Tamanhos: 16px (inline), 20px (botões), 24px (navegação). Cor herda do pai ou usa Cinza Neutro.

Phosphor — Icones Decorativos (duotone)

Globe
Bank
Education
Handshake
Buildings
Growth
Crown
Academic

Tamanhos: 32-48px (cards), 64px+ (hero). Cor Verde Soberano ou Azul Institucional. Peso sempre duotone.

glass gradient

Glass & Gradient

Gradientes sutis monocromáticos para hero. Glassmorphism para overlays e navegação flutuante.

Hero Gradient Demo

Conectamos conhecimento, proposito e prosperidade.

O 7° Princípio do Cooperativismo — a Intercooperação — aplicado com rigor executivo.

IUC
Glassmorphism Nav
rgba(255,255,255,0.75) · backdrop-blur: 12px

mission tracker

Mission Tracker

Componente especial representando a rede cooperativa global. Linha Azul Institucional com nós Verde Soberano.

Missão Alemanha 2026

Em Andamento
Jan 2026
Fev 2026
Mar 2026
Abr 2026
Abr 2026
Inscrição
Documentação
Preparação
Embarque
Retorno

dos donts

Do's and Don'ts

Regras inegociáveis do design system. Cada decisão de design deve passar o teste de credibilidade.

Do's

  • Embrace white space — margens generosas sinalizam confiança
  • Use layouts assimétricos em hero sections para um editorial feel
  • Use spacing-16 e spacing-20 para margens entre seções
  • Verde Soberano para governança, Azul para contextos internacionais
  • Mantenha estética clara e arejada — superfícies claras = transparência

Don'ts

  • Bordas de alta opacidade em containers — use tonal layering
  • Fontes além de Manrope — consistência e identidade
  • Interface lotada — aumente o spacing em dois steps
  • Vermelho saturado para erros — use #BA1A1A
  • Gradientes multicoloridos — a IUC comunica solidez
  • Dark backgrounds como padrão — o sistema é light-first

login mockup

Tela de Login

Mockup de referência para a página de acesso à plataforma IUC. Split-screen: identidade institucional à esquerda, formulário à direita.

plataforma.iucoop.org/login
IUC

Plataforma de Gestão

Acesso Seguro ao Ecossistema Cooperativo

Governança, educação e inteligência institucional em um único ambiente.

ISO 27001

Certificado

256-bit

Criptografia

SSO

Suportado

Bem-vindo de volta

Acesse sua conta

Use suas credenciais institucionais para continuar.

ou

Precisa de acesso? Contate seu administrador

O Teste Final

“Isso passa credibilidade para um Presidente de cooperativa que movimenta R$ 5 bilhões?”

Se parece app de cursos, errado. Se parece relatório de gestão de um banco cooperativo de elite, certo.