💾 Archived View for bbs.geminispace.org › s › Lagrange › 11649 captured on 2024-02-05 at 10:39:44. Gemini links have been rewritten to link to archived content

View Raw

More Information

⬅️ Previous capture (2023-12-28)

➡️ Next capture (2024-03-21)

🚧 View Differences

-=-=-=-=-=-=-

The aesthetic choices behind Lagrange?

Hi!

I'm really fascinated with Lagrange, and how it made me fall in love with reading pure text again...

A big part of the merit goes to the Gemini protocol itself of course, but in my case I attribute it mainly to the way Lagrange deals with colors.

So I tried looking for info on how it's done, but I only found a technical publication about ANSI escapes and such.

Do you guys have links to a more color-theory / aesthetics oriented article about this matter? Or maybe your own take on it?

Thank you in advance.

Cheers!

Posted in: s/Lagrange

😺 Nono

2023-11-12 · 3 months ago

8 Comments ↓

🚀 skyjake [mod...] · Nov 12 at 19:54:

Thank you! IMO, while colors are an important part of the aesthetic, typography and the overall layout of elements are equally important. Especially when it comes to the latter, the use of negative space is of crucial importance. For instance, links get padded slightly with extra space to accentuate the interactive elements of the page. Another aspect that is often overlooked are the left and right margins and indentations, and how they align vertically with other elements.

When it comes to the colors, there is a lot to unpack. Some of it is based on color theory (read up on HSL, HSV and CIELAB colorspaces) but a lot is just artistic choices, like which colors to pair with each other. For simplicity, Lagrange mostly uses HSL with a few tweaks to normalize luminance across hues. The procedural theming is based on picking a primary hue on the color wheel and applying a number of saturation and lightness tweaks to it to generate a palette. Supporting hues are picked from a hardcoded table where I've manually chosen pleasing pairings. There can be 1-3 different hues in the palette.

— https://en.m.wikipedia.org/wiki/HSL_and_HSV

😺 Nono [OP] · Nov 12 at 20:46:

Hi there @skyjake! Thank you for your answer... I agree that typography and the layout make for a well "aerated" reading experience.

But to me, it's really the colors that do the trick!

Thanks for your explanations about how these themes are constructed, but I have a few more questions if you don't mind...

Like, is the color for the text just a lighter version of the background color, or is there some hue shifting as well? And is the color scheme choice based on the string for the url? Seems to be the case, since it's consistant across various devices...

🚀 skyjake [mod...] · Nov 12 at 20:55:

The regular body text and the background use the same hue, yes. Note that there are light and dark variants of each color theme. In the dark variant, the body text color is indeed a lighter version of the background. Or more accurately the text color is a lighter version of the base color while the background is a darker version of it.

The "theme seed" that determines the random choices is a 32-bit hash value computed from the page URL or from a given user-defined site-specific string. The hashed part of the URL includes the hostname and a possible ~username.

(The hashing function was intended to be CRC-32, but I botched the algorithm a little so it's not exactly equivalent to it.)

😺 Nono [OP] · Nov 12 at 20:58:

@skyjake: Bravo! 👍

😺 Nono [OP] · Nov 12 at 21:03:

@skyjake: One more question, and then I'll leave you alone, promise!

So it seems that the background color is not the base color, rather a darker version of it...

On this very page for example, where is the actual base color represented?

I know I could go to the preferences and make experiments to get the answer, but I don't want to run the risk of messing things up!

🚀 skyjake [mod...] · Nov 12 at 21:13:

Well, depending on how you define the term, the "base color" could be considered to be the background color of the page.

In the 'gmdocument.c' source code for the Colorful Dark theme, for example, the background color is used as the basis for many of the color calculations, however the background itself is based on the "primary hue" that is the true base color of the theme. The primary hue is a fully saturated color so it can't be used as-is since that would be too overwhelming.

😺 Nono [OP] · Nov 12 at 21:15:

@skyjake: Thanks man!

😺 Nono [OP] · Nov 13 at 14:16:

Thanks for the reference @clseibold. The max page width in Lagrange does make the text less intimidating!