Sistema de Design AwOr

Guia visual e funcional com componentes padronizados para produtos, páginas e campanhas. Alinhado à Awaken Oribá em cores, tipografia, espaçamento e acessibilidade.

#FF6501
#136C50
#001F3D
#F1F1F1
#333333
#666666
#999999
#CCCCCC
#DDDDDD
#FFFFFF

Paleta principal e de apoio.

Tipografia

#001F3D
#136C50
#FF6501
#333333
#666666

H1 – Título Principal

H2 – Subtítulo Secundário

H3 – Seção Interna

A tipografia equilibra impacto e legibilidade. Utilize Montserrat para títulos e Open Sans para textos.

Legendas e textos auxiliares mantêm hierarquia clara.

Botões

Estados: padrão, hover, focus e disabled.

Boas práticas

  • Primário para a ação principal; um por tela sempre que possível.
  • Secundário para ações de apoio.
  • Estados de foco sempre visíveis (2px + offset).

Cards

Card Institucional

Estrutura para informações gerais de produtos e serviços.

Novo

“A AwOr me deu clareza, método e direção. Em 90 dias tirei o curso do papel e fiz minhas primeiras vendas.”

— Antonina

Cards

Card Institucional

Estrutura para informações gerais de produtos e serviços.

Novo

“A AwOr me deu clareza, método e direção. Em 90 dias tirei o curso do papel e fiz minhas primeiras vendas.”

— Antonina

Formulários

Padrões de campo

  • Bordas 1px #CCC e foco 2px laranja #FF6501.
  • Padding 12×16 e cantos 4px.
  • Altura mínima de textarea: 120px.
Link acessível
Preencha com as maiores dúvidas do público

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ad,dicta odit veniam iure neque illum ex libero,exercitationem sunt soluta quos nulla alias ducimus possimus officiis minus mollitia quo!

Preencha com as maiores dúvidas do público

Lorem ipsum dolor,sit amet consectetur,adipisicing elit. Odio sint id quaerat atque quae quos architecto debitis. Velit quidem maiores inventore similique culpa ab sed corporis exercitationem,magni quasi eius?

Preencha com as maiores dúvidas do público

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia atque,recusandae dolores aut modi similique quam laudantium impedit obcaecati iusto mollitia commodi quos id error quisquam vero enim dolor. Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Paleta & Acessibilidade

Cores de Estado

Sucesso
#22C55E
Atenção
#F59E0B
Erro
#EF4444
Info
#3B82F6

Regras de Acessibilidade

  • Contraste checado para texto e botões.
  • Tamanho mínimo de texto 16px; touch target ≥ 44×44.
  • Focus state: anel 2px + offset (teclado).

Grid & Espaçamento

Container 1200px, 12 colunas, gutter 24px/16px, escala 8px.

1
2
3
4
5
6
7
8
9
10
11
12
8px
16px
24px
32px
48px
64px