← Inspiration
extraído de apechain.com Ver sitio ↗
ecosystem portal gaming onchain spotlight shell

THE PLACE TO APE

APECHAIN mezcla shell nocturno, azul electrico y titulares comprimidos para convertir su home en una cartelera de ecosystem. La voz es agresiva pero limpia: grids amplios, cards como posters y un contraste frio que empuja cultura web3, juegos y spotlight en la misma escena.

dark mode blue family 5 colores clave 3 familias
apechain.com
Captura de APECHAIN
APECHAIN
SPOTLIGHT
01

Color

dark · 5 swatches
Brand
#0054FA
Azul Ape
primary · brand axis
AA sobre shell oscuro · contraste alto
#96BBFF
Azul cielo
supporting · hover · glow
ideal para highlights y blur ambiental
Supporting
#E2F0FF
Hielo
spotlight surface · text on dark
superficie teatral para romper el shell
#46558F
Borde frío
stroke · container edge
separa cards sin volverlas enterprise
Neutrals
#020315
Shell dark navy
canvas · hero · header
base dramatica sobre la que todo respira
02

Typography

3 families
AaEeCcGg50.
Teko original manuka, sustituto Google por portabilidad, body real DM Sans, labels reales DM Mono
400 RegularWHERE DAPPS SHINE
500 MediumTHE PLACE TO APE
600 SemiboldBUILD ON APECHAIN
Body — DM Sans

ApeChain usa una sans amable y legible para sostener densidad informativa sin competir con la display. El cuerpo explica rounds, apps, rewards y builders, mientras la headline se queda con el golpe emocional.

RoleSizeWeightLH
display-xl200px40090%
display-md120px40078.5%
body16px400175%
label12px500140%
mono12px400140%
La identidad tipografica vive en la compresion. Si la display deja de sentirse como poster, ApeChain pierde el tono web3 gaming y se vuelve un portal tech cualquiera. Headings: Teko. Body: DM Sans. Labels operativos: DM Mono.
03

Components

live recipes
Spotlight card
CLUTCH MARKETS

Superficie profunda, borde frio y headline comprimida sobre media escenica. La card se siente como asset promocional, no como módulo enterprise.

04

Spacing & shape

base 4px
Spacing scale
8px
16px
24px
48px
96px
Radius family
8px
16px
24px
pill
Elevation
cards profundas, glow puntual en CTA y blur azul como halo ambiental
05

Principles

guardrails

Do

  • Usa el azul electrico como foco real, no como baño total.
  • Mantén la display comprimida y enorme para que el sitio suene a cartel.
  • Rompe el shell oscuro con superficies hielo cuando quieras spotlight teatral.
  • Construye cards como piezas de showcase con media, no como tablas de datos.
  • Apóyate en DM Mono para labels y sensación operativa onchain.
  • Deja aire vertical para que headline y slider no compitan.

Don't

  • No conviertas toda la interfaz en un azul medio uniforme.
  • No sustituyas la display por una grotesca neutra sin tensión.
  • No redondees todo en exceso, la dureza visual importa.
  • No llenes cada bloque con glow; el halo debe ser raro y valioso.
  • No comprimas demasiado las secciones, la escala necesita escenario.
  • No metas acentos ajenos a la familia azul-hielo-negro.
06

Resources

copy & paste
Download DESIGN.md