Emoji Hub UI

The Concept

Emoji Hub is a playful space for creating and collecting expressive, AI-generated emoji stickers. The idea is simple - pick a theme, generate custom stickers that match it, arrange them into a pack, and share that pack with friends. Whether it’s Fall Vibes, Cozy Christmas, or a completely personal aesthetic, users can build their own visual language and use it across conversations.

The app is designed for people who treat self-expression as a creative outlet, users who curate Pinterest boards, customize cases, or decorate their home screens for every season. Emoji Hub gives them a lightweight, joyful way to extend that creativity into messaging, with the flexibility to add an entire pack to the keyboard or just a single sticker they love.

From the beginning, the goal was to build a UI that feels warm and personal without ever competing with the content. Since the stickers are the main characters, the interface had to support them quietly through soft gradients, unobtrusive surfaces, and fluid motion that makes the app feel alive while staying out of the spotlight.

A key constraint guided the entire design: the UI must adapt to the user’s personality without overpowering their creations. This meant crafting a visual system that is expressive yet understated, and a layout that scales from a single empty pack to a full grid of stickers.

Emoji Hub became an opportunity to explore how far SwiftUI could be pushed to achieve this balance, leveraging custom backgrounds, blur effects, subtle animation, and responsive layouts to create an interface that feels handcrafted, friendly, and unmistakably personal.

The Experience

Emoji Hub is built around a simple flow that lets users browse, create, and use their sticker packs without friction. Every screen is designed to feel light, expressive, and supportive of the content rather than competing with it.

Browsing Packs

The app opens with a list of sticker packs displayed on a soft, customizable background. Each pack preview shows a small selection of stickers inside it and communicates the most essential information at a glance. Users immediately see the pack name and sticker count, making it easy to recognize themes and jump into the one they want.

Tapping any pack brings the user to a full view of all the stickers it contains. From here, they can add the entire pack to their keyboard or share it with a single tap. The main action button in this view follows the same custom style introduced on the home screen. It sits on top of a variable blur that gives it the right amount of contrast while keeping the interface airy and unobtrusive.

Users can also tap any individual sticker to enlarge it. This miniature detail screen allows them to add that single sticker to the keyboard or share it, providing flexibility for users who want only one emoji from a pack rather than the full set.

Adding a new pack

At the bottom of the home screen is a custom Add Pack button layered over a variable blur (thanks, Andrew!). This treatment helps the button anchor the screen visually without overpowering the content. The blur intensity changes subtly depending on what is behind it, giving the button enough contrast to be clearly visible while still blending harmoniously with the interface.

When the user taps Add Pack, they are taken into a lightweight creation flow. They can choose a name for the pack and begin generating custom emojis powered by AI. This flow focuses entirely on creativity and keeps distractions to a minimum.

Personalization and Settings

Settings allows users to choose from a set of gentle gradients that define the overall tone of the app. Since Emoji Hub is built around self-expression, it is important that users feel a sense of ownership. At the same time, the gradients are intentionally subtle and carefully selected so that they do not interfere with the visuals of the stickers. This balance has been the guiding principle for the entire project.

Upgrade Call to Action

The settings screen includes an upgrade call to action that invites users to explore the premium plan in a friendly, unobtrusive way. The button follows the same visual language as the rest of the interface, which helps it feel like a natural part of the app rather than an interruption. It stands out enough to be noticed when a user is ready to explore more, yet its placement, color, and typography are intentionally restrained so it never pulls attention away from the stickers or disrupts the calm tone of the UI.

Breaking down the UI

To understand how Emoji Hub delivers its intended experience, it helps to look at the core UI components individually. Each piece was designed with a clear purpose and built with SwiftUI techniques that keep the interface playful, personal, and unobtrusive.

The Background System

The app offers five gradients that users can select to match their personality and mood. These include the default warm gradient, a cool blue gradient, a soft brown, a fresh green, and a clean cold gray. Each option adjusts the emotional tone of the interface without interfering with the content.

These gradients were created using SwiftUI’s LinearGradient and RadialGradient. The shapes, angles, and color stops were tuned carefully to produce gentle transitions rather than harsh shifts. On top of the gradient, a transparent black layer is applied using the opacity modifier. This slight darkening step increases contrast so the stickers, buttons, and especially the white typography remain readable regardless of the gradient underneath.

The result is a background system that feels personal and expressive while still maintaining clarity.

Pack List Item Card

The list item for each sticker pack is built as a lightweight card. The card’s surface was crafted by experimenting with different red, green, blue, and opacity values using the Color struct in SwiftUI. The goal was to find a tone that allows the background to subtly seep through, which gives the card a sense of depth without making it visually heavy.

This card structure integrates seamlessly into SwiftUI’s List, while still standing out as a custom component. The transparency keeps the content as the center of attention. The pack name, preview emojis, and sticker count sit on top with clear hierarchy, making the card both functional and visually quiet.

Custom Buttons

Emoji Hub uses a mix of system buttons and custom components that were tailored to the app’s aesthetic and functionality. The most important ones are the action buttons that help users create packs and manage keyboard integration.

a. The Add Button - The Add button is designed to sit over content on a variable blur. The intention is for the button to feel light, airy, and fully integrated into the flow of the app. It should stand out enough to be discoverable, but not so much that it distracts from the stickers. This effect was achieved using the .ultraThinMaterial ShapeStyle along with a streamlined SFSymbol and a set of supporting SwiftUI modifiers. The blur adapts to whatever is behind it, which helps the button feel alive while maintaining the overall softness of the UI. This button is used for the most important actions, such as adding a new pack or adding stickers to the keyboard.

b. The Upgrade to Pro Button - The Upgrade button is designed to be inviting without being intrusive. It features a simple white background that keeps it aligned with the rest of the interface. The text uses a LinearGradient fill, which gives it a subtle visual character and a premium feel. The gradient text adds curiosity and draws the eye lightly without overwhelming the settings page.

Background Swatches

For the background selection screen, each gradient option is presented as a swatch. This mirrors the real-world metaphor of choosing a color from a palette and makes the selection process intuitive.

Technically, the swatches are built using SwiftUI shapes with .fill and .stroke modifiers, along with supporting effects that highlight selection state. This keeps the component simple while making it consistent with the rest of the interface. Users can tap a swatch to immediately apply a new background, reinforcing the sense of personalization that the app aims to deliver.

Typography

Emoji Hub uses the SF Pro Rounded typeface throughout the interface. This choice softens the overall tone of the app and gives it a playful, friendly personality. The rounded forms help the UI feel approachable and match the expressive nature of the stickers themselves.

All typography uses a white .foregroundStyle, which keeps text clean and readable against the gradient backgrounds and semi-transparent surfaces. Combined with the darkened overlay applied to the gradients, the white text maintains high contrast without ever feeling harsh. The result is a type system that supports clarity while reinforcing the lighthearted mood of the app.

Try it yourself

You can explore this project yourself by running it directly from the source.

View the project on GitHub

Since the purpose of this project is to focus on the UI and interaction design rather than shipping a complete production app, some features may be simplified or unavailable in this build.