<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1021763991361312&amp;ev=PageView&amp;noscript=1">

CLEAN Style Guide

All the design elements that will make up your website. IT's a great page to reference as you make customizations to reflect your brand.

 

Typography

Designed intentionally to maximize readability and style. You can easily customized and add your own branded font.

This is a headline - H1

This is a headline - H2

This is a headline - H3

This is a headline - H4

This is a headline - H5
This is a headline - H6

Lorem ipsum dolor amet vegan selfies actually cray yr pickled ramps semiotics bicycle rights pop-up. Quinoa asymmetrical crucifix poke af. Subway tile distillery freegan, cronut aesthetic you probably haven't heard of them locavore migas. Selfies put a bird on it glossier tousled iceland man braid narwhal offal cred direct trade.

  • Some cool bullet points
  • Everyone loves these
  • Perfect for people who skim

Fixie fanny pack taxidermy, vegan hell of hoodie +1 vinyl shabby chic. Mlkshk gastropub readymade cardigan polaroid fashion axe. Flannel roof party banjo everyday carry art party +1 woke asymmetrical crucifix copper mug freegan.

The alternative to good design is always bad design. There is no such thing as no design.

 

Calls To Action

One of the most important elements of any page design is the CTA. You're given easy access to customize the button color and shape.

cta-primary
cta-secondary
cta-outline-white
 

Page Elements

Below are various custom page elements ("Items") that are used throughout the CLEAN template series. Gallery Cards, Accordions, Icon Groups, Etc.

  • How do I update this style guide?
    The first thing you're going to want to do is find the clean-5-style.css file and clone it.  At the very top of the CSS file you'll see all the easy to access settings you can customize.
  • Is it easy to adjust and update the fonts?
    Yep, it sure is! There are a couple simple steps to do so. The good news is that I have a video you can watch here.

Icon & Text

This is where you can add some extra copy.

Icon & Text

This is where you can add some extra copy.

Resource card

This is typically used on the Resource template but is flexible enough to work for multiple purposes.

 

Download

 

Profile Cards

These cool little profile card can be used for a variety of purposes.  Highlight your team members, your partners, or your clients.  Each gives you the ability to turn on/off each social icon.

bob.jpeg

Bob Burns

Chief Happiness Officer

Lorem ipsum dolor amet asymmetrical humblebrag kinfolk meggings sriracha letterpress. Disrupt DIY flannel hot chicken everyday carry pork belly affogato art party af pitchfork jean shorts fingerstache.

Learn More  

Linda Holendar

Director of Marketing
team-portrait-1
team-portrait-1-funny

Clark Kent

Co-Founder, CEO

 

Customizable Row Elements

Each row makes it super easy to create an infinite about of page options. 

 

Highlight Row with Form

Lorem ipsum dolor amet shabby chic cold-pressed vaporware, gochujang ugh drinking vinegar helvetica meggings hella organic biodiesel.

 

Highlight Row with CTA

Lorem ipsum dolor amet shabby chic cold-pressed vaporware, gochujang ugh drinking vinegar helvetica meggings hella organic biodiesel.

 

Get the CLEAN Pack

Headline Here

This is where you can add some extra copy.

Headline Here

This is where you can add some extra copy.

Headline Here

This is where you can add some extra copy.

Headline Here

This is where you can add some extra copy.

Headline Here

This is where you can add some extra copy.

Headline Here

This is where you can add some extra copy.

Headline Here

This is where you can add some extra copy.

 

This is space for an impactful Headline

Lorem ipsum dolor amet lumbersexual pitchfork dreamcatcher bitters cloud bread. Man bun beard pok pok pickled cliche palo santo raw denim paleo bespoke typewriter asymmetrical chillwave activated charcoal. Narwhal pour-over taiyaki palo santo, roof party four loko mumblecore chia taxidermy man braid waistcoat austin.

 

Purchase CLEAN PACK

 

Add a Headline

Lorem ipsum dolor amet lumbersexual pitchfork dreamcatcher bitters cloud bread. Man bun beard pok pok pickled cliche palo santo raw denim paleo bespoke typewriter asymmetrical chillwave activated charcoal.

 

Purchase CLEAN PACK

0

Add Description here

0

Add Description here

0

Add Description here

Basic

Annual Membership

$19

per month

Bullet point

Bullet point

Bullet point

Bullet point

Purchase CLEAN PACK
Most Popular

Professional

Annual Membership

$99

per month

Bullet point

Bullet point

Bullet point

Bullet point

Purchase CLEAN PACK

Enterprise

Annual Membership

$179

per month

Bullet point

Bullet point

Bullet point

Bullet point

Purchase CLEAN PACK
 

Add a Headline

Lorem ipsum dolor amet lumbersexual pitchfork dreamcatcher bitters cloud bread. Man bun beard pok pok pickled cliche palo santo raw denim paleo bespoke typewriter asymmetrical chillwave activated charcoal.

 

Purchase CLEAN PACK

Master cleanse banh mi blog kinfolk, pitchfork try-hard mustache paleo. Tumblr church-key vice brooklyn whatever chia. Single-origin coffee echo park 3 wolf moon salvia humblebrag distillery palo santo.
temp-avatar
John Smith
Hubspot
Master cleanse banh mi blog kinfolk, pitchfork try-hard mustache paleo. Tumblr church-key vice brooklyn whatever chia. Single-origin coffee echo park 3 wolf moon salvia humblebrag distillery palo santo.
temp-avatar
John Smith
Hubspot
 

Location Title

1234 Test Street.

Los Angeles, CA 90210