← UNA Documentación del sistema Demo interactiva · consume /ds/mal/mal.css?v=1.0.15

01 Colors & Tokens

Brand Accent
Accent Main
hsl(var(--accent-main))
UI Surfaces
BG 000
BG 100
BG 200

02 Typography Hierarchy

.text-display

Syne Display

.text-sans

Syne Interface

.text-mono JetBrains Mono Logic
Variants
.text-accent - Branding Highlight .text-muted - Low emphasis secondary information. .text-faint - Microcopy and meta-information.

03 Surfaces & Textures

Radial Grid
.bg-dotted
Fractal Noise
.bg-noise
Atmospheric
.glow-blob

04 Buttons & Actions

Standard Roles
CLI Install Helper
$ mal install core
Atomic components are strictly consistent.

05 Tags & Indicators

Status Badges
System.v1 Featured
99.9% Efficiency

06 Logic Elements

Tabs Component

Technical Specification

Focused on atomic components and inheritance patterns.

Accordion Component

Detailed technical breakdown of the system's component inheritance patterns.

07 Motion Marquee

PRECISION
SYSTEMIC
ARCHITECTURE
IDENTITY

08 Bento Content

Primary

Core Logic Arch

The system is built on mathematical precision and technical excellence.

02

Refinement

03

Execution

Scalable Tiles

Flexible grid components.

Unified Logic

Consistent UI across modules.

09 Pricing & Mentoring

Community

Self-Study

$0

10 Identity Ticket

3D Interactive Hero
Fran
Nombre
FRAN MALDONADO
Rol
PRODUCT DESIGNER

Desde 2012
Ubicación Ecuador

11 Social Graph

Interactive Carousel
Social Card Variants

12 Portfolio Case Explorer

Identity Design

Mobility Core Arch

Building the future of urban infrastructure dashboards.

1
2

13 Component Stacks

Generic Card Stack (Opaque)
01

Core Architecture

Defined logic layers for scale.

02

Logic Systems

Pure technical execution.

03

Identity Polish

The ultimate surface layer.

Information Modules
System Extension
Expand the core system with modular plugins.

14 Technical Shell

Animated Terminal
Process Stepper
01 Discovery
Identifying systemic needs.
02 Synthesis
Mapping architectural flows.

15 Marketing & Blog

Section Header Molecule

#MalPensamientos

Opiniones sin filtro sobre diseño y tecnología.

List Feature Pattern

Powerful Intelligence

  • Uses agentic search to understand your entire codebase without manual context selection
  • Makes coordinated changes across multiple files
  • Optimized specifically for code understanding and generation with Opus 4.6

Works where you work

  • Lives right inside your terminal — no context switching
  • Integrates with VS Code / JetBrains IDEs
  • Uses your test suites and build systems

You're in control

  • Never modifies your files without explicit approval
  • Adapts to your coding standards and patterns
  • Configurable: Build on the SDK or run on GitHub Actions

16 Chaotic Text Logic

High-Impact Visual
The Power of Super
Plug-and-play eases, or build
with MAL System

17 Page Shell & Footer

Navigation Shell (Floating & Full Width)
System Footer
© 2026 MAL — Hecho con amor por Antigravity

18 Architectural Visuals

Mind Map • Tags Graph

19 Blog & Editorial

20 Single Post Components

Article View (Simulated)

Rompiendo las reglas: Cuando el "Buen diseño" falla en el mundo real

A veces, seguir las mejores prácticas al pie de la letra resulta en un producto sin alma y, paradójicamente, frustrante para el usuario final.

Nos han enseñado que el minimalismo siempre gana, que menos clicks equivalen a una mejor experiencia y que la fricción es el enemigo mortal de cualquier interfaz. Durante mis últimos cinco años rediseñando ecosistemas financieros complejos, me di cuenta de una verdad incómoda: el buen diseño, aplicado ciegamente, causa daños reales.

La mentira de los "Cero Clicks"

El estándar de la industria empuja constantemente hacia la reducción de pasos. Sin embargo, en experiencias donde la carga cognitiva o el riesgo son altos (como transferir cantidades enormes de dinero o borrar una cuenta de equipo), la velocidad se vuelve peligrosa.

"La fricción no es un error de diseño cuando sirve para que el usuario despierte el modelo mental del sistema 2 (pensamiento lento)."

En el caso del rediseño de seguridad que hicimos para el 2024, introdujimos pasos de fricción artificiales (cajas que requerían tipeo en lugar de un botón mágico de 'sí'). Contra toda intuición, las tasas de éxito de las tareas completadas subieron, y las llamadas al centro de soporte por errores accidentales cayeron un 60%.

Las tres lecciones que aprendí:

  • El minimalismo no es ausencia de información, es claridad.
  • Los flujos "seamless" son ideales para consumo, no para creación o transacción.
  • La accesibilidad es más importante que la estética de Dribbble.