Instituto Mamiraua · Design System
new [mamiraua]
Camada semantica de tokens que le das Variaveis Globais do Divi 5. Cores e tipografia vem do painel (fonte da verdade). Espacamento, raio e as aguas do rio nascem aqui.
Como funciona a sincronia
Muda no painel do Divi, muda em todo o site
O fluxo tem uma direcao. Voce edita no lugar de sempre — o Painel de Variaveis — e a mudanca se propaga sozinha ate cada componente.
:root.var().Direcao unica. CSS resolve var() num sentido so.
Por isso a edicao acontece no painel do Divi, nunca direto no --nm-*.
O que nao existe no Divi (espacamento, raio, aguas) tem a fonte da verdade neste bloco.
Cores · semanticas le do Divi
Papeis de cor
Clique em qualquer token para copiar. Cada uma aponta para a variavel
global do Divi correspondente.
Cores · paleta estendida le do Divi
Verdes, areia e dourado
Cores · aguas do rio so design system
Encontro das aguas
Os tons narrativos da home — a agua ambar do Solimoes encontrando a agua escura do Lago Tefe. Borda dura, sem gradiente. Estes nao existem no painel do Divi: edite-os aqui.
Tipografia · familias le do Divi
Duas vozes
Aa Bb Cc
Citrus Gothic Regular — titulos
var(--nm-font-title)
--et_global_heading_font
Aa Bb Cc
Inter — corpo e interface
var(--nm-font-body)
--et_global_body_font
Tipografia · escala fluida le do Divi
Tamanhos em clamp
A escala inteira e responsiva por natureza — ela cresce com a largura da tela entre um minimo e um maximo. Redimensione a janela para ver.
--nm-fs-display--gvid-0w7jc6vytsclamp(32px,3.3vw,48px)--nm-fs-h2--gvid-jiq6cvcn84clamp(28px,2.5vw,36px)--nm-fs-lg--gvid-aqshr78671clamp(24px,2.2vw,32px)--nm-fs-md--gvid-t3zg60fqx2clamp(20px,1.7vw,24px)--nm-fs-sm--gvid-m41y58o00hclamp(18px,1.5vw,22px)--nm-fs-xs--gvid-pqh69jklkjclamp(16px,1.25vw,18px)--nm-fs-body-lg--gvid-l30ss9npp4clamp(15px,1.15vw,17px)--nm-fs-body--gvid-gn3r4kz5igclamp(14px,1.1vw,16px)--nm-fs-body-sm--gvid-k3e7rsv8xhclamp(13px,0.95vw,14px)--nm-fs-caption--gvid-61nk0l7ultclamp(11px,0.85vw,12px)Espacamento · ritmo fluido so design system
Escala de espaco
Derivada dos paddings e gaps reais da nova-home-v2. Os passos maiores tambem sao
clamp() — encolhem no celular, respiram no desktop.
4px8pxclamp(10,1vw,12)clamp(12,1.4vw,16)clamp(16,2vw,24)clamp(20,3vw,32)clamp(24,3vw,44)clamp(28,3.5vw,56)clamp(40,5vw,72)clamp(56,7vw,96)clamp(56,8vw,116)clamp(20,5vw,72)Forma · raio, bordas e componentes so design system
Identidade reta, sem sombra
O padrao e canto reto (--nm-radius: 0) e
sem elevacao. A pilula fica reservada a controles — a decisao aberta de
cartoes retos vs. controles arredondados vive aqui.
Botoes
Rotulos e campo
Cartao (canto reto, hairline, sem sombra)
Ciencia, manejo e comunidades ribeirinhas
Um exemplo de cartao do design system: borda fina, fundo branco, zero raio, zero sombra.
Grafismo Mamiraua
Padrao da marca
Disponivel como variavel de imagem para fundos e mascaras.
Deploy
Os tokens (copie e cole global)
Este :root ja esta ativo nesta pagina. Para usar em todo o site,
cole-o num local global (CSS do tema, um Code no Theme Builder ou o mu-plugin). Assim qualquer
pagina passa a enxergar os --nm-*.
:root{
/* Cores semanticas - leem do Divi */
--nm-primary: var(--gcid-primary-color,#88a442);
--nm-secondary: var(--gcid-secondary-color,#4a7d3b);
--nm-ink: var(--gcid-body-color,#292221);
--nm-heading: var(--gcid-heading-color,#666666);
--nm-link: var(--gcid-link-color,#2ea3f2);
--nm-bg: var(--gcid-srxeux5pnu,#f6f8ef);
--nm-white: var(--gcid-7j9aq1n5dx,#ffffff);
--nm-black: var(--gcid-sv3gnlarh0,#121214);
--nm-gray: var(--gcid-g2agsre73d,#efefed);
/* Paleta estendida - leem do Divi */
--nm-green-3: var(--gcid-24jwd05do6,#89a443);
--nm-green-soft: var(--gcid-wjcajwsfpi,#72a679);
--nm-green-muted: var(--gcid-nnxiukmewg,#89a673);
--nm-sand: var(--gcid-bpnzixwf8n,#a69d72);
--nm-gold: var(--gcid-pe47cdd2yq,#b28d2a);
--nm-brown: var(--gcid-ip8nqivcz4,#292221);
/* Aguas do rio - so design system */
--nm-agua-ambar: #ece6d6;
--nm-agua-ambar-media: #d8c199;
--nm-agua-madeira: #b98a4e;
--nm-agua-escura: var(--nm-ink);
/* Familias - leem do Divi */
--nm-font-title: var(--et_global_heading_font,"Citrus Gothic Regular"),"Citrus Gothic Regular",Georgia,serif;
--nm-font-body: var(--et_global_body_font,"Inter"),"Inter",system-ui,-apple-system,sans-serif;
/* Escala tipografica - le do Divi */
--nm-fs-display: var(--gvid-0w7jc6vyts,clamp(32px,3.3vw,48px));
--nm-fs-h2: var(--gvid-jiq6cvcn84,clamp(28px,2.5vw,36px));
--nm-fs-h2-inside: var(--gvid-n4vxp8yst3,clamp(14px,1.2vw,19px));
--nm-fs-lg: var(--gvid-aqshr78671,clamp(24px,2.2vw,32px));
--nm-fs-md: var(--gvid-t3zg60fqx2,clamp(20px,1.7vw,24px));
--nm-fs-sm: var(--gvid-m41y58o00h,clamp(18px,1.5vw,22px));
--nm-fs-xs: var(--gvid-pqh69jklkj,clamp(16px,1.25vw,18px));
--nm-fs-body-lg: var(--gvid-l30ss9npp4,clamp(15px,1.15vw,17px));
--nm-fs-body: var(--gvid-gn3r4kz5ig,clamp(14px,1.1vw,16px));
--nm-fs-body-sm: var(--gvid-k3e7rsv8xh,clamp(13px,0.95vw,14px));
--nm-fs-caption: var(--gvid-61nk0l7ult,clamp(11px,0.85vw,12px));
--nm-fs-micro: var(--gvid-3wmflcpi1k,clamp(10px,0.7vw,10px));
--nm-fs-nano: var(--gvid-wlpp507p4q,clamp(5px,0.55vw,8px));
/* Ritmo de texto */
--nm-lh-tight:1.05; --nm-lh-head:1.15; --nm-lh-snug:1.3; --nm-lh-body:1.6;
--nm-track-title:-.01em; --nm-track-label:.08em;
/* Espacamento fluido */
--nm-space-3xs:4px;
--nm-space-2xs:8px;
--nm-space-xs: clamp(10px,1vw,12px);
--nm-space-sm: clamp(12px,1.4vw,16px);
--nm-space-md: clamp(16px,2vw,24px);
--nm-space-lg: clamp(20px,3vw,32px);
--nm-space-xl: clamp(24px,3vw,44px);
--nm-space-2xl:clamp(28px,3.5vw,56px);
--nm-space-3xl:clamp(40px,5vw,72px);
--nm-space-4xl:clamp(56px,7vw,96px);
--nm-section-y:clamp(56px,8vw,116px);
--nm-gutter: clamp(20px,5vw,72px);
--nm-gap: var(--nm-space-xl);
/* Layout */
--nm-container:1240px;
--nm-container-text:720px;
--nm-measure:66ch;
/* Raio e borda */
--nm-radius:0;
--nm-radius-sm:3px;
--nm-radius-pill:50px;
--nm-border-w:1px;
--nm-border:1px solid var(--nm-ink);
--nm-border-soft:1px solid rgba(41,34,33,.14);
/* Elevacao e movimento */
--nm-shadow:none;
--nm-ease:cubic-bezier(.2,.7,.2,1);
--nm-dur:.5s;
/* Grafismo */
--nm-padrao-dark: url("https://mamiraua.org.br/wp-content/uploads/2025/10/padrao-mamiraua-292221.svg");
--nm-padrao-light:url("https://mamiraua.org.br/wp-content/uploads/2025/10/padrao-mamiraua-FFFFFF.svg");
--nm-padrao-verde:url("https://mamiraua.org.br/wp-content/uploads/2025/11/padrao-mamiraua-secao-inteira-verde.svg");
--nm-padrao-mobile:url("https://mamiraua.org.br/wp-content/uploads/2026/01/padrao-mobile-mamiraua-780-x-32.webp");
}