Cores

Paleta extraída do site oficial. 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

4xl · 3rem · 48px
Black 900

São Pier Giorgio

3xl · 2.25rem · 36px
Black 900

Junte-se à Missão

2xl · 1.875rem · 30px
Bold 700

Apostolado no Brasil

xl · 1.5rem · 24px
Bold 700

Sua Vida · Sua Fé

lg · 1.25rem · 20px
Medium 500

Pier Giorgio Frassati foi canonizado

md · 1.125rem · 18px
Regular 400

O Apostolado existe para tornar conhecida e vivida a vida de São Pier Giorgio.

base · 1rem · 16px
Regular 400

Revela como uma vida simples pode se tornar extraordinária quando vivida para Deus.

sm · 0.875rem · 14px
Regular 400

Ao rezar esta novena, coloque diante de Deus suas intenções e caminhe com São Frassati.

xs · 0.75rem · 12px
Medium 500

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

Badges

Canonizado 2025 Beato Blog Novo

Formulários

Nome completo

E-mail

Nunca compartilharemos seu e-mail.

Mensagem

Estado com erro

Este campo é obrigatório.

Formulários — Checkbox, Radio & Select

Checkbox

Receber novidades do Apostolado Receber materiais de formação Receber avisos de eventos

Radio

Leigo Seminarista Religioso(a)

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)

Novena

Ao rezar esta novena, coloque diante de Deus suas intenções.

Novena »

Cronologia

Revela como uma vida simples pode se tornar extraordinária.

Cronologia »

Relíquia

Não distribuímos relíquias. Para receber um santinho, entre em contato.

Relíquia »

Materiais

Os conteúdos favorecem a oração, a formação e o compromisso com o Evangelho.

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ã."

São Pier Giorgio Frassati

Em carta a um amigo íntimo

Canonizado em 2025

"A Eucaristia é o meu sustento. Sem ela, como poderia eu suportar tantos sofrimentos e servir a tantos irmãos?"

São Pier Giorgio Frassati

Sobre a vida espiritual

"Francisco nos apresentou Pier Giorgio como o santo da porta ao lado — alguém próximo, real, que viveu o Evangelho no cotidiano."

Apostolado Frassati Brasil

Sobre o legado do santo

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."

Papa Leão XIV

Homilia da Canonização — 7 set. 2025

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.

Pier Giorgio Frassati — retrato oficial

Turim, Itália

Canonização — 2025

Família Frassati

Paixão pelas montanhas

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

Navegação

Header fixo com logo, links de navegação e botão de destaque. Item ativo em laranja.

Frassati

Início Conheça-o Espiritualidade Blog As Cartas Apostolado

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

Rodapé

Apostolado São Pier Giorgio Frassati — Brasil
Caixa Postal: —

📧 [email protected]

Navegação

Recursos

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;
}
    

Design SystemFrassati Brasil

Cores

Cores Primárias

Cores Secundárias

Neutros

Tipografia

Escala Tipográfica

Pesos Disponíveis

Espaçamento

Bordas & Sombras

Border Radius

Sombras

Botões

Badges

Formulários

Formulários — Checkbox, Radio & Select

Alertas & Banners

Alertas inline

Banners — formato expandido

Toast — notificação compacta

Breadcrumb

Paginação

Cards

Cards de Conteúdo

Pier Giorgio e a capacidade de animar os desanimados

Junte-se à Missão

Da Beatificação à Canonização

Cards Informativos (Novena / Cronologia / Relíquia / Materiais)

Citações

Accordion / FAQ

Tabs

Variante linha

Variante pill

Galeria de Imagens

Card de Vídeo

Navegação

Hero / Banner

São Pier GiorgioFrassati

Seções de Conteúdo

Junte-se à Missão

Os Papas e Frassati

Grid & Layout

Rodapé

Navegação

Recursos

Números & Stat Cards

Variante 1 — Com linha de acento e ícone

Variante 2 — Sólida colorida

Variante 3 — Horizontal / Inline

Timeline

Variante 1 — Vertical centralizada (desktop)

Variante 2 — Vertical lateral (mobile-friendly)

Variante 3 — Horizontal com scroll

Animações

Entradas de Elemento

Animações Contínuas

Loading States

Progress Bar Animada

Scroll Reveal — Demonstração

Delays Escalonados — Stagger

Guia de Uso — Elementor

Tokens CSS — Referência

Design System
Frassati Brasil

São Pier Giorgio
Frassati