WEB STYLEGUIDE: What We Ask Designers to Spec for Web Design / Kitchen Sink

• Blake Imeson
• 3 years ago
• Categories: Design
• Tags: colors, css, headings, kitchen sink, styles, typography

At LimeCuda we are often handed web designs by graphic designers or marketing / branding agencies. We then implement these design specs into a fully-functioning website. We love working this way. It is even better for everyone if they hand us all the specifications up front for us to implement.

What follows is our attempt to describe what we need specified. We often call this the “kitchen sink” – which comes from the old idiom “everything but the kitchen sink“. In this case we want everything (the sink) specified. Colors, sizes, padding, effects. The more precise, the better chance we nail the vision first try.

The following gives a great starting point for the global styles that effect all pages on a website.

Colors

Specify all the brand colors you’ll want to utilize. Ideally as hex codes but we can convert.
These might be colors for:

• Text
• Backgrounds
• Buttons / links / CTAs
• Borders / lines
• Inputs / Form elements

There may be shadings in between the colors too. Sometimes there is a “brand-blue” and a “light blue” and there could be shadings in-between.

Typography

We need to know…

• • Font Families. As best practice we usually specify a font-stack as well so if the first one isn’t able to be used, the design degrades gracefully.
    font-family "Helvetica Neue", Helvetica, Arial, sans-serif
  • Font Size – best specified in px as the perceived size varies by font-family
  • Colors – in hex preferably.
  • Misc: any special rules for:
    • Case (upper / lower)
    • Letter-spacing (AKA kerning)
    • Line-height

To provide treatments for…

Headings, body copy, links, bold, italics, quotes pull quotes, highlighting of text

Buttons

Usually this is as simple as a solid-color-filled primary button and a more subtle button with just an outline (often called a ghost button)

Typically we create small, medium, and large button styles in both primary and secondary (like below)

Forms

This is probably the most challenging piece to design as there are so many variables. It can be helpful to start with a system where someone has already done the hard work of determining all the attributes.

• Text fields, dropwdowns, radio buttons, checkboxes, multi-selects, sliders, error messages, required fields, etc.

Lists

• Unordered lists (bulleted lists)
• Possibly checkmark lists

Spacing and Gutters

Our default tends to treat the spacing between elements in 20s. So we start with 20px padding for instance and then if more is required in a section it would go 40px, 60px, etc. This rule for stairstepping helps the site stay consistent as you move between pages.

 

Real World Example

Here is the start of a small example of a style spec that would be very easy for us to understand and turn into global web styles…

Body text is:

• color: #666666;
• font-size: 20px;
• font-family “Droid Sans”, sans-serif
• line-height: 1.2em

Headings are:

• color: #333333;
• font-size: 13px for the H6 and stairstepping up (golden ratio) 16 (h5),  20 (H4), 26 (H3), 33 (H2), 42px (H1)
• font-family “Helvetica Neue”, Helvetica, Arial, sans-serif
• line-height: 1.2em
• font-weight: 700;
• margin: 80px 0 10px;

Good screenshots that accompany something like the above serve as great double confirmation for us.