Palette for TypographyKit

Ross Butler
Jun 27, 2018 · 2 min read

One of the features of TypographyKit is the ability to define a color palette for an app thus helping to ensure visual consistency throughout. Rather than ending up with varying shades of the same color across different screens of an app, TypographyKit can help developers ensure that it is in fact the exact same color used across each screen.

Colors are defined in TypographyKit as part of either a TypographyKit.json or TypographyKit.plist file under the typography-colors key and may be specified using rgb values or hexadecimal e.g.

<string>rgb(44, 14, 140)</string>

The TypographyKit json or plist may either be bundled with your app or hosted remotely.

Having been defined, an extension on UIColor provides the easiest means of accessing the colors defined in your configuration:

extension UIColor {
static let blueGem: UIColor = TypographyKit.colors["blueGem"]!

This provides a programmatic means of accessing your colors defined in TypographyKit as easily as any other UIColor but what about when you want to make use of the same color palette in Xcode’s Interface Builder?

Palette is a tool which has been built for TypographyKit to consume the json or plist configuration file and generate a color palette which can be used within Interface Builder. Simply run the tool as follows providing the name of the color palette as you wish it to appear in Interface Builder and the path to the local configuration file or URL to the remotely-hosted configuration file:

palette —-color-list <color palette name> —-config-url <url>


palette —-color-list Custom --config-url TypographyKit.json

or for a remotely-hosted file:

palette —-color-list Custom --config-url
Image for post
Image for post
TypographyKit-generated color palette available for use in Interface Builder

Et voilá! All of the colors defined in your TypographyKit configuration file are now available for use in Xcode’s Interface Builder! 🎉

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store