Style Guide
During my time at Uguru, I worked closely with Jeselle to unify Uguru’s branding, color palette, animation patterns, and other styles used on the website and in the app. We needed to define a visual language that would inform the rest of the design.
Color Palette
There are two main types of Uguru users - the tutor or guru who offers services and the student who requests services. We decided to visually distinguish them by color scheme. The guru-side website has a dark color scheme with a slate grey and Uguru’s signature green; the student website has a light grey and bright blue color scheme.
We also had eight different category-specific accent colors. Five of these are currently available within the app - Academic, Baking, Photography, Tech, and Household. I decided on a pattern for elements with events, such as buttons - the default state is the accent color, the hover state is the accent mixed with white, and the click state is the accent mixed with slate grey. This gives a slight feeling of physically pushing down on the button, even though most of our elements were flat with no shadows or gradients.
Typography
We decided on Source Sans Pro as our default font for Uguru. Its specific purpose for user interface, legibility at many sizes, and multitude of font weights made it ideal for our projects. I generally used semibold and black caps for headers and buttons, while body text remained at the regular weight. We even used a custom rounded version for the Uguru logo text.
-
Glyphs
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz -
Weights
Extralight Light Regular Semibold Bold Black -
Sample
'Well, perhaps not,' said Alice in a soothing tone: 'don’t be angry about it. And yet I wish I could show you our cat Dinah: I think you’d take a fancy to cats if you could only see her. She is such a dear quiet thing,' Alice went on, half to herself, as she swam lazily about in the pool, 'and she sits purring so nicely by the fire, licking her paws and washing her face—and she is such a nice soft thing to nurse—and she’s such a capital one for catching mice—oh, I beg your pardon!' cried Alice again, for this time the Mouse was bristling all over, and she felt certain it must be really offended. 'We won’t talk about her any more if you’d rather not.'
Iconography
Our iconset was comprised of clean line icons with an emphasis on rounded corners and softened edges. Jeselle and I built the core of the set and added to it as needed.
Spacing, Gutters, and Grids
Early on, we started to use a 15px gutter for all of our content. While it wasn’t the easiest to maintain, it did provide the perfect amount of space for our grids and margins.
Animation
As we started adding transitions and custom animations to our components, I began to devise a set of patterns to use across different elements. For instance, we would use ease-out style animations on enter and ease-in on exit. This provided a smooth, natural-feeling movement. I also utilized my knowledge of character animation to define certain motions, like always "anticipating" movement by drawing back in the opposite direction. In addition, we used 3d transforms to visually lift components from the background and create a sense of depth and hierarchy.