Developer Tips: Branding Your App

How to give your app a unique but native look

With 75+ native GTK3 apps, AppCenter continues to fill out with quality experiences from several dozen developers. Many have begun to build their own brand around their apps or developer account, which is awesome! Today I’m going to teach you how you can use the elementary stylesheet and other platform conventions to strengthen your own app’s brand and design.

Use Style Classes

The quickest way to tune your app’s look is to use the built-in style classes from the elementary Stylesheet. There are tons of these for different uses, like back buttons, typography, flat headerbars, etc.

Constants for Granite and Gtk style classes are available on Valadoc, but here are some of my favorite and most useful ones:

• .back for back buttons, like in System Settings and AppCenter
• .h1–.h4 for heading text labels
• .flat, useful for flat-styled windows or headerbars
• .default-decoration for slim headerbars, like in Terminal
• .rounded for rounded bottom corners on windows, like Dippi or Harvey

If a style constant exists, it’s always recommended to use it instead of setting a class manually. This ensures you’ll get warnings if the constant is ever deprecated, superseded, or removed. Assuming your app is in Vala (which we recommend for AppCenter, but isn’t required!), you’d add a style constant like:

your_widget.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);

Or if there’s not a built-in style constant, just set a class with:

your_widget.get_style_context ().add_class ("rounded");

You can read more at Valadoc, or check them out in action in Granite Demo. Other languages should be similar; look for adding a class to the Gtk style context.

Style classes work just like you’d expect with CSS: if you ship a custom stylesheet, you can add custom styling for any built-in classes, or even add your own. Combining these with specific colors in your app can go a long way to making it stand out from the crowd while feeling completely native and at home on elementary OS.

Set Brand Colors

An easy but striking change you can make to your app is using brand colors. The elementary stylesheet uses a number of variables to style the UI, including the headerbar and accent colors throughout your app. By default, headerbars are neutral and the accent color is elementary blue. But you can use this to set the tone for your own brand.

Snaptastic uses a bright orange headerbar.

To style a headerbar, set the @colorPrimary, @textColorPrimary, and @textColorPrimaryShadow variables in your custom CSS. You can see the variables in the elementary Stylesheet on GitHub.

For the accent color, just set @colorAccent and it will get picked up by focus outlines, text selection, etc. You can see an example of setting this in Dippi for a subtle purple accent.

Notice the subtle purple outline on the Diagonal Size entry

You can also use CSS to set or change other colors in your UI, like the subtitle in the Snaptastic screenshot from earlier. Don’t get too carried away, but a nice touch of accent color can look great.

GResource Icons

Sometimes you might want to ship an icon that’s not in the stock elementary set, or you want to recolor an icon to better match your app. Instead of installing these icons to the entire system, it’s best practice to use GResource.

This entails creating a simple resource XML file, loading the resource as a fallback icon set in your app, and telling your build system to build it with your app. Check out an example gresource.xml from Dippi, along with setting it as the fallback icon theme in Vala. For an example of compiling the resources with a build system, check the meson.build file.

Different languages and build systems will obviously differ, but documentation and/or examples shouldn’t be too hard to come by. The GNOME developer docs are a good place to start.

Typography

Using the aforementioned .h1–.h4 Gtk style classes for headings is one of the fastest ways to add some rich typography to your app and is a great place to start. These classes ensure you’re not hardcoding an exact style, but are marking the importance of a heading and letting the system stylesheet take over with setting the exact typeface, size, and weight.

You can also directly set a font weight and color in your UI with CSS, as you’d expect. For color, keep in mind WCAG contrast guidelines (you can use Harvey on AppCenter to check!).

You can also set a font size in CSS, but don’t use px units: users might set a larger or smaller text size than default for accessibility reasons. It’s always a good idea to test with accessibility settings, and using pt or em units ensures your font will scale to match the user’s settings. Head to System Settings → Universal Access → Display to try out different text sizes.

Dictionary app Palaura uses a Serif font to display definitions

One less-explored area of unique branding is using a custom font in your app’s “chrome” or UI. Snaptastic again uses this, but there are some things to keep in mind:

1. Use a pre-installed font, or depend on a font if it’s in the OS repos. You need to make sure the font will show up on users’ systems, not just when it’s installed on yours! Check Snaptastic’s source code for an example of depending on a font.
2. Consider localization. Not every font supports every language and special characters, so your app might look weird when translated. Pick a font with wide character coverage, and try your app out with a few different languages to see how it’s going to look.
3. Avoid custom fonts for content. The screenshot tool in elementary OS has a “conceal text” feature that temporarily replaces the system font with a scribbly “redacted” font. This won’t work anywhere you set a custom font, so be careful when dealing with user content and any potentially sensitive information.

Using these tips, you can help your app stand out by bolstering its brand and design. Remember, design isn’t always about adding to your app, though! Use these methods with reservation and purpose. Not every app needs to be super custom branded, and small touches go a long way.

Thanks again to all the developers making apps for AppCenter, everyone who has bought an app on AppCenter, our supporters on Bountysource and Patreon, and those who’ve purchased a copy of elementary OS or merch from our store. Every contribution helps make all of this possible, and we wouldn’t be here without you! If you’d like to help improve elementary OS, don’t hesitate to Get Involved!