Geekbeam BRAND GUIDELINES · v2026.1 Explorar

Anime & Anima · Vertical Series

A new age
of anime.

Sistema de marca completo de GeekBeam: color, tipografía, componentes, motion y voz. Referencia viva para replicar el look del sitio en la app.

Ver componentes Ver mockups

Anime & Anima✦Vertical series✦Episodios de 3 min✦Golden age vibes✦Mind-blowing originals✦ Anime & Anima✦Vertical series✦Episodios de 3 min✦Golden age vibes✦Mind-blowing originals✦

01 · Logo

Isotipo "G3" — los anteojos

G + 3 forman unos anteojos: el geek. Violeta #9C55FF como color primario del logo. Versión única, sin degradados ni contornos.

Principal — violeta sobre negro

Sobre Blanco Piedra

Blanco sobre violeta

GeekbeamLockup con wordmark Satoshi

No estirar ni deformar

No cambiar el color fuera de la paleta

No aplicar sombras ni efectos

No usar violeta sobre violeta — contraste insuficiente

02 · Color

Paleta 2026

Violeta como acento, nunca como fondo dominante. Negro y charcoal cargan la interfaz; Blanco Piedra para el texto.

Violeta

#9C55FF · Pantone 2665 C

Violeta profundo

#772CE8 · pressed / gradiente

Black

#000000 · hero / player

Negro

#161616 · fondo base

Surface

#1E1E1E · cards / sheets

Blanco Piedra

#F9F9F9 · texto

Outline

#D9D9D9 · botones web

60% negro/charcoal

30% surface

10%

success #4ADE80 warning #FBBF24 error #EF4444 tokens #FFD700

03 · Typography

Satoshi + Space Grotesk

Display · Satoshi Bold · UPPER · −3%Find your next obsession.

H1 · Space Grotesk Medium · −1% · 32ptNew originals & hidden gems

H2 · Space Grotesk Medium · 24ptEpisodios de 3 minutos o menos

H3 · Space Grotesk Regular · +2% · 18ptAnime clásico, formato vertical

Body · Space Grotesk Regular · 16ptNinja Scroll, Akira, Ghost in the Shell & Berserk. Extrañábamos esa época dorada — por eso creamos GeekBeam.

Meta · 13pt · +2% · UPPER3 SEASONS · 2026 · SCI-FI, ACTION-ADVENTURE

Display siempre UPPERCASE.
Satoshi Bold, tracking −3%, línea 1.05. Cierra con punto final.

Resaltá 1–3 palabras en violeta.
El highlight va en la palabra con carga emocional, no en conectores.

Space Grotesk para todo lo demás.
Medium para headings, Regular para body y meta. Nunca Satoshi en body.

04 · Buttons

Radius firma 20 / 0

border-radius: 20px 0 20px 0 — TL/BR redondeadas, TR/BL rectas. Labels en mayúsculas. Press = scale 0.96.

Primary Watch now Hover Loading Disabled Outline Get the app Hover Loading Disabled Ghost Ver todo Hover → Siguiente ep Disabled Sizes Small Medium Large Unlock · 50

05 · Chips & Badges

Action Dark Fantasy Retro Cyberpunk Mecha

✦ Original Free ★ VIP New EP 0 tokens 🔥 Racha 5 días

07 · App mockups

Use cases en pantalla

Home feed, player vertical y wallet de tokens — el design system aplicado a las tres superficies core de la app.

250

Para vos.

TodoActionFantasyRetro

✦

Halfrock

New

Neon Drift

★

Crimson Gate

Void Runner

Home Explorar Tokens Perfil

Home — feed con chips de género y badges

← EP 3 · HALFROCK200

12.4K 830 Share

✦ Original

The fall of Neo-Kyoto

La ciudad flotante cae. Kira tiene 3 minutos para salvarla.

Player vertical — overlay negro→transparente

TU BALANCE 250 ≈ 5 episodios

Packs🔥 5 días

400

S/ 19.90

1,100

S/ 49.90

2,500

S/ 99.90

5,400

S/ 199.90

Seguí viendo

Desbloqueá el EP 4 de Halfrock por 50 tokens

Unlock · 50 tokens

Wallet — balance con sheen + paywall sheet

08 · Motion

Animaciones de marca

Curva estándar: cubic-bezier(.22,1,.36,1). Micro-interacciones 150–250ms, transiciones de pantalla 300–400ms, ambient loops 4–8s.

Glow pulse

CTA / live · 2s loop

Gradient shift

headers / banners · 5s

Press

Press scale 0.96

todos los botones · 120ms

Float

mascota / empty states · 4–6s

Token count-up

recompensas · 800ms ease-out

Skeleton shimmer

loading · 1.4s loop

09 · Voz & tono

Fandom-first, directo

✓ Así

Ready to have your mind blown?

Corto, mayúsculas, punto final, highlight en la palabra emocional.

✕ Así no

Bienvenido a nuestra plataforma de contenido audiovisual de formato corto

Corporativo, largo, sin actitud. Nunca.

✓ Así

Binge something from your bed.

Habla como fan, no como marca.

✕ Así no

Estimado usuario, su saldo de tokens es insuficiente

"Te faltan tokens. Recargá y seguí." — así sí.

09b · Mascota

Conocé a Noko

La cara de GeekBeam. Fan número uno del anime golden-age, guía a los usuarios por la app: presenta, recomienda, celebra y acompaña. Cel shading retro 90s, paleta rosa/teal/amarillo — contraste deliberado con el violeta de la UI.

Presenta, recomienda y acompaña.

Vive en onboarding, empty states, FAQ y recompensas. Nunca en el player — no interrumpe el contenido. Siempre con fondo transparente, nunca recuadrada, nunca estirada.

Pelo rosa twin-tails Bomber teal + amarillo Cel shading 90s

5 estados de ánimo

Generados con la referencia oficial del personaje. PNG con fondo transparente en design/assets/noko/.

Happy onboarding

Bienvenida, primer login, tour de la app. "¡Hola! Soy Noko."

Hyped rewards

Recompensas, check-in diario, racha, tokens ganados. Con confetti.

Sad empty / error

Sin resultados, sin conexión, error de carga. "Ups. Nada por acá."

Thinking search / FAQ

Búsqueda, filtros, preguntas frecuentes, recomendaciones.

Presenting anuncios / CTA

Estrenos, promos, nuevas features. Señala el contenido, no lo tapa.

Escala mínima 120px de alto.
Más chica pierde el detalle del rostro. Para iconos usar el isotipo G3, no a Noko.

Una Noko por pantalla.
Nunca repetir el personaje en la misma vista ni mezclar dos estados de ánimo.