T. U.Senhora do Rosário
Documentação Viva · v0.2

Orixá Design System

O guia oficial de estilo e biblioteca de componentes do T. U. Senhora do Rosário. Construído sob a estética do Sacred Modernism, combina tradição ancestral com interfaces digitais limpas e imersivas. Esta página é renderizada com os próprios tokens --color-* do projeto — tudo aqui é fonte da verdade.

4 famílias aprovadas3 famílias funcionais provisórias77 tokens de cor (7 × 11)20 roles semânticos

Introdução ao Estilo

A identidade do T. U. Senhora do Rosário é fundamentada na união de materiais rústicos e acolhimento ancestral com o minimalismo contemporâneo. No ambiente digital, isso se reflete em:

Sacred Modernism

Uso equilibrado de tipografia de exibição serifada (Cormorant Garamond) para títulos com alto contraste em relação a uma tipografia geométrica sans-serif corporativa (Inter) nos textos de leitura e botões.

Dark Glassmorphism

Painéis escuros translúcidos com bordas ultra finas iluminadas pelo mouse (Efeito Vela) criam um tom intimista de solenidade espiritual e recolhimento de axé.

Famílias de Cor (Foundation Tokens)

Fonte da verdade: design-system/foundation/color.json. O sistema é composto por 4 famílias aprovadas (marca + superfícies) e 4 famílias funcionais provisórias (success / error / warning / info). Cada escala possui 11 tons (050 → 950) com anchor marcado, derivado matematicamente em OKLCH.

AprovadaProvisóriaAnchor (cor-âncora)

Aprovadas

4 famílias · status: approved

Terracotta

Aprovadaanchor · 600Primary · brand

Família principal da marca, derivada do terracota profundo documentado. Usada para CTAs primários, foco dourado ancestral e estados ativos.

Variáveis CSS: --color-terracotta-{grade} · Fonte: Documentação do projeto

050#FFF4F1
100#FFE4DE
200#F8CABF
300#E9A89A
400#D58776
500#BE6755
ANCHOR
600#8B3A2A
700#7F3627
800#5E2317
900#3D1109
950#1F0401

Ancestral Gold

Aprovadaanchor · 500Accent · highlight

Família de destaque, derivada do dourado ancestral documentado. Realces, ícones rituais, brilhos, gradientes com parcimônia.

Variáveis CSS: --color-ancestral-gold-{grade} · Fonte: Documentação do projeto

050#FDF6E6
100#F5EBCF
200#E7D5A4
300#D3B870
400#BC9A37
ANCHOR
500#C9A227
600#816500
700#634D00
800#463600
900#2B2000
950#130C00

Parchment

Aprovadaanchor · 050Surface · light

Família de superfícies claras, derivada do creme off-white documentado. Fundos de páginas, cards de conteúdo, papel envelhecido.

Variáveis CSS: --color-parchment-{grade} · Fonte: Documentação do projeto

ANCHOR
050#FAF5EC
100#EEEBE4
200#DBD5CA
300#C2B9AA
400#A79D8A
500#8D826D
600#726754
700#584E3D
800#3F3729
900#262116
950#100D06

Warm Neutral

Aprovadaanchor · 900Neutral · ink

Família neutra aquecida; incorpora os tons escuros documentados do projeto. Texto, divisórias, glassmorphism escuro, molduras.

Variáveis CSS: --color-warm-neutral-{grade} · Fonte: Documentação do projeto

050#F9F6F3
100#EEEBE5
200#DBD5CB
300#C3B9AB
400#A89D8B
500#8E816E
600#736754
700#594E3D
800#3F3729
ANCHOR
900#2A2318
950#0D0B08

Funcionais (provisórias)

4 famílias · status: provisional

Ember

Provisóriaanchor · 600Danger · error

Família funcional provisória para erro, alerta destrutivo e estados críticos. Substitui o uso pontual de red-500.

Variáveis CSS: --color-ember-{grade} · Fonte: Família funcional proposta

050#FFF4F2
100#FFE4DF
200#FFC6BB
300#F4A394
400#E17F6E
500#CA5D4C
ANCHOR
600#A33A2B
700#892B1E
800#65190F
900#430904
950#220100

Sun

Provisóriaanchor · 500Warning · pending

Família funcional provisória para avisos. Atenção, confirmação pendente, mensagens neutras positivas.

Variáveis CSS: --color-sun-{grade} · Fonte: Família funcional proposta

050#FFF5E8
100#FAE9CF
200#EED1A6
300#DDB373
400#C8943D
ANCHOR
500#C58A16
600#8B5F00
700#6B4800
800#4C3200
900#2F1E00
950#150B00

River

Provisóriaanchor · 600Info · context

Família funcional provisória para informação. Mensagens de contexto, links informativos, badges neutros de status.

Variáveis CSS: --color-river-{grade} · Fonte: Família funcional proposta

050#F0F8FB
100#DFEEF3
200#C2DBE3
300#9DC2CD
400#79A7B5
500#578C9C
ANCHOR
600#2F6473
700#275765
800#163E49
900#08262E
950#011015

Color Roles (Semantic Tokens)

Fonte da verdade: design-system/semantic/color.light.json. Cada token semântico é uma referência a um foundation token (ex.: {color.base.parchment.050}). Componentes consomem apenas estes roles, nunca os foundation tokens diretamente.

Background

4 tokens · Fundos de páginas e seções.
color.semantic.background.canvasAprovada

Fundo principal das páginas.

→{color.base.parchment.050}#FAF5EC
color.semantic.background.subtleAprovada

Fundo secundário de baixa ênfase.

→{color.base.parchment.100}#EEEBE4
color.semantic.background.inverseAprovada

Fundo de alto contraste ou seção invertida.

→{color.base.warm-neutral.950}#0D0B08
color.semantic.background.brandAprovada

Fundo institucional de marca.

→{color.base.terracotta.600}#8B3A2A

Surface

5 tokens · Superfícies de cards, painéis e containers.
color.semantic.surface.defaultAprovada

Superfície padrão de cards e painéis.

→{color.base.parchment.050}#FAF5EC
color.semantic.surface.subtleAprovada

Superfície discreta.

→{color.base.parchment.100}#EEEBE4
color.semantic.surface.raisedAprovada

Superfície elevada.

→{color.base.parchment.050}#FAF5EC
color.semantic.surface.inverseAprovada

Superfície invertida.

→{color.base.warm-neutral.900}#2A2318
color.semantic.surface.brand-subtleAprovada

Superfície suave associada à marca.

→{color.base.terracotta.100}#FFE4DE

Text

7 tokens · Cores de texto conforme hierarquia e contexto.
color.semantic.text.primaryAprovada

Texto principal.

→{color.base.warm-neutral.950}#0D0B08
color.semantic.text.secondaryAprovada

Texto secundário.

→{color.base.warm-neutral.800}#3F3729
color.semantic.text.tertiaryAprovada

Texto de menor ênfase.

→{color.base.warm-neutral.700}#594E3D
color.semantic.text.inverseAprovada

Texto sobre fundos escuros.

→{color.base.parchment.050}#FAF5EC
color.semantic.text.brandAprovada

Texto institucional ou de marca.

→{color.base.terracotta.700}#7F3627
color.semantic.text.linkAprovada

Links de texto.

→{color.base.terracotta.700}#7F3627
color.semantic.text.disabledAprovada

Texto desabilitado.

→{color.base.warm-neutral.500}#8E816E

Icon

5 tokens · Cores de ícones.
color.semantic.icon.primaryAprovada

Ícone principal.

→{color.base.warm-neutral.950}#0D0B08
color.semantic.icon.secondaryAprovada

Ícone secundário.

→{color.base.warm-neutral.700}#594E3D
color.semantic.icon.inverseAprovada

Ícone sobre fundo escuro.

→{color.base.parchment.050}#FAF5EC
color.semantic.icon.brandAprovada

Ícone de destaque institucional.

→{color.base.ancestral-gold.600}#816500
color.semantic.icon.disabledAprovada

Ícone desabilitado.

→{color.base.warm-neutral.500}#8E816E

Border

5 tokens · Divisórias e contornos.
color.semantic.border.subtleAprovada

Divisória ou borda discreta.

→{color.base.warm-neutral.200}#DBD5CB
color.semantic.border.defaultAprovada

Borda padrão.

→{color.base.warm-neutral.300}#C3B9AB
color.semantic.border.strongAprovada

Borda de alta ênfase.

→{color.base.warm-neutral.600}#736754
color.semantic.border.focusAprovada

Borda de foco.

→{color.base.ancestral-gold.600}#816500
color.semantic.border.errorProvisória

Borda de erro.

→{color.base.ember.600}#A33A2B

Action

14 tokens · Estados de elementos interativos (botões, links).
color.semantic.action.primary.defaultAprovada

Ação primária padrão.

→{color.base.terracotta.600}#8B3A2A
color.semantic.action.primary.hoverAprovada

Ação primária em hover.

→{color.base.terracotta.700}#7F3627
color.semantic.action.primary.activeAprovada

Ação primária ativa.

→{color.base.terracotta.800}#5E2317
color.semantic.action.primary.disabledAprovada

Ação primária desabilitada.

→{color.base.warm-neutral.300}#C3B9AB
color.semantic.action.secondary.defaultAprovada

Ação secundária padrão.

→{color.base.ancestral-gold.600}#816500
color.semantic.action.secondary.hoverAprovada

Ação secundária em hover.

→{color.base.ancestral-gold.700}#634D00
color.semantic.action.secondary.activeAprovada

Ação secundária ativa.

→{color.base.ancestral-gold.800}#463600
color.semantic.action.secondary.disabledAprovada

Ação secundária desabilitada.

→{color.base.warm-neutral.300}#C3B9AB
color.semantic.action.tertiary.defaultAprovada

Ação terciária padrão.

→{color.base.warm-neutral.900}#2A2318
color.semantic.action.tertiary.hoverAprovada

Ação terciária em hover.

→{color.base.warm-neutral.800}#3F3729
color.semantic.action.tertiary.activeAprovada

Ação terciária ativa.

→{color.base.warm-neutral.950}#0D0B08
color.semantic.action.tertiary.disabledAprovada

Ação terciária desabilitada.

→{color.base.warm-neutral.400}#A89D8B
color.semantic.action.on-primaryAprovada

Conteúdo sobre ação primária.

→{color.base.parchment.050}#FAF5EC
color.semantic.action.on-secondaryAprovada

Conteúdo sobre ação secundária.

→{color.base.warm-neutral.950}#0D0B08

Feedback

16 tokens · Estados de feedback (sucesso, aviso, erro, informação).
color.semantic.feedback.success.subtleProvisória

Fundo suave de sucesso.

→{color.base.forest.100}#E2EFE6
color.semantic.feedback.success.defaultProvisória

Cor padrão de sucesso.

→{color.base.forest.600}#3F6B4F
color.semantic.feedback.success.strongProvisória

Cor forte de sucesso.

→{color.base.forest.800}#20402C
color.semantic.feedback.success.on-strongProvisória

Conteúdo sobre sucesso forte.

→{color.base.parchment.050}#FAF5EC
color.semantic.feedback.warning.subtleProvisória

Fundo suave de aviso.

→{color.base.sun.100}#FAE9CF
color.semantic.feedback.warning.defaultProvisória

Cor padrão de aviso.

→{color.base.sun.600}#8B5F00
color.semantic.feedback.warning.strongProvisória

Cor forte de aviso.

→{color.base.sun.800}#4C3200
color.semantic.feedback.warning.on-strongProvisória

Conteúdo sobre aviso forte.

→{color.base.warm-neutral.950}#0D0B08
color.semantic.feedback.error.subtleProvisória

Fundo suave de erro.

→{color.base.ember.100}#FFE4DF
color.semantic.feedback.error.defaultProvisória

Cor padrão de erro.

→{color.base.ember.600}#A33A2B
color.semantic.feedback.error.strongProvisória

Cor forte de erro.

→{color.base.ember.800}#65190F
color.semantic.feedback.error.on-strongProvisória

Conteúdo sobre erro forte.

→{color.base.parchment.050}#FAF5EC
color.semantic.feedback.info.subtleProvisória

Fundo suave de informação.

→{color.base.river.100}#DFEEF3
color.semantic.feedback.info.defaultProvisória

Cor padrão de informação.

→{color.base.river.600}#2F6473
color.semantic.feedback.info.strongProvisória

Cor forte de informação.

→{color.base.river.800}#163E49
color.semantic.feedback.info.on-strongProvisória

Conteúdo sobre informação forte.

→{color.base.parchment.050}#FAF5EC

Focus

2 tokens · Indicadores de foco acessível.
color.semantic.focus.ringAprovada

Anel de foco visível.

→{color.base.ancestral-gold.600}#816500
color.semantic.focus.ring-offsetAprovada

Separação entre o foco e o componente.

→{color.base.parchment.050}#FAF5EC

Overlay

2 tokens · Camadas atmosféricas e overlays.
color.semantic.overlay.scrimAprovada

Base cromática de scrims e modais.

→{color.base.warm-neutral.950}#0D0B08
color.semantic.overlay.highlightAprovada

Luz de destaque e efeitos atmosféricos.

→{color.base.ancestral-gold.300}#D3B870

Matriz de Contraste (Texto × Fundo)

Cruzamento entre os principais roles de texto e fundo, com o indicador de aprovação seguindo WCAG 2.1 (AA = ratio ≥ 4.5 para texto normal; AAA = ratio ≥ 7). Todos os pares marcados como AA ou AAA estão aprovados para uso em produção.

AAA · ≥ 7.0AA · ≥ 4.5Falha · < 4.5
Texto \ Fundo
canvas (parchment.050)#FAF5EC
subtle (parchment.100)#EEEBE4
inverse (warm-neutral.900)#2A2318
inverse dark (warm-neutral.950)#0D0B08
brand (terracotta.600)#8B3A2A
primary (warm-neutral.950)
#0D0B08
AAA18.10:1
AAA16.51:1
FAIL1.27:1
FAIL1.00:1
FAIL2.56:1
secondary (warm-neutral.800)
#3F3729
AAA10.80:1
AAA9.86:1
FAIL1.32:1
FAIL1.68:1
FAIL1.53:1
tertiary (warm-neutral.700)
#594E3D
AAA7.49:1
AA6.83:1
FAIL1.91:1
FAIL2.42:1
FAIL1.06:1
brand (terracotta.700)
#7F3627
AAA7.86:1
AAA7.17:1
FAIL1.82:1
FAIL2.30:1
FAIL1.11:1
disabled (warm-neutral.500)
#8E816E
FAIL3.51:1
FAIL3.20:1
FAIL4.08:1
AA5.16:1
FAIL2.02:1
inverse (parchment.050)
#FAF5EC
FAIL1.00:1
FAIL1.10:1
AAA14.30:1
AAA18.10:1
AAA7.07:1

Nota: os valores de ratio são calculados em espaço sRGB segundo a fórmula WCAG 2.1 relativa (luminance relative). Para os tons não aprovados (★), considere uso restrito a textos grandes (≥ 18px / bold ≥ 14px) ou cenários decorativos.

Tipografia

Fonte da verdade: design-system/foundation/typography.tokens.json. Tokens de font-family, font-weight, font-size, line-height e letter-spacing — além de 7 composições tipográficas prontas. Apenas font-family está aprovada.

Font Family

2 tokens · ambas approved
font-family.headingAprovada
"Cormorant Garamond", Georgia, serif
Aa Bb Cc — 0123
font-family.bodyAprovada
Inter, Arial, sans-serif
Aa Bb Cc — 0123

Font Weight

4 tokens · todas provisórias
font-weight.regularProvisória
400
A Umbanda é brasileira e genuinamente nossa.
font-weight.mediumProvisória
500
A Umbanda é brasileira e genuinamente nossa.
font-weight.semiboldProvisória
600
A Umbanda é brasileira e genuinamente nossa.
font-weight.boldProvisória
700
A Umbanda é brasileira e genuinamente nossa.

Font Size

11 tokens · todos provisórios
font-size.100
12px / 0.75rem
Gira de Caboclos
font-size.200
14px / 0.88rem
Gira de Caboclos
font-size.300
16px / 1.00rem
Gira de Caboclos
font-size.400
18px / 1.13rem
Gira de Caboclos
font-size.500
20px / 1.25rem
Gira de Caboclos
font-size.600
24px / 1.50rem
Gira de Caboclos
font-size.700
32px / 2.00rem
Gira de Caboclos
font-size.800
40px / 2.50rem
Gira de Caboclos
font-size.900
48px / 3.00rem
Gira de Caboclos
font-size.1000
64px / 4.00rem
Gira de Caboclos
font-size.1100
80px / 5.00rem
Gira de Caboclos

Line Height

4 tokens · todos provisórios
line-height.tightProvisória
1.1

A Umbanda é uma religião monoteísta e genuinamente brasileira, fundada sob a caridade espiritual e a luz curadora dos guias de lei.

line-height.snugProvisória
1.25

A Umbanda é uma religião monoteísta e genuinamente brasileira, fundada sob a caridade espiritual e a luz curadora dos guias de lei.

line-height.normalProvisória
1.5

A Umbanda é uma religião monoteísta e genuinamente brasileira, fundada sob a caridade espiritual e a luz curadora dos guias de lei.

line-height.relaxedProvisória
1.7

A Umbanda é uma religião monoteísta e genuinamente brasileira, fundada sob a caridade espiritual e a luz curadora dos guias de lei.

Letter Spacing

4 tokens · todos provisórios
letter-spacing.tightProvisória
-0.02em

Gira de Caboclos

letter-spacing.normalProvisória
0em

Gira de Caboclos

letter-spacing.wideProvisória
0.04em

Gira de Caboclos

letter-spacing.capsProvisória
0.12em

Gira de Caboclos

Composições tipográficas

7 estilos compostos · todos provisórios
typography.display-largeProvisória
font-family.headingfont-size.1100 (80px)font-weight.regular (400)letter-spacing.tightline-height.tight (1.1)
Gira de Caboclos
typography.display-mediumProvisória
font-family.headingfont-size.900 (48px)font-weight.regular (400)letter-spacing.tightline-height.tight (1.1)
Gira de Caboclos
typography.heading-largeProvisória
font-family.headingfont-size.800 (40px)font-weight.medium (500)letter-spacing.tightline-height.snug (1.25)
Gira de Caboclos
typography.heading-mediumProvisória
font-family.headingfont-size.700 (32px)font-weight.medium (500)letter-spacing.normalline-height.snug (1.25)
Gira de Caboclos
typography.body-largeProvisória
font-family.bodyfont-size.400 (18px)font-weight.regular (400)letter-spacing.normalline-height.relaxed (1.7)
Gira de Caboclos
typography.body-mediumProvisória
font-family.bodyfont-size.300 (16px)font-weight.regular (400)letter-spacing.normalline-height.normal (1.5)
Gira de Caboclos
typography.label-mediumProvisória
font-family.bodyfont-size.200 (14px)font-weight.semibold (600)letter-spacing.wideline-height.snug (1.25)
Gira de Caboclos

Espaçamento

Fonte da verdade: design-system/foundation/space.tokens.json. Escala de espaçamento baseada no grid documentado de 8px, com 14 tokens semânticos que preenchem containers, gaps, paddings e margins com consistência. Apenas os valoresApprovedestão documentados no projeto — os demais são propostos pela escala derivada.

Space Scale

14 tokens · 5 approved · 9 provisional
space.000Aprovada
0px
0.00rem
—
space.025Provisória
2px
0.13rem
—
space.050Provisória
4px
0.25rem
—
space.100Aprovada
8px
0.50rem
—
space.150Provisória
12px
0.75rem
—
space.200Aprovada
16px
1.00rem
—
space.300Aprovada
24px
1.50rem
—
space.400Provisória
32px
2.00rem
—
space.500Provisória
40px
2.50rem
—
space.600Provisória
48px
3.00rem
—
space.800Provisória
64px
4.00rem
—
space.1000Aprovada
80px
5.00rem
Altura estrutural documentada do header.
space.1200Provisória
96px
6.00rem
—
space.1600Provisória
128px
8.00rem
—

Aplicação em seções

como os tokens aparecem em componentes reais
padding: space.600 (48px)Seção de conteúdo padrão
Conteúdo centralizado com respiro generoso
padding: space.300 (24px)Card de conteúdo
Card com padding interno médio
gap: space.100 (8px) · space.200 (16px)Stack vertical de itens
Item 1 (gap: 16px)
Item 2
Item 3

Shape (Radius & Border)

Fonte da verdade: design-system/foundation/shape.tokens.json. Tokens de radius (8 níveis) e border-width (4 níveis). Todos estão Provisional — aguardam validação de design.

Radius Scale

8 tokens · todas provisórias
radius.noneProvisória
0px

Bordas retas, divisórias.

radius.050Provisória
2px

Botões, inputs, glassmorphism.

radius.100Provisória
4px

Badges pequenos, tags.

radius.200Provisória
8px

Cards de conteúdo, painéis.

radius.300Provisória
12px

Modais, drawers, popovers.

radius.400Provisória
16px

Containers generosos, hero boxes.

radius.500Provisória
24px

Superfícies orgânicas, ilustrações.

radius.pillProvisória
999px

Botões pílula, avatares, categorias.

Border-Width Scale

4 tokens · todas provisórias
border-width.noneProvisória
0px

Reset de borda.

border-width.thinProvisória
1px

Bordas padrão, divisórias.

border-width.mediumProvisória
2px

Bordas de ênfase, controles.

border-width.thickProvisória
4px

Indicadores laterais, destaques.

Aplicação em componentes

exemplos práticos de uso combinado
border-radius: radius.050 (2px)
border-width: border-width.thin (1px)
Card de conteúdo
Superfície elevada com radius médio e borda hairline.
border-radius: radius.200 (8px)
border: border-width.thin (1px)
Badge categoria
border-radius: radius.pill (999px)
border-width: border-width.medium (2px)

Motion / Animação

Fonte da verdade: design-system/foundation/motion.tokens.json. Durações e curvas de aceleração que regem todas as transições visuais. Tokens com status Provisional requerem validação de design.

Duration Scale

6 tokens · 2 approved · 4 provisional
duration.instantProvisória

Token de duração instant.

0mscubic-bezier(0.2, 0, 0, 1)
duration.fastProvisória

Token de duração fast.

150mscubic-bezier(0.2, 0, 0, 1)
duration.moderateProvisória

Token de duração moderate.

250mscubic-bezier(0.2, 0, 0, 1)
duration.slowAprovada

Usado no fade inicial/final do hero.

500mscubic-bezier(0.2, 0, 0, 1)
duration.deliberateAprovada

Usado em transições visuais suaves.

700mscubic-bezier(0.2, 0, 0, 1)
duration.ambientProvisória

Token de duração ambient.

1200mscubic-bezier(0.2, 0, 0, 1)

Como ler: a barra dourada executa um ciclo ida-e-volta usando a duração do token (pausada em duration.instant). Quanto mais longa a duração, mais lenta a percepção de movimento.

Easing Curves

4 tokens · todas provisórias
cubic-bezier.standardProvisória
cubic-bezier(0.2, 0, 0, 1)
P1 (0.2, 0)P2 (0, 1)
cubic-bezier.enterProvisória
cubic-bezier(0, 0, 0, 1)
P1 (0, 0)P2 (0, 1)
cubic-bezier.exitProvisória
cubic-bezier(0.3, 0, 1, 1)
P1 (0.3, 0)P2 (1, 1)
cubic-bezier.emphasizedProvisória
cubic-bezier(0.2, 0.8, 0.2, 1)
P1 (0.2, 0.8)P2 (0.2, 1)

Como ler: cada gráfico mostra o progresso da animação (eixo Y) ao longo do tempo (eixo X). Curvas que crescem rápido no início são enter; as que desaceleram no fim são exit. Use standard como padrão para a maioria das interações.

Opacity

Fonte da verdade: design-system/foundation/opacity.tokens.json. Escala de opacidade usada em overlays, divisórias e estados hover. Apenas opacity.soft está aprovada — as demais são propostas que requerem validação de design.

Scale

7 tokens · 1 approved · 6 provisional
TokenValorStatusUso recomendadoAmostra
opacity.transparent0.00ProvisóriaReset de visibilidade, condicionais.
opacity.subtle0.08ProvisóriaBordas hairlines, divisórias finas.
opacity.muted0.16ProvisóriaBordas visíveis, estados desabilitados.
opacity.soft0.35AprovadaOverlay escuro do hero.Overlay escuro documentado no hero.
opacity.medium0.50ProvisóriaEstados hover suaves, glassmorphism.
opacity.strong0.72ProvisóriaScrims de modal, bloqueio parcial.
opacity.opaque1.00ProvisóriaEstado padrão (visibilidade total).

Demonstração sobre superfície clara

overlay escuro em cima de uma imagem — legibilidade cai conforme a opacidade sobe

A Umbanda é uma religião monoteísta e genuinamente brasileira, fundada sob a caridade espiritual e a luz curadora dos guias de lei.

Texto de leitura padrão do site. Observe como cada camada de overlay escuro abaixo desta superfície atenua a legibilidade progressivamente — até cobrir o conteúdo completamente em opacity.opaque.

opacity.subtle0.08 · 8%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
opacity.muted0.16 · 16%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
opacity.soft0.35 · 35%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
opacity.medium0.50 · 50%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
opacity.strong0.72 · 72%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
opacity.opaque1.00 · 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Padrão de uso

  • overlays / scrims: usar opacity.soft (0.35) ou opacity.strong (0.72) — aprovados para hero e modal.
  • bordas e divisórias: usar opacity.subtle (0.08) ou opacity.muted (0.16) — bordas hairlines sobre superfícies.
  • estados disabled: usar opacity.medium (0.5) em elementos não interativos.
  • glassmorphism: combinar opacity.muted +backdrop-blur para painéis translúcidos.

Shadows / Elevação

Fonte da verdade: design-system/foundation/shadow.tokens.json. Escala de elevação que comunica profundidade sem usar bordas. Todos os tokens estão Provisional — aguardam validação de design.

Elevation Scale

5 tokens · todas provisórias
TokenValorPreview
shadow.noneProvisória0px 0px 0px 0px #00000000
shadow.lowProvisória0px 2px 8px 0px #0D0B081F
shadow.mediumProvisória0px 8px 24px -4px #0D0B0829
shadow.highProvisória0px 20px 48px -8px #0D0B083D
shadow.focusProvisória0px 0px 0px 3px #C9A22766

Demonstração em cards

mesma superfície, diferentes elevações
shadow.noneProvisória

Sem elevação. Estado base, sem profundidade.

0px 0px 0px 0px #00000000
shadow.lowProvisória

Elevação discreta. Hover em elementos interativos.

0px 2px 8px 0px #0D0B081F
shadow.mediumProvisória

Elevação média. Cards de conteúdo, dropdowns.

0px 8px 24px -4px #0D0B0829
shadow.highProvisória

Elevação alta. Modais, popovers, drawers.

0px 20px 48px -8px #0D0B083D
shadow.focusProvisória

Anel de foco dourado. Estados de foco acessível.

0px 0px 0px 3px #C9A22766

Z-Index / Camadas

Fonte da verdade: design-system/foundation/z-index.tokens.json. Hierarquia de empilhamento que define quem fica por cima de quem na interface. Apenas z-index.header (50) está approved — as demais camadas são propostas que requerem validação de design.

Stacking Order

8 tokens · 1 approved · 7 provisional
TokenValorStatusUso
z-index.base0ProvisóriaCamada base. Conteúdo padrão em fluxo normal.
z-index.raised10ProvisóriaCards em hover, elementos com sombra elevada.
z-index.dropdown30ProvisóriaMenus dropdown, popovers, listas suspensas.
z-index.sticky40ProvisóriaElementos fixos durante scroll (tabela, sidebar).
z-index.header50AprovadaCabeçalho fixo do site (documentado em 50).Header documentado com z-50.
z-index.overlay60ProvisóriaBackdrop de modais, scrims sobre o conteúdo.
z-index.modal70ProvisóriaCaixa de diálogo modal centralizada.
z-index.toast80ProvisóriaNotificações efêmeras, snackbars, alerts globais.

Visualização em pilha

cards empilhados demonstram a hierarquia visual
z-index.baseProvisória
0

Camada base. Conteúdo padrão em fluxo normal.

z-index.raisedProvisória
10

Cards em hover, elementos com sombra elevada.

z-index.dropdownProvisória
30

Menus dropdown, popovers, listas suspensas.

z-index.stickyProvisória
40

Elementos fixos durante scroll (tabela, sidebar).

z-index.headerAprovada
50

Cabeçalho fixo do site (documentado em 50).

z-index.overlayProvisória
60

Backdrop de modais, scrims sobre o conteúdo.

z-index.modalProvisória
70

Caixa de diálogo modal centralizada.

z-index.toastProvisória
80

Notificações efêmeras, snackbars, alerts globais.

Como ler: cada card é renderizado com z-index: {value} aplicado, e deslocado 28px para baixo/direita do anterior. O resultado mostra a ordem real de empilhamento: camadas com valor maior ficam visíveis por cima. A cor também evolui — do creme claro (base) ao dourado (toast) — reforçando a hierarquia.

Component Tokens · Button

Fonte da verdade: design-system/component/button.tokens.json. Os tokens de componente são referências a tokens semânticos/foundation (ex.: {space.400}, {color.semantic.action.primary.default}). Aqui exibimos o JSON original e a resolução para valores literais.

Anatomia

height · padding-inline · gap · radius · border-width
TokenReferênciaResolvidoDescrição
button.height.small{space.400}32pxAltura de botão pequeno.
button.height.medium{space.600}48pxAltura de botão padrão.
button.height.large{space.800}64pxAltura de botão grande.
button.padding-inline.small{space.200}16pxPadding horizontal pequeno.
button.padding-inline.medium{space.300}24pxPadding horizontal padrão.
button.padding-inline.large{space.400}32pxPadding horizontal grande.
button.gap{space.100}8pxEspaço entre ícone e rótulo.
button.radius{radius.200}8pxRaio padrão dos botões.
button.border-width{border-width.thin}1pxEspessura padrão da borda.

Variantes × Estados

primary · secondary · ghost
button.primaryProvisional
background.default·#8B3A2A
background.hover·#7F3627
background.active·#5E2317
background.disabled·#C3B9AB
text.default·#FAF5EC
text.disabled·#8E816E
border.default·#8B3A2A
border.hover·#7F3627
border.active·#5E2317
default
hover
active
disabled
button.secondaryProvisional
background.default·#FAF5EC
background.hover·#EEEBE4
background.active·#FFE4DE
background.disabled·#EEEBE4
text.default·#816500
text.disabled·#8E816E
border.default·#816500
border.hover·#634D00
border.active·#463600
default
hover
active
disabled
button.ghostProvisional
background.default·#FAF5EC
background.hover·#EEEBE4
background.active·#FFE4DE
text.default·#2A2318
text.disabled·#8E816E
default
hover
active
button.motionProvisional
duration
{duration.fast} → 150ms
easing
{cubic-bezier.standard} → cubic-bezier(0.2, 0, 0, 1)
focus-ring
#816500

Tamanhos

small · medium · large (todos consumindo button tokens)
h: 32px · p: 16px
h: 48px · p: 24px
h: 64px · p: 32px

Component Tokens · Navigation

Fonte da verdade: design-system/component/navigation.tokens.json. Tokens de componente para estruturas de navegação global: header, links de menu, footer e mobile menu. Inclui 2 tokens Approved (header.height e header.z-index).

Anatomia

header · link · footer · mobile-menu
TokenReferênciaResolvido
Header
navigation.header.heightApproved{space.1000}80px
navigation.header.background{color.semantic.background.canvas}#FAF5EC
navigation.header.text{color.semantic.text.primary}#0D0B08
navigation.header.border{color.semantic.border.subtle}#DBD5CB
navigation.header.z-indexApproved{z-index.header}50
navigation.header.padding-inline{space.300}24px
navigation.header.shadow{shadow.low}0px 2px 8px 0px #0D0B081F
Link
navigation.link.text.default{color.semantic.text.secondary}#3F3729
navigation.link.text.hover{color.semantic.text.brand}#7F3627
navigation.link.text.active{color.semantic.text.brand}#7F3627
navigation.link.typography{typography.label-medium}typography.label-medium
Footer
navigation.footer.background{color.semantic.background.inverse}#0D0B08
navigation.footer.text{color.semantic.text.inverse}#FAF5EC
navigation.footer.link{color.semantic.text.inverse}#FAF5EC
navigation.footer.accent{color.semantic.icon.brand}#816500
navigation.footer.padding-block{space.800}64px
Mobile Menu
navigation.mobile-menu.background{color.semantic.surface.raised}#FAF5EC
navigation.mobile-menu.z-index{z-index.overlay}60
navigation.mobile-menu.shadow{shadow.high}0px 20px 48px -8px #0D0B083D

Demonstração de header

consumindo todos os tokens do navigation.header
Senhora do Rosário

Como ler: o header consome height: 80px, background: #FAF5EC, z-index: 50, padding e shadow dos tokens. Os links usam text.secondary (default) e text.brand (active/hover). O CTA reusa tokens de button.

Demonstração de footer

background.inverse + accent dourado
Senhora do Rosário

Terreiro de Umbanda Senhora do Rosário. Tradição, axé e acolhimento.

Endereço

Rua das Almas, 108
Centro — São Paulo, SP

© 2026 Terreiro Senhora do Rosário. Todos os direitos reservados.

Component Tokens · Tabs

Fonte da verdade: design-system/component/tabs.tokens.json. Tokens de componente para navegação por abas. Cobre a lista (gap, border), o item (padding, radius, typography, text, indicator) e motion.

Anatomia

list · item (text + indicator) · motion
TokenReferênciaResolvido
List
tabs.list.gap{space.100}8px
tabs.list.border{color.semantic.border.subtle}#DBD5CB
Item
tabs.item.padding-inline{space.200}16px
tabs.item.padding-block{space.150}12px
tabs.item.radius{radius.100}4px
tabs.item.typography{typography.label-medium}typography.label-medium
tabs.item.text.default{color.semantic.text.secondary}#3F3729
tabs.item.text.hover{color.semantic.text.primary}#0D0B08
tabs.item.text.active{color.semantic.text.brand}#7F3627
tabs.item.text.disabled{color.semantic.text.disabled}#8E816E
tabs.item.indicator.default{color.semantic.action.primary.default}#8B3A2A
tabs.item.indicator.height{border-width.medium}2px
Motion
tabs.motion.duration{duration.fast}150ms
tabs.motion.easing{cubic-bezier.standard}cubic-bezier(0.2, 0, 0, 1)

Demonstração de tabs

lista · 4 estados de item · indicator

Próximas

Lista de giras agendadas: Caboclos, Pretos Velhos, Crianças.

Como ler: a lista aplica gap: 8px e uma border-bottom sutil. O item ativo usa text.brand (terracotta.700) com um indicator de 2px em action.primary.default posicionado abaixo. Itens desabilitados aplicam text.disabled + cursor not-allowed.

Showcase: Estados de Botões

Renderizações interativas em tempo real de todas as variantes de botões e seus estados funcionais.

Primário Terracota

bg-[#8B3A2A]
Interativo
Simulado
Estático
Estático

Secundário Dourado Outlined

border-[#C9A227]
Interativo
Estático

Dark Glassmorphism

bg-black/40 backdrop-blur
Interativo
Simulado

Component Tokens · Input

Fonte da verdade: design-system/component/input.tokens.json. Tokens de componente para text inputs e form fields. Cobre anatomia (height, padding, gap, radius, border), estados de background/text/border, focus-ring, tipografia e motion.

Anatomia

height · padding · gap · radius · border-width
TokenReferênciaResolvido
input.height.small{space.500}40px
input.height.medium{space.600}48px
input.height.large{space.800}64px
input.padding-inline{space.200}16px
input.gap{space.100}8px
input.radius{radius.200}8px
input.border-width{border-width.thin}1px

Estados (background · text · border)

default · hover · focus · error · disabled
CategoriaEstadoReferênciaResolvido
Background
backgrounddefault{color.semantic.surface.default}#FAF5EC
backgrounddisabled{color.semantic.surface.subtle}#EEEBE4
Text
textvalue{color.semantic.text.primary}#0D0B08
textplaceholder{color.semantic.text.tertiary}#594E3D
textdisabled{color.semantic.text.disabled}#8E816E
textlabel{color.semantic.text.secondary}#3F3729
texthelper{color.semantic.text.tertiary}#594E3D
texterror{color.semantic.feedback.error.default}#A33A2B
Border
borderdefault{color.semantic.border.default}#C3B9AB
borderhover{color.semantic.border.strong}#736754
borderfocus{color.semantic.border.focus}#816500
bordererror{color.semantic.border.error}#A33A2B
borderdisabled{color.semantic.border.subtle}#DBD5CB
Focus-ring · Motion
focus-ringinput.focus-ring{color.semantic.focus.ring}#816500
motionduration{duration.fast}150ms
motioneasing{cubic-bezier.standard}cubic-bezier(0.2, 0, 0, 1)

Demonstração de estados

renderizados consumindo os tokens
Default
Hover
Focus
Error
Disabled

Tamanhos

small · medium · large
input.height.small
input.height.medium
input.height.large

Component Tokens · Modal

Fonte da verdade: design-system/component/modal.tokens.json. Tokens de componente para modais/diálogos. Cobre overlay, container, header, body, footer, z-index e motion.

Anatomia

overlay · container · header · body · footer · z-index · motion
TokenReferênciaResolvido
Overlay
modal.overlay.background{color.semantic.overlay.scrim}#0D0B08
modal.overlay.opacity{opacity.strong}0.72 · 72%
Container
modal.container.background{color.semantic.surface.raised}#FAF5EC
modal.container.text{color.semantic.text.primary}#0D0B08
modal.container.radius{radius.400}16px
modal.container.padding{space.400}32px
modal.container.shadow{shadow.high}0px 20px 48px -8px #0D0B083D
modal.container.max-width640px640px
Header · Body · Footer
modal.header.gap{space.200}16px
modal.header.typography{typography.heading-medium}typography.heading-medium
modal.body.gap{space.300}24px
modal.body.typography{typography.body-medium}typography.body-medium
modal.footer.gap{space.200}16px
Z-Index · Motion
modal.z-index{z-index.modal}70
modal.motion.duration{duration.moderate}250ms
modal.motion.easing{cubic-bezier.enter}cubic-bezier(0, 0, 0, 1)

Demonstração de modal

overlay + container + header + body + footer

Confirmar inscrição

typography.heading-medium · typography.heading-medium

Você está prestes a confirmar sua inscrição na Gira de Caboclos do dia 27/09/2026. Após a confirmação, você receberá os detalhes por e-mail.

typography.body-medium · typography.body-medium

Como ler: o overlay usa modal.overlay.background com modal.overlay.opacity (72%). O container aplica radius, padding, shadow e z-index dos tokens. Botões do footer reusam os tokens de button já definidos.

Showcase: Campos de Formulário (Inputs)

Demonstração viva e interativa dos campos de texto com todos os estados funcionais mapeados.

Interativo (teste o foco e digitação)
Borda com brilho dourado sutil
O preenchimento deste campo é obrigatório.
Estático

Component Tokens · Card

Fonte da verdade: design-system/component/card.tokens.json. Tokens de componente para cards e content containers — todos derivados de tokens semânticos/foundation. Cobre backgrounds, text, border, radius, padding, gap, shadow e motion.

Anatomia

8 categorias · todas provisórias
TokenReferênciaResolvido
Background
card.background.default{color.semantic.surface.default}#FAF5EC
card.background.subtle{color.semantic.surface.subtle}#EEEBE4
card.background.inverse{color.semantic.surface.inverse}#2A2318
card.background.glass{color.semantic.overlay.scrim}#0D0B08
Text
card.text.title{color.semantic.text.primary}#0D0B08
card.text.body{color.semantic.text.secondary}#3F3729
card.text.inverse{color.semantic.text.inverse}#FAF5EC
Border
card.border.default{color.semantic.border.subtle}#DBD5CB
card.border.hover{color.semantic.border.focus}#816500
Radius
card.radius.default{radius.300}12px
card.radius.large{radius.400}16px
Padding
card.padding.small{space.200}16px
card.padding.medium{space.300}24px
card.padding.large{space.400}32px
Gap
card.gap{space.200}16px
Shadow
card.shadow.default{shadow.low}0px 2px 8px 0px #0D0B081F
card.shadow.hover{shadow.medium}0px 8px 24px -4px #0D0B0829
Motion
card.motion.duration{duration.deliberate}700ms
card.motion.easing{cubic-bezier.emphasized}cubic-bezier(0.2, 0.8, 0.2, 1)

Demonstração de variantes

background · text · radius aplicados

Card padrão

Superfície surface.default com padding médio, radius padrão e shadow shadow.low.

bg: #FAF5ECradius: 12pxp: 24px

Card discreto

Superfície surface.subtle para aninhamento e hierarquia visual suave.

Card invertido

Superfície surface.inverse para destaques em fundo claro (warm-neutral.900).

Card glassmorphism

Base overlay.scrim com backdrop-blur para painéis translúcidos sobre fundos complexos.

Demonstração de estados

padding · radius · shadow · motion em ação

Padding

card.padding.small
16px
card.padding.medium
24px
card.padding.large
32px

Radius

card.radius.default
12px
card.radius.large
16px

Shadow (default → hover)

card.shadow.default
0px 2px 8px 0px #0D0B081F

passe o cursor

card.shadow.hover
0px 8px 24px -4px #0D0B0829

em hover

Showcase: Cards & FAQ

Biblioteca de componentes estruturais e organizacionais do site.

Flyer EventCard (Agenda/Eventos)

Card com Flyer
Gira de Pretos Velhos
Pretos Velhos e AlmasConfirmada

Gira de Pretos Velhos

Acolhimento, passes e aconselhamento amoroso com a sabedoria ancestral das almas.

27/09/2026 20:00h

Acordeão Sanfona (FAQ)

Accordion Colapsável

Este é um exemplo de resposta contida dentro de um componente de acordeão expansível. Ele utiliza transições suaves de altura máxima (`max-h`) e opacidade para revelar informações ocultas.

Próximos Componentes

Roadmap de componentes que consumirão os Color Roles semânticos definidos acima. Status atual: aprovados (foundation + semantic) e provisórios (famílias funcionais).

StatusBadge

Badge semântico para status de eventos e processos.

feedback.success.subtlefeedback.warning.subtlefeedback.error.subtlefeedback.info.subtle

Toast / Alert

Notificações efêmeras com hierarquia de severidade.

feedback.success.strongfeedback.warning.strongfeedback.error.strongfeedback.info.strong

Form Field

Wrapper de campo com label, helper e mensagens de erro.

border.defaultborder.focusborder.errortext.disabled

Modal

Diálogo com scrim e trap de foco acessível.

overlay.scrimsurface.raisedfocus.ring

Tabs

Navegação por abas com indicador ativo dourado.

border.subtleaction.secondary.defaulttext.tertiary

Tooltip

Dica flutuante sobre superfícies escuras.

surface.inversetext.inverse