Documentación / Skill

memorisely-ui

Sistema de diseño de la plataforma inspirado en Memorisely. Layout minimalista de 4 columnas, botones redondos, acentos suaves en iconos y una gran palabra decorativa de fondo (wordmark).

Memorisely UI — Sistema de Diseño

Este es el lenguaje visual inspirado en la plataforma Memorisely, enfocado en workshops y bootcamps de diseño. Combina un fuerte minimalismo en blanco y negro con detalles decorativos sofisticados, iconografía con acentos de color pastel y tipografía sobria.

1. Layout y Estructura

  • Layout General: 4 columnas principales.
  • Color de Fondo (BG): #FFFFFF.
  • Encabezados de Columna: Color negro, negrita, tamaño aproximado 13px.
  • Enlaces Activos (ej. “AI Workshops”): Color negro, negrita (el resto de enlaces permanecen gris).
  • Enlaces Inactivos: Gris #888888.
  • Wordmark: Palabra decorativa de fondo en tamaño gigante (~180px), color #ECEAE3 (#eceae3), meramente decorativa.

2. Iconografía y Acentos

Icono Estilo Color BG Color Stroke Contexto
Sparkle / AI (✦) Line, 2px #EDE9FF #9B6FFF Cards de workshop AI
Figma (⊞) Line, 2px #E8EEFF #4B6FFF Cards con Figma
Cuadrícula (◈) Line, 2px #EDE9FF #9B6FFF Cards de design systems
Punto LIVE (⬤) Sólido Transparente #F04E6B Badge LIVE (animated)
Play (▶) Sólido negro #FFFFFF #111111 Feature “Recording”
Check circular (◉) Sólido dark — #111111 Checklist sidebar

3. Separadores y Divisores

  • Líneas divisorias: 1px solid #EEEEEE entre secciones de la subpágina.
  • Separador de metadata: Punto medio · en texto inline (sin crear elementos visuales extra).
  • Espacio en blanco: El principal separador entre bloques es el espacio negativo, minimizando el uso de bordes divisorios.

4. Motion & Microinteracciones

  • Dot LIVE: Animación de pulsación continua (pulse o ping en CSS) mediante escala y opacidad.
  • Cards: Efecto de hover con una sutil elevación mediante sombra paralela suave (box-shadow).
  • Navbar: Comportamiento sticky durante el scroll, sin animación intrusiva de aparición.

5. Principios Visuales Clave

  • Monocromatía Controlada: Uso estricto de blanco y negro, con solo 3 excepciones funcionales: rojo LIVE, ámbar rating y verde Early Bird.
  • Tipografía Hero: Los títulos H1 de gran tamaño reemplazan la necesidad de imágenes o ilustraciones decorativas.
  • Cards Limpias: Sin bordes visibles en reposo. Flotan limpiamente sobre el fondo blanco y ganan profundidad en hover.
  • Iconos con BG Pastel: Uso de fondos lavanda o azul suave en iconos para dar un toque no saturado dentro de las cards.

6. Resumen visual de propiedades

Propiedad Valor
Background #FFFFFF
Texto color #212121
Fuente Inter
Peso 500 (Medium)
Tamaño texto Nav 16px
Tamaño texto Foot 14px
Border Ninguno — se usa shadow
Border-radius 8px
Box-shadow 2 capas: ring 1px + drop 1px
Padding Nav 8px 20px
Padding Footer 6px 20px
Alto Nav 36px
Alto Footer 32px
Cursor pointer
Transition all (sin duración explícita)

7. El truco del “borde sin border”

El contorno visible no es un border CSS sino un doble box-shadow:

box-shadow:
  rgba(110, 110, 110, 0.10) 0px 0px 0px 1px,  /* ring exterior: simula borde */
  rgba(110, 110, 110, 0.20) 0px 1px 0px 0px;  /* sombra bottom: da profundidad */

Esto permite que el borde no afecte el box model (no suma al width/height) y genera un efecto más suave y tridimensional que un border: 1px solid.

8. Hover state

El CSS de Framer define una clase .hover para la variante footer:

.framer-v-1q6if71.hover.framer-y9wy3b { min-width: unset; }

No hay cambio de color, background ni transform declarado explícitamente en las reglas accesibles — el cambio probablemente se maneja con una variante de Framer que intercambia la instancia completa del componente en JS.

9. Comparación visual entre instancias el diseño de este botón

Exportar Skill

Descarga los archivos de esta skill para integrarlos en tu entorno local.

Sandbox & Specs (Tokens)

Primary (Reserve seat)

primary

Botón de conversión principal. Bordes redondeados modernos.

CSS Spec
bg-color#111111
text-color#ffffff
bordernone
radiusbutton
paddingpy-primary px-primary
font-sizesize-primary
font-weight500

Secondary / Ghost (Sign in)

secondary-ghost

Botón de navegación o acción secundaria con contorno sutil.

CSS Spec
bg-color#ffffff
text-color#111111
border1px solid #dddddd
radiusbutton
paddingpy-secondary px-secondary
font-sizesize-secondary
font-weight400

Link Pill / Eyebrow (Figma MCP & Cursor →)

link-pill

Acceso rápido o píldora de enlace con flecha indicativa.

CSS Spec
bg-color#f0eeea
text-color#111111
bordernone
radiuspill
paddingpy-pill px-pill
font-sizesize-pill
font-weight400

Badge informativo (EARLY BIRD)

badge-info

Etiqueta informativa llamativa de alta legibilidad, no interactiva.

Early Bird
CSS Spec
bg-color#ccff90
text-color#3a6b00
border1px solid #a4e05c
radiusbadge
paddingpy-badge px-badge
font-sizesize-badge
font-weight700

Nav Button (Borde sin border)

nav-button

Botón de navegación con contorno por sombra (box-shadow) en vez de border.

CSS Spec
bg-color#ffffff
text-color#212121
bordernone
radius8px
padding8px 20px
font-size16px
font-weight500
box-shadow2 capas
height36px

Footer Button (Borde sin border)

footer-button

Botón de pie de página compacto con contorno por sombra (box-shadow) en vez de border.

CSS Spec
bg-color#ffffff
text-color#212121
bordernone
radius8px
padding6px 20px
font-size14px
font-weight500
box-shadow2 capas
height32px
RAW TOKENS (JSON)
{
  "name": "memorisely-ui",
  "theme": {
    "colors": {
      "bg-page": "#ffffff",
      "text-primary": "#111111",
      "text-muted": "#888888",
      "border-subtle": "#eeeeee",
      "border-default": "#dddddd",
      "wordmark": "#eceae3",
      "badge-bg": "#ccff90",
      "badge-text": "#3a6b00",
      "badge-border": "#a4e05c",
      "pill-bg": "#f0eeea"
    },
    "spacing": {
      "py-primary": "14px",
      "px-primary": "24px",
      "py-secondary": "10px",
      "px-secondary": "20px",
      "py-pill": "6px",
      "px-pill": "14px",
      "py-badge": "4px",
      "px-badge": "10px"
    },
    "radius": {
      "button": "12px",
      "badge": "8px",
      "pill": "999px"
    },
    "font": {
      "sans": "Geist, system-ui, sans-serif",
      "size-wordmark": "180px",
      "size-primary": "15px",
      "size-secondary": "14px",
      "size-pill": "13px",
      "size-badge": "11px",
      "size-heading": "13px"
    }
  },
  "variants": {
    "primary": {
      "name": "Primary (Reserve seat)",
      "description": "Botón de conversión principal. Bordes redondeados modernos.",
      "styles": {
        "backgroundColor": "#111111",
        "textColor": "#ffffff",
        "border": "none",
        "borderRadius": "button",
        "paddingX": "px-primary",
        "paddingY": "py-primary",
        "fontSize": "size-primary",
        "fontWeight": "500",
        "hover": {
          "backgroundColor": "#000000",
          "textColor": "#ffffff"
        }
      }
    },
    "secondary-ghost": {
      "name": "Secondary / Ghost (Sign in)",
      "description": "Botón de navegación o acción secundaria con contorno sutil.",
      "styles": {
        "backgroundColor": "#ffffff",
        "textColor": "#111111",
        "border": "1px solid #dddddd",
        "borderRadius": "button",
        "paddingX": "px-secondary",
        "paddingY": "py-secondary",
        "fontSize": "size-secondary",
        "fontWeight": "400",
        "hover": {
          "backgroundColor": "#f9f9f9"
        }
      }
    },
    "link-pill": {
      "name": "Link Pill / Eyebrow (Figma MCP & Cursor →)",
      "description": "Acceso rápido o píldora de enlace con flecha indicativa.",
      "styles": {
        "backgroundColor": "#f0eeea",
        "textColor": "#111111",
        "border": "none",
        "borderRadius": "pill",
        "paddingX": "px-pill",
        "paddingY": "py-pill",
        "fontSize": "size-pill",
        "fontWeight": "400",
        "hover": {
          "backgroundColor": "#e7e4df"
        }
      }
    },
    "badge-info": {
      "name": "Badge informativo (EARLY BIRD)",
      "description": "Etiqueta informativa llamativa de alta legibilidad, no interactiva.",
      "styles": {
        "backgroundColor": "#ccff90",
        "textColor": "#3a6b00",
        "border": "1px solid #a4e05c",
        "borderRadius": "badge",
        "paddingX": "px-badge",
        "paddingY": "py-badge",
        "fontSize": "size-badge",
        "fontWeight": "700",
        "textTransform": "uppercase"
      }
    },
    "nav-button": {
      "name": "Nav Button (Borde sin border)",
      "description": "Botón de navegación con contorno por sombra (box-shadow) en vez de border.",
      "styles": {
        "backgroundColor": "#ffffff",
        "textColor": "#212121",
        "border": "none",
        "borderRadius": "8px",
        "paddingX": "20px",
        "paddingY": "8px",
        "fontSize": "16px",
        "fontWeight": "500",
        "boxShadow": "rgba(110, 110, 110, 0.10) 0px 0px 0px 1px, rgba(110, 110, 110, 0.20) 0px 1px 0px 0px",
        "height": "36px",
        "hover": {
          "boxShadow": "rgba(110, 110, 110, 0.15) 0px 0px 0px 1px, rgba(110, 110, 110, 0.30) 0px 2px 2px 0px"
        }
      }
    },
    "footer-button": {
      "name": "Footer Button (Borde sin border)",
      "description": "Botón de pie de página compacto con contorno por sombra (box-shadow) en vez de border.",
      "styles": {
        "backgroundColor": "#ffffff",
        "textColor": "#212121",
        "border": "none",
        "borderRadius": "8px",
        "paddingX": "20px",
        "paddingY": "6px",
        "fontSize": "14px",
        "fontWeight": "500",
        "boxShadow": "rgba(110, 110, 110, 0.10) 0px 0px 0px 1px, rgba(110, 110, 110, 0.20) 0px 1px 0px 0px",
        "height": "32px",
        "hover": {
          "boxShadow": "rgba(110, 110, 110, 0.15) 0px 0px 0px 1px, rgba(110, 110, 110, 0.30) 0px 2px 2px 0px"
        }
      }
    }
  }
}