💾 Archived View for bbs.geminispace.org › u › skyjake › 11651 captured on 2023-11-14 at 08:30:28. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
Re: "The aesthetic choices behind Lagrange?"
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
Nov 12 · 2 days ago
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...
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.)
@skyjake: Bravo! 👍
@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!
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.
@skyjake: Thanks man!
🚀 clseibold · Nov 13 at 06:27:
In graphic design class, you learn a lot about typography and making sure there's space. Lagrange does a good job in these cases. Also, having a max page width so you can get the page centered is something all browsers *should* do, but most browsers don't, for some reason. It makes the reading experience so much better.
The book I used in my Graphic Design University class was "Graphic Design: A New Story (Second Edition)" by Stephen J. Eskilson.
That book might help with some of the other decisions that go into graphic design, but it's also very focused on the history side of things. I learned a bit, but I'm not very good at graphic design at all, so I defer to that book and to @skyjake's previous comments.
Thanks for the reference @clseibold. The max page width in Lagrange does make the text less intimidating!
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...