Papel, tinta e movimento

A marca nasce do gesto de recortar, colar e desenhar no papel. A interface é calma e clara (papel e tinta) para que as imagens e animações de quem cria sejam o destaque. O índigo conduz a ação; o coral marca o que é importante.

Marca e logo

Uso

• Fundo claro: assets/brand/logo-light.webp. Fundo escuro: assets/brand/logo-dark.webp. Ícone: assets/brand/favicon.png.
• Altura mínima de 24 px na tela. Deixe ao redor um respiro igual à altura do “A”.
• Não mude as cores, não aplique sombra e não coloque sobre fotos sem uma área lisa por trás.

Cores

Papel (fundos)

Tinta (texto)

Índigo (ação) e coral (destaque)

Apoio

Tokens semânticos (use estes nos componentes)

O tema é escolhido no botão de sol/lua (data-theme-toggle) ou no menu do usuário (Claro, Escuro, Sistema) e fica salvo. EditorVideo.theme grava o tema efetivo em <html data-theme="dark|light">; no escuro, o fundo das páginas vira uma grade fina (--ak-page / --ak-grid). Contraste mínimo AA (4,5:1) para texto.

Tipografia

Família: Avenir Next, com Nunito Sans / Segoe UI / fonte do sistema como alternativa — arredondada e amigável como o logo, sem custo de carregamento.

Espaço e forma

Espaçamento (base 4 px)

Raios

Sombras e o “adesivo”

shadow-sm

shadow-md

shadow-lg

.ak-sticker: borda branca de recorte — assinatura visual da marca

Botões

<button class="ak-btn ak-btn--primary">Criar conta</button>
<a class="ak-btn ak-btn--secondary ak-btn--sm" href="…">Ver planos</a>   <!-- --sm | --lg | --block | .is-loading -->

Uma ação primária por tela. Rótulos com verbo: “Criar conta”, “Salvar perfil”, “Gravar vídeo”.

Formulários

<div class="ak-field">            <!-- + .has-error mostra .ak-error -->
  <label class="ak-label" for="email">E-mail</label>
  <input class="ak-input" id="email" type="email">
  <span class="ak-error">Digite um e-mail válido.</span>
</div>

Badges, chips e avisos

Avisos, perguntas e Marki

Nada de alert, confirm ou prompt do navegador. Tudo passa por EditorVideo.ui (js/services/editorvideo.js).

EditorVideo.ui.toast('Salvo.')                                   // 'success' | 'info' | 'warn' | 'error'
EditorVideo.ui.toast('Enviado.', {action:{label:'Abrir', fn}})
await EditorVideo.ui.confirm({title, message, ok, danger:true})    // true | false
await EditorVideo.ui.prompt({title, label, value})                 // texto | null

Marki

O mascote de papel. Surpreso ao apagar, pensativo nas perguntas, piscando ao renomear, comemorando no vídeo pronto. Um por tela, no máximo. mascot:'cheer' escolhe a pose; mascot:false tira.

Cartões, avatar e planos

Navegação

RecursosPlanosCriar conta

.ak-nav fixa no topo com fundo translúcido. O menu do usuário é o componente <div data-user-menu></div> (js/ui/user-menu.js): mostra “Entrar / Criar conta” ou o avatar com Minha conta, Assinatura e Sair.

Como usar

<link rel="stylesheet" href="css/brand.css">   <!-- tokens + componentes -->
<link rel="stylesheet" href="css/pages.css">   <!-- layouts das páginas da marca -->
<body class="ak">                              <!-- base tipográfica da marca -->

/* Prefira os tokens semânticos: */
.minha-coisa{ background:var(--ak-surface); color:var(--ak-text); border:1px solid var(--ak-line); border-radius:var(--ak-r-lg); }

Prefixo ak- em tudo (classes e variáveis), para conviver com outros estilos — o editor (app.html) usa o próprio css/app.css e carrega o brand.css só para o menu do usuário.