September 17, 2024

Metaphoric method and semantic gradients

Colors squeezed onto the palette; type, heavy with ink; moving in rhythmic vertical flow.

In a continuation of learning new words like sitzprobe and wandelprobe or tsundoku and shinrin-yoku, I have another to add to the list. Well; more of a phrase: semantic gradients.

One of those easy–hard things to do is giving something a name, especially in a collaborative environment. In design systems, there are countless articles talking about how to name tokens & variables, then how to name their categorical groupings, continuing to move on up the complexity ladder.

Constants

One of the foundational bits of naming things are the constants, also known as primitives or tokens. I like constants better, as it’s clearer that these are the values that should not change—and if they do, everything else needs to cascade accordingly.

• -—flow-space

• -—type-scale

• -—palette-{color}

From the outside in, I find it clear that one works with the flow of space, how the typography scales, and choices of color to pick from. The colors squeezed onto the palette; type, heavy with ink; moving in rhythmic, vertical flow.

Subscribe now

Functions

differentiates constants & functions as options & decisions. This is valuable—and when I discovered this in his site’s CSS, things *clicked* in a way they hadn’t before; I was very excited. But, for my purposes, I tend to gravitate towards function.

This is the first level of meaning-giving. All the names here will relate and be used throughout the project moving forward. They’ll also need to be understood by whoever comes next along, picks up your code, and tries to make sense of it.

I have stumbled across a few different ways of naming typographic treatments. There’s the native CSS way of doing things, where you can write font-weight: bolder and the browser will move up one typographic weight level, i.e. regular → semibold, or bold → heavy.

There’s one I really enjoyed that focuses more on the purpose: subtle, default, emphasis. These work great in terms of what they should be and how they work, but feel too constrained in use.

That’s my starting point:

• subtle

• default

• emphasis.

Semantic Gradients

When I read the name, I knew immediately what it was: a color gradient but with words! And that’s exactly what they are—a list of related words placed on a continuum, gradually shifting meaning from one word to its antonym.1

Evidently, these are used to help teach vocabulary.

Here, we have another use.

Let’s go from subtle to emphasis in a more gradated approach:

• subtle

• nuance

• distinct

• prominent

• emphasis

There’s movement to the gradient, across the spectrum. No boring “default”, that also aligns with the tone of what one’s trying to communicate when they’re being used.

As I re-create my website for the fifth or sixth time this year, I’m going with a straight black and white color scheme. In my naming, I’m using: ink, paper, and ash.

That makes things simpler for what I need, while allowing a spectrum of colors to be used across light and dark modes, corresponding to their respective alternative.

Metaphoric Method

I feel this is another continuation of the metaphoric method, though in a different sense. You go up and down the semantic gradient, rather than exploring the depth of metaphor.

The gradient itself could be considered a z-axis where x- and y- cover the depth one can go with the metaphor, and the breadth of applciation.

Continuing on.

This is feeling more and more like it could be a book.

And a workshop.

Teaching associative thinking & creativity through explorative wordplay.

Sound like something you’d sign up for?

Leave a comment