Maya

Overview

A Maya posiciona-se como o primeiro sistema de gestão pensado para confeiteiros e pequenos empreendedores da gastronomia. O estilo visual é de Soft Minimalism com acentos de marca: superfícies pêssego-creme (#fff7f3) recebem blocos de conteúdo arredondados e um azul-marinho (#19518e) que comanda toda ação. A emoção buscada é de alívio organizado: o usuário sente que a cozinha volta a ser o centro do negócio.

O tom de voz é coloquial, afetuoso e direto, usando perguntas retóricas e emojis leves ("Sabe quais são seus custos?", "pq ta cansada e descabelada"). Frases curtas, vocabulário do dia a dia da cozinha e promessas concretas de resultado financeiro. Exemplo: "Vende doce? Deixa que a Maya cuida da conta e você foca na cozinha."

Colors

A cor primária (#19518e) é reservada a CTAs, links de navegação e pílulas de ação; ela aparece sobre texto branco (#ffffff) com contraste suficiente para leitura. O azul claro #7faee0 funciona como cor de contorno, fakebar de vídeo e estados de foco. Verde-escuro #2c462e (secundária) marca títulos de seção como "Sim, a Maya vai sugerir o preço". O pêssego #fae5d1 e o creme #fff7f3 formam a camada base dos blocos de hero, enquanto #f0b57d (terciária) aparece como sublinhado destacado em palavras-chave. Vermelho #f23838 é reservado a erros e o indicador de página ativa (#ff3944, 2px de altura, máximo 38px).

A hierarquia de superfícies segue três degraus: fundo branco puro (#ffffff) na página, creme (#fff7f3) no bloco de herói e pêssego (#fae5d1) em cartões de destaque. Não há gradientes de

Typography

A família Raleway (pesos 400, 500, 600 e 700) carrega toda a hierarquia, com Lato apenas como fonte carregada sem uso dominante. Títulos H1 e H2 ficam em 32px / 500 com line-height 1.2 (38.4px e 40px), dando um tom elegante e não agressivo. O texto de apoio em 12.8px / 400 com line-height 1.5 garante leitura confortável em parágrafos centralizados. Rótulos de botão usam peso 700 em 16px para CTAs principais e 600 em 12.8px para ações secundárias. Destaques dentro do H1 usam font-weight 700 combinado com um marcador de fundo pêssego (background-color: #fae5d1, height ~40% da linha) em vez de cor de texto, preservando legibilidade.

Layout

O layout é fluido até 995px de largura máxima (container-max), com grid de 12 colunas e gutter de 16px. Blocos de conteúdo flutuam dentro de um container pêssego com margem interna de 32px (spacing.xl). Use o espaçamento lg (24px) para separar grupos relacionados e xl (32px) para quebrar seções; a unidade base de 8px governa paddings internos. Textos centralizados ocupam no máximo 60% da largura do container para manter ritmo de leitura, e o html usa font-size: 1vw até 1920px, reduzindo para 1rem abaixo de 995px.

Elevation & Depth

A profundidade é quase inexistente: a hierarquia vem de contraste de superfície e não de sombra. Cards usam box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a apenas para campos de formulário e controles elevados. Elementos de destaque recebem 0 0 3px #3336 em estado de foco. Não há blur nem glassmorphism.

Shapes

A filosofia é Soft-Organic: cantos muito arredondados em formas de ação e contêineres grandes. Botões primários e secundários usam border-radius 640px (pílula completa, equivalente a rounded.full). Blocos de conteúdo e o container do herói usam 32px (2rem). Campos de texto e o player de vídeo usam 6.4px (0.4rem), mantendo um contraste deliberado entre controles suaves e entradas mais técnicas.

Components

Action Elements O botão primário tem altura de 48px, padding horizontal de 44.8px e peso 700 em 16px. No hover, o fundo troca para #7faee0 com transição de 200ms ease-in-out. O botão secundário/navbar tem 38px de altura e padding 9.6px 32px; ao passar o mouse, escurece levemente para #14406f.

Containers & Surfaces Cards usam fundo #fff7f3 com radius de 32px e padding de 32px. No hover, sobem para #fae5d1 em 250ms. O herói de vídeo mantém radius de 0px internamente, deixando o player com bordas retas sobre o container arredondado.

Inputs & Interaction Campos de entrada têm borda de 1px sólida #dddddd, radius 6.4px e padding 10px. No foco, a borda muda para #7faee0 com box-shadow 0 0 3px #3336. Links de navegação são texto azul #19518e em 12.8px / 600; o item ativo recebe um tr

Do's and Don'ts

**Do**

• Use #19518e exclusivamente para ações e links interativos.
• Mantenha o creme #fff7f3 como base dos blocos de herói para preservar a suavidade.
• Aplique radius de 2rem (32px) em contêineres e pílula completa em botões.
• Destaque palavras-chave com marcador pêssego #fae5d1 em vez de trocar a cor do texto.

**Don't**

• Não use sombras pesadas; a profundidade vem de superfície, não de elevação.
• Não aplique o vermelho #f23838 em elementos decorativos, apenas em erros.
• Não substitua Raleway por fontes genéricas sans-serif em títulos.
• Não ultrapasse 995px de largura útil para o conteúdo principal.