Pier Giorgio Frassati e a capacidade de animar os desanimados
A consciência sobre a prevenção ao suicídio deve ser permanente. Na vida dos santos e beatos, vemos a busca pelo sentido de viver!
v1.1
2026
Design System
Frassati Brasil
por Flávio Medeiros | Âgência Veronikas
Guia completo de fundamentos visuais, componentes e padrões do Apostolado São Pier Giorgio Frassati — Brasil.
Cores
O laranja é a cor de marca central; verde e azul complementam seções e estados.
Cores Primárias
Copiar
Laranja Principal
--color-laranja
#F28C28
Copiar
Laranja Escuro
--color-laranja-escuro
#D97018
Copiar
Laranja Claro
--color-laranja-claro
#FAB96A
Copiar
Laranja Pale
--color-laranja-pale
#FEF3E2
Cores Secundárias
Copiar
Verde
--color-verde
#5B8A3C
Copiar
Verde Claro
--color-verde-claro
#8AB86E
Copiar
Verde Pale
--color-verde-pale
#EAF3E2
Copiar
Azul
--color-azul
#2E6DA4
Copiar
Azul Claro
--color-azul-claro
#5A9FD4
Copiar
Azul Pale
--color-azul-pale
#E6F0FA
Neutros
Copiar
Branco
--color-branco
#FFFFFF
Copiar
Cinza 100
--color-cinza-100
#F8F8F6
Copiar
Cinza 200
--color-cinza-200
#EFEFED
Copiar
Cinza 300
--color-cinza-300
#D8D8D4
Copiar
Cinza 500
--color-cinza-500
#8A8A82
Copiar
Cinza 700
--color-cinza-700
#444440
Copiar
Cinza 900
--color-cinza-900
#1A1A16
Tipografia
Família única Roboto em todos os pesos. Hierarquia clara entre títulos, textos de interface e corpo.
Escala Tipográfica
São Pier Giorgio
Junte-se à Missão
Apostolado no Brasil
Sua Vida · Sua Fé
Pier Giorgio Frassati foi canonizado
O Apostolado existe para tornar conhecida e vivida a vida de São Pier Giorgio.
Revela como uma vida simples pode se tornar extraordinária quando vivida para Deus.
Ao rezar esta novena, coloque diante de Deus suas intenções e caminhe com São Frassati.
CANONIZADO · 07 SETEMBRO 2025
Pesos Disponíveis
300 · Light
Pier Giorgio Frassati
400 · Regular
Pier Giorgio Frassati
500 · Medium
Pier Giorgio Frassati
700 · Bold
Pier Giorgio Frassati
900 · Black
Pier Giorgio Frassati
Espaçamento
Sistema de espaçamento baseado em múltiplos de 4px para consistência em paddings, margins e gaps.
--space-1 · 4px
0.25rem
--space-2 · 8px
0.5rem
--space-3 · 12px
0.75rem
--space-4 · 16px
1rem
--space-5 · 20px
1.25rem
--space-6 · 24px
1.5rem
--space-8 · 32px
2rem
--space-10 · 40px
2.5rem
--space-12 · 48px
3rem
--space-16 · 64px
4rem
--space-20 · 80px
5rem
Bordas & Sombras
Border Radius
sm
4px
md
8px
lg
12px
xl
16px
2xl
24px
full
9999px
Sombras
shadow-sm
0 1px 3px rgba(0,0,0,.08)
shadow-md
0 4px 12px rgba(0,0,0,.12)
shadow-lg
0 8px 24px rgba(0,0,0,.16)
shadow-xl
0 16px 48px rgba(0,0,0,.20)
Botões
Todos os botões usam border-radius full (pill). O CTA primário é sempre laranja.
Variantes — passe o mouse para ver hover e opções de cópia
Ghost Invertido — para fundos escuros ou coloridos
Tamanhos
Com ícone
Padrão a evitar — contraste insuficiente
Fundo creme + texto branco = contraste 1.3:1
Ghost-inv: borda branca → fundo branco no hover
Formulários
Nunca compartilharemos seu e-mail.
Este campo é obrigatório.
Formulários — Checkbox, Radio & Select
Checkbox
Radio
Select
Alertas & Banners
Quatro variantes de cor + dois formatos (inline e banner). Barra lateral de acento, ícone circular e botão de fechar.
Alertas inline
Sobre relíquias
Não distribuímos relíquias. Para receber um santinho com a oração de São Frassati, entre em contato conosco pelo e-mail.
Entrar em contato
Mensagem enviada com sucesso!
Obrigado pelo contato. Nossa equipe retornará em breve.
Local de Missa alterado
A Missa de Comemoração da Canonização terá local alterado. Confira o calendário atualizado no site.
Ver calendário
Erro no envio
Não foi possível enviar sua mensagem. Tente novamente ou use o e-mail diretamente.
Banners — formato expandido
Toast — notificação compacta
Material baixado!
Sessão expirando em 2 min.
Breadcrumb
Navegação em páginas internas. Três variantes: padrão, com acento e dark para fundos coloridos.
Padrão — pill com hover laranja
Com acento — item atual em laranja
Dark — para uso sobre fundos escuros
Paginação
Para o Blog e listagens de conteúdo.
Cards
Cards de conteúdo, cards de destaque colorido e cards informativos (Novena, Cronologia, Relíquia, Materiais).
Cards de Conteúdo
Blog
Pier Giorgio e a capacidade de animar os desanimados
Conscientização sobre a prevenção ao suicídio deve ser permanente.
Destaque
Junte-se à Missão
O Apostolado São Pier Giorgio Frassati no Brasil existe para tornar conhecida e vivida a vida do Santo.
Os Papas
Da Beatificação à Canonização
Paulo VI, João Paulo II, Bento XVI, Francisco e Leão XIV e o percurso da santidade de Frassati.
Cards Informativos (Novena / Cronologia / Relíquia / Materiais)
Citações
Para frases de Frassati, dos Papas e das Cartas. Quatro variantes com identidade visual forte.
"Subir, sempre subir, nunca descer. Assim é como devemos viver a vida cristã."
Canonizado em 2025
"A Eucaristia é o meu sustento. Sem ela, como poderia eu suportar tantos sofrimentos e servir a tantos irmãos?"
"Francisco nos apresentou Pier Giorgio como o santo da porta ao lado — alguém próximo, real, que viveu o Evangelho no cotidiano."
Papa Leão XIV
"Pier Giorgio Frassati é um modelo de santidade para os jovens do século XXI — uma vida breve, mas plena de Deus e de caridade."
Accordion / FAQ
Para perguntas frequentes, informações sobre relíquias, doações e o Apostolado. Abre com animação suave e barra lateral laranja.
Entre em contato conosco pelo e-mail [email protected]. Não distribuímos relíquias, mas enviamos o santinho com a oração mediante solicitação. Atendemos todo o Brasil.
As doações sustentam a missão de difundir a vida e espiritualidade de São Pier Giorgio Frassati em todo o Brasil. Acesse a página de Doação para mais informações sobre formas de contribuir.
Sim! O Papa Leão XIV canonizou São Pier Giorgio Frassati em 7 de setembro de 2025, na Praça de São Pedro, junto com Carlo Acutis. É o reconhecimento oficial da santidade universal de Pier Giorgio.
Na seção Materiais do site você encontra conteúdos que favorecem a oração, a formação e o compromisso com o Evangelho — todos disponíveis gratuitamente para download.
Entre em contato pelo e-mail para saber sobre grupos e iniciativas do Apostolado na sua cidade. Nossa missão é tornar conhecida e vivida a espiritualidade de São Pier Giorgio em todo o Brasil.
Tabs
Para organizar "Sua Vida / Sua Fé / Sua Páscoa / Sua Canonização" e outras seções multifacetadas.
Variante linha
Pier Giorgio Michelangelo Frassati nasceu em Turim, Itália, em 6 de abril de 1901. Sua mãe, Adelaide Ametis, era pintora. Seu pai, Alfredo Frassati, foi jornalista e embaixador. Criou-se num lar de posses, mas seu coração estava sempre com os pobres.
Pier Giorgio recebeu sua primeira comunhão em 19 de junho de 1911, aos 10 anos de idade. Aos 12 anos, começou a comungar diariamente. A Eucaristia era o centro de sua vida espiritual e a força que o movia a servir os mais necessitados.
Pier Giorgio morreu de poliomielite em 4 de julho de 1925, na casa da família em Turim. Acredita-se que ele tenha contraído a doença durante seus serviços aos pobres. Sua morte revelou ao mundo uma dimensão de caridade que poucos conheciam.
Pier Giorgio Frassati foi canonizado pelo Papa Leão XIV em 7 de setembro de 2025, na Praça de São Pedro, junto com Carlo Acutis. O Papa Francisco o havia apresentado como "santo da porta ao lado", confirmando sua santidade universal.
Variante pill
Ao rezar esta novena, coloque diante de Deus suas intenções e caminhe com São Frassati, aprendendo a viver o Evangelho.
Revela como uma vida simples pode se tornar extraordinária quando vivida para Deus. É um convite a viver o Evangelho.
Os conteúdos aqui reunidos favorecem a oração, a formação e o compromisso com o Evangelho. Faça o download.
Galeria de Imagens
Grid com lightbox para fotos históricas de Frassati. Clique em um item para abrir o lightbox.
Card de Vídeo
Para o player da página inicial e vídeos do Blog.
21:46
Apostolado
A vida de São Pier Giorgio Frassati
Hero / Banner
Canonizado em 07 de Setembro de 2025
São Pier Giorgio
Frassati
Revela como uma vida simples pode se tornar extraordinária quando vivida para Deus. É um convite a viver o Evangelho.
Seções de Conteúdo
Strips coloridos de laranja e verde para CTAs de seção. Usados com texto à esquerda e ação à direita.
Junte-se à Missão
O Apostolado São Pier Giorgio Frassati no Brasil existe para tornar conhecida e vivida a vida do Santo.
Os Papas e Frassati
Leão XIV confirmou sua santidade universal ao canonizá-lo em 2025.
Grid & Layout
Container máximo de 1200px. Grid de 2 colunas para texto + imagem; grid de 4 colunas para cards informativos.
Header / Hero — largura total
Texto / Conteúdo
Imagem / Foto
Novena
Cronologia
Relíquia
Materiais
Footer — largura total
Números & Stat Cards
Cards de destaque para estatísticas, marcos históricos e dados do Apostolado. Três variantes com contadores animados.
Variante 1 — Com linha de acento e ícone
0+
Jovens impactados pelo Apostolado
Em todo o Brasil
0 anos
Desde o nascimento de Frassati
Turim, 6 de abril de 1901
0 papas
Papas que exaltaram Frassati
De Paulo VI a Leão XIV
0%
Dedicado ao próximo
Até o fim de sua vida
Variante 2 — Sólida colorida
2025
Ano da Canonização
7 de setembro, Praça de São Pedro
0 anos
Idade ao falecer
4 de julho de 1925
0
Ano do falecimento
Poliomielite — Turim
Variante 3 — Horizontal / Inline
0
Ano da Primeira Comunhão
0
Ano da Beatificação — João Paulo II
0
Ano da Canonização — Leão XIV
Timeline
Três variantes para contar a história de vida de Frassati. Ideal para a página de Cronologia.
Variante 1 — Vertical centralizada (desktop)
1901
Nascimento em Turim
Pier Giorgio Michelangelo Frassati nasce em 6 de abril, filho de Adelaide Ametis e Alfredo Frassati.
1911
Primeira Comunhão
Recebe a Primeira Comunhão em 19 de junho. Início da intensa vida espiritual e eucarística.
Marco
1922
Ingressa no Terceiro Grau Dominicano
Aprofunda sua espiritualidade e compromisso com os pobres como terciário dominicano.
1925
Falecimento
Falece em 4 de julho de poliomielite, contraída ao cuidar de um amigo doente. Tinha 24 anos.
Destaque
2025
Canonização pelo Papa Leão XIV
Em 7 de setembro, na Praça de São Pedro, é proclamado santo universal junto com Carlo Acutis.
Variante 2 — Vertical lateral (mobile-friendly)
1901
Nascimento em Turim
6 de abril — Pier Giorgio nasce na Itália.
1911
Primeira Comunhão
Inicia comunhão diária a partir dos 12 anos.
1922
Terceiro Grau Dominicano
Aprofunda espiritualidade e serviço aos pobres.
1925
Falecimento
4 de julho — poliomielite, aos 24 anos.
1990
Beatificação
João Paulo II o beatifica em 20 de maio.
2025
Canonização
Leão XIV o canoniza em 7 de setembro.
Variante 3 — Horizontal com scroll
1901
Nascimento
Turim, Itália
1911
1ª Comunhão
19 de junho
1918
Engenharia
Politécnico de Turim
1922
Dominicano
Terceiro Grau
1925
Falecimento
4 de julho
1990
Beatificação
João Paulo II
2025
Canonização
Leão XIV
Animações
Keyframes, classes utilitárias e padrões de motion. Passe o mouse sobre cada card para visualizar a animação.
Entradas de Elemento
Fade In Up
.anim-fade-up
Fade In
.anim-fade
Scale In
.anim-scale
Slide Left
.anim-slide-left
Slide Right
.anim-slide-right
Animações Contínuas
Float
.anim-float
Heartbeat
.anim-heartbeat
Spinner
.spinner
Pulse
.anim-pulse
Loading States
.spinner
.dots
.shimmer — skeleton loading
Progress Bar Animada
Laranja — 78%
Verde — 55%
Azul — 91%
Scroll Reveal — Demonstração
Use as classes .reveal, .reveal-left e .reveal-right em qualquer elemento. O JS com IntersectionObserver adiciona .is-visible ao entrar na viewport.
.reveal
fade + up
.reveal-left
fade + left
.reveal-right
fade + right
Delays Escalonados — Stagger
Combine .anim-fade-up com .delay-N para efeito cascata entre irmãos.
Guia de Uso — Elementor
Como aplicar as classes CSS do Design System nos widgets do Elementor. Cole a classe no campo CSS ID / Classes CSS de cada widget.
Widget ElementorClasse CSSOnde aplicar
btn btn--primary
Campo "Classes CSS" no widget Botão. Remova o estilo padrão do Elementor.
reveal
No container pai. A seção entra com animação ao fazer scroll.
anim-fade-up
No widget Título para entrada animada.
hover-lift
No widget Imagem para efeito de elevação no hover.
stat-card
No container do card. Defina
--stat-accent no CSS do elemento.blockquote
No widget Texto ou HTML com a estrutura de blockquote.
alert alert--warning
No widget HTML. Substitua a variante conforme o tipo.
accordion
No widget HTML com a estrutura completa. JS já incluso no CSS global.
Como adicionar CSS personalizado no Elementor
1
Painel do WordPress → Elementor → Configurações → CSS Personalizado — cole os tokens e classes globais aqui.
2
Para CSS por widget: clique no widget → aba Avançado → CSS Personalizado. Use selector para referenciar o elemento.
3
Para classes do DS: campo Avançado → Classes CSS no widget. Basta digitar a classe sem o ponto (ex: btn btn--primary).
O arquivo frassati-custom.css com todos os tokens e componentes pode ser enfileirado via wp_enqueue_style() no functions.php do tema filho.
Tokens CSS — Referência
Copie e cole o bloco abaixo no início do seu CSS global para ter acesso a todos os tokens do Design System.
/* ── APOSTOLADO FRASSATI — DESIGN SYSTEM TOKENS ── */
:root {
/* Cores Primárias */
--color-laranja: #F28C28;
--color-laranja-escuro: #D97018;
--color-laranja-claro: #FAB96A;
--color-laranja-pale: #FEF3E2;
/* Cores Secundárias */
--color-verde: #5B8A3C;
--color-verde-claro: #8AB86E;
--color-verde-pale: #EAF3E2;
--color-azul: #2E6DA4;
--color-azul-claro: #5A9FD4;
--color-azul-pale: #E6F0FA;
/* Neutros */
--color-branco: #FFFFFF;
--color-cinza-100: #F8F8F6;
--color-cinza-200: #EFEFED;
--color-cinza-300: #D8D8D4;
--color-cinza-500: #8A8A82;
--color-cinza-700: #444440;
--color-cinza-900: #1A1A16;
/* Tipografia */
--font-family: 'Roboto', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-black: 900;
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-normal: 1.6;
--line-height-relaxed: 1.8;
/* Espaçamento */
--space-1: 0.25rem; --space-2: 0.5rem;
--space-3: 0.75rem; --space-4: 1rem;
--space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem;
--space-12: 3rem; --space-16: 4rem;
--space-20: 5rem;
/* Border Radius */
--radius-sm: 4px; --radius-md: 8px;
--radius-lg: 12px; --radius-xl: 16px;
--radius-2xl: 24px; --radius-full: 9999px;
/* Sombras */
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
--shadow-md: 0 4px 12px rgba(0,0,0,.12);
--shadow-lg: 0 8px 24px rgba(0,0,0,.16);
--shadow-xl: 0 16px 48px rgba(0,0,0,.20);
/* Transições */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 400ms ease;
/* Layout */
--container-max: 1200px;
}
Badges & Tags
Badges para categorizar status. Tags (chips) para filtros interativos do blog e seções.
Badges
Destaque
Publicado
Informativo
Rascunho
v1.1
Novo
Tags / Category Chips — filtros do blog
Cards de Blog / Post
Três variantes: padrão (grid), featured (horizontal destaque) e compacto (lista). Inclui thumbnail, categoria, data, tempo de leitura e excerpt.
Padrão — grid 3 colunas
Os Papas e São Pier Giorgio Frassati — do Concílio à Canonização
Paulo VI, João Paulo II, Bento XVI, Francisco e Leão XIV: como cada pontífice enxergou e promoveu a figura do jovem santo de Turim.
100 anos da morte de Pier Giorgio: uma vida breve, uma chama eterna
Morreu jovem, mas deixou um legado que atravessa gerações. Neste centenário, recordamos quem foi Pier Giorgio Frassati.
Featured — horizontal (post em destaque)
Pier Giorgio Frassati é canonizado pelo Papa Leão XIV na Praça de São Pedro
Em 7 de setembro de 2025, junto com Carlo Acutis, Pier Giorgio Frassati foi proclamado santo perante milhares de fiéis. O jovem de Turim torna-se o primeiro santo canonizado do século XXI com ligação ao Brasil.
Compact — lista de posts recentes
Centenário da morte de Pier Giorgio
Novena em preparação para a canonização
As cartas de Pier Giorgio à família
Search Bar
Campo de busca estilizado para o blog e páginas internas.
Padrão
Compacta (só ícone)
Dark — sobre fundo escuro
Tabela
Para listar papas, cronologias, datas históricas e comparações.
| Papa | Período | Relação com Frassati | Destaque |
|---|---|---|---|
| Paulo VI | 1963–1978 | Ofereceu horizonte conciliar que valorizou a santidade leiga | Beatificação iniciada |
| João Paulo II | 1978–2005 | Beatificou-o e o propôs como modelo para os jovens | Beatificação 1990 |
| Bento XVI | 2005–2013 | Destacou a unidade entre fé, Eucaristia e caridade | — |
| Francisco | 2013–2025 | Apresentou-o como "o santo da porta ao lado" | — |
| Leão XIV | 2025–presente | Confirmou sua santidade universal ao canonizá-lo | Canonização 7 set 2025 |
Tooltip
Para explicar termos litúrgicos e contextos históricos no blog. Acessível via hover e foco de teclado.
Exemplos em contexto
Pier Giorgio recebeu a Eucaristia diariamente O sacramento da presença real de Cristo — pão e vinho consagrados na Missa. e viveu a espiritualidade dominicana Espiritualidade da Ordem dos Pregadores (O.P.), fundada por São Domingos, centrada na contemplação e pregação. com profundidade.
Variantes de posição
Topo (padrão)
Tooltip acima do elemento
Embaixo
Tooltip abaixo do elemento
Laranja
Variante laranja — para destaque
Skeleton Loader
Cards com animação shimmer para exibir enquanto o conteúdo carrega via AJAX ou REST API do WordPress.
Social Share Buttons
Para compartilhar posts e a canonização. O botão "Copiar" usa a Clipboard API com fallback.