Introduction
Benefits of a Style Guide
| End Users | Developers | Business Team |
|---|---|---|
| Reduced errors | Maintain control over look and feel | Produce usable systems that reduce dev costs and increase user satisfaction |
| Less frustration | Minimize re-invention | Increase market awareness |
| Increased morale | Capitalize on learning | Increase product awareness |
| Improved efficiency | Enable production of reusable software | Reduce training costs |
| Increased confidence | Reduce development time | Improve staff retention |
| Reduced resistance to new technology | Reduce arbitrary design decisions | Increase user acceptance of new systems |
Basic design principles
As a developer/business owner you may occasionally have to solve design problems. The following principles are relevant to the presentation of content and the user's experience :
- Start with typography, make headings big
- Use generous white space
- Make the layout clear
- Keep it simple
Free alternatives to Paint
Pixlr Cloud – Pixlr is like a free, online version of Photoshop. Pixlr for Windows Pixlr for MacKelisto editorial guidelines
Writting conventions in Kelisto : Kelisto editorial guidelinesLogos / Collaterals
Spot + tagline
Flat + tagline
Header
Background SVG grey patterns
Tagline only
Campaigns
Megaphone
Tagline
Megaphone + tagline
Tv ad
Zebra bailarina
Sticker -60%
Zebra bailarina + Sticker -60%
Gracioso tablet
The golden pant dancer
Tiny zebra and golden pant dancer
Promotion
Banners and illustrations
Palette for illustrations
Responsive notifications for new content or feature
Alternative to banners.
Click on the button to show the notification:
Colors
Primary Colors
Main
#864587
$main
Main dark
#6d326e
$main_dark
Light grey
#f8f9fa
$light_grey
White
#ffffff
$white
Secondary Colors
Yellow
#fccd44
$yellow
Blue
#009de0
$blue
Text
#5b4e60
$text
Orange
#f97e3b
$orange
Green
#6bc867
$green
Red campaigns
#C8132E
$redcampaign
Highlight/Discount
#dd377f
$discount
Texts
Text
#5b4e60
$text
Grey Text
#ccccc8
$grey_text
Social
#41b7d8
#3b5997
Google +
#d64937
$googleplus
RSS
#e0812a
$rss
Combinations
Products
Dominant
Main saturated - #864587 - $main
White - #ffffff - $white
Blue - #009de0 - $blue
Green - #6bc867 - $green
Yellow - #fccd44 - $yellow
Light grey - #f8f9fa - $light_grey
Context : products.
Details : corporate purple, blue as a trust/highlight secondary color, green for call-to-action buttons, specs text contrasts : yellow on blue/purple.
Combined with SVG white pattern background on most pages
Dominant Main saturated - #864587 - $main
White - #ffffff - $white
Blue - #009de0 - $blue
Green - #6bc867 - $green
Yellow - #fccd44 - $yellow
Light grey - #f8f9fa - $light_grey
Context : products.
Details : corporate purple, blue as a trust/highlight secondary color, green for call-to-action buttons, specs text contrasts : yellow on blue/purple.
Combined with SVG white pattern background on most pages
User info - help
Dominant
Blue - #009de0 - $blue
White - #ffffff - $white
Green - #6bc867 - $green
Light grey - #f8f9fa - $light_grey
Context : help - user info.
Details : blue as a trust/highlight color for headers/buttons, white for backgrounds, grey and black for text, if necessary green call-to-action buttons.
Dominant Blue - #009de0 - $blue
White - #ffffff - $white
Green - #6bc867 - $green
Light grey - #f8f9fa - $light_grey
Context : help - user info.
Details : blue as a trust/highlight color for headers/buttons, white for backgrounds, grey and black for text, if necessary green call-to-action buttons.
Foros - Concursos
Dominant
Yellow - #fccd44 - $yellow
Main saturated - #864587 - $main
Blue - #009de0- $blue
Light grey - #f8f9fa - $light_grey
White - #ffffff - $white
Context : foros - concursos.
Details : dominant yellow, purple as a corporate secondary color.
Dominant Yellow - #fccd44 - $yellow
Main saturated - #864587 - $main
Blue - #009de0- $blue
Light grey - #f8f9fa - $light_grey
White - #ffffff - $white
Context : foros - concursos.
Details : dominant yellow, purple as a corporate secondary color.
Campaigns
Specific campaign dominant
Campaign dominant* - #a8c5d7 - n/a
Category dominant
Red campaigns - #C8132E - $redcampaign
White - #ffffff - $white
Light grey - #f8f9fa - $light_grey
Context : campaigns.
Details : *a dominant-saturated colors is selected for every specific campaing page (adapted to the illustration) - the color displayed here is the cash-machine blue campaign (see here ). The red-campaign color must be displayed across all campaign-related pages
Specific campaign dominant Campaign dominant* - #a8c5d7 - n/a
Category dominant Red campaigns - #C8132E - $redcampaign
White - #ffffff - $white
Light grey - #f8f9fa - $light_grey
Context : campaigns.
Details : *a dominant-saturated colors is selected for every specific campaing page (adapted to the illustration) - the color displayed here is the cash-machine blue campaign (see here ). The red-campaign color must be displayed across all campaign-related pages
Background and borders
Background color
Dark border
#ccccc8
$dark_border
border:solid 1px $dark_border
Light border
#e5e5e1
$light_border
border:solid 1px $light_border
Context/button colors
CTA comparators - success action
#6bc867
$green
User info - help
#009de0
$blue
Foro - Concursos
#fccd44
$yellow
Red error
#ea5958
$red_light
Palette for illustrations
Typography
Current fonts
<link> href='http://fonts.googleapis.com/css?family=Raleway:700|Open+Sans:400,700' rel='stylesheet' type='text/css'>
Titles
Hi there I'm a Raleway headline
font-family: 'Raleway', sans-serif;
font-weight:700;
Download Raleway font
Style : Bold
Body text
Body/Main text is Open-Sans
font-family: 'Open Sans', sans-serif;
font-weight:400;
Download Open Sans font
Style : Regular
Aditional font
<link> href='http://fonts.googleapis.com/css?family=Raleway:700|Open+Sans:400,700' rel='stylesheet' type='text/css'>
font-family: 'Raleway', sans-serif;
font-weight:700;
font-family: 'Open Sans', sans-serif;
font-weight:400;
The tagline font and tv ads font. For aditional info purpose only and/or consurso stuff. Not available for web.
Download MV Boli fontIcons
Icon Fonts
Why Icon Fonts?
- Changing the size of your icons is as easy as changing the font size.
- Because you can easily change the color. The Web is optimized for displaying text.
- Because you can easily shadow their shape
- Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs.
- Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever.
- Vector: Font icons are vector and resolution independent. They look good on both high and low PPI displays, on both mobile and desktop devices.
- Accessible: When done right, icon fonts are 100% accessible and compatible with screen readers.
FYI : How it works
- Icons are previously designed as vectors, then uploaded to icomoon (online font-icons generator)
- _font-icons.scss file embeds the icon font via @font-face, and has a unique class for each icon, telling it which character in the font to use. This is also where unique styling can be added to each icon.
- font-icons are hosted in assets/fonts/font-icons. These files and the css must be updated in each project when an icon is added/removed.
Using an Icon Font
How To Use To Enhance a Word
Megaphone Icon
%h5
%span.icon-megaphone
Megaphone Icon
How To Use for Stand Alone Icons
%i.icon-megaphone
You can place icons just about anywhere using the CSS Prefix icon- and the icon's
name. Font Icons are designed to be used with inline elements (we like the %i tag for
brevity, but using a %span is more semantically correct).
Can't use span or i tag?
This works beautifully in most cases but what if you don't want to inject%i/%span or simply can't? If you run into this case, you can still use font icons. All you need to do is use the :before pseudo-element of the element you want to use and set its content and font-family:
div.github:before {
content: "\f09b"; (see _font-icons.scss for specific icon content)
font-family: general;
}Kelisto Icon Fonts - have fun
Buttons
PSD - PNG
Haml - CSS
(soon)Forms
Checkboxes
Haml
%label{for: "subscriber_accept_terms"}
= check_box :subscriber, :accept_terms
%span
Confirmo que he leído y acepto la
= link_to "política de privacidad", "#{kelisto_root_url}politica-de-privacidad"
Scss
input[type="radio"], input[type="checkbox"] {
-webkit-appearance: none;
position: relative;
border-radius: 3em;
display: inline-block;
vertical-align: middle;
margin: -0.3em 0.25em 0 0;
padding: 0;
width: 1.3em;
height: 1.3em;
background: white;
border-radius: 50%;
font-size: 0.9em;
cursor: pointer;
box-shadow: inset 0 1px 1px #999999;
-webkit-transition: box-shadow 200ms, border-color 200ms, background 300ms;
-moz-transition: box-shadow 200ms, border-color 200ms, background 300ms;
transition: box-shadow 200ms, border-color 200ms, background 300ms;
&:focus {
outline: none;
}
&:hover{
border:solid 2px $blue;
}
&:checked{
background: $blue;
box-shadow: inset 0 1px 3px #666666, inset 0 0 0 0.4em white;
}
&:checked:hover{
box-shadow: inset 0 1px 0px $blue, inset 0 0 0 0.3em white, 0 0 1px 3px $blue;
border:solid 1px $blue;
}
&:checked:active{
background: $blue;
border:solid 1px $blue;
box-shadow:none;
}
}
Mediaqueries
We start designing common style and then we add the mediaqueries
.main-content{
//Mobile first style!
width: 100%;
position: relative;
//2nd add changes to all devices bigger than "mobile-landscape"
@include mobile-landscape-and-up{
width:90%;
}
@include tablet-landscape-and-up{
width:50%;
}
//Now define .main-content's children
.news{
}
.call-to-action{
}
}
Please check the Front-end-guide for good practices
Available mediaqueries
@mixin mobile-portrait-and-up {
// content here
}
@mixin mobile-landscape-and-up {
// content here
}
@mixin tablet-portrait-and-up {
// content here
}
// Everything larger than portrait tablet
@mixin tablet-landscape-and-up {
// content here
}
// Everything larger than a landscape tablet
@mixin desktop-and-up {
// content here
}
Please check the Front-end-guide for good practices