Progress Notes — Nested Symbols & Overrides

The Witch Lights landing page design makes extensive use of nested symbols and symbol overrides, to maximise reuse and speed. For example, the main hero block is entirely made of nested symbols, using Smart Layout to dynamically resize elements.

Every button is a molecule symbol made of atom symbols, which can be dynamically overridden, along with color and content.

This approach makes it easier to make wide-ranging design adjustments, and stack symbols together like lego blocks.

Color symbols in turn allow the entire site’s branding or color palette to be swapped out. Gradient symbols have the exact same dimensions as the color symbols, so they can be substituted for any flat color as well.

I used a number of example files—such as InVision Form—as a guide for things like the taxonomy structure of the nested symbols, as well as how color symbols, text symbols, shapes, and masks fit together. In most cases, I built all the visual elements myself, using existing elements for inspiration. In other cases, like these mobile navbars, I started with some existing elements and rebuilt them.

It was fun to get these symbol overrides to work, though. It’s nice to be able to just make a single molecule and then swap out the atoms interchangeably.

“System/#0” was intended to have enough contrast from the darker, less saturated “System” colors that make up the background so that they stand out a bit, but not as much as the “Accent” colors. Accent colors are yellow (complementary to System purple), green (adjacent to yellow), or blue (adjacent to purple), high saturation, and much lighter in value than all System colors. That’s why the navbar icon above uses it: I don’t want it to be distracting, but you should be able to find it if you’re scanning for a home button.

This was all quite a bit of work, but the result of it is that I can focus on the content, which is the key element in this effort. And it allows me to adjust and iterate that content with a minimum of visual adjustment. This, in turn, will hopefully enable rapid experimentation to test value hypotheses and find the right mix of persuasive elements to build this community.