Design System documentado

Essentials Ayurveda — Padrões de Cores, Tipografia e Componentes

Página única em HTML com toda a documentação visual consolidada para reutilização em projetos no geral, incluindo paleta oficial, tipografia, variáveis CSS, botões, cards, campos, estrutura visual e template Tailwind.

Resumo visual

Identidade natural, premium e acolhedora

Base ideal para wellness, Ayurveda, estética, produtos naturais, terapias, SaaS leve, landing pages e páginas institucionais.

Botão Primário Botão Secundário Outline
Primária: #7A8973
Verde oliva suave
Texto Premium
Bloco escuro para CTA e destaque
Secundária: #BBA667
Dourado sofisticado

1. Paleta de cores

Conjunto principal extraído do padrão visual: verde oliva, dourado suave, bege claro, neutros e contraste forte para textos e CTAs.

primary
#7A8973
cor principal da marca
secondary
#BBA667
detalhes sofisticados
accent
#D8BC49
destaque secundário
surface-soft
#F6F1E1
fundos suaves
white
#FFFFFF
fundo base
border
#D6D6D6
bordas e divisores
text-muted
#5C6657
texto secundário
text
#000000
texto principal

2. Escalas expandidas

Escalas sugeridas para uso em hover, fundo, bordas, elementos de interface e variações de profundidade visual.

TokenHexUso
primary-50#F3F5F1fundo muito leve
primary-100#E4E9E1blocos e bordas suaves
primary-200#C9D2C4linhas e hover discreto
primary-300#AAB7A2contornos e estados intermediários
primary-400#8F9E87foco e destaque leve
primary-500#7A8973cor principal
primary-600#68755Fhover do botão principal
primary-700#55604Dtexto reforçado
primary-800#434C3Dtítulos fortes
primary-900#31382Cblocos premium escuros
TokenHexUso
gold-50#FBF7ECfundo quente leve
gold-100#F4EBCFblocos suaves dourados
gold-200#E8D89Ddestaque sutil
gold-300#D9C16Cvariação clara para UI
gold-400#CBB04Ehover do secundário
gold-500#BBA667cor secundária
gold-600#A38B4Bênfase mais forte
gold-700#826F3Btexto dourado escuro
gold-800#62542Calto contraste elegante
gold-900#43391Duso pontual profundo

3. Tipografia

Combinação recomendada para manter personalidade visual nos títulos e alta legibilidade no corpo do conteúdo e interfaces.

Display
Stardos Stencil

Uso indicado em logo, hero title, títulos de seção e chamadas especiais.

Body / UI
Inter

Interface, descrições, formulários, navegação, textos corridos e elementos utilitários.

Google Fonts — Stardos Stencil
<link href="https://fonts.googleapis.com/css2?family=Stardos+Stencil:wght@400;700&display=swap" rel="stylesheet">
Google Fonts — Inter + Stardos Stencil
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Stardos+Stencil:wght@400;700&display=swap" rel="stylesheet">

4. Variáveis CSS prontas

Base centralizada para reaproveitar a identidade visual em SaaS, landing pages, sites institucionais e dashboards leves.

:root
:root {
  --color-primary: #7A8973;
  --color-primary-50: #F3F5F1;
  --color-primary-100: #E4E9E1;
  --color-primary-200: #C9D2C4;
  --color-primary-300: #AAB7A2;
  --color-primary-400: #8F9E87;
  --color-primary-500: #7A8973;
  --color-primary-600: #68755F;
  --color-primary-700: #55604D;
  --color-primary-800: #434C3D;
  --color-primary-900: #31382C;

  --color-secondary: #BBA667;
  --color-gold-50: #FBF7EC;
  --color-gold-100: #F4EBCF;
  --color-gold-200: #E8D89D;
  --color-gold-300: #D9C16C;
  --color-gold-400: #CBB04E;
  --color-gold-500: #BBA667;
  --color-gold-600: #A38B4B;
  --color-gold-700: #826F3B;
  --color-gold-800: #62542C;
  --color-gold-900: #43391D;

  --color-accent: #D8BC49;
  --color-surface-soft: #F6F1E1;
  --color-surface: #FFFFFF;
  --color-border: #D6D6D6;
  --color-text: #000000;
  --color-text-muted: #5C6657;
  --color-text-soft: #6F766C;
  --color-on-dark: #FFFFFF;

  --font-display: "Stardos Stencil", serif;
  --font-body: "Inter", sans-serif;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.12);
}

5. Botões

Sistema de botões com hierarquia clara: primário em verde oliva, secundário em dourado, outline e opção escura para seções premium.

Prévia visual

Começar agora Ver demonstração Saiba mais Falar com consultor Botão suave
Classes principais
.btn-primary   { background: var(--color-primary); color: #fff; }
.btn-secondary { background: var(--color-secondary); color: #111; }
.btn-outline   { background: #fff; color: var(--color-primary-700); border: 1px solid var(--color-primary-300); }
.btn-dark      { background: #000; color: #fff; }
.btn-soft      { background: var(--color-surface-soft); color: var(--color-primary-800); border: 1px solid var(--color-border); }

6. Cards

Cards com respiro amplo, bordas suaves e profundidade discreta para comunicar sofisticação leve e organização visual.

Card padrão

Fundo branco, borda leve e sombra suave para módulos, benefícios, blocos de recurso e conteúdos informativos.

Card soft

Versão mais calorosa usando o bege claro como fundo para blocos acolhedores, seções explicativas e áreas de apoio.

Card dark

Bloco premium para CTA final, planos, resumo executivo, diferenciais e áreas de alto contraste.

7. Formulários

Campos limpos com contorno neutro, foco suave em verde e estrutura consistente com a linguagem premium da interface.

Input base
.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  font: inherit;
}

8. Direção de uso em projetos

Aplicação recomendada para preservar consistência visual e boa hierarquia de interface.

Header / navegação

Fundo branco, logo em Stardos Stencil, links em Inter e CTA principal usando #7A8973.

Hero

Título display grande, subtítulo em #5C6657, fundo claro e CTAs primário e secundário.

CTA final

Use primary-900 para criar fechamento premium com contraste alto e foco na conversão.

9. Template Tailwind

Configuração pronta para replicar o mesmo design system em projetos com Tailwind CSS.

tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue,php,blade.php}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#F3F5F1",
          100: "#E4E9E1",
          200: "#C9D2C4",
          300: "#AAB7A2",
          400: "#8F9E87",
          500: "#7A8973",
          600: "#68755F",
          700: "#55604D",
          800: "#434C3D",
          900: "#31382C"
        },
        gold: {
          50: "#FBF7EC",
          100: "#F4EBCF",
          200: "#E8D89D",
          300: "#D9C16C",
          400: "#CBB04E",
          500: "#BBA667",
          600: "#A38B4B",
          700: "#826F3B",
          800: "#62542C",
          900: "#43391D"
        },
        accent: "#D8BC49",
        soft: "#F6F1E1",
        line: "#D6D6D6",
        muted: "#5C6657"
      },
      fontFamily: {
        display: ['"Stardos Stencil"', 'serif'],
        body: ['Inter', 'sans-serif']
      },
      borderRadius: {
        xl2: "20px",
        xl3: "28px"
      },
      boxShadow: {
        soft: "0 2px 10px rgba(0,0,0,0.06)",
        card: "0 10px 30px rgba(0,0,0,0.08)",
        lift: "0 18px 50px rgba(0,0,0,0.12)"
      }
    }
  },
  plugins: []
}

10. Resumo prático

Cores principais

Primária: #7A8973
Secundária: #BBA667
Accent: #D8BC49
Fundo suave: #F6F1E1

Fontes

Display: Stardos Stencil
Body / UI: Inter

Ideal para

landing pages, dashboards leves, wellness, estética, terapias e produtos naturais.

Tom visual

natural, premium, artesanal, acolhedor e clean.

Estrutura visual

espaçamento generoso, títulos fortes, poucos elementos por bloco e contraste elegante.