Before addressing the layout specifically, I would suggest doing the following:
1) reduce the brightness of the light yellow color for "virtue" if you end up using that (since its high contrast might cause discomfort to some people, or to those using certain screen/color configurations)
2) it's generally not a good approach to use real-life religious symbols for a variety of reasons. These range from potential disrespectfulness to incoherent in-game worldbuilding, to not being communicable enough on a wider scale. I will explain the latter two briefly, since disrespectfulness is mostly self-explanatory. In most fiction, and in this case, games, and Pokemon games in particular, there is a differentiation between the internal-to-the-game religions (and even ideologies, or systems), and their external inspirations. This provides an air of authenticity while keeping the general image that's based on the external inspiration, familiar. Of course there are pieces of fiction that don't only heavily borrow, but insert real-life elements as is. But even if that is your aim, the safest way is to use concepts that are more broadly familiar, which in your case apply in this form:
"Virtue" is a concept that is recognizable throughout history and across cultures. It's a good start - while "sin" is also one of those concepts, perhaps even more than "virtue", the direct opposite of "virtue" is "vice" (well, in most cases it is a synonym to "sin", but it's not as specific as sin). Virtue is not only a moral thing, it's more of a characteristic that is tied to a behavior. So is vice. These are universally recognized already, so I'd suggest you change "sin" to "vice". (not to mention that "vice" is more general-audience friendly)
Symbols could be anything from "light, an arrow pointing up, an orderly arrangement of lines, or a sword - since you have to fight to attain it" for virtue, to "darkness, arrow pointing down, dissolved and chaotic lines, or a cracked object, vines or thorns (signaling being held captive)" for vice. Funnily enough, both Vice and Virtue start with a V - and a V pointing up is ^ so you could actually use a ^ and v for symbols, and if combined they make a rhombus or ... something resembling two conjoined alphas.
As far as the color scheme for the layout is concerned, opposite range colors do the trick - with the most cliché example being black and white - but also more plain colors for virtue (think blue), and more extravagant colors for vice (let's say pink) may apply. The classic 80s blue-pink neon combination is one example. If you want to implement a gradient hue, leading from one end to the other, then you can do that, it's fine. You could also use your main 2 colors in combination with 2 other colors for other details and use them interchangeably. Your current set of colors seems cool, too. Yellow or gold for virtue and oxblood/burgundy red or purplish for vice is fine.
To some up, here's what I'd suggest:
1) reduce brightness of yellow
2) change "sin" to "vice"
3) replace the symbols
4) use any of these:
a) any opposite colors on the hue
b) calmer, plain colors for virtue, stronger flashier colors for vice
c) a gradient from one color to the other
d) a combination of your 2 main colors with 2 "side" colors
Finally, you could always do a mockup of like a couple of templates, and even if you don't get any feedback on it, just roll with (whichever) one! The same applies to other things, like evolutions, or names. You can always go back to improve these.