Cityscape

Website Colors

Primary Color

Secondary Color

Tertiary Color

Text Color


Every Page has 1 h1. For h2-h6, there can be many







Paragraph is at least 16px

** Brawn Site - Paragraph Text: : Montserrat + 16PX / 1EM **

a - Linked Text

strong - Bold Text

italic - Italic Text

Primary Button This is a Secondary Button

Display sizes are purely decorative. They should be for heros or call to actions, but SHOULD NOT be used for headers, page titles, or anything important to the content

D1 - Display Heading
D2 - Display Heading
D3 - Display Heading
D4 - Display Heading
D5 - Display Heading
D6 - Display Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros ligula, blandit lobortis ultricies et, tincidunt eu ligula. Curabitur quis ex ante. Fusce lobortis nisi volutpat, finibus massa eu, porta metus. Curabitur aliquet sapien tellus, dignissim laoreet nunc dictum nec. Integer vel sem fringilla nunc ultricies fermentum ut sit amet ligula. Sed at magna nec mi pharetra dignissim a vitae neque. Nulla laoreet aliquet lacus. Cras tristique tempor augue nec mattis. Suspendisse potenti. Sed placerat ex urna, sed efficitur magna placerat et. Nullam eu dignissim turpis. Aliquam consequat commodo finibus.

Nullam et eleifend metus. Maecenas at bibendum lacus. Maecenas maximus lorem at arcu elementum, sed lobortis erat commodo. Proin bibendum, erat quis mollis blandit, nulla eros posuere augue, et porta metus ante vestibulum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque fermentum neque dolor, non laoreet magna venenatis sed. Sed ultricies, libero eget finibus rhoncus, est urna interdum odio, non consequat sapien nibh quis mauris.

Vestibulum et ornare risus, ac scelerisque lorem. Donec in purus bibendum, posuere lectus et, ornare massa. Sed placerat, ligula at euismod tincidunt, elit diam fermentum dolor, ac mattis urna urna a est. Suspendisse elit metus, dignissim vitae auctor eget, faucibus sit amet urna. Praesent cursus nisl nisl. Duis non massa erat. Sed blandit turpis vitae tristique accumsan. Vestibulum ut elit id lacus auctor vulputate nec quis mi. Maecenas tincidunt, odio in sollicitudin accumsan, risus purus sollicitudin purus, et hendrerit est tellus sed dui.

Praesent nunc ipsum, congue non sagittis eleifend, luctus at orci. Vivamus scelerisque est in enim finibus, suscipit volutpat felis luctus. Phasellus blandit aliquet est id dignissim. Proin scelerisque lorem nisl, sed cursus sem tincidunt sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ullamcorper laoreet ipsum et sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam in arcu id tellus accumsan accumsan vitae vestibulum leo. Sed feugiat lacus et lacus fermentum facilisis. Proin consequat felis rhoncus tortor tempus, a cursus arcu luctus. Vestibulum placerat augue scelerisque, ultrices urna gravida, commodo lorem. Maecenas tristique lacinia diam. Ut sit amet justo vel arcu varius rutrum non at nulla. Nam ornare felis porta pharetra volutpat. Phasellus et placerat nunc. Nam non risus eu erat fringilla suscipit.

Sed porttitor blandit ex, in egestas nisi tempus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu ipsum ipsum. In elementum vulputate justo, nec fermentum tellus aliquam eget. Aliquam vel felis ac lacus finibus sagittis. Vivamus nisi nulla, consectetur vitae congue nec, vestibulum a nibh. Suspendisse potenti. Aliquam semper imperdiet enim at posuere. Pellentesque mattis consequat massa in viverra. Nullam suscipit et ex vitae maximus. Morbi dapibus tincidunt dui, at luctus nulla lobortis quis. Suspendisse et dolor eget dui fermentum viverra eget ut justo. Donec diam ligula, sollicitudin ac rhoncus at, posuere ut erat. Nullam tempus, nisl non ultricies luctus, orci quam gravida elit, non aliquam diam massa non diam.

h1 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

This is a Link This is a Primary Button This is a Secondary Button

h2 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

  • This is a List.
  • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  • Maecenas faucibus mollis interdum.
    • Donec sed odio dui.
    • Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

h3 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

  1. Cras mattis consectetur purus sit amet fermentum.
  2. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  4. Maecenas faucibus mollis interdum.
    1. Donec sed odio dui.
    2. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
  5. Maecenas sed diam eget risus varius blandit sit amet non magna.

h4 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

h5 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

h6 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.

[gravityform id="10" title="false" description="false" ajax="true"]
<div class='gf_browser_unknown gform_wrapper gravity-theme' id='gform_wrapper_10' ><div id='gf_10' class='gform_anchor' tabindex='-1'></div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_10' id='gform_10' action='/style-guide/#gf_10' novalidate novalidate="novalidate"> <div class='gform_body gform-body'><div id='gform_fields_10' class='gform_fields top_label form_sublabel_below description_below'><div id="field_10_4" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible" data-js-reload="field_10_4"><label class='gfield_label' for='input_10_4' >Email Address<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class='ginput_container ginput_container_text'><input name='input_4' id='input_10_4' type='text' value='' class='large' placeholder='Email Address *' aria-required="true" aria-invalid="false" /> </div></div><div id="field_10_3" class="gfield gfield--width-three-quarter field_sublabel_below field_description_below hidden_label gfield_visibility_visible" data-js-reload="field_10_3"><label class='gfield_label' for='input_10_3' >Phone</label><div class='ginput_container ginput_container_phone'><input name='input_3' id='input_10_3' type='tel' value='' class='large' placeholder='Phone Number' aria-invalid="false" /></div></div><div id="field_10_5" class="gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_10_5"><label class='gfield_label' for='input_10_5' >Phone</label><div class='ginput_container'><input name='input_5' id='input_10_5' type='text' value='' autocomplete='new-password'/></div><div class='gfield_description' id='gfield_description_10_5'>This field is for validation purposes and should be left unchanged.</div></div><div id="field_submit" class="gfield gfield--width-quarter field_sublabel_below field_description_below gfield_visibility_visible" data-field-class="gform_editor_submit_container" data-field-position="inline" data-js-reload="true"><button type="submit" id="gform_submit_button_10" class="gform-button gform-button--white button gform-button--width-full" onclick='if(window["gf_submitting_10"]){return false;} if( !jQuery("#gform_10")[0].checkValidity || jQuery("#gform_10")[0].checkValidity()){window["gf_submitting_10"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_10"]){return false;} if( !jQuery("#gform_10")[0].checkValidity || jQuery("#gform_10")[0].checkValidity()){window["gf_submitting_10"]=true;} jQuery("#gform_10").trigger("submit",[true]); }'>Get Started</button></div></div></div> <div class='gform_footer top_label'> <input type='hidden' name='gform_ajax' value='form_id=10&amp;title=&amp;description=&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_10' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='10' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_10' value='WyJbXSIsIjNlMDgwMzI4ZGJhNjlmZjk1YmQwMGZmMWVkYjg5NWRmIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_10' id='gform_target_page_number_10' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_10' id='gform_source_page_number_10' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> <p style="display: none !important;"><label>&#916;<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="ak_js" value="176"/><script>document.getElementById( "ak_js_2" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_10' id='gform_ajax_frame_10' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type="text/javascript"> gform.initializeOnLoaded( function() {gformInitSpinner( 10, 'https://www.brawnmediany.com/wp-content/plugins/gravityforms/images/spinner.svg' );jQuery('#gform_ajax_frame_10').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_10');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_10').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_10').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_10').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_10').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_10').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_10').val();gformInitSpinner( 10, 'https://www.brawnmediany.com/wp-content/plugins/gravityforms/images/spinner.svg' );jQuery(document).trigger('gform_page_loaded', [10, current_page]);window['gf_submitting_10'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_10').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_10').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [10]);window['gf_submitting_10'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_10').text());}, 50);}else{jQuery('#gform_10').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [10, current_page]);} );} ); </script>
[gravityform id="10" title="false" description="false" ajax="true"]
<div class='gf_browser_unknown gform_wrapper gravity-theme' id='gform_wrapper_10' ><div id='gf_10' class='gform_anchor' tabindex='-1'></div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_10' id='gform_10' action='/style-guide/#gf_10' novalidate novalidate="novalidate"> <div class='gform_body gform-body'><div id='gform_fields_10' class='gform_fields top_label form_sublabel_below description_below'><div id="field_10_4" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible" data-js-reload="field_10_4"><label class='gfield_label' for='input_10_4' >Email Address<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class='ginput_container ginput_container_text'><input name='input_4' id='input_10_4' type='text' value='' class='large' placeholder='Email Address *' aria-required="true" aria-invalid="false" /> </div></div><div id="field_10_3" class="gfield gfield--width-three-quarter field_sublabel_below field_description_below hidden_label gfield_visibility_visible" data-js-reload="field_10_3"><label class='gfield_label' for='input_10_3' >Phone</label><div class='ginput_container ginput_container_phone'><input name='input_3' id='input_10_3' type='tel' value='' class='large' placeholder='Phone Number' aria-invalid="false" /></div></div><div id="field_10_5" class="gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_10_5"><label class='gfield_label' for='input_10_5' >Name</label><div class='ginput_container'><input name='input_5' id='input_10_5' type='text' value='' autocomplete='new-password'/></div><div class='gfield_description' id='gfield_description_10_5'>This field is for validation purposes and should be left unchanged.</div></div><div id="field_submit" class="gfield gfield--width-quarter field_sublabel_below field_description_below gfield_visibility_visible" data-field-class="gform_editor_submit_container" data-field-position="inline" data-js-reload="true"><button type="submit" id="gform_submit_button_10" class="gform-button gform-button--white button gform-button--width-full" onclick='if(window["gf_submitting_10"]){return false;} if( !jQuery("#gform_10")[0].checkValidity || jQuery("#gform_10")[0].checkValidity()){window["gf_submitting_10"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_10"]){return false;} if( !jQuery("#gform_10")[0].checkValidity || jQuery("#gform_10")[0].checkValidity()){window["gf_submitting_10"]=true;} jQuery("#gform_10").trigger("submit",[true]); }'>Get Started</button></div></div></div> <div class='gform_footer top_label'> <input type='hidden' name='gform_ajax' value='form_id=10&amp;title=&amp;description=&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_10' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='10' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_10' value='WyJbXSIsIjNlMDgwMzI4ZGJhNjlmZjk1YmQwMGZmMWVkYjg5NWRmIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_10' id='gform_target_page_number_10' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_10' id='gform_source_page_number_10' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> <p style="display: none !important;"><label>&#916;<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_3" name="ak_js" value="144"/><script>document.getElementById( "ak_js_3" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_10' id='gform_ajax_frame_10' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type="text/javascript"> gform.initializeOnLoaded( function() {gformInitSpinner( 10, 'https://www.brawnmediany.com/wp-content/plugins/gravityforms/images/spinner.svg' );jQuery('#gform_ajax_frame_10').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_10');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_10').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_10').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_10').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_10').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_10').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_10').val();gformInitSpinner( 10, 'https://www.brawnmediany.com/wp-content/plugins/gravityforms/images/spinner.svg' );jQuery(document).trigger('gform_page_loaded', [10, current_page]);window['gf_submitting_10'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_10').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_10').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [10]);window['gf_submitting_10'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_10').text());}, 50);}else{jQuery('#gform_10').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [10, current_page]);} );} ); </script>