Aranduka — Design System

01 Princípios

Quatro decisões que valem para qualquer tela.

Feito, não perfeito

Texturas e traços da identidade entram como assinatura, nunca como ruído. A interface é limpa, e a marca aparece nos detalhes.

Transparência como interface

Origem, composição e preço sempre visíveis. Nada escondido atrás de cliques extras.

Calma

Espaço generoso, movimento lento e poucas cores por tela. A navegação também é um ritual.

Acessível por padrão

Contraste AA, foco visível, alvos de 44px e respeito à redução de movimento. Sem exceções.

02 Cor

Primitivas da palmeira, papéis semânticos na interface.

Primitivas

Semânticas

Token	Valor	Uso
`--ak-color-bg`	`#efe6d5`	Fundo padrão das páginas (Fibra)
`--ak-color-surface`	`#f7f2e9`	Cards, campos e áreas elevadas
`--ak-color-bg-inverse`	`#2f3a24`	Seções escuras, rodapé, navegação
`--ak-color-text`	`#2f3a24`	Texto principal · 9,7:1 sobre bg
`--ak-color-text-muted`	`#5a6450`	Texto secundário · 5,0:1 sobre bg
`--ak-color-text-inverse`	`#efe6d5`	Texto sobre bg-inverse · 9,7:1
`--ak-color-text-inverse-muted`	`#a8b98c`	Secundário sobre bg-inverse · 5,7:1
`--ak-color-action`	`#2f3a24`	Botão primário
`--ak-color-accent`	`#7a2e2a`	CTA de destaque, links · 7,5:1 sobre bg
`--ak-color-accent-hover`	`#5f2320`	Hover do accent
`--ak-color-highlight`	`#c2613e`	Decorativo, ícones, textos ≥ 24px (3,3:1)
`--ak-color-highlight-text`	`#a24c2d`	Polpa ajustada para texto pequeno · 4,7:1
`--ak-color-border`	`rgb(47 58 36 / .18)`	Divisórias e contornos
`--ak-color-focus`	`#c2613e`	Anel de foco (2px, afastamento 3px)
`--ak-color-success`	`#3f5a30`	Confirmações · 6,2:1
`--ak-color-warning`	`#8a5a12`	Atenção · 4,8:1
`--ak-color-error`	`#9b2c22`	Erros · 6,1:1

Pares aprovados para texto

Aa text / bg 9.7:1 · AAA

Aa text-muted / bg 5.0:1 · AA

Aa accent / bg 7.5:1 · AAA

Aa highlight-text / bg 4.7:1 · AA

Aa highlight / bg 3.3:1 · AA grande

Aa text-inverse / bg-inverse 9.7:1 · AAA

Aa text-inverse-muted / bg-inverse 5.7:1 · AA

Aa highlight / bg-inverse 2.9:1 · Decorativo

Regra de proporção por tela: cerca de 60% Fibra ou Amazônia (base), 30% tons de verde (apoio) e 10% Casca ou Polpa (ação e destaque).

03 Tipografia

Mono para a voz da marca, sans para a leitura longa.

Logotipo

Só em SVG, pela página de Assets. Nunca redigite ARANDUKA em uma fonte parecida.

Source Code Pro

Títulos, rótulos, navegação, preços e dados técnicos. É a mesma voz de ficha técnica do rótulo.

Source Sans 3

Texto corrido e descrições longas. É da mesma família da Source Code Pro, mas mais confortável para ler parágrafos.

displaySource Code Pro · 300(40px, 6vw, 84px) · 1.05

Sabedoria que vem da mata

h1Source Code Pro · 300(32px, 4.2vw, 56px) · 1.1

Sabedoria que vem da mata

h2Source Code Pro · 300(26px, 3vw, 40px) · 1.15

Sabedoria que vem da mata

h3Source Code Pro · 40022px · 1.3

Sabedoria que vem da mata

overlineSource Code Pro · 50012px · 1.4

Da floresta, para você

body-lgSource Sans 3 · 30018px · 1.65

Óleos vegetais reunidos em torno do buriti, fruto das veredas maranhenses.

bodySource Sans 3 · 40016px · 1.65

Óleos vegetais reunidos em torno do buriti, fruto das veredas maranhenses.

smallSource Sans 3 · 40014px · 1.55

Óleos vegetais reunidos em torno do buriti, fruto das veredas maranhenses.

captionSource Code Pro · 40012px · 1.5

ÓLEO CORPORAL · 100 mL · R$ 137,00

04 Espaço e grid

Base de 4px, grid de 12 colunas e respiro de clareira.

space-14px

space-28px

space-312px

space-416px

space-524px

space-632px

space-748px

space-864px

space-996px

space-10128px

`max-width`	1440px
`columns`	12
`gutter`	24px
`margin`	clamp(16px, 5vw, 96px)
`bp-sm`	480px
`bp-md`	768px
`bp-lg`	1024px
`bp-xl`	1280px
`bp-2xl`	1536px

05 Forma

Cantos retos, uma exceção: o arco.

Cantos retos

radius-none em botões, campos, cards e imagens. A marca é traço, não bolha.

Arco

radius-arch só em molduras especiais: destaque de produto, capa de coleção. Vem do topo do rótulo.

Pílula

radius-pill só em tags e filtros pequenos.

Sem sombra

A hierarquia vem de cor, borda de 1px e espaço. Sombra só em sobreposições (modal, menu flutuante).

06 Movimento

Lento o bastante para ser notado, rápido o bastante para não atrasar.

`ease`	cubic-bezier(.2, .7, .2, 1)
`duration-fast`	150ms
`duration-base`	300ms
`duration-slow`	600ms
`duration-reveal`	900ms

fast

base

slow

reveal

Loader: o símbolo desenhado traço a traço. Use entre páginas e em carregamentos acima de 400ms.

Sempre respeite prefers-reduced-motion: o conteúdo aparece sem deslocamento e o loader fica estático.

07 Ícones e imagem

Traço fino como o do símbolo. Luz natural como a da vereda.

Ícones

Sacola

Folha

Gota

Busca

Local

Semente

Grid de 24px, traço de 1,5px, pontas e cantos retos.
Referência de biblioteca: Lucide com stroke-width="1.5".
Cor do ícone igual à do texto ao lado; Polpa só em ícones de destaque.

Fotografia

Luz: natural, de fim de tarde, com sombras suaves.
Assunto: o buriti, as mãos, a textura, o território real do Maranhão.
Pessoas: rostos reais, com nome e crédito. Nada de modelo posado como cenário.
Tratamento: sem filtros saturados; puxar para a paleta (verdes profundos, laranja quente).
Evitar: drone de “selva infinita”, exotização, banco de imagem de outro bioma.
Técnica: WebP/AVIF, lado maior de 2400px, loading="lazy" e texto alternativo descritivo.

08 Componentes

Blocos de base, prontos para o e-commerce e o site institucional.

Botões

Altura de 48px (44px no mínimo), rótulo em mono caixa alta com espaçamento de .14em. Primário em Amazônia; accent em Casca, só uma vez por tela.

Links, tags e selos

Conheça a origem do buriti Pós-banhoBuritiVegano 100% veganoBuriti do Maranhão

Formulário

Card de produto

Ritual · Pós-banho

Óleo Hidratante Corporal

Buriti · Rosa mosqueta · Semente de uva

R$ 137,00100 mL

Anatomia. Imagem com moldura em arco (exceção permitida), ritual como etiqueta superior, nome em mono, ativos com origem, preço em mono e um único CTA.

Regra de transparência. Ativos principais e volume sempre visíveis no card, sem precisar passar o mouse.

Avisos

Pronto. Seu pedido está a caminho. A floresta mandou, você recebe.

Últimas unidades. Restam 3 frascos deste lote.

Algo não saiu como esperado. Não conseguimos processar o pagamento. Tente outro cartão ou fale com a gente.

09 Acessibilidade

Critérios mínimos (WCAG 2.2 AA).

Contraste

Texto até 18px precisa de 4,5:1 ou mais. Polpa (highlight) não serve para texto pequeno; use highlight-text.

Foco

Anel de 2px em Polpa, com afastamento de 3px, em todo elemento interativo. Nunca use outline: none sem substituto.

Alvos

Área clicável de 44 × 44px ou mais, inclusive em ícones e tags filtráveis.

Conteúdo

lang="pt-BR", títulos em ordem (h1 → h2 → h3), texto alternativo que descreve a imagem e rótulos visíveis em todos os campos.

Movimento

Nada pisca mais de 3 vezes por segundo. Animações desligam com prefers-reduced-motion.

Rótulo digital

Composição INCI, advertências e modo de uso em HTML real, não em imagem.

10 Microcopy

A interface fala como a marca: convida, explica e não pressiona.

Situação	Usar	Evitar
CTA de compra	Adicionar à sacola	COMPRE JÁ!!!
Sacola vazia	Sua sacola está esperando o primeiro ritual.	Carrinho vazio.
Erro de campo	Faltou o domínio do e-mail. Ex.: nome@email.com	E-mail inválido.
Envio confirmado	A floresta mandou. Chega em até 5 dias úteis.	Pedido processado com sucesso.
Sem estoque	Este lote acabou. Avise-me quando voltar.	Esgotado.
Newsletter	Receba o guia do ritual e novidades da colheita.	Assine nossa newsletter e ganhe 10%!

11 Tokens

Uma fonte única para o código.

:root {
  --ak-amazonia: #2f3a24;
  --ak-folha: #5e7b4b;
  --ak-vereda: #a8b98c;
  --ak-polpa: #c2613e;
  --ak-casca: #7a2e2a;
  --ak-fibra: #efe6d5;
  --ak-fibra-50: #f7f2e9;
  --ak-amazonia-900: #1f2718;
  --ak-color-bg: #efe6d5;
  --ak-color-surface: #f7f2e9;
  --ak-color-bg-inverse: #2f3a24;
  --ak-color-text: #2f3a24;
  --ak-color-text-muted: #5a6450;
  --ak-color-text-inverse: #efe6d5;
  --ak-color-text-inverse-muted: #a8b98c;
  --ak-color-action: #2f3a24;
  --ak-color-accent: #7a2e2a;
  --ak-color-accent-hover: #5f2320;
  --ak-color-highlight: #c2613e;
  --ak-color-highlight-text: #a24c2d;
  --ak-color-border: rgb(47 58 36 / .18);
  --ak-color-focus: #c2613e;
  --ak-color-success: #3f5a30;
  --ak-color-warning: #8a5a12;
  --ak-color-error: #9b2c22;
  --ak-font-mono: 'Source Code Pro', ui-monospace, Menlo, monospace;
  --ak-font-sans: 'Source Sans 3', system-ui, sans-serif;
  --ak-text-display: 300 clamp(40px, 6vw, 84px)/1.05 var(--ak-font-mono);
  --ak-tracking-display: .01em;
  --ak-text-h1: 300 clamp(32px, 4.2vw, 56px)/1.1 var(--ak-font-mono);
  --ak-tracking-h1: .01em;
  --ak-text-h2: 300 clamp(26px, 3vw, 40px)/1.15 var(--ak-font-mono);
  --ak-text-h3: 400 22px/1.3 var(--ak-font-mono);
  --ak-text-overline: 500 12px/1.4 var(--ak-font-mono);
  --ak-tracking-overline: .28em;
  --ak-text-body-lg: 300 18px/1.65 var(--ak-font-sans);
  --ak-text-body: 400 16px/1.65 var(--ak-font-sans);
  --ak-text-small: 400 14px/1.55 var(--ak-font-sans);
  --ak-text-caption: 400 12px/1.5 var(--ak-font-mono);
  --ak-tracking-caption: .06em;
  --ak-space-1: 4px;
  --ak-space-2: 8px;
  --ak-space-3: 12px;
  --ak-space-4: 16px;
  --ak-space-5: 24px;
  --ak-space-6: 32px;
  --ak-space-7: 48px;
  --ak-space-8: 64px;
  --ak-space-9: 96px;
  --ak-space-10: 128px;
  --ak-radius-none: 0;
  --ak-radius-pill: 999px;
  --ak-radius-arch: 50% 50% 0 0 / 22% 22% 0 0;
  --ak-max-width: 1440px;
  --ak-columns: 12;
  --ak-gutter: 24px;
  --ak-margin: clamp(16px, 5vw, 96px);
  --ak-ease: cubic-bezier(.2, .7, .2, 1);
  --ak-duration-fast: 150ms;
  --ak-duration-base: 300ms;
  --ak-duration-slow: 600ms;
  --ak-duration-reveal: 900ms;
}

Prefixo --ak- para não colidir com bibliotecas. A fonte da verdade é src/data/tokens.ts: altere lá, e esta página e os arquivos baixados acompanham.