to wander, stroll about, roam, be unsettled, spread abroad
Palette Overview
Palette + Commentary
The constraints, or bounds, to any system are probably the most important place to start. Notably, vagari has no light or dark mode, or any variations. There is just one schema, and it's been carefully chosen.
The particulars of the bounds or aspects theme may change overtime—variations on vagari are encouraged, and might influence adaptations, but ultimately... the goal is to create a standard for anyone to build upon.
First, the background, as the contrast ratio to this color is one of the most important determining factors when generating others colors. A somber and cool tone was chosen, allowing black and white to each play distinct roles, rather than being relegated to the background or foreground.
background → adaptability, wonder, and curiosity.
#222536 CR:1.00
|
These dark hues are utilized to give depth to the background elements; they are simply meant to be extension of the background color. Usage ought to be subtle.
#1e2133 CR:1.05
|
#181a2c CR:1.12
|
#131626 CR:1.18
|
#0d0f1b CR:1.26
|
Next, the foreground. vagari continues to lean into the use of cool tones, and the foreground is more blue that one might traditionally expect. Again, this is done so that white is encouraged to carry more meaning.
foreground → familiarity, focus, and humility.
#aeb9f8 CR:8.00
|
Like the darker colors, these bright colors are meant to provide a means to highlight foreground elements, acting as a subtle extension of the foreground color.
#b6c0f7 CR:8.56
|
#bec6f8 CR:9.11
|
#cad1fb CR:10.12
|
#d1d8ff CR:11.21
|
Now that the general bounds are set, we can now assign proper roles for the more neutral extremes. black won't be used much in code (vagari's first use-case), however, it can to be used momentarily stand in as the background, creating a strong statement. Further use cases are undetermined, as of now.
black → sophistication, rebellion, and mystery.
#1d1d21 CR:1.11
|
#16161a CR:1.19
|
#101014 CR:1.25
|
#0b0b0f CR:1.30
|
Likewise, white now has a rather undecided role. As of now, it is predicted to be used communicate clarity and importance of common foreground elements, and as better contrasting color for black, when it is used.
white → organization, harmony, and simplicity.
#c9c9e2 CR:9.33
|
#d3d3ed CR:10.41
|
#ddddf6 CR:11.36
|
#e9e9fb CR:12.63
|
The following communicative colors represent the majority of the colors you ought to looking at, since vagari aims to primarily feature a duo-tone appearance.
Each pair of colors represent a dimension for a particular meaning to exist within. Sometimes applications may co-opt the colors in order to maintain balance for that particular scope. However, the base case for each pair will be listed below, attempting to establish a standard.
vagari's primary color is blue, manifesting in both the background and foreground a cool tone. Naturally, this means blue will be used to highlight frequent elements that would otherwise overwhelm the palette.
blue → serenity, freedom, and infinity.
Typically yellow would be the anti-blue, but vagari will use orange to be represent attention and direct general focus, as yellow is has better use a strong signaling color.
orange → ambition, novelty, and significance.
#4a6be3 CR:3.24
|
#e56b2c CR:4.66
|
||
#6380ec CR:4.20
|
#ea834b CR:5.66
|
||
#7492ef CR:5.12
|
#eb905d CR:6.26
|
||
#8aa4f3 CR:6.26
|
#f2a170 CR:7.29
|
||
#9db2f4 CR:7.29
|
#f8b486 CR:8.56
|
Green and purple act as the primary alternative duo-tone pair. If any colors are to be co-opted, then this is the pair to use. However, there is still a preferred base case (derived from programming color schemes).
Anecdotally, it appears many color schemes seem agree on one thing: strings are green. Since strings are so common, then it makes sense to keep this standard.
green → creation, growth, and intuition.
Less common, but still frequent enough to avoid overlap with a strong signaling color, is the use of purple. vagari uses purple to represent keywords, conditionals, or common statements.
purple → cultivation, control, and logic.
#5b9542 CR:4.20
|
#7f61cd CR:3.24
|
||
#73ad5a CR:5.66
|
#9376d8 CR:4.20
|
||
#85ba6d CR:6.67
|
#a188df CR:5.12
|
||
#95cb79 CR:8.00
|
#b29ae8 CR:6.26
|
||
#9fd883 CR:9.11
|
#bdaaeb CR:7.29
|
The following signaling colors represent a minority of the colors you ought to looking at. Generally, each pair has a narrow domain; they represent distinct poles, where a neutral ground usually does not exist.
Again, there are exceptions, and some colors may be co-opted for particular applications, but doing so is strongly discouraged. The strength of these signaling colors relies on their infrequent and narrow usage.
When possible, vagari will attempt to retain common pairings. The best example is for stop/go and failure/success, i.e., red/green. Both red and green are overused (semantically), so vagari uses the names emerald and ruby to help draw a memorable distinction.
emerald is a vivid green, signaling success/pass/go.
emerald → opportunity, confidence, and prosperity.
ruby is a vivid red, signaling failure/error/stop.
ruby → regulation, tension, and power.
#2d9a45 CR:4.20
|
#f34657 CR:4.20
|
||
#48a95b CR:5.12
|
#f36978 CR:5.12
|
||
#5aba6d CR:6.26
|
#f07a88 CR:5.66
|
||
#5fc976 CR:7.29
|
#f08898 CR:6.26
|
||
#76d78b CR:8.56
|
#f29ca9 CR:7.29
|
Nearby (in hue) is cyan and pink. Unlike red and green, the pink/green(cyan) combo is probably the least universal pair, in terms of semantic meaning. vagari capitalizes on this ambiguity to assign them to the most fundamental discrete pairings: boolean.
cyan is close to green, so it is assigned to true/yes
cyan → discipline, wisdom, and honesty.
pink is close to red, so it is assigned to false/no
pink → innovation, courage, and resilience.
#2bb198 CR:5.66
|
#d15da6 CR:4.20
|
||
#30c9b0 CR:7.29
|
#e36cb8 CR:5.12
|
||
#38d2ba CR:8.00
|
#ea76c0 CR:5.66
|
||
#50dec8 CR:9.11
|
#e887c3 CR:6.26
|
||
#75e6d5 CR:10.12
|
#ed9acd CR:7.29
|
Finally, the last pair of major signaling colors. If one is to co-opt a color pair, then this is the pair to change. Honestly, it's very close to being a communicative colors, but yellow has intuitive and common literal assignment to "warning." and light-blue is too useful to pass up.
sun (yellow) signals that information is new; this can be a warning, a tip, or a time-sensitive message.
sun → discovery, creativity, and optimism.
sky (azure, blue) signals that information is old, or relevant but not vital; it can be used frequently, with out too much distraction, since it's not too far from the foreground.
sky → balance, productivity, and pragmatism.
#f3a338 CR:7.29
|
#369fd7 CR:5.12
|
||
#f5b855 CR:8.56
|
#54b0e2 CR:6.26
|
||
#f5c069 CR:9.11
|
#6bbdec CR:7.29
|
||
#f4ce88 CR:10.12
|
#7cc5ef CR:8.00
|
||
#f5d599 CR:10.72
|
#90d1f5 CR:9.11
|
Next up are the muted colors; they are meant to be co-opted for more technical use cases. Their exact meanings have a lesser importance, instead, the goal is to maintain a consistent relation between colors.
Furthermore, these colors do not have any meaningful emotional mappings, unlike the other colors listed above. To avoid unintended cultural weighting, vagari use amino acids names instead of traditional colors. This may be confusing at first, but there is a interesting rationale behind it:
- The red/blue pair is probably the most overused color pairing their is, and inconsistent between disciplines, such as in positive/negative case. The main goal here is to correct for that.
- Red (ruby) already has a very distinct meaning, which ought not to be diluted. Plus, blue is already the main color in vagari's palette. Thus, something has to be done about these two at least.
- Green is tragically underrepresented (poor bulbasaur). There aren't even commonly agreed names for the various greens; most greens just get labeled "green." Seriously, look at blue and purple, then are emerald and green in vagari's palette. They are the same distance (roughly) in hue, but the blue and purple as easy to assign. Which green is the real green? Green needs some attention too.
- Geometrically speaking, vagari (and our eyes) play in the RGB color-space. Hue is determined by it's position in the 360° unit circle. The three perceptually darkest colors (Red,Green,Blue) and three lightest (Cyan,Magenta,Yellow) are displayed on a hexagon (the bestagon) to aid in perceptual orientation. Notably, after mapping the main colors, then obvious gaps appear.
- Interestingly, adding the 5th roots of unity perfectly fit the gaps (hello magenta, and... army green?). Plus, using said roots gave new distinct representations for red, blue and green. Perfect.
- Then, the question is raised: what to name these colors? vagari took inspiration from The Most Complex Language in the World (life; amino acids). Amino acids are categorized into 5 groups, with 3 of the groupings determined by charge. Perfect.
- Furthermore, the adoption of the three letter code naming convention in code was embraced in order to define colors in a consistent way within code (rules of three). Perfect.
histidine was chosen to represent red, because it is one of the positively charged amino acids, and it's single letter code is H, the same for a proton (hydrogen; positive charge).
histidine → positive, proton, high, hot, right, forward, increase, give, acid
#824141 CR:2.00 |
#b15e5b CR:3.33 |
#c67a79 CR:4.66 |
#d09490 CR:6.00 |
The rationale behind the use of glutamic acid (there's only two negatively charged side chains), it's merely because glu is similar to blu.
glutamic → negative, electron, low, cold, left, backward, decrease, take, base
#3b557c CR:2.00 |
#5b77a4 CR:3.33 |
#7690b9 CR:4.66 |
#90a4c7 CR:6.00 |
asparagine naturally filled the role as neutral, as it's single letter code is N. Also, asparagine was mapped to magenta, as it's primarily the combination of red and blue.
asparagine → neutral, external, outside, indifferent, observer, former
#6f447a CR:2.00 |
#9961a7 CR:3.33 |
#af7dba CR:4.66 |
#c193cd CR:6.00 |
The yellowish-green color is not well defined, but does pair well with magenta, as it fits the same gap geometrical gap that magenta does. Thus, proline was assigned this color, fitting the special use case.
proline → internal, inside, special, participant, latter
#505831 CR:2.00 |
#717b45 CR:3.33 |
#8a945b CR:4.66 |
#9ea876 CR:6.00 |
Finally, tyrosine was chosen from be one of the many hydrophobic side chains, because it's also one of the many greens. It's use is rather undefined, manly serving to be a third for cases where a trichotomy is more fitting. To help establish a more solid foundation, then it might be useful to know that tyrosine a precursor to epinephrine and dopamine, and one of the few few aromatic chains.
tyrosine → link, combine, move, action, cycle, group
#375c47 CR:2.00 |
#4b8163 CR:3.33 |
#5a9c78 CR:4.66 |
#72b08e CR:6.00 |
Lastly, the unsung hero of color: grey (🙊 gray).
Ironically, vagari has little to say about grey; there is much to be developed here. Grey is incredibly hard to get right, and proper usage can make or break a design. vagari remains open to change. For now, an attempt at a flexible standard is introduced.
An emotional valence for each grey will be suggested. However, note that this may be overreaching. Really, these greys are meant to help guide attention, via use of contrast instead of color.
First up, the traditional grey, relative to the background at least. This grey is designed to be used in conjunction with black and white, wherein a neutral, yet opinionated, message is being communicated.
grey → normality, passivity, and indecision.
#373945 CR:1.32 |
#3f414f CR:1.50 |
#4f5163 CR:1.94 |
#5f6278 CR:2.52 |
#6d7089 CR:3.12 |
#7f8199 CR:3.97 |
Next is the most frequently used grey—slate; it is used to maintain the cool tones present in vagari.
slate → flexibility, receptivity, and forgiveness.
#343852 CR:1.32 |
#3c4162 CR:1.53 |
#484e75 CR:1.89 |
#585f8d CR:2.47 |
#686ea1 CR:3.12 |
#7b7fb0 CR:3.97 |
A darker and cooler grey was needed to bridge the gap to the background, so glacier was created; it rivals the frequency of use of slate, and raises the question: are the other greys also lacking?
glacier → connection, kinship, and unity
#252841 CR:1.05 |
#282b48 CR:1.10 |
#30345a CR:1.27 |
#3f4578 CR:1.68 |
#4e5492 CR:2.16 |
#5a61aa CR:2.68 |
Likewise, rust is meant to be used in conjunction with orange, the primary color used to direct attention.
rust → cooperation, hospitality, and stability.
#493531 CR:1.32 |
#563e39 CR:1.54 |
#694b44 CR:1.94 |
#805a52 CR:2.52 |
#92675d CR:3.11 |
#a3786d CR:3.97 |
Originally, there were only going to be three greys to start. However, it wasn't much of a stretch to create a magenta-grey, i.e., plum; it is designed to be used in conjunction with asparagine.
plum → relaxation, grace, and amicability.
#453445 CR:1.32 |
#523c52 CR:1.53 |
#634a64 CR:1.96 |
#765a77 CR:2.52 |
#876888 CR:3.15 |
#977998 CR:3.97 |
Finally, the most uncertain grey, olive. Interestingly, having greys with zero (or near zero) saturation leads to a green looking grey with the default background color. Avoiding the green tint means adding more blue, resulting in the actual grey above.
Instead, vagari leans into the green, creating olive, so that there is a means to use more variable contrast in cases when green dominates the scene. Also, in cases where the background is changed, perhaps to black. In such cases, then this green actually can look more like a more neutral grey.
olive → uncertainty, exploration, and obscurity.
#383a39 CR:1.32 |
#414342 CR:1.51 |
#505251 CR:1.92 |
#5f6361 CR:2.48 |
#6e7270 CR:3.10 |
#818382 CR:3.97 |
At this time, vagari is merely an attempt to standardize my own colors and configuration. Thus, most of the ports below will be links to my personal configuration files.
If others begin like the color scheme (maybe 100 stars? or funding...), then I will begin to make a more robust porting system. Ideally, a system for updating and changing colors across configuration files is needed, as I would like to minting the ability to be flexible with the colors while maintaining consistency.
- hyprland
- see
general {...}
(for borders) anddecoration {...}
(for shadows)
- see
- dunst
- see bottom of file (underdeveloped, but it's a start)
- eww
- glava
#define COLOR (#6b88f4 * ((d / 180) + 0.69))
relevant color (blu_2) for radial. bars is similar.
- starship
- see
setup {{...}}
- see
- neovim
- kitty
- see
Color scheme: {{...}}
section and tab_bar.py (fragile; definitely needs fixing)
- see
- zsh-syntax-highlighting
i.e., wherever possible, inject genre, inspiration, or any relationship of significance.
![](https://github.com/nosvagor/vagari/raw/main/share/images/friedrich/arrival-large-decor.png?raw=true)
Quantum Chromodynamics – What Makes the Strong Force Strong?
The video that catalyzed the creation of vagari.
Awakening from the Meaning Crisis
A wonderful series about history, philosophy, and the
meaning of meaning; it provided the energy needed to publish vagari.
Arrival: A Response To Bad Movies
An awakening to the importance of linguistics, story, non-zero-sum games,
and ultimately, the craft of combining good ideas.
i.e., acknowledge that color (and design itself) is a system of communication with an evolutionary history.
An obsession with the language of film provided much insight and some rationale for this general philosophical (or rather, biological) concept. Hence, the following represents a way to mine meaning from media, or rather, the exploration of culture via the some of the most dominant mediums:
- What is Cinema Language? (importance of ...)
- Hitchcock and the Language of Cinema (Silence)
- How Studio Ghibli Makes Animation Feel Alive (Sound)
- Akira Kurosawa – Composing Movement (Motion)
- The Soul of Good Character Design (Desire)
- Frank Ocean – Musical Identity (Depth)
- Every Face Tells A Story (Emotion)
- GoT – How to Evoke Emotion (Structure)
- How Sicario Fools its Audience (Expectations)
- Tenet – A Misunderstood Masterpiece (Subjectivity)
- Edgar Wright – How to Do Visual Comedy (Creativity)
- This Top Gun Scene Is Like A Perfect Pop Song (Universality)
- Why Mass Effect Should Be the Next Game of Thrones (Adapatation)
- You Can Make a Netflix Style Doco About Literally Anything (Theme)
- Childish Gambino – Storytelling Through Hip-Hop (Cohesion)
- The Secret Ingredients of Great Hospitality (Belonging)
- The Role in Filmmaking No One Talks About (Detail)
- Satoshi Kon – Editing Space & Time (Transitions)
- What Matters is What You Do (Humility)
- Optimistic Nihilism (Motivation)
i.e., chaos is mathematical concept; an intrinsic pattern of the universe that arises in non-linear systems.
Creativity is not a some special, dualistic force ("the muse,") that only humans possess. Creativity is Chaos;it's an emergent property that originates from the of the embrace of—and the eventual observation of—sensitive starting conditions in dynamical systems (e.g., human minds), coupled with, but not limited to:
- curiosity in the unknown, and an deep desire to understand.
- courage to challenge the status quo, and everlasting itch to explore.
- humility in allowing the process to unfold, and willingness to fail.
i.e., Most Advanced, Yet Acceptable; evolution acts on mutations during replication of existing entities.
Style is analogous to the concept of fitness in evolution applied, when applied to culture—it's easy to think that fashion (evolution) is a forward march that makes better and better styles (organisms). Instead, fashion is a "bumbling mess that just gets lucky sometimes," i.e.:
- Expression (and imitation) of a style is the primary way that it is replicated.
- The primary niche to be filled is in the domain self-expression, with a sub-domain of functionality.
- Thus, a relatively good (fit) style is one that allows the users to express something about themselves (color), while maintaining functionality (design grammar), in order for expression to be noticed by others.
- Hence, vagari's primary use case: a color scheme; further design principles are simply means to create a more cohesive and deep meaning behind the selection of color.
If the hypothesis of vagari is correct, then in a sense fashion is discovered. I.e., the most fashionable style of the time is found via somewhat random exploration. However, in a sense fashion also invented, because ultimately style (the result of the process of fashion) is created as a means to out-replicate competing styles.
i.e., the "Swedish number for six", or the maximum number of objects in focus at a given time.
Funny, but the sex principle is more than just a joke—it's primarily about dealing with cognitive overhead. As a whole, design must be simple and sexy, not minimal and mundane. This principle is core to vagari and represents the adherence to the selfish memes/genes theory of replicators with unbounded evolution, i.e.:
- Something is sexy if it is attractive or exciting, and in the realms of ideas, desire for replication.
- Communication is all about replicating an idea inside another mind, but it's not perfect—mutations occur.
- Thus, a good design is one that is enticing, welcoming a new idea, with minimal (but not zero) mutations.
- Hence, the adoption of, and iteration on, well known and attractive design principles:
The essential idea here involves minimizing the impact of anything that stresses working memory, i.e.:
- Maximum of 6 objects in a scene, i.e., 6 things that require increased discernment.
- Maximum of 3 layers to an object, i.e., 3 variations, choices... or better... dimensions to an object.
Ideally, properly embracing this principle ought to result in an easier to manage punctuated equilibrium between abstraction and coupling (a tradeoff that exists in idea-space as well as code) thanks to the embrace of evolution, powered by sexual selection of interested minds.
i.e., imagination is the key to cooperation; shared exploration of fiction is how we create useful norms.
Essentially, if you could not tell already, story (meaning) is a huge factor in the philosophy of vagari. Anyone can make a color scheme, and many others will be better for certain people in certain contexts. In the end, vagari is not trying to be the best, or the most popular, color scheme (functionality/appeal is are merely useful qualities).
Instead, at it's core, vagari is trying to be the most meaningful color scheme. vagari assumes that most other color schemes do not allow the art of color to transcend functionality. The solution is to allow the users to say something about themselves—a reason to choose, share, and improve this color scheme, rather than any of the other adequate (and exceptional) color schemes out there.
Related principles and concepts not already mentioned:
Ideally, properly embracing this principle ought to compel users to want to proudly display and share vagari, resulting in a positive feedback loop of meaning via the injection of new ideas, provided by new users.
i.e., a dance involving computational irreducibly, information, and chaos.
Particularly, vagari's philosophy is obsessed with complex systems. Because of this, the embrace of chaos is at the core of the design philosophy. vagari is not looking for the answer—vagari is looking for an answer; always open to a new answer, or a new way of approaching problems.
The starting point of many decisions usually draw upon inspiration from the apparent universality of various mathematical concepts or patterns (e.g., fractals and holomorphic dynamics), hopefully resulting in the injection of mathematical meaning (e.g., the logistic map and Feigenbaum constants for some contrast ratios).
"There are no separate systems. The world is a continuum. Where to draw a boundary around a system depends on the purpose of the discussion." – Donella H. Meadows
Ideally, properly embracing this principle means a embarking on constant exploration of alternative approaches via the willingness depart from the respectable (but not holy) constraints initially set by (ideally) interesting maths.
id est, ignoramus et ignorabimus, tamen id conamur >
> i.e., we do not know and will not know, yet we try regardless.
The above phrase is the best simple representation of the core philosophy of vagari.
Perhaps, the two most relevant books to the formation of this principle:
- The Beginning of Infinity, by David Deutsch
- The Network State, by Balaji Srinivasan
One might be tempted to ask: "why so does vagari seem so… pretentious?"
Well, to be frank: vagari is pretentious; it's kind of essential to success of the project, actually. To conjecture:
projects like vagari ought to grow to represent a digital flag of some order. Design frameworks ought to move past representing brands, and move towards being a means to virtue signal the digital community (nation) you are a part of. Overtime, frameworks should to evolve like languages, and be less universal.
Ideally, shared participation in this fiction will hopefully manifest a reality among the participants. The philosophy of vagari is built upon the idea that collaboration is the ultimate force for discovery. Sure, one node in a network may be the seed, or the spark, for a cascade of activation... but it's the activity in the networks' activity that creates the gestalt, i.e., the unique property of a whole that is more than the sum of its parts.