Designing Gryt's Identity

Finding a visual language

By the start of 2023, Gryt existed as a proof of concept with authentication, a friends list, and a lot of ambition. What it didn't have was an identity. The UI was functional but generic: dark backgrounds, purple accents, and layouts that could've belonged to any app.

That changed in 2023. Over the course of a few months, I went through a series of design iterations that gradually turned Gryt from "a thing I'm building" into something with its own design language, and eventually its own mascot.

The first login revamp, January 2023

The first redesign of the login page arrived in January 2023. Gone was the glowing purple orb; in its place, a cleaner layout with a bold blue wavy background:

The form itself was more refined, with proper field labels, a "Forgot your password?" link, and a cleaner visual hierarchy. It still felt like a prototype, but a more intentional one. The blue was calmer than the previous purple-pink gradient, and the organic wave shapes hinted at the direction I wanted to go: something fluid rather than rigid.

The first sketches, early 2023

This was the turning point. In early 2023, I started sketching what Gryt would actually look like as a full communication platform, with channels, members, profiles, and voice, rather than a login screen and a friends list.

The first server layout sketch showed the "Gryta Krutt" server, named after the friend group that inspired everything:

The structure was heavily influenced by what we knew from Discord: categories with text and voice channels, a sidebar for navigation. The dark palette, the channel icons distinguishing text (#) from voice (microphone), and the notification badges were all designed from scratch.

Alongside the server layout, I designed the members list panel:

Owners at the top with golden crowns, moderators with shield icons, and regular members below. Each with custom avatars. Laying the list out was the easy half; the harder half was settling on a role system and a visual hierarchy that would carry through to the final product.

I also started sketching user interaction patterns. The user card popup was one of the first:

A profile banner at the top, an avatar overlapping it, role badges ("Owners", "Gryt developer"), a custom status with an emoji, and quick-action buttons for messaging and adding as a friend. The user card needed to surface just enough information to be useful without requiring you to open a full profile.

And then the detailed profile view:

This was the full profile experience: a cover image, a large avatar, an "About me" section, badges earned within the platform (Alpha Tester, Beta Tester, Badge Hunter), and linked social accounts. It was ambitious, probably too ambitious for where the codebase was at the time, but it set the design direction.

The owl arrives, March 2023

March 2023 was when two significant things happened: the login page got its second revamp, and the Gryt owl mascot made its first appearance.

Look at the top right corner. There's the owl, peeking in. "Welcome to Gryt" with a happy emoji. The pink login button was a departure from the blue-and-purple palette, adding a playful pop of colour. The owl gave Gryt a face, which none of the previous versions had.

Around the same time, I got the web login running alongside the first version of the Electron desktop client:

The browser shows the login form at auth.gryt.chat, with scattered icons (headphones, game controllers, chat bubbles, puzzle pieces) floating on the purple background. Next to it, the Gryt desktop client window: small, dark, with the owl as the centerpiece and a single "AUTHENTICATE" button. It was minimal, but it was real. Two apps talking to each other through the same authentication system.

With the owl established as the face of Gryt, I explored how it would work as a proper logo across different contexts, in light mode, dark mode, and various background colours:

The light owl for dark backgrounds, the dark owl for light backgrounds, and a few playful twists: the beret on the pink background, the rainbow variant. Having both modes meant the logo could live anywhere without losing legibility, whether on a dark app sidebar or a bright marketing page.

The second iteration, April 2023

With the foundation laid, April 2023 brought a wave of refinements. The user card got a significant upgrade:

The teal gradient banner was replaced with a detailed pixel art landscape: a sunset over mountains, a small figure with a lantern, and a castle in the distance. It felt like every profile could tell a story through its banner. The card layout was tighter, the role badges more refined.

The expanded profile view evolved too:

A painted sky replaced the nature photography of the first version. The badge system expanded to include "Supporter" alongside Alpha Tester, Beta Tester, and Badge Hunter. The social links section was cleaned up, and the overall composition felt more balanced.

The design system takes shape

Also in April 2023, I moved the design work into Figma and started building a proper design system:

This screenshot shows the full scope of what I was working on: a component library on the left with Message components broken down into their atomic parts (icons, names, content, collections), a "Discover" page mockup showing different app states, colour style tokens on the right (Secondary, Ternary, Primary Content, BG, Neutral, and more), and rows of avatar designs and user interface variations.

At the bottom, a "Things to consider" notes section. Having a design system meant I could iterate faster and maintain consistency as the app grew.

Typography: Atkinson Hyperlegible

One design decision that doesn't show up in screenshots but shapes every pixel of Gryt: the typeface.

Gryt uses Atkinson Hyperlegible Next as its primary font, everywhere. The client, the site, the docs, the Keycloak login theme. It was created by the Braille Institute of America with a single goal: maximum legibility. Where most typefaces optimize for aesthetics, Atkinson Hyperlegible optimizes for character differentiation. Letters like I, l, and 1 are unambiguously distinct. Mirrored pairs like b/d and p/q have subtle asymmetries. Open apertures on c, e, and s keep them readable at small sizes.

I'm a huge supporter of all things accessible, and this font is one of my favorite discoveries of the past few years. It's beautiful, it's legible, and it's designed for people who are usually an afterthought in typography. Using it across all of Gryt says something about who the platform is meant to be usable by, which is everyone.

There's a full breakdown of Gryt's accessibility approach in the accessibility docs.

Space owl goes to space

One of my favorite artifacts from this era is the first promotional image for Gryt:

The owl, reimagined as a little astronaut floating through space, tethered to a tiny rocket. Stars and planets scattered around. It fit where the project was at the time: small, not entirely sure where it was going, and enjoying that.

Server discovery

Another major design piece from this period was the server discovery page, a way to browse and join public communities:

A "Discover" panel with a hostname field (defaulting to https://gryt.chat), a server name filter, and a toggle for private servers. The grid layout showed each community with a banner image, server icon, name, and short description. Clicking a server opened a detail panel:

The detail panel displayed the server's full description ("Welcome to our community! We are excited to have you here as a member of our growing community of privacy-conscious individuals"), language tags, member count, and a "Request to join" button. The idea was that finding a community should feel like browsing, rather than sifting through invite links.

Dashboard concepts

The same month brought dashboard designs that pushed the concept further:

"Good Evening, Sivert" with a greeting that changed based on time of day. An unread messages widget pulling in messages from servers and DMs. A customizable card area where you could place whatever widgets mattered to you.

And the editing interface for customizing your dashboard:

An "Add New Card" dialog listing available widgets: unread messages, favorite friends, list of friends, unread mentions, message stats, server channel mini chat, with a live preview on the right. The idea was that your home screen would be yours to arrange.

What I learned from the design phase

This entire era, January through April 2023, was trial and error. The login revamps taught me that personality matters more than polish. The profile designs taught me how hard it is to show the right information at the right time.

None of this code shipped in its original form. The sketches were aspirational, the mockups were conceptual, and the design system was a target to aim at rather than a spec to implement. But every one of these designs shaped what Gryt would eventually become.

Looking at the full design mockup that emerged from this phase, you can see how far the vision had come:

A complete server experience: sidebar with channel categories (Pins, General Chats, Community), a rich chat feed with messages in multiple languages, embedded images, emoji reactions, link previews, a members list with role-based colouring, and voice channels showing connected users. That mockup is what the build aimed at for the next year.

---

The design work of 2023 was foundational but the codebase still wasn't there. It took another year before I sat down to turn these designs into a working product. Read about that in From Concept to Reality.