🏳️🌈 Pride Guide
🏳️🌈 Pride Guide
A digital guide to pride flags, representing the various orientations, genders, and more of the queer community.
A digital guide to pride flags, representing the various orientations, genders, and more of the queer community.
Project Type
Advocacy
Tags
celebration, education, culture
Roles
creator
Association
Creative Technologist
at
Pixel Uiz
in
2026
Overview
Pride Guide is an educational app celebrating the diversity and beauty of the LGBTQIA+ community through its flags. It features an immersive flag explorer covering 18+ flags, their history and color meaning, an interactive 10-question quiz for those looking to test their queer flag history knowledge, ally guidance, and a print shop. Experience it at https://pride-guide.com
Overview
Pride Guide is an educational app celebrating the diversity and beauty of the LGBTQIA+ community through its flags. It features an immersive flag explorer covering 18+ flags, their history and color meaning, an interactive 10-question quiz for those looking to test their queer flag history knowledge, ally guidance, and a print shop. Experience it at https://pride-guide.com
Overview
Pride Guide is an educational app celebrating the diversity and beauty of the LGBTQIA+ community through its flags. It features an immersive flag explorer covering 18+ flags, their history and color meaning, an interactive 10-question quiz for those looking to test their queer flag history knowledge, ally guidance, and a print shop. Experience it at https://pride-guide.com
Motiviations
Before delving into the project itself, I want to express why this project matters and what prompted the idea behind it. Though this project was preceded by a couple of different print projects created many years prior, what ultimately motivated me to spend the time creating Pride Guide is the increasing dangerous rhetoric, ill will, and abuse of the queer community as a political talking point to amass votes as a means to maintain or grow political power.
My goal with Pride Guide is to simply do my part by participating. To advocate. To celebrate. To educate. Through recent decades, our community has seen tremendous growth in support. But the current political landscape is trying to push us backwards. As a gay man, I want to continue to have the freedom to marry my male partner and not fear that right may be taken away. But using our votes and voices to fight against our abusers is not the only way to seek positive changes. I believe that creating a space online for all of us to enjoy and learn from can help us discover and celebrate the vast richness of our community, building love and light to spread and share.
Now, with that out of the way, let's get into how this specific project came about.
Motiviations
Before delving into the project itself, I want to express why this project matters and what prompted the idea behind it. Though this project was preceded by a couple of different print projects created many years prior, what ultimately motivated me to spend the time creating Pride Guide is the increasing dangerous rhetoric, ill will, and abuse of the queer community as a political talking point to amass votes as a means to maintain or grow political power.
My goal with Pride Guide is to simply do my part by participating. To advocate. To celebrate. To educate. Through recent decades, our community has seen tremendous growth in support. But the current political landscape is trying to push us backwards. As a gay man, I want to continue to have the freedom to marry my male partner and not fear that right may be taken away. But using our votes and voices to fight against our abusers is not the only way to seek positive changes. I believe that creating a space online for all of us to enjoy and learn from can help us discover and celebrate the vast richness of our community, building love and light to spread and share.
Now, with that out of the way, let's get into how this specific project came about.
Motiviations
Before delving into the project itself, I want to express why this project matters and what prompted the idea behind it. Though this project was preceded by a couple of different print projects created many years prior, what ultimately motivated me to spend the time creating Pride Guide is the increasing dangerous rhetoric, ill will, and abuse of the queer community as a political talking point to amass votes as a means to maintain or grow political power.
My goal with Pride Guide is to simply do my part by participating. To advocate. To celebrate. To educate. Through recent decades, our community has seen tremendous growth in support. But the current political landscape is trying to push us backwards. As a gay man, I want to continue to have the freedom to marry my male partner and not fear that right may be taken away. But using our votes and voices to fight against our abusers is not the only way to seek positive changes. I believe that creating a space online for all of us to enjoy and learn from can help us discover and celebrate the vast richness of our community, building love and light to spread and share.
Now, with that out of the way, let's get into how this specific project came about.
Background
At a previous role, I volunteered to help my employer participate in Atlanta Pride. I designed swag to wear and hand out in the parade. We came up with various ideas such as stickers, bandanas, and t-shirts. But the two most successful ideas were pocket-sized guides intended for the queer community. The first was a small foldable guide to Atlanta resources for the LGBTQIA+ community, listing organizations where individuals could go to receive support.
In a later year, we designed the 2nd guide, which showcased 13 of the most common pride flags, most of which represent specific groups within the community, such as the transgender, intersex, or pansexual identities. We wore matching-themed t-shirts and passed these out to the crowd as we made our way through the parade. As we handed them out, we saw faces light up with huge smiles and bright eyes as recipients unfolded the guides and discovered what they were. People loved them. And it was so heart-warming to watch as I sat in the back of the pickup truck with a large box, grabbing handfuls and passing them to my coworkers who were taking them to the crowds and coming back for more. I knew I needed to take this project further.
While at that same job, I also volunteered as a leader within the company's employee resource group (ERG). One of our projects was an internal digital resource aiming to educate fellow employees about queer identity as well as offering advice for allies to better support us with specific ways the LGBTQIA+ community prefers to be supported. Because the flag guide was already created, it became the foundational starting point for the internal online resource.
Background
At a previous role, I volunteered to help my employer participate in Atlanta Pride. I designed swag to wear and hand out in the parade. We came up with various ideas such as stickers, bandanas, and t-shirts. But the two most successful ideas were pocket-sized guides intended for the queer community. The first was a small foldable guide to Atlanta resources for the LGBTQIA+ community, listing organizations where individuals could go to receive support.
In a later year, we designed the 2nd guide, which showcased 13 of the most common pride flags, most of which represent specific groups within the community, such as the transgender, intersex, or pansexual identities. We wore matching-themed t-shirts and passed these out to the crowd as we made our way through the parade. As we handed them out, we saw faces light up with huge smiles and bright eyes as recipients unfolded the guides and discovered what they were. People loved them. And it was so heart-warming to watch as I sat in the back of the pickup truck with a large box, grabbing handfuls and passing them to my coworkers who were taking them to the crowds and coming back for more. I knew I needed to take this project further.
While at that same job, I also volunteered as a leader within the company's employee resource group (ERG). One of our projects was an internal digital resource aiming to educate fellow employees about queer identity as well as offering advice for allies to better support us with specific ways the LGBTQIA+ community prefers to be supported. Because the flag guide was already created, it became the foundational starting point for the internal online resource.
Background
At a previous role, I volunteered to help my employer participate in Atlanta Pride. I designed swag to wear and hand out in the parade. We came up with various ideas such as stickers, bandanas, and t-shirts. But the two most successful ideas were pocket-sized guides intended for the queer community. The first was a small foldable guide to Atlanta resources for the LGBTQIA+ community, listing organizations where individuals could go to receive support.
In a later year, we designed the 2nd guide, which showcased 13 of the most common pride flags, most of which represent specific groups within the community, such as the transgender, intersex, or pansexual identities. We wore matching-themed t-shirts and passed these out to the crowd as we made our way through the parade. As we handed them out, we saw faces light up with huge smiles and bright eyes as recipients unfolded the guides and discovered what they were. People loved them. And it was so heart-warming to watch as I sat in the back of the pickup truck with a large box, grabbing handfuls and passing them to my coworkers who were taking them to the crowds and coming back for more. I knew I needed to take this project further.
While at that same job, I also volunteered as a leader within the company's employee resource group (ERG). One of our projects was an internal digital resource aiming to educate fellow employees about queer identity as well as offering advice for allies to better support us with specific ways the LGBTQIA+ community prefers to be supported. Because the flag guide was already created, it became the foundational starting point for the internal online resource.
Research
To build out the flag guide, I needed to do some research to understand where the various flag designs originated and what each was designed to represent. For example, I had known that the original pride flag had a different meaning for each color, but wasn't sure what they were. I also knew there were additional flags I didn't know much about, and some I had only seen once or twice before.
During my research, I realized there are many more flags out there that represent various genders, orientations, biological traits, and more. It's truly extensive. I also learned about various terminologies such as "demigirl" and "demiboy", which seemed fitting for a trans friend of mine who had not yet discovered those terms herself. A whole new world opened up to me. And I went exploring.
As a result, I had found way more flags than what could fit in the printed guide; and more than I had time to write about in the company's internal resource I worked on through the ERG. So I picked the most common and a few lesser known—just enough to help spread awareness and draw more people into the conversation.
Research
To build out the flag guide, I needed to do some research to understand where the various flag designs originated and what each was designed to represent. For example, I had known that the original pride flag had a different meaning for each color, but wasn't sure what they were. I also knew there were additional flags I didn't know much about, and some I had only seen once or twice before.
During my research, I realized there are many more flags out there that represent various genders, orientations, biological traits, and more. It's truly extensive. I also learned about various terminologies such as "demigirl" and "demiboy", which seemed fitting for a trans friend of mine who had not yet discovered those terms herself. A whole new world opened up to me. And I went exploring.
As a result, I had found way more flags than what could fit in the printed guide; and more than I had time to write about in the company's internal resource I worked on through the ERG. So I picked the most common and a few lesser known—just enough to help spread awareness and draw more people into the conversation.
Research
To build out the flag guide, I needed to do some research to understand where the various flag designs originated and what each was designed to represent. For example, I had known that the original pride flag had a different meaning for each color, but wasn't sure what they were. I also knew there were additional flags I didn't know much about, and some I had only seen once or twice before.
During my research, I realized there are many more flags out there that represent various genders, orientations, biological traits, and more. It's truly extensive. I also learned about various terminologies such as "demigirl" and "demiboy", which seemed fitting for a trans friend of mine who had not yet discovered those terms herself. A whole new world opened up to me. And I went exploring.
As a result, I had found way more flags than what could fit in the printed guide; and more than I had time to write about in the company's internal resource I worked on through the ERG. So I picked the most common and a few lesser known—just enough to help spread awareness and draw more people into the conversation.
Going digital
Building the internal company resource sparked the idea to create something public for everyone. And in 2025, I finally started exploring it. Given that we're not living in the "AI era", if you will, I was testing various vibe-coding tools to see how they performed. So initially, this project was an excuse to play around with Lovable and see what kind of results I'd get. It seemed to be one of the better choices at the time for design-focused prototypes.
I didn't really have a design in mind, yet. And I was curious what the tool would come up with. So I just loosely described what I was looking for and let it cook. As expected, the design it came up with was mostly uninspiring. But it was a place to start. What I did appreciate, though, was the inclusion of a couple features I didn't directly ask for. One was the inclusion of a quiz, which would add more user engagement. The other was content meant for allies, sharing recommendations on how they can best support queer individuals with their own behavior. That's helpful because while good intentions are appreciated, they don't always have the desired results. So providing some guidance and simple reminders can go a long way.
At this stage, it was a simple one-pager with a hero, simple nav, and grid with placeholders for the flags, which would be the main focus. I had some ideas for the hero section and played with that for a while before moving on to the flags.
Early inspiration — animated flags
One idea I had was to try animating the flags to add more life to the page. I got curious and went looking around for some ideas. Little did I expect to find the perfect inspiration! Josh Comeau is an experienced software engineer from Montréal. In the summer of 2023, he posted an article about his Animated Pride Flags. He developed a method to split flag designs into vertical strips and apply looping CSS animations to shift each strip's position up and down with a short delay per strip, creating a sort of waving effect. He shares his approach in a tutorial using React, HTML, and CSS. It's fantastic. And it was an excellent source of inspo for the guide, helping solidify the primary design element moving forward.
Color theming
One of the other fun parts of this process was going beyond standard light and dark color modes. Because this project is inherently colorful with a variety of pride flag designs, it warrants having some fun with how the content and controls are expressed through color across the interface. I had already wanted to explore color theming more deeply anyways, so this was a great excuse to do that. What came to mind was trying a "chill wave" theme. Chill wave, as a music style, is something I really like listening to. And I thought it might translate well to a UI theme. So I thought I'd give it a shot. This was another experiment I wanted to give to an AI model and just see what it came up with. In one of the earlier iterations of the UI, I also suggested it try adding a glowing neon effect around parts of the UI. Where the project landed, the "Chill Wave" theme is basically a dark mode-derivative theme that uses warmer pink and orange as accent colors whereas the dark theme uses cooler blue accents. It's also the default theme. It could be pushed further, but I think it works well for launch. I'll likely explore adding more themes in the future.
Accessibility
In the spirit of inclusivity, designing and building for everyone needs to be a priority. Thankfully, building with UI frameworks like Radix makes accounting for accessibility much more approachable. Things like keyboard navigation, focus management, and more are already accounted for in their prebuilt components. Additionally, I made sure to account for reduced motion preferences and color contrast. And as I used agentic AI models throughout the build, I ensured they followed suit, set AAA compliance as the bar, and ran occasional checks.
Design iterations
Lastly, let's talk about the iteration process. Because this project was a bit unique, given it wasn't for a client, didn't have a project brief, and was partially an experiment to test new AI-powered tools, it started out extremely loose and lacking in clear direction. But as the project formed, it became more clear step-by-step what about the design and UX worked and what didn't. The early designs were too flat, boring, and didn't excite me. A grid of 17+ flags built with HTML, all animating in loops was not performant. Component styling was too basic, out-of-the-box. And the one-pager design left it feeling too lightweight to have the level of significance I wanted.
Playing around with component styling, transitions, and small layout changes only got me so far. I wasn't feeling inspired yet. And to be honest, I was relying way too much on just "vibe-designing" new solutions. I eventually had a reset in my process. I went looking for more design inspiration and started collecting various design samples from unique web animations to colorful digital art, and pieces that could be reimagined into a web interface.
After sleeping on the new inspo board and taking a couple breaks from the project, I came back refreshed and started breaking down the project, looking at it from a different angle. In summary, here are several steps I took to reimagine the project into something more custom that I could be proud of:
selected a new set of fonts to be used across the project
extracted the hero section into its own landing page that describes the project; includes a loading animation
nixed the flag grid + per-flag dialog pattern in favor of a one-at-a-time full-page carousel to provide a far richer and more focused experience per flag while simultaneously improving performance by only displaying a single animated flag at a time
divided up the other sections into their own pages (quiz, ally guide, and about); later added a print shop page
created display settings to control the animated flag's visual styling, which also gets set to random values on page reloads by default
experimented heavily with a "docked" navigation for easy access to settings
performed heavy responsive testing, re-designs, and tweaking
added an experimental GIF export option to allow visitors to save a copy of the animated flag they're currently viewing as a GIF, including the same styling currently being used
So in the end, what started as a complete experiment in leveraging AI to design and build a conceptual project ended up becoming a much more thoroughly designed and heavily refactored web app that I'm pretty happy with. Now, it's time to get it out there and share it with the community.
Going digital
Building the internal company resource sparked the idea to create something public for everyone. And in 2025, I finally started exploring it. Given that we're not living in the "AI era", if you will, I was testing various vibe-coding tools to see how they performed. So initially, this project was an excuse to play around with Lovable and see what kind of results I'd get. It seemed to be one of the better choices at the time for design-focused prototypes.
I didn't really have a design in mind, yet. And I was curious what the tool would come up with. So I just loosely described what I was looking for and let it cook. As expected, the design it came up with was mostly uninspiring. But it was a place to start. What I did appreciate, though, was the inclusion of a couple features I didn't directly ask for. One was the inclusion of a quiz, which would add more user engagement. The other was content meant for allies, sharing recommendations on how they can best support queer individuals with their own behavior. That's helpful because while good intentions are appreciated, they don't always have the desired results. So providing some guidance and simple reminders can go a long way.
At this stage, it was a simple one-pager with a hero, simple nav, and grid with placeholders for the flags, which would be the main focus. I had some ideas for the hero section and played with that for a while before moving on to the flags.
Early inspiration — animated flags
One idea I had was to try animating the flags to add more life to the page. I got curious and went looking around for some ideas. Little did I expect to find the perfect inspiration! Josh Comeau is an experienced software engineer from Montréal. In the summer of 2023, he posted an article about his Animated Pride Flags. He developed a method to split flag designs into vertical strips and apply looping CSS animations to shift each strip's position up and down with a short delay per strip, creating a sort of waving effect. He shares his approach in a tutorial using React, HTML, and CSS. It's fantastic. And it was an excellent source of inspo for the guide, helping solidify the primary design element moving forward.
Color theming
One of the other fun parts of this process was going beyond standard light and dark color modes. Because this project is inherently colorful with a variety of pride flag designs, it warrants having some fun with how the content and controls are expressed through color across the interface. I had already wanted to explore color theming more deeply anyways, so this was a great excuse to do that. What came to mind was trying a "chill wave" theme. Chill wave, as a music style, is something I really like listening to. And I thought it might translate well to a UI theme. So I thought I'd give it a shot. This was another experiment I wanted to give to an AI model and just see what it came up with. In one of the earlier iterations of the UI, I also suggested it try adding a glowing neon effect around parts of the UI. Where the project landed, the "Chill Wave" theme is basically a dark mode-derivative theme that uses warmer pink and orange as accent colors whereas the dark theme uses cooler blue accents. It's also the default theme. It could be pushed further, but I think it works well for launch. I'll likely explore adding more themes in the future.
Accessibility
In the spirit of inclusivity, designing and building for everyone needs to be a priority. Thankfully, building with UI frameworks like Radix makes accounting for accessibility much more approachable. Things like keyboard navigation, focus management, and more are already accounted for in their prebuilt components. Additionally, I made sure to account for reduced motion preferences and color contrast. And as I used agentic AI models throughout the build, I ensured they followed suit, set AAA compliance as the bar, and ran occasional checks.
Design iterations
Lastly, let's talk about the iteration process. Because this project was a bit unique, given it wasn't for a client, didn't have a project brief, and was partially an experiment to test new AI-powered tools, it started out extremely loose and lacking in clear direction. But as the project formed, it became more clear step-by-step what about the design and UX worked and what didn't. The early designs were too flat, boring, and didn't excite me. A grid of 17+ flags built with HTML, all animating in loops was not performant. Component styling was too basic, out-of-the-box. And the one-pager design left it feeling too lightweight to have the level of significance I wanted.
Playing around with component styling, transitions, and small layout changes only got me so far. I wasn't feeling inspired yet. And to be honest, I was relying way too much on just "vibe-designing" new solutions. I eventually had a reset in my process. I went looking for more design inspiration and started collecting various design samples from unique web animations to colorful digital art, and pieces that could be reimagined into a web interface.
After sleeping on the new inspo board and taking a couple breaks from the project, I came back refreshed and started breaking down the project, looking at it from a different angle. In summary, here are several steps I took to reimagine the project into something more custom that I could be proud of:
selected a new set of fonts to be used across the project
extracted the hero section into its own landing page that describes the project; includes a loading animation
nixed the flag grid + per-flag dialog pattern in favor of a one-at-a-time full-page carousel to provide a far richer and more focused experience per flag while simultaneously improving performance by only displaying a single animated flag at a time
divided up the other sections into their own pages (quiz, ally guide, and about); later added a print shop page
created display settings to control the animated flag's visual styling, which also gets set to random values on page reloads by default
experimented heavily with a "docked" navigation for easy access to settings
performed heavy responsive testing, re-designs, and tweaking
added an experimental GIF export option to allow visitors to save a copy of the animated flag they're currently viewing as a GIF, including the same styling currently being used
So in the end, what started as a complete experiment in leveraging AI to design and build a conceptual project ended up becoming a much more thoroughly designed and heavily refactored web app that I'm pretty happy with. Now, it's time to get it out there and share it with the community.
Going digital
Building the internal company resource sparked the idea to create something public for everyone. And in 2025, I finally started exploring it. Given that we're not living in the "AI era", if you will, I was testing various vibe-coding tools to see how they performed. So initially, this project was an excuse to play around with Lovable and see what kind of results I'd get. It seemed to be one of the better choices at the time for design-focused prototypes.
I didn't really have a design in mind, yet. And I was curious what the tool would come up with. So I just loosely described what I was looking for and let it cook. As expected, the design it came up with was mostly uninspiring. But it was a place to start. What I did appreciate, though, was the inclusion of a couple features I didn't directly ask for. One was the inclusion of a quiz, which would add more user engagement. The other was content meant for allies, sharing recommendations on how they can best support queer individuals with their own behavior. That's helpful because while good intentions are appreciated, they don't always have the desired results. So providing some guidance and simple reminders can go a long way.
At this stage, it was a simple one-pager with a hero, simple nav, and grid with placeholders for the flags, which would be the main focus. I had some ideas for the hero section and played with that for a while before moving on to the flags.
Early inspiration — animated flags
One idea I had was to try animating the flags to add more life to the page. I got curious and went looking around for some ideas. Little did I expect to find the perfect inspiration! Josh Comeau is an experienced software engineer from Montréal. In the summer of 2023, he posted an article about his Animated Pride Flags. He developed a method to split flag designs into vertical strips and apply looping CSS animations to shift each strip's position up and down with a short delay per strip, creating a sort of waving effect. He shares his approach in a tutorial using React, HTML, and CSS. It's fantastic. And it was an excellent source of inspo for the guide, helping solidify the primary design element moving forward.
Color theming
One of the other fun parts of this process was going beyond standard light and dark color modes. Because this project is inherently colorful with a variety of pride flag designs, it warrants having some fun with how the content and controls are expressed through color across the interface. I had already wanted to explore color theming more deeply anyways, so this was a great excuse to do that. What came to mind was trying a "chill wave" theme. Chill wave, as a music style, is something I really like listening to. And I thought it might translate well to a UI theme. So I thought I'd give it a shot. This was another experiment I wanted to give to an AI model and just see what it came up with. In one of the earlier iterations of the UI, I also suggested it try adding a glowing neon effect around parts of the UI. Where the project landed, the "Chill Wave" theme is basically a dark mode-derivative theme that uses warmer pink and orange as accent colors whereas the dark theme uses cooler blue accents. It's also the default theme. It could be pushed further, but I think it works well for launch. I'll likely explore adding more themes in the future.
Accessibility
In the spirit of inclusivity, designing and building for everyone needs to be a priority. Thankfully, building with UI frameworks like Radix makes accounting for accessibility much more approachable. Things like keyboard navigation, focus management, and more are already accounted for in their prebuilt components. Additionally, I made sure to account for reduced motion preferences and color contrast. And as I used agentic AI models throughout the build, I ensured they followed suit, set AAA compliance as the bar, and ran occasional checks.
Design iterations
Lastly, let's talk about the iteration process. Because this project was a bit unique, given it wasn't for a client, didn't have a project brief, and was partially an experiment to test new AI-powered tools, it started out extremely loose and lacking in clear direction. But as the project formed, it became more clear step-by-step what about the design and UX worked and what didn't. The early designs were too flat, boring, and didn't excite me. A grid of 17+ flags built with HTML, all animating in loops was not performant. Component styling was too basic, out-of-the-box. And the one-pager design left it feeling too lightweight to have the level of significance I wanted.
Playing around with component styling, transitions, and small layout changes only got me so far. I wasn't feeling inspired yet. And to be honest, I was relying way too much on just "vibe-designing" new solutions. I eventually had a reset in my process. I went looking for more design inspiration and started collecting various design samples from unique web animations to colorful digital art, and pieces that could be reimagined into a web interface.
After sleeping on the new inspo board and taking a couple breaks from the project, I came back refreshed and started breaking down the project, looking at it from a different angle. In summary, here are several steps I took to reimagine the project into something more custom that I could be proud of:
selected a new set of fonts to be used across the project
extracted the hero section into its own landing page that describes the project; includes a loading animation
nixed the flag grid + per-flag dialog pattern in favor of a one-at-a-time full-page carousel to provide a far richer and more focused experience per flag while simultaneously improving performance by only displaying a single animated flag at a time
divided up the other sections into their own pages (quiz, ally guide, and about); later added a print shop page
created display settings to control the animated flag's visual styling, which also gets set to random values on page reloads by default
experimented heavily with a "docked" navigation for easy access to settings
performed heavy responsive testing, re-designs, and tweaking
added an experimental GIF export option to allow visitors to save a copy of the animated flag they're currently viewing as a GIF, including the same styling currently being used
So in the end, what started as a complete experiment in leveraging AI to design and build a conceptual project ended up becoming a much more thoroughly designed and heavily refactored web app that I'm pretty happy with. Now, it's time to get it out there and share it with the community.
Want to collaborate?
If you're interested in collaborating with me on this or future projects, reach out via my contact form. I'd love to get introduced and see what we could create together! Thanks for visiting.
Want to collaborate?
If you're interested in collaborating with me on this or future projects, reach out via my contact form. I'd love to get introduced and see what we could create together! Thanks for visiting.
Want to collaborate?
If you're interested in collaborating with me on this or future projects, reach out via my contact form. I'd love to get introduced and see what we could create together! Thanks for visiting.