Style Guide for Projects
[tatsu_section bg_color= “” bg_image= “” bg_repeat= “no-repeat” bg_attachment= ‘{“d”:”scroll”}’ bg_position= ‘{“d”:”top left”}’ bg_size= ‘{“d”:”cover”}’ bg_animation= “none” padding= ‘{“d”:”20px 0px 0px 0px”}’ margin= ‘{“d”:”0px 0px 0px 0px”}’ bg_video_mp4_src= “” bg_video_ogg_src= “” bg_video_webm_src= “” overlay_color= “” overlay_blend_mode= “none” section_height_type= “auto” custom_height= ‘{“d”:””}’ vertical_align= “center” top_divider= “none” top_divider_zindex= “9999” bottom_divider_zindex= “9999” bottom_divider= “none” top_divider_height= ‘{“d”:”100″}’ top_divider_position= “above” bottom_divider_height= ‘{“d”:”100″}’ bottom_divider_position= “below” top_divider_color= “#ffffff” bottom_divider_color= “#ffffff” invert_top_divider= “0” invert_bottom_divider= “0” flip_top_divider= “0” flip_bottom_divider= “0” section_id= “” section_class= “” section_title= “” offset_value= “” full_screen_header_scheme= “background–dark” overflow= “” z_index= “0” hide_in= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” key= “BkDCu5k-H”][tatsu_row full_width= “0” bg_color= “” border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” no_margin_bottom= “0” equal_height_columns= “0” gutter= “medium” column_spacing= “px” fullscreen_cols= “0” swap_cols= “0” padding= ‘{“d”:”0px 0px 0px 0px”}’ margin= ‘{“d”:”0px 0px”}’ row_id= “” row_class= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” border_radius= “0px” hide_in= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” layout= “1/1” key= “Sygv0O5JZS”][tatsu_column bg_color= “” bg_image= “” bg_repeat= “no-repeat” bg_attachment= “scroll” bg_position= ‘{“d”:”top left”}’ bg_size= ‘{“d”:”cover”}’ padding= ‘{“d”:”0px 0px 0px 0px”}’ margin= ‘{“d”:””}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” box_shadow_custom= “0px 0px 0px 0px rgba(0,0,0,0)” bg_video_mp4_src= “” bg_video_ogg_src= “” bg_video_webm_src= “” overlay_color= “” overlay_blend_mode= “none” animate_overlay= “none” link_overlay= “” vertical_align= “none” sticky= “0” offset= ‘{“d”:”0px 0px”}’ column_parallax= “0” column_width= ‘{“d”:100,”l”:100,”t”:100,”m”:100}’ column_mobile_spacing= “0” image_hover_effect= “none” column_hover_effect= “none” hover_box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” overflow= “” col_id= “” column_class= “” top_divider= “none” top_divider_height= ‘{“d”:”100″,”m”:”0″}’ top_divider_color= “#ffffff” flip_top_divider= “0” top_divider_zindex= “9999” bottom_divider= “none” bottom_divider_height= ‘{“d”:”100″,”m”:”0″}’ bottom_divider_color= “#ffffff” flip_bottom_divider= “0” bottom_divider_zindex= “9999” left_divider= “none” left_divider_width= ‘{“d”:”50″,”m”:”0″}’ left_divider_color= “#ffffff” invert_left_divider= “0” left_divider_zindex= “9999” right_divider= “none” right_divider_width= ‘{“d”:”50″,”m”:”0″}’ right_divider_color= “#ffffff” invert_right_divider= “0” right_divider_zindex= “9999” z_index= “0” hide_in= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” layout= “1/1” key= “SJZw0u51WH”][special_heading title_content= “STYLE GUIDE” title_color= “” h_tag= “h3” subtitle_spl_font= “1” disable_separator= “1” separator_style= “0” icon_name= “oshine_diamond” icon_color= ‘{“id”:”palette:0″,”color”:”#000000″}’ separator_color= “#efefef” separator_thickness= “1” separator_width= “40” separator_pos= “0” title_align= “center” hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” padding= ‘{“d”:””}’ margin= ‘{“d”:””}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:””}’ border_color= “” border_radius= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” key= “SJzDR_5y-S”]
Consistent design is a must for a professional website. Having a brand style guide by your side helps inform your design decisions.
[/special_heading][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “ryEGiqyZB”]
[/tatsu_text][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “HkEPROcJ-B”]
This Style Guide PDF has places for you to track all the colors and fonts you are using on your website or any project you are working on. Buttons, Links, and Navigation sections are available for you to sketch or make notes.
[/tatsu_text][oshine_gallery image_source= “selected” ids= “7980,8195,8193” account_name= “” count= “10” columns= “3” lightbox_type= “photoswipe” lazy_load= “1” delay_load= “0” placeholder_color= “” gallery_paginate= “none” items_per_load= “9” two_col_mobile= “0” gutter_style= “style2” gutter_width= “10” masonry= “0” maintain_order= “0” initial_load_style= “scale” item_parallax= “0” hover_style= “style5-hover” hover_content_option= “none” hover_content_color= ‘{“id”:”palette:1″,”color”:”#ffffff”}’ default_image_style= “color” hover_image_style= “color” image_effect= “none” overlay_color= “rgba(255,255,255,0.2)” gradient= “0” gradient_color= “” gradient_direction= “right” like_button= “1” adaptive_image= “0” hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” padding= ‘{“d”:””}’ margin= ‘{“d”:””}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:””}’ border_color= “” border_radius= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” key= “HyQPCO5J-S”][/oshine_gallery][special_heading3 title_content= “” h_tag= “h3” title_color= “rgba(0,0,0,1)” sub_title1= “PDF FILE INCLUDED WITH FREE DOWNLOAD” sub_title2= “” top_caption_color= “rgba(0,0,0,1)” bottom_caption_color= “rgba(255,255,255,1)” top_caption_size= “” bottom_caption_size= “18” top_caption_font= “h6” bottom_caption_font= “special” top_caption_separator_color= “#efefef” bottom_caption_separator_color= “#efefef” hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” padding= ‘{“d”:””}’ margin= ‘{“d”:””}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:””}’ border_color= “” border_radius= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” key= “HkBwCO9yZB”][/special_heading3][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “HkmMPX09S”]
To get access to this free download and many other useful items to help you run and organize your business are available if you sign up for my monthly newsletter. Your information will never be sold.
[/tatsu_text][tatsu_button button_text= “DOWNLOAD HERE” url= “https://crystaldeboer.com/cdbdownloads” new_tab= “0” type= “medium” button_style= “none” alignment= “center” bg_color= ‘{“id”:”palette:0″,”color”:”#008081″}’ hover_bg_color= “” color= ‘{“id”:”palette:1″,”color”:”rgba(190,216,216,1)”}’ hover_color= “” border_width= “0” border_color= “” hover_border_color= “” icon= “” icon_alignment= “left” lightbox= “0” image= “” video_url= “” hover_effect= “none” background_animation= “none” margin= ‘{“d”:””}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” hover_box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ outer_border_color= “” hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” padding= ‘{“d”:””}’ border_radius= “” key= “ByIDCO5yZH”][/tatsu_button][/tatsu_column][/tatsu_row][/tatsu_section][tatsu_section bg_color= “” bg_image= “” bg_repeat= “no-repeat” bg_attachment= ‘{“d”:”scroll”}’ bg_position= ‘{“d”:”top left”}’ bg_size= ‘{“d”:”cover”}’ bg_animation= “none” padding= ‘{“d”:”32px 0px 29px 0px”}’ margin= ‘{“d”:”0px 0px 0px 0px”}’ bg_video_mp4_src= “” bg_video_ogg_src= “” bg_video_webm_src= “” overlay_color= “” overlay_blend_mode= “none” section_height_type= “auto” custom_height= ‘{“d”:””}’ vertical_align= “center” top_divider= “none” top_divider_zindex= “9999” bottom_divider_zindex= “9999” bottom_divider= “none” top_divider_height= ‘{“d”:”100″}’ top_divider_position= “above” bottom_divider_height= ‘{“d”:”100″}’ bottom_divider_position= “below” top_divider_color= “#ffffff” bottom_divider_color= “#ffffff” invert_top_divider= “0” invert_bottom_divider= “0” flip_top_divider= “0” flip_bottom_divider= “0” section_id= “” section_class= “” section_title= “” offset_value= “” full_screen_header_scheme= “background–dark” overflow= “” z_index= “0” hide_in= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” key= “r1bMrQX05r”][tatsu_row full_width= “0” bg_color= “” border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” no_margin_bottom= “0” equal_height_columns= “0” gutter= “medium” column_spacing= “px” fullscreen_cols= “0” swap_cols= “0” padding= ‘{“d”:”0px 0px 0px 0px”}’ margin= ‘{“d”:”0px 0px”}’ row_id= “” row_class= “” box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” border_radius= “0px” hide_in= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” layout= “1/1” key= “rkgGBXQCqH”][tatsu_column bg_color= “” bg_image= “” bg_repeat= “no-repeat” bg_attachment= “scroll” bg_position= ‘{“d”:”top left”}’ bg_size= ‘{“d”:”cover”}’ padding= ‘{“d”:”0px 0px 0px 0px”}’ margin= ‘{“d”:””}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” box_shadow_custom= “0px 0px 0px 0px rgba(0,0,0,0)” bg_video_mp4_src= “” bg_video_ogg_src= “” bg_video_webm_src= “” overlay_color= “” overlay_blend_mode= “none” animate_overlay= “none” link_overlay= “” vertical_align= “none” sticky= “0” offset= ‘{“d”:”0px 0px”}’ column_parallax= “0” column_width= ‘{“d”:100,”l”:100,”t”:100,”m”:100}’ column_mobile_spacing= “0” image_hover_effect= “none” column_hover_effect= “none” hover_box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” overflow= “” col_id= “” column_class= “” top_divider= “none” top_divider_height= ‘{“d”:”100″,”m”:”0″}’ top_divider_color= “#ffffff” flip_top_divider= “0” top_divider_zindex= “9999” bottom_divider= “none” bottom_divider_height= ‘{“d”:”100″,”m”:”0″}’ bottom_divider_color= “#ffffff” flip_bottom_divider= “0” bottom_divider_zindex= “9999” left_divider= “none” left_divider_width= ‘{“d”:”50″,”m”:”0″}’ left_divider_color= “#ffffff” invert_left_divider= “0” left_divider_zindex= “9999” right_divider= “none” right_divider_width= ‘{“d”:”50″,”m”:”0″}’ right_divider_color= “#ffffff” invert_right_divider= “0” right_divider_zindex= “9999” z_index= “0” hide_in= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” layout= “1/1” key= “S1fBQX0cS”][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “ryLrQX05S”]
As a Project Manager and Web Designer, I can tell you that having a style guide document to use for easy reference will save you so much time and frustration for those times you want to make a quick add or edit to your (or a client) web site.
[/tatsu_text][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “B1yc7XA9S”]
This style guide has sections for your colors, fonts, button formatting and any other design elements you want to keep consistent throughout the website.
[/tatsu_text][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “BJ5xNmAcS”]
There are two versions of this worksheet available the free download is a PDF format that you can replicate in photoshop to make for easier editing or there is a PSD file available for purchase making it ready for use as soon as you download.
[/tatsu_text][tatsu_button button_text= “VIEW THE SHOP HERE” url= “/shop” new_tab= “0” type= “x-large” button_style= “none” alignment= “center” bg_color= ‘{“id”:”palette:0″,”color”:”#008081″}’ hover_bg_color= “” color= ‘{“id”:”palette:1″,”color”:”rgba(190,216,216,1)”}’ hover_color= “” border_width= “0” border_color= “” hover_border_color= “” icon= “” icon_alignment= “left” lightbox= “0” image= “” video_url= “” hover_effect= “none” background_animation= “none” margin= ‘{“d”:””}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” hover_box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ outer_border_color= “” hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” padding= ‘{“d”:””}’ border_radius= “” key= “HJTNVmRqB”][/tatsu_button][tatsu_text bg_color= “” color= “” max_width= ‘{“d”:”100″}’ wrap_alignment= “center” text_alignment= ‘{“d”:”left”}’ margin= ‘{“d”:”0px 0px 30px 0px”}’ box_shadow= “0px 0px 0px 0px rgba(0,0,0,0)” padding= ‘{“d”:”0px 0px 0px 0px”}’ border_style= ‘{“d”:”solid”,”l”:”solid”,”t”:”solid”,”m”:”solid”}’ border= ‘{“d”:”0px 0px 0px 0px”}’ border_color= “” border_radius= “0px” text_typography= ‘{“d”:””}’ hide_in= “” css_id= “” css_classes= “” animate= “1” animation_type= “none” animation_delay= “0” animation_duration= “300” key= “ryGKLmAcH”]
Don’t believe me about the importance of Style Guides, get another opinion here.
[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section]