Typography reflects the designed furniture structures that will be sold on the site, for which I bounced ideas around a few type stacks until settling into the one that best delivers the accessible and fashionable appearance I was looking for. For this project I used varying weights of Open Sans, with modified kerning and leading.


Based on this typography, I created a type scale according to a modified Golden Ratio for screen legibility, inspired by Google’s Material Design.


I used REM scaling with a base of 16px for body copy to generate each level in my type hierarchy, adjusting kerning and leading for extremes, and identifying headers, subtitles, body copy, buttons copy, etc.

For this project, I’ve developed a style guide for typography and adaptable type lockups. I created easy-to-use block measurements with the multiplier for quick implementation across design and development teams.

Also shown are mock typographic lockups as they may appear on the site when it’s developed later.


With more time on this project, I would have explored a few variants for native screen sizes, just to make things a little easier for developers and myself.

Corresponding with my ideas about the original logo and brand, I wanted a play on the ITS or International Typographic Style in structure and on De Stijl in color, both staples of Mid-Century design.



This makes color decisions and structure simple, as we’re going with primaries, grids, legibility and usability at the forefront.



Of course, I’ve deviated a little to give the brand its own flavor. But I’ve put together a color palette guide you can see here, including a couple use case examples we’d find on the website.

Here are CTA’s with guidelines for different states, which I loosely modeled on Material Design due to time restraints and the fact that they are truly experts in the field and I trust them as a baseline.



I included a few button states, but if I had more time I would be more accommodating and assess the needs for each of these on more of a case-by-case basis, to be sure I’m delivering components that are making the experience better for users in the end.



Some of the choices I’ve made here include incorporating our color palette as an opportunity to further the brand messaging and allowing for various states like hover and active.



Components reflect the general brand style and they translate that messaging to the web product for a more tactile consumer understanding of and interactions with the brand.

Since the goal of this site is to make stylish furniture more accessible, I did want to design some features for accessibility. This is why I’ve included a voice option in search and I use bold color choices to show available options, as well as helper text to clearly describe what is needed from the user when filling these out. The same goes for other fillable text fields, and I’d expand on these with more time.

Briefly, I’ve laid out guidelines for iconography.



For the sake of time, I have not designed these icons from scratch, but I’ve included some of the more common choices as a jumping-off point to expand upon with the input of a team as this project would move forward in a real-world design process.



These icons are from Google’s Material Design.