Palette for TypographyKit

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.

<key>typography-colors</key>
<dict>
<key>blueGem</key>
<string>rgb(44, 14, 140)</string>
</dict>

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>

e.g.

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

or for a remotely-hosted file:

palette —-color-list Custom --config-url http://www.mysite.com/TypographyKit.json
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! 🎉