to wander, stroll about, roam, be unsettled, spread abroad
Palette Overview
#222536 |
#1e2133 |
#181a2c |
#131626 |
#0d0f1b |
|
#aeb9f8 |
#b6c0f7 |
#bec6f8 |
#cad1fb |
#d1d8ff |
|
#f34658 |
#f36978 |
#f07a88 |
#f08898 |
#f29ca9 |
|
#824141 |
#b15e5b |
#c67a79 |
#d09490 |
||
#e56b2c |
#ea834b |
#eb905d |
#f2a170 |
#f8b486 |
|
#493531 |
#563e39 |
#694b44 |
#805a52 |
#92675d |
#a3786d |
#f3a338 |
#f5b855 |
#f5c069 |
#f4ce88 |
#f5d599 |
|
#505831 |
#717b45 |
#8a945b |
#9ea876 |
||
#5b9542 |
#73ad5a |
#85ba6d |
#95cb79 |
#9fd883 |
|
#383a39 |
#414342 |
#505251 |
#5f6361 |
#6e7270 |
#818382 |
#2d9a43 |
#48a95b |
#5aba6d |
#5fc976 |
#76d78b |
|
#375c47 |
#4b8163 |
#5a9c78 |
#72b08e |
||
#2bb198 |
#30c9b0 |
#38d2ba |
#50dec8 |
#75e6d5 |
|
#343852 |
#3c4162 |
#484e75 |
#585f8d |
#686ea1 |
#7b7fb0 |
#369fd7 |
#54b0e2 |
#6bbdec |
#7cc5ef |
#90d1f5 |
|
#3b557c |
#5b77a4 |
#7690b9 |
#90a4c7 |
||
#4a6be3 |
#6380ec |
#7492ef |
#8aa4f3 |
#9db2f4 |
|
#252841 |
#282b48 |
#30345a |
#3f4578 |
#4e5492 |
#5a61aa |
#7f61cd |
#9376d8 |
#a188df |
#b29ae8 |
#bdaaeb |
|
#6f447a |
#9961a7 |
#af7dba |
#c193cd |
||
#d15da6 |
#e36cb8 |
#ea76c0 |
#e887c3 |
#ed9acd |
|
#453445 |
#523c52 |
#634a64 |
#765a77 |
#876888 |
#977998 |
#1d1d21 |
#16161a |
#101014 |
#0b0b0f |
||
#373945 |
#3f414f |
#4f5163 |
#5f6278 |
#6d7089 |
#7f8199 |
#c9c9e2 |
#d3d3ed |
#ddddf6 |
#e9e9fb |
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.
#222536CR: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.
#1e2133CR:1.05
|
#181a2cCR:1.12
|
#131626CR:1.18
|
#0d0f1bCR: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.
#aeb9f8CR: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.
#b6c0f7CR:8.56
|
#bec6f8CR:9.11
|
#cad1fbCR:10.12
|
#d1d8ffCR: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.
#1d1d21CR:1.11
|
#16161aCR:1.19
|
#101014CR:1.25
|
#0b0b0fCR: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.
#c9c9e2CR:9.33
|
#d3d3edCR:10.41
|
#ddddf6CR:11.36
|
#e9e9fbCR: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.
#4a6be3CR:3.24
|
#e56b2cCR:4.66
|
||
#6380ecCR:4.20
|
#ea834bCR:5.66
|
||
#7492efCR:5.12
|
#eb905dCR:6.26
|
||
#8aa4f3CR:6.26
|
#f2a170CR:7.29
|
||
#9db2f4CR:7.29
|
#f8b486CR: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.
#5b9542CR:4.20
|
#7f61cdCR:3.24
|
||
#73ad5aCR:5.66
|
#9376d8CR:4.20
|
||
#85ba6dCR:6.67
|
#a188dfCR:5.12
|
||
#95cb79CR:8.00
|
#b29ae8CR:6.26
|
||
#9fd883CR:9.11
|
#bdaaebCR: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.
#2d9a45CR:4.20
|
#f34657CR:4.20
|
||
#48a95bCR:5.12
|
#f36978CR:5.12
|
||
#5aba6dCR:6.26
|
#f07a88CR:5.66
|
||
#5fc976CR:7.29
|
#f08898CR:6.26
|
||
#76d78bCR:8.56
|
#f29ca9CR: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.
#2bb198CR:5.66
|
#d15da6CR:4.20
|
||
#30c9b0CR:7.29
|
#e36cb8CR:5.12
|
||
#38d2baCR:8.00
|
#ea76c0CR:5.66
|
||
#50dec8CR:9.11
|
#e887c3CR:6.26
|
||
#75e6d5CR:10.12
|
#ed9acdCR: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.
#f3a338CR:7.29
|
#369fd7CR:5.12
|
||
#f5b855CR:8.56
|
#54b0e2CR:6.26
|
||
#f5c069CR:9.11
|
#6bbdecCR:7.29
|
||
#f4ce88CR:10.12
|
#7cc5efCR:8.00
|
||
#f5d599CR:10.72
|
#90d1f5CR: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
#824141CR:2.00 |
#b15e5bCR:3.33 |
#c67a79CR:4.66 |
#d09490CR: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
#3b557cCR:2.00 |
#5b77a4CR:3.33 |
#7690b9CR:4.66 |
#90a4c7CR: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
#6f447aCR:2.00 |
#9961a7CR:3.33 |
#af7dbaCR:4.66 |
#c193cdCR: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
#505831CR:2.00 |
#717b45CR:3.33 |
#8a945bCR:4.66 |
#9ea876CR: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
#375c47CR:2.00 |
#4b8163CR:3.33 |
#5a9c78CR:4.66 |
#72b08eCR: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.
#373945CR:1.32 |
#3f414fCR:1.50 |
#4f5163CR:1.94 |
#5f6278CR:2.52 |
#6d7089CR:3.12 |
#7f8199CR: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.
#343852CR:1.32 |
#3c4162CR:1.53 |
#484e75CR:1.89 |
#585f8dCR:2.47 |
#686ea1CR:3.12 |
#7b7fb0CR: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
#252841CR:1.05 |
#282b48CR:1.10 |
#30345aCR:1.27 |
#3f4578CR:1.68 |
#4e5492CR:2.16 |
#5a61aaCR: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.
#493531CR:1.32 |
#563e39CR:1.54 |
#694b44CR:1.94 |
#805a52CR:2.52 |
#92675dCR:3.11 |
#a3786dCR: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.
#453445CR:1.32 |
#523c52CR:1.53 |
#634a64CR:1.96 |
#765a77CR:2.52 |
#876888CR:3.15 |
#977998CR: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.
#383a39CR:1.32 |
#414342CR:1.51 |
#505251CR:1.92 |
#5f6361CR:2.48 |
#6e7270CR:3.10 |
#818382CR: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.
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.