# Colors

  • $color-ui-blue, $color-ui-info
    #0090FF
  • $color-ui-yellow, $color-ui-warning, $color-ui-status-inreview
    #FFC500
  • $color-ui-green, $color-ui-status-published
    #00C666

# Fonts

Primary font: “Work Sans”, helvetica, sans-serif;
Primary font medium: “Work Sans”, helvetica, sans-serif;
Primary font semi-bold: “Work Sans”, helvetica, sans-serif;
Primary font semi-bold with strong and b tags: “Work Sans”, helvetica, sans-serif;
Primary font bold: “Work Sans”, helvetica, sans-serif;

# Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

# Icons

We use an svg sprite for icons throughout the site. We use gulp-svg-sprite to generate a single sprite. It is made up of individual svg icons.

Include icons in templates with the use element. Classes and CSS should be used to customize icon implementations.

  • #info
  • #search
  • #close
  • #circle-outline
  • #accepted
  • #declined
  • #avatar
  • #arrow-down
  • #refresh
  • #view
  • #add
  • #checkbox
  • #checkbox-checked
  • #location
  • #arrow-right
  • #comment
  • #brush
  • #bulb
  • #code
  • #people
  • #filters
  • #pin
<svg>
  <use xlink:href="{% static 'dist/images/svg-sprite.svg' %}#icon-name" />
</svg>

To include an icon using the static template tag, you have to load it first with {% load staticfiles %}.

# Buttons

# Button

# Button outline

# Button Yes

A filled in button useful for taking a positive action; confirm, accept, save, etc.

Button Yes Button Yes

# Button Tag

One fish

# Text button

# Large buttons

Use the btn-large class on any button style to increase its size.

# Small buttons

Use the btn-small class on any button style to decrease its size.

# Extra Small buttons

Use the btn-x-small class on any button style to decrease its size even more.

# Form fields

# Text input

# Number input

# Email input

# Password input

# Readonly input

# Range input

# Telephone input

# Date input

# Time input

# File input

# Radio button

# Checkbox

# Text area

# Text area longform

# Select menu

# Custom Select menu

# Legend

Legend level 1 Legend level 2 Legend level 3

# Tooltip

I have more to say

Note: Without JavaScript the Tooltip component functions as normal for the browser using the title attribute. On page load, we use JS to change the title attribute to a data-title attribute. We do this to avoid a double tooltip.

# Alert

A message to the user providing information of a certain level.
A message to the user providing information of a certain level.
A message to the user providing information of a certain level.
A message to the user providing information of a certain level.
A message to the user that contains an action.
A message to the user that contains an action.
This is an alert-attachment. We use it to add emphasis to content within an alert.
A message to the user that contains an action.
This is an alert-attachment. We use it to add emphasis to content within an alert.
A message to the user that contains an action.
This is an alert-attachment. We use it to add emphasis to content within an alert.
A message to the user that contains an action.
This is an alert-attachment. We use it to add emphasis to content within an alert.

Note: The markup for alerts is included in base.html. Alerts are added as needed per-view.

# Tables

Folks’ details

Name Favorite Color Shoe Size Animal
Fish Wallace Orange 9 Dog
Homer Sampsonite Blue 12 Horce
Marge Dimera Green 7 Caterpillar
Leela Dog Yellow 4 Squirrel

# Pagination

Note: We don't display the prev/next buttons if there are no previous or next pages available. Instead of disabling either button.

# Radio switch

This is a non-standard, sorta standard radio control style. Blame iOS.

# Input toggle

Similar to radio switch, this is a non-standard, sorta standard toggle control style.

Extended example

Note: We customize this pattern a lot when we use it. Most notably on the Profile Form. We might circle back and include those customizations in the base component.

# Field

This is descriptive text for a field. Use it to provide detail on what information we’re looking for, why, and examples of values that work here.

# Inline field

This descriptive text will fill the space in the row next to the input.

# Field with inline button

# Form controls

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Success Message
Error Message with a bit of extra explanatory text to test wrapping.
Success Message
Error Message with a bit of extra explanatory text to test wrapping.

# Select Multi Dropdown

# Multiline Input

// html
<div id="pl-example-multiline-input">
  <textarea cols="40" rows="3" id="pl-example-multiline-textarea"></textarea>
</div>

// javascript
new MultiLineInput({
  appendAfter: $("#pl-example-multiline-input"),
  containerClasses: "profile-projects-field",
  listClasses: "profile-projects-output",
  textarea: $("#pl-example-multiline-textarea")
});

Note: This component is still tightly coupled to the Profile Projects form. We’ll slowly abstract bits of it to make it more universal.

# Home hero

Hide and Seek.

Limbo is the anonymous job platform where you post your ideal next role and let companies introduce themselves.

Post a Profile

Why we made this

{% include "includes/home_hero.html" %}

# Content info

{% include "includes/contentinfo.html" %}

# Stacked form

Form legend

A helpful description of why this field is needed. Use this to provide more detail than can be conveyed in a placeholder.

{% include "includes/nav_primary.html" with class_name="nav-primary-red" %}
{% include "includes/nav_primary.html" with class_name="nav-primary-dark" %}

# Reveal Request Form

{% include "includes/reveal_request_form.html" id="reveal-request-form-pattern-lib" %}
import RevealRequestForm from "components/RevealRequestForm";
new RevealRequestForm({
  el: $("#reveal-request-form-pattern-lib")
});