Ella Mizuki
Todos os docs

DOC/ Atualizado em 2026-09-19

Design

A linguagem visual, os tokens YuTheme e a identidade da Ella.

O site pertence ao ecossistema YuTheme: a mesma paleta escura quente, o tipo Geist, bordas finas, movimento contido e clareza editorial usados nos produtos do Yuri, mantendo ao mesmo tempo uma identidade própria.

A marca de Ella é um "E" dourado quadrado (usado no header e no favicon) mais um losango dourado usado como acento recorrente antes dos eyebrows. Não há avatar, rosto ou mascote. A identidade vive na tipografia, na composição, na cor e em pequenos detalhes gráficos.

Valores canônicos YuTheme, definidos em apps/web/src/app/[locale]/globals.css:

  • canvas #1a1813, surface #191811, raised #1f1d17
  • texto primário #f4f1e8, secundário #b8b2a4, terciário #827c70
  • dourado de acento #d6a84f, hover #e0b760
  • bordas com alpha quente: faint 0.06, subtle 0.08, padrão 0.14, forte 0.22
  • raios 4/6/8px, transição 160ms cubic-bezier(0.2, 0, 0, 1)

Não adicione cores aproximadas quando existe um token canônico.

  • Geist Variable para tudo; Geist Mono Variable para labels e metadata.
  • h1 do hero: clamp(2.25rem, 5vw, 3.25rem), peso 400, letter spacing -0.03em, com a "Ella" dourada em itálico.
  • Títulos de seção: clamp(1.5rem, 3vw, 2.25rem), peso 500.
  • Eyebrows: mono, 11px, caixa alta, espaçadas, com losango dourado e número da seção (01, 02...).

  • Header fixo com 64px; o scrollspy marca a seção ativa em dourado.
  • O hero é um grid de duas colunas no desktop: texto à esquerda, cartão terminal à direita. No mobile, empilha.
  • As seções editoriais usam um grid 1fr / 1.4fr com bordas superiores sutis e padding generoso; colapsam para uma coluna abaixo de 900px.
  • O cartão terminal apresenta as linhas de status de Ella com um cursor dourado piscando. É um elemento de design, não um terminal real.

Quieto e funcional:

  • shimmer no nome do hero, no botão primário, na marca do header e na assinatura do footer;
  • brilho ambiente de fundo que deriva lentamente;
  • revelações de scroll com pequeno stagger, dirigidas por IntersectionObserver;
  • tudo controlado por prefers-reduced-motion: no-preference. Com reduced motion, todos os efeitos são desativados e o conteúdo deve permanecer visível.

Não adicione motion decorativo sem um caminho de reduced motion.

Evite chrome de SaaS, roxo neon, estilo anime de clichê, gradientes excessivos, glassmorphism gratuito, dashboards, muros de cartões e decoração sem função.