I built a style guide that gives a work management app seven core colors, seven text styles, and five breakpoints.
In 2017, a work management software company was redesigning its app, and its design files held 34 unnamed colors and 17 text styles. I built a style guide in Sketch with a named palette, one typeface, five breakpoint grids, and reusable buttons, fields, and cards, and I redlined new components so engineers could build them to the pixel.
Client
A work management software company
I changed names and details to respect my nondisclosure agreements.
My role
Product design manager
Focus
Style guide, color and type tokens, and component specs
Result
Seven core colors and seven text styles in one typeface
The redesign files held 34 colors and 17 text styles, and none of the colors had a name.
In 2017, the company was redesigning its home screen and moving flows such as the template gallery and the pricing page into full-screen views. As product design manager, I led product design for the revenue team, and every one of those views needed the same buttons, fields, colors, and type.
The Styles page of the home redesign file held 34 color swatches, and each swatch carried the placeholder label Color name. The text styles showed the same drift: 17 styles across three typefaces, five font sizes, and seven line heights, from a 7 pixel badge number to an 18 pixel workspace title.
A color without a name gives a designer nothing to point to in a review and gives an engineer nothing to call it in code. A kit with fewer, named parts fixes both problems at once.
I built the guide in six pages, from the grid down to the smallest reusable part.
The Sketch file opens with the grid and ends with symbols, so each page builds on the page before it. Click or tap a card to turn it over.
I redlined new components, so engineers could build them without guessing a measurement.
For the profile prompt, the redlines set the card at 510 by 444 pixels, the first and last name fields at 140 and 160 pixels, and the job category field at 450 pixels. Text boxes are 26 pixels tall with the border drawn on the inside, so a field never grows when it gets focus.
The upgrade tips follow the same kit. The redlines call for an 18 pixel heading, 13 pixel body text, 20 pixels of padding, and 10 pixels between elements.
- 30 pixels separate major sections of a card.
- 20 pixels pad the inside of a card or tip.
- 10 pixels separate related elements, such as a heading and its text.
- 5 pixels separate a label from its field.
Browse the kit, check the contrast, and turn on the redlines.
This prototype rebuilds the 2017 style guide as an interactive kit in the current Haven Works look, with Inter in place of Open Sans. The structure, the breakpoints, the type roles, and the spacing steps come from the original files.
Things to try
- Choose Palette and select a swatch to see its contrast with white and with ink text.
- Switch the secondary symbol to a new color, the way the original Sketch symbol worked.
- Choose Grid and step through the five breakpoints with the columns shown or hidden.
- Choose Actions and set the buttons to rest, hover, focus, or disabled.
- Choose Cards and turn on redlines to see the spacing steps on the profile prompt.
The rebuilt kit keeps the 2017 structure and wears the current Haven Works look.
The groups and roles match the original guide. The colors and the typeface are my current Haven Works interpretation, so no real brand asset appears on this page.
Color
- Haven navy
#0F1E3DCorporate color for the app bar, the navigation rail, and dark headers - Action blue
#0068D9Corporate color for primary buttons, links, and focus rings - Ink
#141A26Gray 1 for headings and body text - Slate
#5A6378Gray 2 for captions, labels, and icons - Steel
#677086Gray 3 for inactive text, which still passes contrast on white - Line
#DDE2EAGray 4 for borders, dividers, and field outlines - Canvas
#F5F7FAGray 5 for the page behind cards and panels - Done green
#0E7A55Secondary symbol, shown here in its default color
Type
H1
Find the right template
Inter
H2
Project management
Inter
Body and Body Bold
Track tasks, owners, and due dates in one place.
Inter
Caption
Updated 4 hours ago
Inter
Components
Header symbol
One header per breakpoint carries the wordmark, the page title, and a close button, so every full-screen view opens the same way.
Search field
A single search field with the icon inside the box serves the template gallery and every other list that needs a filter.
Primary and secondary buttons
Paired buttons share one width, with the secondary on the left and the primary on the right, so the main action always sits in the same place.
Secondary on dark
An outlined button for dark headers and panels keeps the secondary action readable without a second color.
More chip
A compact chip such as +1 more stands in for overflow, so a list of names or tags never breaks a row.
Prompt card
A card with a heading, fields, and a button pair follows the 30, 20, 10, and 5 pixel spacing steps.
Principles
- I give every color a name and a job before it goes into a screen.
- I keep one typeface and let weight and size carry the hierarchy.
- I build each part once as a symbol, so a fix in one place reaches every screen.
- I hand engineers redlines with real measurements instead of a picture to match.
7
core colors with names, compared with 34 unnamed swatches
7
text styles in one typeface, compared with 17 styles in three
5
breakpoints, from a 360 pixel phone to a 1600 pixel desktop
The redesign got one named kit in place of 34 loose colors and 17 text styles.
The figures compare the home redesign file's Styles page with the style guide dated April 2017. Click or tap a card to turn it over.
There is plenty more where this came from.
Names, brands, and data in my case studies are changed to protect my clients.
Tell me about your project.
Tell me a little about it on my contact form, and a real person will get back to you soon.