TrekBip Style Guide (Part 1: Icons, Colors & Typography)

Tiny Symbols, Big Impact

Icon design for apps differs from general graphic design. On small screens, dozens of icons must each carry meaning while maintaining consistency across the system. Using stock icons from different sources is not an option unless they belong to the same family. Icons must follow the same rules, share a grid, and reflect the app’s character.

Finding ready-made icons that match specific needs is difficult; most available sets only cover generic shapes. In TrekBip, icons were designed at an average size of 15.4 × 15.4 pixels, requiring precise work to remain clear and recognizable at such a small scale.

Building a Voice Through Type

Poppins was chosen for its clean geometry and the voice it gives TrekBip. With only three weights, it balances simplicity and flexibility—light for clarity, bold for emphasis. The typography guides the app's message, allowing images to step back and ensuring consistency across screens.

A consistent typographic system was established, with clear rules for size, weight, and hierarchy. Three weights were enough to cover all functions while maintaining a unified tone, ensuring legibility across various contexts, especially on small screens.

I used the color wheel and Adobe Color, Coolors, and Paletton to select colors and checked contrast with checkers. I fixed the hue and adjusted saturation and lightness to create a gradient from light to dark. For text colors, I prioritized readability by ensuring enough contrast. I applied the palette to the UI and continually checked harmony. Since it was a personal project, I did not create tokens.

App color palette design process

Before starting app development, I created a moodboard and a base palette with four main colors: mint, orange, gray, and white. Mint was the app’s main chromatic color, while orange was reserved for specific uses like emergency alerts or location markers. I first built the mint scale by adjusting brightness and opacity from 5% to 90%, then finalized the hue. Next, I created a gray scale to match the mint tone. After that, I divided black into three levels to improve text readability and hierarchy. Orange was defined last as a special accent, not a main color. The initial palette had 48 colors, which I refined during development by replacing and removing colors, ending with 34.