Connecting design and code through custom tools.
I design identities by building the rules –and often the tools– that generate them. The projects below combine graphic design, creative coding, and system thinking to create flexible identities that scale, adapt, and keep their distinctive character.
Synthesis visual identity began with the concept of molecular diagrams.
Chemical structures consist of small labeled nodes connected by directional bonds. I wondered whether this logic –atoms, links, labels and orientation– could form the basis of a typographic system.
Rather than designing letterforms manually, I wanted a tool that could treat text as a network of paths and points and use this as a means of distribution, positioning and expression.
Case study coming soon...
The identity behind Synthesis follows two core rules:
• Letters behave like structures: each character is reduced to a skeleton of nodes and connecting lines.
• Labels act as content: short words or themes can attach to those structures, like chemical annotations.
The system flexes: depending on density and style, the same word can look precise and technical, or expressive and chaotic.
This creates a visual vocabulary that feels scientific, speculative, and alive.
Typefaker is a small p5.js tool that reads the internal geometry of any typeface and turns it into a three-layer system:
• Paths: the outline or skeleton of each character can be styled like strokes or fragmented into raw geometric shapes.
• Points: the nodes along the path are used as anchor positions to place repeated shapes or graphical motifs.
• Labels: short strings placed along the letter structures (optionally oriented along the path).
Each layer can be shown or hidden, sampled at different resolutions, and styled independently. Fine sampling keeps the letter closer to its original shape; rough sampling creates bold, unstable reinterpretations.
This makes the tool shift between clarity, distortion, and expression with minimal changes.
Typefaker shows how a brand system can be encoded into a tool, not just a set of guidelines. It turns typography into a programmable material:
• Designers get coherent variation across assets
• The system encourages experimentation without losing control
• The aesthetic remains unique, flexible, and scalable
This project crystallizes my approach as a creative technologist:
design the rules → build the tool → let the system speak.
Typefaker generates typographic compositions that can move from lightweight, diagram-like structures (clean, precise, almost architectural) to dense, blocky letter masses filled with overlapping labels and angled shapes. This duality became central to the Synthesis visual identity.
Typographic compositions can be produced directly from the tool and used in graphic applications such as posters, flyers and social media campaigns. This approach maintains consistency while allowing for variation, and is always system-driven.
Case study coming soon...
The idea for GLINT, a fictional eyewear brand, began with the question: how can a visual identity behave like light passing through lenses?
After all, eyewear bends, shifts and distorts the world. I wanted to capture that sensation in the brand identity itself, not as an added visual effect, but as a core system rule.
Rather than treating distortion as decoration, GLINT treats it as a structural behaviour: text and shapes all respond as if refracted through different materials.
Case study coming soon...
The GLINT system is built from three foundational ideas:
• Tiles as lenses: the canvas is divided into vertical panels, each acting like a small lens segment with different graduations.
• Background motif as material: a polygon or circle shape sits behind the typography and becomes the "surface" being refracted.
• Distortion as identity: each panel shifts or warps independently, creating controlled misalignments that feel like light bending through different materials.
This creates a visual language that is bold, kinetic, and unmistakably optical.
To explore this visual behavior, I built a custom tool where the text entered becomes the engine of the composition:
• The number of characters determines the number of tiles
• Each tile can offset or rotate the motif behind it
• Alignment and responsive sizing let the type expand, compress, or stretch across the grid
The refraction effect is controlled through a few intuitive parameters:
• Motif: number of points (polygon → circle), rotation
• Distortion: expand, shrink, wave-like variations
• Distribution: linear, power-based, or exponential falloff
• Spacing: offset and gap between tiles
Small adjustments produce big personality shifts: from soft, lens-like movements to sharp, theatrical distortions.
GLINT shows how an identity can be defined by behavior instead of style.
Rather than designing hundreds of locked assets, a simple rule –light passing through lenses– becomes a generator of endless variations.
This project reinforces a central idea of my practice: design the behaviour and the visuals will follow.
The tool generates campaign assets where:
• Typography drives the overall behavior of the panels/lenses.
• The background motif morphs into different optical reperesentations when seen through the different materials.
• Compositions move between clean, geometric precision and energetic deformation.
Perfect for posters, product drops, season announcements, and quick brand activations.
Case study coming soon...
Cabàss organises electronic music events hosted at a cultural centre in Valencia. The identity draws from a local expression "nyàss cabàss" describing an explosion of joy, the kind of loud, playful energy associated with firecrackers and celebration.
I wanted the identity to capture that sensation as a living shape, not a static icon. The idea became the "boomstar": an irregular, bursting form that replaces the accent in Cabàss, acting as the emblematic spark of the brand.
To generate these shapes consistently –but never identically– I created a small tool to bring this visual logic to life.
Case study coming soon...
The Cabàss identity relies on three principles:
• Explosive silhouettes: every "boomstar" should feel spontaneous, energetic, and slightly unpredictable.
• Grid-born chaos: behind every shape is a strict underlying grid, but the expression comes from bending its rules.
• Controlled irregularity: the shapes vary, but their construction method keeps them recognizable.
This balance-structured randomness became the core of the visual system.
To produce boomstars for different assets, I built a generator that creates dynamic shapes from a configurable grid:
• Grid-driven construction: choose how many rows and columns the grid has, and also the margins and gutters.
• Smart point selection: the tool picks corner points to form the base polygon, while avoiding too many aligned edges (to prevent dull shapes) and discarding degenerate forms.
• Straight or curved modes: polygons for a sharp, firecracker look; curved shapes for more organic, fluid bursts.
• Irregularity control: determine how wild or tame the final silhouette becomes.
• Styling: output can be filled or outline-based, with control over stroke properties (bevel and thickness).
The tool produces an endless family of boomstars –always irregular, always animated in spirit, always unmistakably part of Cabàss.
Boomstar shows how a culturally rooted idea can become a systemic graphic engine, not just a one-off visual.
For me, it reinforced a key belief: even expressive identities can be built from rules, and custom tools are the bridge between control and spontaneity.
The generated shapes can be:
• Bold emblems replacing the "À" in CABÀSS
• Background motifs for posters, flyers, and digital banners
• Visual fragments interacting with typography in dynamic compositions
• Animated material for event visuals or rhythm-based graphics
In motion or static form, they bring the event series the sense of playful impact it embodies.
Case study coming soon...
Rasterization is one of the oldest processes in digital graphics, often used in transformation based visual systems.
Rasterator was created as a basic tool to serve as a starting point for exploring the possibilities of p5js in this field. Images can be broken down, rebuilt, abstracted and stylised using different raster logic.
It's intentionally broad, so it can become the foundation for new aesthetics or be adapted to fit specific visual identity systems.
Case study coming soon...
Rasterator works by sampling an uploaded image across a customizable grid and reinterpreting each sample using different rendering modes.
The same image can adopt in this way multiple visual languages, depending on how the system re-draws each pixel.
Rasterator provides four expressive modes, each with its own behavior:
• Pixels: classic pixel blocks, editable in scale, abstraction, and grid density.
• Bars: horizontal or vertical bars whose length or thickness respond to brightness, hue or RGB channels.
• PxScreen Mode: a screen-printing inspired look built from repeated dot grids.
• ASCII Mode: pixels are replaced by characters, shifting the mood from lo-fi terminals to abstract geometric textures.
All modes share:
• Configurable rows and columns for abstraction level
• Option to use the image's real colors or map new palettes
• Cover/contain scaling source image to preserve aspect ratio
• Support for animated GIFs for motion-based rasterizations
Rasterator is not meant to mimic classic ASCII generators –it's a creative imaging system, not a nostalgic effect.
Custom tools can unlock new visual possibilities.
By designing the behavior –how pixels are interpreted, redistributed, and stylized– the tool becomes a generative identity engine: a way to create consistent but expressive assets across formats.
It's a reminder that even foundational processes like rasterization can become creative systems, not constraints.
Rasterator can generate:
• Stylized portraits
• Patterns, textures, and tileable assets
• Poster graphics
• Input material for other design processes or dynamic identities
Depending on the settings used, the same image can appear soft and pixelated, rigid and grid-like, sharp and posterised, chaotic and glitchy, or textural and typographic. This means it can adapt to many different aesthetic identities.
Case study coming soon...
My workflow blends design intuition with computational thinking. I approach visual identities as systems: defining their logic, structure, and behaviors before shaping the final form. Code becomes an extension of the design process, letting ideas take the shape of small custom tools that generate visuals.
Every project moves through three connected phases:
1. Define the system: concept, constraints, visual grammar, components, rules. The system comes before the deliverables.
2. Build the tool: Translate the system into code using p5.js and small custom apps. This is where the identity becomes alive: rules → behavior → generations.
3. Refine & ship: Iterate with AI-assisted coding, test outputs, refine behaviors, and produce production-ready assets. The result is a flexible identity supported by tools, not templates.
I balance systematic thinking with expressive exploration –rules first, but never rigid.
My practice follows the idea of the "meta-designer": designing not just the identity, but the tools and behaviors behind it.
I love sharing what I learn about visual systems and creative coding. Teaching helps me articulate my process, refine my thinking, and stay connected to designers who are exploring similar questions. It’s a way of contributing back to the communities that inspire me.
I’ve taught workshops at design schools, contributed to communities focused on Flexible Visual Systems, and collaborated with studios and individuals expanding the dialogue between design and technology.
I’m also preparing Figma courses centered on building visual identity systems and using code as a creative extension of design. Teaching keeps me connected, generous, and evolving.
I led a two-day workshop at Barreira Arte + Diseño, within the Master in Graphic Design, introducing students to Flexible Visual Systems as an approach to building dynamic and adaptable visual identities. We explored how systems thinking can shape contemporary branding, combining theory and practice: from the foundations outlined by Dr. Martin Lorenz to hands-on exercises in Figma, using variables, components, and team libraries to structure and distribute visual systems.
We also dissected real identity projects from top studios and looked at how web technologies and creative coding can extend a designer’s toolkit, opening the door to custom tools and new forms of systemic expression.
Case study coming soon...
Teaching Flexible Visual Systems in a two-day Master Workshop.
I’m a designer-engineer working at the intersection of graphic design and code. Currently looking for collaborators, studios, and teams interested in new ways of designing identities.
I began my career in visual identity and digital design before expanding into front-end development and system architecture. After spending several years working with technology teams, I returned to design with a hybrid perspective, combining visual and technical thinking.
Based in Valencia (Spain), I am influenced by the city's vibrant music and art scene. My work is inspired by electronic music and club culture –bold, rhythmic and expressive– yet grounded in structure, clarity and system thinking.
I enjoy transforming complexity into clear systems by blending visual design, creative coding, and behaviour-driven identities.
If you're exploring dynamic identities, computational typography, or want to test new workflows where design, systems and code work together, let’s talk.
I’m open to:
• Pilot projects
• Collaborations with studios
• Workshops or speaking
• Experimental briefs or research-led work