NES Legend of Zelda Design System
A pixel based design system based off the Legend of Zelda for the
NES. It translates classic 8 bit assets into a structured, tokenized
framework for creating authentic retro UI mockups.
Design System
My Role
Product Designer
Brief
Build a highly scalable, visually cohesive design system that translates the iconic imagery, dungeon tile architectures, and rigid hardware constraints of the original Legend of Zelda for the NES into a production ready framework. The project serves as a creative playground to reverse engineer 8 bit rendering mechanics and challenge the designer to build a bottom up system from an absolute 1 x 1 pixel micro grid.
Contributions
Lead Designer
Platforms
Web
Overview
This project is a tokenized design system built around the strict visual architecture and hardware constraints of the original 1986 NES masterpiece, The Legend of Zelda. By anchoring every element to a rigid grid, the framework bridges the gap between historical game development and modern UI engineering.
The design system allows the user to build authentic retro layouts by organizing raw, hardware constrained assets into a strict semantic token hierarchy. Designers can effortlessly assemble screen mockups knowing every asset perfectly aligns with original 8 bit rendering mechanics.
This design system was an exercise in pushing my design practice through a deep technical research plan, synthesizing foundational 1 x 1 pixel base units up to 16 x 16 meta tile clusters to establish a rigid, and bottom up architectural framework.
Inspiration
Process
This was quite enjoyable since I love being meticulous with my work. I split my time into three sections. First I scrubbed actual game footage to see how all sprites fit together, then I started to dive deep into research finding sprite sheets of every pixel, every color and every layout. From these references I started putting together a complete system that allows you to build your own adventure.
Components
Since naming every component in this design system would be a long read I encourage you to check out the Figma file. One thing I noticed when building was just how perfect everything seemed to fit into place. Shigeru Miyamoto, Koji Kondo, and Takashi Tezuka really took the time to make sure everything sprite had its own purpose and made everything feel connected and alive.
let's break down two of the larger component sets that I found particularly interesting to build.
Hero
The main character sprite that the player uses to navigate all the dungeons and overworld. This was the first set of components that I started with, well because who doesn't want to start with the hero. Believe it or not our little hero is more complex then one would think with nine large component groups and twenty three component types spread between the larger nine groups. The video below shows just a snippet of all the hero variations you will come across.
Dungeon Tiles
The dungeon tile set is one of the largest within the design system. There are nine total dungeons that the hero must traverse to save the princess, beat Ganon, and gather the Triforce. Each tile set shares a consistent architectural framework but is distinguished by a unique, color coded themes and variations in environmental components which set them apart from each other.
One of the interesting notes that I found while building out the dungeon tile set is that the names for each dungeon reflect what the overall layout looks like when viewed as a complete map grid. For example, the rooms of Level 1 (Eagle) are arranged in a layout that takes the physical silhouette of an eagle with outstretched wings. Similarly, Level 2 forms a crescent Moon, Level 4 snakes around to look like a Snake, and so on.
Grid & Pixel
The foundation of the entire design system is built from a rigid 1 x 1 pixel. Everything within is constructed from this single, atomic block of color. It is the universal standard metric; there are no floating sub pixels or anti aliased edges. Assets are not drawn as fluid vector shapes, they are built block by block out of this 1 x 1 unit.
This individual 1 x 1 pixel combinea to form the system's small bounding box. This 8 x 8 block is the primary container for individual UI components, iconography, and text characters. The system’s typography is strictly anchored to an 8pt layout to fit perfectly within this specific bounding box.
Sprites do not always fit these bounding boxes completely. The boxes act as the structural grid boundaries, not the literal shape of the artwork. Because assets are drawn from the 1 x 1 pixel level upward, a sprite might only fill a 7 x 5 pixel or 13 x 16 pixel space inside its container. The remaining empty space functions as transparent pixel padding, allowing individual glyphs or animation frames to align correctly when placed on the canvas.
Community File
This is version 1.0 but I encourage you to check out the community file link at the top of this page and if you have an comments, questions, or suggestions please feel free to reach out. I do have some ideas for future updates, but as of now I am quite happy with how everything turned out. Enjoy!
NES Legend of Zelda Design System
A pixel based design system based off the Legend of Zelda for the
NES. It translates classic 8 bit assets into a structured, tokenized
framework for creating authentic retro UI mockups.
Design System
My Role
Product Designer
Brief
Build a highly scalable, visually cohesive design system that translates the iconic imagery, dungeon tile architectures, and rigid hardware constraints of the original Legend of Zelda for the NES into a production ready framework. The project serves as a creative playground to reverse engineer 8 bit rendering mechanics and challenge the designer to build a bottom up system from an absolute 1 x 1 pixel micro grid.
Contributions
Lead Designer
Platforms
Web
Overview
This project is a tokenized design system built around the strict visual architecture and hardware constraints of the original 1986 NES masterpiece, The Legend of Zelda. By anchoring every element to a rigid grid, the framework bridges the gap between historical game development and modern UI engineering.
The design system allows the user to build authentic retro layouts by organizing raw, hardware constrained assets into a strict semantic token hierarchy. Designers can effortlessly assemble screen mockups knowing every asset perfectly aligns with original 8 bit rendering mechanics.
This design system was an exercise in pushing my design practice through a deep technical research plan, synthesizing foundational 1 x 1 pixel base units up to 16 x 16 meta tile clusters to establish a rigid, and bottom up architectural framework.
Inspiration
Process
This was quite enjoyable since I love being meticulous with my work. I split my time into three sections. First I scrubbed actual game footage to see how all sprites fit together, then I started to dive deep into research finding sprite sheets of every pixel, every color and every layout. From these references I started putting together a complete system that allows you to build your own adventure.
Components
Since naming every component in this design system would be a long read I encourage you to check out the Figma file. One thing I noticed when building was just how perfect everything seemed to fit into place. Shigeru Miyamoto, Koji Kondo, and Takashi Tezuka really took the time to make sure everything sprite had its own purpose and made everything feel connected and alive.
let's break down two of the larger component sets that I found particularly interesting to build.
Hero
The main character sprite that the player uses to navigate all the dungeons and overworld. This was the first set of components that I started with, well because who doesn't want to start with the hero. Believe it or not our little hero is more complex then one would think with nine large component groups and twenty three component types spread between the larger nine groups. The video below shows just a snippet of all the hero variations you will come across.
Dungeon Tiles
The dungeon tile set is one of the largest within the design system. There are nine total dungeons that the hero must traverse to save the princess, beat Ganon, and gather the Triforce. Each tile set shares a consistent architectural framework but is distinguished by a unique, color coded themes and variations in environmental components which set them apart from each other.
One of the interesting notes that I found while building out the dungeon tile set is that the names for each dungeon reflect what the overall layout looks like when viewed as a complete map grid. For example, the rooms of Level 1 (Eagle) are arranged in a layout that takes the physical silhouette of an eagle with outstretched wings. Similarly, Level 2 forms a crescent Moon, Level 4 snakes around to look like a Snake, and so on.
Grid & Pixel
The foundation of the entire design system is built from a rigid 1 x 1 pixel. Everything within is constructed from this single, atomic block of color. It is the universal standard metric; there are no floating sub pixels or anti aliased edges. Assets are not drawn as fluid vector shapes, they are built block by block out of this 1 x 1 unit.
This individual 1 x 1 pixel combinea to form the system's small bounding box. This 8 x 8 block is the primary container for individual UI components, iconography, and text characters. The system’s typography is strictly anchored to an 8pt layout to fit perfectly within this specific bounding box.
Sprites do not always fit these bounding boxes completely. The boxes act as the structural grid boundaries, not the literal shape of the artwork. Because assets are drawn from the 1 x 1 pixel level upward, a sprite might only fill a 7 x 5 pixel or 13 x 16 pixel space inside its container. The remaining empty space functions as transparent pixel padding, allowing individual glyphs or animation frames to align correctly when placed on the canvas.
Community File
This is version 1.0 but I encourage you to check out the community file link at the top of this page and if you have an comments, questions, or suggestions please feel free to reach out. I do have some ideas for future updates, but as of now I am quite happy with how everything turned out. Enjoy!
NES Legend of Zelda Design System
A pixel based design system based off the Legend of Zelda
for the NES. It translates classic 8 bit assets into a structured,
tokenized framework for creating authentic retro UI mockups.
Design System
My Role
Product Designer
Brief
Build a highly scalable, visually cohesive design system that translates the iconic imagery, dungeon tile architectures, and rigid hardware constraints of the original Legend of Zelda for the NES into a production ready framework. The project serves as a creative playground to reverse engineer 8 bit rendering mechanics and challenge the designer to build a bottom up system from an absolute 1 x 1 pixel micro grid.
Contributions
Lead Designer
Platforms
Web
Overview
This project is a tokenized design system built around the strict visual architecture and hardware constraints of the original 1986 NES masterpiece, The Legend of Zelda. By anchoring every element to a rigid grid, the framework bridges the gap between historical game development and modern UI engineering.
The design system allows the user to build authentic retro layouts by organizing raw, hardware constrained assets into a strict semantic token hierarchy. Designers can effortlessly assemble screen mockups knowing every asset perfectly aligns with original 8 bit rendering mechanics.
This design system was an exercise in pushing my design practice through a deep technical research plan, synthesizing foundational 1 x 1 pixel base units up to 16 x 16 meta tile clusters to establish a rigid, and bottom up architectural framework.
Inspiration
Process
This was quite enjoyable since I love being meticulous with my work. I split my time into three sections. First I scrubbed actual game footage to see how all sprites fit together, then I started to dive deep into research finding sprite sheets of every pixel, every color and every layout. From these references I started putting together a complete system that allows you to build your own adventure.
Components
Since naming every component in this design system would be a long read I encourage you to check out the Figma file. One thing I noticed when building was just how perfect everything seemed to fit into place. Shigeru Miyamoto, Koji Kondo, and Takashi Tezuka really took the time to make sure everything sprite had its own purpose and made everything feel connected and alive.
let's break down two of the larger component sets that I found particularly interesting to build.
Hero
The main character sprite that the player uses to navigate all the dungeons and overworld. This was the first set of components that I started with, well because who doesn't want to start with the hero. Believe it or not our little hero is more complex then one would think with nine large component groups and twenty three component types spread between the larger nine groups. The video below shows just a snippet of all the hero variations you will come across.
Dungeon Tiles
The dungeon tile set is one of the largest within the design system. There are nine total dungeons that the hero must traverse to save the princess, beat Ganon, and gather the Triforce. Each tile set shares a consistent architectural framework but is distinguished by a unique, color coded themes and variations in environmental components which set them apart from each other.
One of the interesting notes that I found while building out the dungeon tile set is that the names for each dungeon reflect what the overall layout looks like when viewed as a complete map grid. For example, the rooms of Level 1 (Eagle) are arranged in a layout that takes the physical silhouette of an eagle with outstretched wings. Similarly, Level 2 forms a crescent Moon, Level 4 snakes around to look like a Snake, and so on.
Grid & Pixel
The foundation of the entire design system is built from a rigid 1 x 1 pixel. Everything within is constructed from this single, atomic block of color. It is the universal standard metric; there are no floating sub pixels or anti aliased edges. Assets are not drawn as fluid vector shapes, they are built block by block out of this 1 x 1 unit.
This individual 1 x 1 pixel combinea to form the system's small bounding box. This 8 x 8 block is the primary container for individual UI components, iconography, and text characters. The system’s typography is strictly anchored to an 8pt layout to fit perfectly within this specific bounding box.
Sprites do not always fit these bounding boxes completely. The boxes act as the structural grid boundaries, not the literal shape of the artwork. Because assets are drawn from the 1 x 1 pixel level upward, a sprite might only fill a 7 x 5 pixel or 13 x 16 pixel space inside its container. The remaining empty space functions as transparent pixel padding, allowing individual glyphs or animation frames to align correctly when placed on the canvas.
Community File
This is version 1.0 but I encourage you to check out the community file link at the top of this page and if you have an comments, questions, or suggestions please feel free to reach out. I do have some ideas for future updates, but as of now I am quite happy with how everything turned out. Enjoy!
NES Legend of Zelda Design System
Design System
A pixel based design system based off the Legend of Zelda for the NES. It translates classic 8 bit assets into a structured, tokenized framework for creating authentic retro UI mockups.
My Role
Product Designer
Brief
Build a highly scalable, visually cohesive design system that translates the iconic imagery, dungeon tile architectures, and rigid hardware constraints of the original Legend of Zelda for the NES into a production ready framework. The project serves as a creative playground to reverse engineer 8 bit rendering mechanics and challenge the designer to build a bottom up system from an absolute 1 x 1 pixel micro grid.
Contributions
Lead Designer
Platforms
Web
Overview
This project is a tokenized design system built around the strict visual architecture and hardware constraints of the original 1986 NES masterpiece, The Legend of Zelda. By anchoring every element to a rigid grid, the framework bridges the gap between historical game development and modern UI engineering.
The design system allows the user to build authentic retro layouts by organizing raw, hardware constrained assets into a strict semantic token hierarchy. Designers can effortlessly assemble screen mockups knowing every asset perfectly aligns with original 8 bit rendering mechanics.
This design system was an exercise in pushing my design practice through a deep technical research plan, synthesizing foundational 1 x 1 pixel base units up to 16 x 16 meta tile clusters to establish a rigid, and bottom up architectural framework.
Inspiration
Process
This was quite enjoyable since I love being meticulous with my work. I split my time into three sections. First I scrubbed actual game footage to see how all sprites fit together, then I started to dive deep into research finding sprite sheets of every pixel, every color and every layout. From these references I started putting together a complete system that allows you to build your own adventure.
Components
Since naming every component in this design system would be a long read I encourage you to check out the Figma file. One thing I noticed when building was just how perfect everything seemed to fit into place. Shigeru Miyamoto, Koji Kondo, and Takashi Tezuka really took the time to make sure everything sprite had its own purpose and made everything feel connected and alive.
let's break down two of the larger component sets that I found particularly interesting to build.
Hero
The main character sprite that the player uses to navigate all the dungeons and overworld. This was the first set of components that I started with, well because who doesn't want to start with the hero. Believe it or not our little hero is more complex then one would think with nine large component groups and twenty three component types spread between the larger nine groups. The video below shows just a snippet of all the hero variations you will come across.
Dungeon Tiles
The dungeon tile set is one of the largest within the design system. There are nine total dungeons that the hero must traverse to save the princess, beat Ganon, and gather the Triforce. Each tile set shares a consistent architectural framework but is distinguished by a unique, color coded themes and variations in environmental components which set them apart from each other.
One of the interesting notes that I found while building out the dungeon tile set is that the names for each dungeon reflect what the overall layout looks like when viewed as a complete map grid. For example, the rooms of Level 1 (Eagle) are arranged in a layout that takes the physical silhouette of an eagle with outstretched wings. Similarly, Level 2 forms a crescent Moon, Level 4 snakes around to look like a Snake, and so on.
Grid & Pixel
The foundation of the entire design system is built from a rigid 1 x 1 pixel. Everything within is constructed from this single, atomic block of color. It is the universal standard metric; there are no floating sub pixels or anti aliased edges. Assets are not drawn as fluid vector shapes, they are built block by block out of this 1 x 1 unit.
This individual 1 x 1 pixel combinea to form the system's small bounding box. This 8 x 8 block is the primary container for individual UI components, iconography, and text characters. The system’s typography is strictly anchored to an 8pt layout to fit perfectly within this specific bounding box.
Sprites do not always fit these bounding boxes completely. The boxes act as the structural grid boundaries, not the literal shape of the artwork. Because assets are drawn from the 1 x 1 pixel level upward, a sprite might only fill a 7 x 5 pixel or 13 x 16 pixel space inside its container. The remaining empty space functions as transparent pixel padding, allowing individual glyphs or animation frames to align correctly when placed on the canvas.
Community File
This is version 1.0 but I encourage you to check out the community file link at the top of this page and if you have an comments, questions, or suggestions please feel free to reach out. I do have some ideas for future updates, but as of now I am quite happy with how everything turned out. Enjoy!