Crowd Supply Style Guide

Logos

The Crowd Supply logo font is FS Industrie Narrow Bold, a non-free font. Fontsmith (FS) has since been acquired by Monotype.

Light Logo

1400px x 167px / SVG

Use against dark backgrounds.

Dark Logo

1400px x 167px / SVG

Use against white or very light background.

White Logo

1400px x 167px / SVG

Use against a solid color background, ideally Crowd Supply teal.

Square Icon Logo

1400px x 1400px / SVG

Use for social media avatars, mobile icons, etc.

Square Black Icon Logo

1400px x 1400px / SVG

Use for printed product labels, PCB silkscreens, etc.

Square White Icon Logo

1400px x 1400px / SVG

Use for social media avatars, mobile icons, etc.

Colors

Primary Brand Color

Use as "the color of Crowd Supply", associated with logos, swag, general site blocks, etc.

Pantone: 3262 U

Darker Brand Color

Use as a shaded contrast area or delineator with the primary brand color.

Pantone: 3165 U

Grey Brand Color

Use in conjunction with the primary brand color for dark logos and square icon logos - in swag, on the site, in printed material, etc.

Pantone: Black 6 U

Dark Areas

Dark backgrounds and areas where a large amount of contrast is needed, including the site header.

Pantone: 532 C

Calls To Action

Use sparingly for buttons, links, and element borders for the "next logical action towards conversion" on a given page. Try to not have more than one type of action on any given page using this color.

Pantone: 108 U

Off-White Light Background

Use as an alternate subtle background color for regions which should be visually delineated, but without a border.

Pantone: 7541 U

Light Border

Use for a light grey border or horizontal rule against a white background.

Typography

For HTML email, print documents, and documents which will be distributed via PDF, the primary brand font is Source Sans Pro.

For fixed-width text, use Monaco.

For websites, a specialized font stack should be used. The goal of this font stack is to always use a natively-installed font, but still maintain consistency with the general brand look and feel. This improves performance and ensures that a font with good rendering/hinting will be used on any given platform. This font stack is:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", Arial, sans-serif;


Header Styles (h1)

Header Styles (h2)

Header Styles (h3)

Header Styles (h4)

Header Styles (h5)
Header Styles (h6)

Lorem ipsum dolor sit amet. Nunc pulvinar nibh at magna elementum faucibus. Aenean elementum imperdiet risus, eu semper massa dictum in. Ut vulputate dictum justo, a fringilla orci ullamcorper sit amet. Eget congue erat. Ut eros nulla, sagittis et laoreet id, mollis sed nulla. In nulla odio, fermentum eleifend dictum quis, hendrerit quis massa. Donec eu sapien non velit aliquam pellentesque. Fusce hendrerit velit nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar nibh at magna elementum faucibus. Aenean elementum imperdiet risus, eu semper massa dictum in. Ut vulputate dictum justo, a fringilla orci ullamcorper sit amet. Fusce ac mauris sem, eget congue erat. Ut eros nulla, sagittis et laoreet id, mollis sed nulla. In nulla odio, fermentum eleifend dictum quis, hendrerit quis massa. Donec eu sapien non velit aliquam pellentesque. Fusce hendrerit velit nulla.

Lists

Unordered Lists

  • This is a list item
    • This is a list item
      • This is a list item
      • This is a list item
    • This is a list item
  • This is a list item
  • This is a list item

Ordered Lists

  1. This is a list item
    1. This is a list item
      1. This is a list item
      2. This is a list item
      3. This is a list item
    2. This is a list item
    3. This is a list item
  2. This is a list item
  3. This is a list item

Definition Lists

Definition Term
Definition description would go here
Definition Term
Definition description would go here
Definition Term
Definition description would go here

Forms

There are 2 form errors below.

An Amazing Form

This is some short text under the group.

  • Phone number is in incorrect format
$

This is some short text under the group.

This is some form advice about submissions.

Alerts

Alerts will normally appear only at the top of the page, just below the header, with no whitespace.

User-initiated changes to data should almost always trigger a flash of the appropriate severity.

Use 'success' to indicate a successful data change or 'error' to indicate a failure.

This is a sample alert for something that was successful.
This is a sample alert for something that went ok.
This is a sample alert for something that might have been a little off.
This is a sample alert for something that is really broken.

Buttons

Button Colors

Button Class Usage
btn btn-default Default actions which do not persist data, like 'Cancel'.
btn btn-primary Actions which save data but don't fit into a more specific button.
btn btn-cta Order-related Calls to Action, e.g. 'Add to Cart' or 'Complete Order'.
btn btn-danger Actions which delete or destroy data.
btn btn-dark Similar to btn-default for use in contexts where more contrast is required.

Button Types

Do not use <input type="submit"> buttons.

Link

Button Sizes

Button Class
btn btn-large
btn
btn btn-small
btn btn-mini

Disabled Buttons

Link

Widgets

Progress Bars

Status Bars

Used when a progress bar gets replaced with a status and/or metadata.

Coming Soon
Sign Up for Updates
 For pre-launch or failed projects.
Funded!
Pre-Order Now
 For funded projects.
Alternate
Buy This Thing
 Alternate project treatment for special (reserved) use.
Suspended
 For suspended projects.

Breadcrumbs

  1. Creators
  2. Super-Frenzy Studio
  3. Freeze-a-Friend 3000

Images

General Rules

  • An image should have rounded corners if and only if:
    • The image is a direct child of a container box with rounded corners
    • It is an avatar image
  • Images with rounded corners should have a corner radius of 4px

Project Photos

Project photos have the following requirements (especially strict for thumbnails):

  • Text should not be included.
  • No borders, 'chrome', or rendered decoration should be included
  • Use the highest resolution native file possible: it will be downscaled and/or cropped as appropriate by the site
  • To use a wider range of source photography against a white background, apply a soft radial gradient.

Avatar Images

Always square, displayed at several sizes with a light border radius.

Subscribe to the Crowd Supply newsletter, highlighting the latest creators and projects