18 / Hygge’s ~design system~

tammy koh
2 min readJun 27, 2022

--

So with the flow to my app set in place, now it’s the part where I’m heavily invested in: the aesthetics, or the design system.

View/download the design system here (please give it some time to load).

TYPOGRAPHY

Fonts are important for the “first look” of a brand. The characteristics of Hygge are: modern, friendly, and approachable. Hence, my header [Source Sans Pro] and body fonts [Open Sans] are sans serif as it brings out the mentioned characters in a brand. Additionally, Sansita has a stylish and contemporary kick, which pairs perfectly with a more serious font like Open Sans.

Though both are sans serif, they visibly look different thanks to Sansita’s wavy touch. This enhances and highlights the hierarchy of the header and body.

COLOR SCHEME

The game's primary color scheme is nature-inspired (or neutral earth-tone) since different foreign cities = different vibes = different color schemes. Additionally, earthy tones are considered to be appealing, friendly, and inviting.

Additionally, Hygge is an app created in hopes of educating users on a foreign country’s way of life, and the primary colors (yellow, green, and blue) are proven to stimulate and are conducive to learning.

I’ve also created a mood board for Hygge, so there’s a gist of the overall aesthetics of the app.

Associated Keywords: Personalised, rendered experience, first-person, interactive, smart technology

As seen, Hygge is heavily inspired by simulation games mostly in 3-D, simple and clean rendered art styles (eg. Animal crossing, Burberry’s B-Surf, Sky: Children of the Light). Personally, I appreciate this style because the clean renders help users focus on their avatars and the space around them.

So that’s it, the design system that I’ve envisioned for Hygge! Along with the previous flow chart, it really helps me visualise the entire product better.

--

--