Style Guide

Menu

IdeaBase Visual Style Guide

IdeaBase Colors

Light Blue

#00a8e1 rgb(0, 168, 225) PANTONE 2995 C: 80, M: 12, Y: 1, K: 0

Royal Blue

#1a5fab rgb(26,95,171) PANTONE 2935 C: 92, M: 67, Y:1, K: 0

Dark Gray

#4d4d4d rgb(77,77,77) PANTONE 425 C: 0, M: 0, Y: 0, K: 85

Light Gray

#bcbec0 rgb(188,190,192) PANTONE 420 C: 0, M: 0, Y: 0, K: 30

Glyphix Colors

Blue

#19226d rgb(25,34,109) PANTONE P 100-16 U C: 100, M: 94, Y: 0, K: 35

Pink

#f4817e rgb(244,129,126) PANTONE P 57-4 U C: 0, M: 62, Y: 41, K: 0

Yellow

#febe10 rgb(254,190,16) PANTONE P 10-8 U C: 0, M: 27, Y: 100, K: 0

Gray

#7b7d89 rgb(123,125,137) PANTONE P 173-7 U C: 59, M: 50, Y: 40, K: 0

Green

#60c3ac rgb(96,195,172) PANTONE P 133-5 U C: 60, M: 0, Y: 41, K: 0

Orange

#f26524 rgb(242,101,36) PANTONE P 34-8 U C: 0, M: 75, Y: 98, K:0

Typography

Montserrat Bold

CSS Value: 'Montserrat', sans-serif Weight: 700 abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz For main headings (h1) Montserrat Bold, all caps, no tracking. For secondary headings (h2) Montserrat Bold, all caps, some tracking, slightly smaller than main headings in size.

Source Sans Regular

CSS Value: 'Source Sans Pro', sans-serif Weight: 400 abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz Body copy and general information.

Source Sans Semibold

CSS Value: 'Source Sans Pro', sans-serif Weight: 600 abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz Used for tertiary headings (h3) and short-length, bolded text.

Source Sans Bold

CSS Value: 'Source Sans Pro', sans-serif Weight: 700 abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz Used for quaternary headings (h4).

Logos

IdeaBase Logo Horizontal - Color

Idea Base Logo Horizontal Color EPS PNG SVG Primary logo usage for print and web

IdeaBase Logo Horizontal - Black

Idea Base Logo Horizontal Black EPS PNG SVG Primary logo usage for print and web

IdeaBase Logo Horizontal - White

Idea Base Logo Preview Horizontal White EPS PNG SVG Primary logo usage for print and web

IdeaBase Logo Vertical Tagline - Color

Idea Base Logo Vertical Tag Color EPS PNG SVG Secondary logo usage for print and web, used in larger formats for tagline readability

IdeaBase Logo Vertical Tagline - Black

Idea Base Logo Vertical Tag Black EPS PNG SVG Secondary logo usage for print and web, used in larger formats for tagline readability

IdeaBase Logo Vertical Tagline - White

Idea Base Logo Vertical Tag White EPS PNG SVG Secondary logo usage for print and web, used in larger formats for tagline readability

IdeaBase Logo Vertical - Color

Idea Base Logo Vertical Color EPS PNG SVG Secondary logo usage for print and web, used in smaller formats

IdeaBase Logo Vertical - Black

Idea Base Logo Vertical Black EPS PNG SVG Secondary logo usage for print and web, used in smaller formats

IdeaBase Logo Vertical - White

Idea Base Logo Vertical White EPS PNG SVG Secondary logo usage for print and web, used in smaller formats

IdeaBase Logo Stacked - Color

Idea Base Logo Stacked Color EPS PNG SVG Tertiary logo usage for print and web

IdeaBase Logo Stacked - Black

Idea Base Logo Stacked Black EPS PNG SVG Tertiary logo usage for print and web

IdeaBase Logo Stacked - White

Idea Base Logo Stacked White EPS PNG SVG Tertiary logo usage for print and web

Glyphix Studio Logo - Color (No Tagline)

Glyphix Studio Logo Preview EPS PNG SVG Used in combination with IdeaBase logo for co-branded marketing and events.

Glyphix Studio Logo - Color (With Tagline)

Glyphix Logo Tagline 01 EPS SVG PNG Can be used as standalone logo when scaled large enough for tagline to be readable

Glyphix Studio Logo - Black (No Tagline)

Glyphix Logo Black 01 EPS SVG PNG For use on single color publications

Illustrative Icons

IdeaBase Discover Icon

Idea Base Icons Discover EPS PNG SVG

IdeaBase Design Icon

Idea Base Icons Design EPS PNG SVG

IdeaBase Refine Icon

Idea Base Icons Refine SVG EPS PNG

IdeaBase Bolt Icon

Idea Base Icons Bolt EPS PNG SVG

IdeaBase Webcam Icon

Idea Base Icons Cam EPS PNG SVG

IdeaBase Compass Icon

Idea Base Icons Compass EPS PNG SVG

IdeaBase Desktop Icon

Idea Base Icons Desktop EPS PNG SVG

IdeaBase Devices Icon

Idea Base Icons Devices EPS PNG SVG

IdeaBase Eye Icon

Idea Base Icons Eye EPS PNG SVG

IdeaBase Lightbulb Icon

Idea Base Icons Lightbulb EPS PNG SVG

IdeaBase Magnifying Glass Icon

Idea Base Icons Mag Glass EPS PNG SVG

IdeaBase Map Icon

Idea Base Icons Map EPS PNG SVG

IdeaBase Pencil Icon

Idea Base Icons Pencil EPS PNG SVG

IdeaBase Speech Bubble Icon

Idea Base Icons Speech EPS PNG SVG

IdeaBase T Square Icon

Idea Base Icons Square EPS PNG SVG

IdeaBase Envelope Icon

Idea Base Envelope EPS PNG SVG

Video Icon

Video EPS SVG PNG

Browser Icon

Browser EPS SVG PNG

Document Icon

Document EPS PNG SVG

User Interface Icons

Trophy Icon

Trophy Blue 01 SVG SVG

Left Arrow

Idea Base Arrow Left SVG

Right Arrow

Idea Base Arrow Right SVG

Up Arrow

Idea Base Arrow Up SVG

Down Arrow

Idea Base Arrow Down SVG

Close X

Idea Base Close X SVG

Behance Icon

Behance EPS SVG

Codepen Icon

Codepen EPS SVG

Dribbble Icon

Dribbble EPS SVG

Facebook Icon

Facebook EPS SVG

Flickr Icon

Flickr EPS SVG

Github Icon

Github EPS SVG

Instagram Icon

Instagram EPS SVG

LinkedIn Icon

Linkedin EPS SVG

Pinterest Icon

Pinterest EPS SVG

Tumblr Icon

Tumblr EPS SVG

Twitter Icon

Twitter EPS SVG

Website Icon

Website EPS SVG

Wordpress Icon

Wordpress EPS SVG

YouTube Icon

Youtube EPS SVG

Buttons

Pull Quotes

IdeaBase is conveniently located in Downtown Kent, Ohio.

Type Hierarchy

Heading 1

This is an example of an introductory paragraph in Source Sans Pro / dark gray.

Heading 2

This is an example of body copy in Source Sans Pro. This is an example of bolded text and italics within the body copy.

Heading 3

Heading 4

Heading 5

Lists

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Email Signature

How to Use

  • Using Google Chrome only, highlight and copy the entire signature template (including the logo) below
  • Paste the email signature into your email client's signature settings
  • Modify the Name, Title, and Email Address link (email address link needs to be in the format "mailto:EMAIL@ideabasekent.com")
Office 365
  • In Office 365 web interface, click on the Gear icon > Options
  • Click Email Signature Under Layout
Apple Mail
  • Edit Signatures by going to Mail > Preferences > Signatures and set a signature for your IdeaBase email. Set it to always show under Choose Signature
  • You won't see the logo when you first paste, but it will appear when you write your first email
  • Edit the link by Right clicking and going to Link > Edit Link
  • Apple Mail will change the color of your email address when you update it, but you can highlight the email address, right click on the email address, go to Font > Show Colors and change the Hex Color under the 2nd tab to #00a8e1.

Don't forget to add the email address link

My Full Name // My Job Title, IdeaBase

a. 138 E. Main Street, Suite 203, Kent, Ohio 44240
o. 330-672-IDEA (4332)
f.  330-672-7373

MYEMAIL@ideabasekent.com
ideabasekent.com

Back to Main Style Guide