Components

Dropdowns & Selectors

The about-page's type tester is the system's primary 'selector' pattern: equal-sized swatches that fill with the brand gradient on hover/active — functioning as both a typeface preview and the general template for any pick-one-of-several-options control.

Live

Click a swatch to select it

Selected: Light

Selector swatch

.swatch { width: 64px; height: 64px; border-radius: 16px; }
.swatch:hover, .swatch[data-active="true"] {
  background-image: var(--ig-gradient-hero);
  color: #fff;
}

Legacy menu

A denser, simpler treatment

3px radius, semi-transparent border, layered shadow, 12px text. Disabled items stay visible at 55% opacity rather than being removed.

Edit

Do / Don't

Do

Use equal-sized swatch tiles for any 'choose one visual option' control — typefaces, colours, filters.
Fill the swatch with the brand gradient on hover and on the active/selected state — they share the same visual treatment.
Keep legacy dense menus for simple, low-frequency action lists rather than visual selection.

Don’t

Use unequal swatch sizes within the same selector row.
Remove a disabled legacy-menu item entirely — dim it to 55% opacity instead, matching the established pattern.