Design

O site pertence ao ecossistema YuTheme: o mesmo fundo preto absoluto (AMOLED) e superfícies quase pretas quentes, o tipo Geist, bordas finas, movimento contido e clareza editorial usados nos produtos do Yuri, mantendo ao mesmo tempo uma identidade própria.

Identidade

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.

Tokens

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

• canvas #000000, window/surface #0b0b0a, raised #151514
• texto primário #f4f1e8, secundário #b3ad9f, terciário #8e887c
• dourado de acento #d6a84f, hover #e0b760
• bordas com alpha neutro: faint 0.08, subtle 0.13, padrão 0.2, forte 0.32
• raios 4/8/12px, janela 14px, transição 160ms cubic-bezier(0.2, 0, 0, 1)

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

Tipografia

• 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...).

Composição

• 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.

Motion

Quieto e funcional:

• shimmer no nome do hero e na assinatura do footer;
• entrada com blur (yu-rise) nas colunas do hero;
• um brilho focal discreto atrás do terminal;
• 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.

Anti-padrões

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.