The Design of Cyntal

Cyntal, a vast planet, holding all kinds in its gentle hands. It only means good, but it may not be easy to see it.

Cyntal is meant to be a fantastical world, the kind of stories you'd find in the old fiction section of a library. It can be beautiful and dark at the same time. Withering stems and leaves next to blooming roses.

When I first started thinking of Cyntal, I didn't start writing everything down on World Anvil. I started in a little journal. A beautiful leather journal with a little fountain pen full of brown ink. I often cannot access World Anvil during the day, so my journal is where I start and develop ideas. From my swirling mind to the smooth but messy ink and paper, to finally the digital ink of World Anvil. The first and second steps are by far my favorite. I daydream a dark yet colorful world and then get to write about it in the most beautiful place possible. That Journal is what first comes to mind when I think of Cyntal. That Journal is what I want others to see when they think of Cyntal as well.

Concept

As stated previously, I want visitors to look at this world and feel like they're looking at an old journal. I wanted the main page to look like paper, and the background behind it could mimic the strange fuzziness of the flesh side of leather. The hard, smooth, proper side of the leather gave the journal its appearance, but you don't see it when you open it. You see the other side, the flesh side, of the leather. It may be strange to say, but this side of the leather is by far, my favorite. Both the feeling and the look of it, makes the writing experience better and makes me feel like I am writing in my world.

The leather is not the only thing that makes up this feeling. The paper does as well. Its not plain old copy paper, its thicker, its rougher, its not perfect. My favorite kind of paper is either handmade paper, or uncut watercolor paper. The edges are rough, like when you tear paper. When the paper is like this, it feels old, rustic, like a beautiful craft, like something someone spent time on, even though it’s uncut. The texture also adds to this feeling, handmade paper usually isn't pure white after all. There are darker spots and lighter ones, like the smallest little seeds were dropped in the mix. It breaks up the color and makes the paper feel more special and unique.

A proper color palette is another part of the feeling of the journal. A bright hot pink journal does not make you feel like you're looking at a piece of history. It just feels like a piece of the modern world. Unfortunately, making a color palette is hard. I tried with my previous design, and it turned out... decent. I've found that extremely bright colors are too harsh and don't fit in an old journal. More neutral colors would work better, however, white is not included. I don't want a super bright white page. I may use white in some places, but it won't be a main color.

Later on I was also inspired to have the Navigation sit always open on the side, with little bookmark tabs for all the little navigation buttons. I was inspired by the world Journals of Yesteryear by TJ Trewin. Its an absolutly wonderful and beautiful world! It’s worth taking a look.

While I had the very basics of my ideas, I decided to look on Pinterest to see if I could expand my ideas. It worked. I have all my ideas together in one place, with extras I may or may not use. I have my ideas, time to create them and put them together.

Creation

Going from ideas to a product is always the most difficult part. What you have in your head is never what comes out. It’s never that simple.

Art and Assets

Art is what makes up the makes the majority of a world design or theme. Fonts are the other part. You can use CSS to add color and other things, but you can't really add texture unless you're adding an image. Texture is what I want, so pretty much all of my assets are images.

When creating my artwork, a watercolor style was what I was going for. Unfortunately I have no patience for real watercolor, so I did everything digitally. The only thing I didn't do myself were the textures. I found a nice paper texture from Kiwihug on Unsplash, which you can find on Unsplash here. I applied this texture to the main background and the world cover image. I also found a watercolor abstract art piece by Kseniya Lapteva also on Unsplash; you can find the image on Unsplash here. I removed the saturation and used the texture within the photo to make my art feel like actual watercolor on paper. It’s like a wet paper texture. I applied it to all my assets except the leather and paper background. Now the leather texture is something I made all on my own. I took an image of my journal and then manipulated the picture into a texture brush for Procreate. From there I created my background image.

Fonts were the other lovely thing I had to find. I wanted my fonts to have a handwritten feel, so I primarily looked for more decorative fonts. The Homepage title and quote boxes use handwritten fonts, I wanted quotes to feel like they came from letters and the homepage title font is purely decorative. Its not really legible anywhere else. Aside from those, I have two more fonts, a slightly decorative sans font and a nice serif one. The sans font acts as the header font. Frankly speaking I don't really like sans fonts, but pairing a sans and serif font makes both stand out without being overwhelming. The serif font is the primary text font, and is rather bold to keep from blending into the background. It just being a serif font makes it feel more like a hand written font. After choosing those four fonts, I moved on to matching colors and creating art.

Color palettes, I find, are very difficult to make on your own. Instead of starting from scratch, I found 3 palettes I liked from Pinterest and put them all together. Sort of. I found the best background color, the best font color, and the best accent colors. I adjusted some of the colors and even added my own. Looking at my palette now, you wouldn't even be able to tell where the colors came from. Either way, finding a base point of 3 separate palettes and then essentially shoving them in a blender resulted in a wonderful palette that is now used for all my art and assets in my world.

With the colors sorted, I created the paper background and added the texture. I made little watercolor blobs for boxes and blocks and buttons on the world. I made little bookmark ribbons for the navigation tabs. And I made the full world cover. The world cover actually has a different pallet, but it was the same process.

I have the assets, now to just put them in the world.

CSS Chaos

Creating the look of the page was easy. I just used an image border, then had it fill in the entire page. I was inspired another awesome world that had done this, but I can't for the life of me remember the name. Once I find it I will list it here.

The image border works wonderfully, and I used it often. It can fit any size page no matter what, and if your image has a good, repeatable texture then you wont even notice any weirdness with it! Except for the meta area, it’s all squished for some reason and I don't know why. Once the page looked right, I adjusted its position to give room for the little tabs.

In order to get the tabs where I wanted and looking good, I essentially ripped the navigation sidebar to shreds. I had to remove the background, border, and headers. I had to hide the button to open the sidebar (it’s invisible and sitting underneath the tabs, and its z-index is 0 so it doesn't even work). I also had to figure out how to put the edge of the tabs underneath the page, to make them look like actual bookmarks. After all that I managed to target the categories, articles, subcategories, world meta, and timelines individually. By that I mean the categories are a color, the articles are a color, the subcategories are a color, timelines are color, and the world meta is a color (but only I can see that one). It took a while to figure out and it looks rather messy in CSS but hey it works.

The back to world bar is another story. It REFUSED to go slightly under the page, no matter what I did. However, it will go under the cover image. So I added a border, the same border image as the page, to the cover image and the back to world bar finally cooperated. Just don't look too closely. The search bar can't go under the page or else the search results are partially or mostly hidden. Its annoying but its fine. I can handle one thing on top of the page.

The cover image also has an image mask on it, to emulate a painting that fades along the edges. Learning how an image mask works was interesting. It has to be a black image, and the black is where the image will show through. There can be no white or any other color. It can be transparent, but must be black. It was quite the hassle to get to cooperate as well.

Despite the chaos, designing this was fun! It’s like a puzzle you have to solve, like "why in the world are my links the wrong color" or "why in the world isn't my code working". Its fun.

Purpose

The purpose of a unique world design is simple, it sets your world apart, and makes the reading experience enjoyable. It also sets the mood for the world. This design is meant to feel like an old, beautifully painted journal. It is meant to make readers feel like they are reading a decorative and informative journal about the world while. Almost like reading an old nature journal with picture of animals and plants next to text describing every detail. I want my world to feel like this.

My world is like a nature journal. Just not about nature in the sense of the living world. It’s about character, your nature. You'll also read about living nature in my world, but character is there too.

But to be a King, you must see the faults of your character, you must see the treasures hiding behind it, and you must face the absolute darkness of yourself. A test of character. A study of character.