1.1 Tone of voice

InstaSupply’s voice is direct, professional, confident, and clear.

Our main concern is directly communicating important information to our users. We are confident we can help our users to better understand and control their business spend. Our users trust us with important information and we must at all times appear to be worthy of that trust.

  • We use professional language without being too stiff and boring
  • We avoid jargon
  • We value clarity over subtlety

We write like this:

21 Purchase orders created in the last 7 days

Not like this:

21 orders (last 7 days)

Why?

We prefer proper sentences that accurately communicate what will happen when the link is clicked rather than something shorter which could be misunderstood.


Buttons

We write like this:

Export table as csv

Not like this:

Export

Why?

We prefer to be clear about exactly what will happen when a button is clicked rather than leave any doubt or tension in the user’s mind.


Explanatory text

We write like this:

There are currently no deliveries for this purchase order.

Not like this:

no deliveries

Why?

“no deliveries” could be misunderstood and lacks context. A fuller sentence adds extra context and leaves no doubt as as to what we are communicating.

Source: core/_voice.scss, line 1

Source: core/_variables.scss, line 1

1.2.1 Brand Colours

The primary colors for branding.

    Parameters

  • $colour-brand-primary

    #307abf; Primary
  • $colour-brand-secondary

    #ebe9f2; Secondary
  • $colour-brand-highlight

    #e87e04; Highlight
  • $colour-brand-feature

    #0c2150; Feature

Source: core/_variables.scss, line 17

1.2.2 Default Colours

The default colours for certain elements.

    Parameters

  • $colour-body

    #fff; body background colour
  • $colour-text

    #333; text colour
  • $colour-text-muted

    #636c72; muted text colour
  • $colour-link

    #307abf; link colour
  • $colour-border

    #ddd; default border colour

Source: core/_variables.scss, line 48

1.2.3 Feedback Colours

Colors for signifying certain states.

    Parameters

  • $colour-state-info

    #337ab7; Info
  • $colour-state-success

    #5cb85c; Success
  • $colour-state-warning

    #d9534f; Warning

Source: core/_variables.scss, line 34

1.3 Grid

We use reflex grid for complex layouts because it allows us to use flexbox for layout with a reliable fallback for older browsers.

Source: core/_grid.scss, line 1

1.4 Breakpoints

Breakpoints for media query usage.

    Parameters

  • $breakpoint-xs

    480px;
  • $breakpoint-sm

    768px;
  • $breakpoint-md

    992px;
  • $breakpoint-lg

    1200px;
  • $breakpoint-xlg

    1600px;

Source: core/_variables.scss, line 69

1.5 Mixins

Generate css declarations programmatically. Include the mixin with your arguments and get some css proprties back.

Example usage

h1 {
    @include font-size(1.8);
}

Results in the following css being compiled:

h1 {
    font-size: 25.2px;
    font-size: 1.8rem;
}

Multiple arguments

Mixins by default expect arguments to be passed in the order in which they are defined. Therefore, if you need to pass lots of arguments to a mixin you should use a map which makes life easier.

$arguments: (
    'colour-txt': $colour-text,
    'colour-bg': $colour-state-success,
    'colour-focus': $colour-text
);

@include generate-button($arguments...);

Source: core/_mixins.scss, line 1

1.5.1 animation()

Generates vendor prefixed animation properties.

Example usage

@include animation('fade-out 5s 3');

    Parameters

  • $animation-details

    The details of the animation (Defaults to: null)

Source: core/_mixins.scss, line 176

1.5.2 font-size()

Produces font-sizes set with rem and a pixel fallback. Because we are using rem all font sizes are relative to the pixel size set by variable $font-size-base.

    Parameters

  • $size

    The desired font size in rem (Defaults to: 1)

Source: core/_mixins.scss, line 42

1.5.3 generate-badge()

Generates a badge with the specified colours.

    Parameters

  • $colour-txt

    The text colour of the badge. (Defaults to: $badge-colour-text-default)
  • $colour-bg

    The background colour of the badge. (Defaults to: $badge-colour-bg-default)

Source: core/_mixins.scss, line 102

1.5.4 generate-button()

Generates a button with the specified colours.

    Parameters

  • $colour-txt

    The text colour of the button. (Defaults to: $button-colour-text-default)
  • $colour-txt-hover

    The text colour of the button's hover state. (Defaults to: $button-colour-text-hover-default)
  • $colour-bg

    The background colour of the button. (Defaults to: $button-colour-bg-default)
  • $colour-bg-hover

    The background colour of the button's hover state. $colour-focus = $button-colour-focus-default- The box shadow colour of the button's focus state. (Defaults to: $button-colour-bg-hover-default)

Source: core/_mixins.scss, line 57

1.5.5 keyframes()

Generates vendor prefixed keyframes for use with the animation() mixin.

Example usage

@include keyframes(fade-out) {
    0% { opacity: 1; }
    90% { opacity: 0; }
}

    Parameters

  • $animation-name

    The name of the animation (Defaults to: null)

Source: core/_mixins.scss, line 143

1.6 Placeholders

One way to understand placeholders is to think of them as mixins that do not accept arguments. They are used to store reusable properties that do not need to be modified with arguments.

Placeholder selectors will not show up as a distinct class in the generated CSS. There's some further reading to be had if you want to learn more.

Example usage

When we create a placeholder like this:

%list-unstyled {
    list-style-type: none;
    padding-left: 0;
}

Then extend it within a class:

.my-special-list {
    @extend %list-unstyled;
    color: #ccc;
}

It results in the following css being compiled:

.my-special-list {
    list-style-type: none;
    padding-left: 0;
    color: #ccc;
}

While there is no class `.list-unstyled' compiled at all. This helps prevent CSS bloat.

Source: core/_placeholders.scss, line 1

1.6.1 %clear-fix

When included in a containing element, this will stop floated elements from overflowing.

Source: core/_placeholders.scss, line 65

1.6.2 %font-awesome-icon

Sets up an element to display as a font awesome icon. Expected use is as part of a ::before or ::after pseudo element where the content is the escaped unicode value of the icon.

For example using this placeholder in an ::after element with content: '\f105' would result in the angle-right icon being displayed.

Source: core/_placeholders.scss, line 131

1.6.3 %inner-content-fix

Remove the top margin from the first child of an element and the bottom margin from the last child. This is useful for containing elements with an inner top and bottom margin

Source: core/_placeholders.scss, line 47

1.6.6 %list-inline

Makes list elements behave like inline-block elements so they will flow like regular text.

Source: core/_placeholders.scss, line 113

Source: core/_placeholders.scss, line 101

Source: core/_placeholders.scss, line 91

Source: core/_placeholders.scss, line 80

1.6.9 %sr-only

Makes an element invisible to the sighted user but still present in the markup

Source: core/_placeholders.scss, line 201

1.7 Utilities

General purpose useful layout classes not tied to individual atoms.

Source: core/_utilities.scss, line 1

Default styling

A paragraph of text

.pull-left always float left

A paragraph of text

.pull-right always float right

A paragraph of text

.pull-left-xs float left only above the xs breakpoint

A paragraph of text

.pull-right-xs float right only above the xs breakpoint

A paragraph of text

.pull-left-sm float left only above the sm breakpoint

A paragraph of text

.pull-right-sm float right only above the sm breakpoint

A paragraph of text

.pull-left-md float left only above the md breakpoint

A paragraph of text

.pull-right-md float right only above the md breakpoint

A paragraph of text

.pull-left-lg float left only above the lg breakpoint

A paragraph of text

.pull-right-lg float right only above the lg breakpoint

A paragraph of text

<img class="img-fluid [modifier class]" src="https://placeimg.com/100/100/tech/grayscale">
<p>A paragraph of text</p>

Source: core/_utilities.scss, line 71

1.7.2 Margin reset

Utility classes for removing top and bottom margin from any element. This is more efficient than doing a bespoke margin removal on a per case basis.

A paragraph of text without a top or bottom margin

<p class="margin-reset">A paragraph of text without a top or bottom margin</p>

Source: core/_utilities.scss, line 26

1.7.3 Screen reader only

This will hide an element from the page but assistive devices such as screen readers will still pick it up. This is useful for providing extra context to an otherwise meaningless element.

Screen reader only
<span class="sr-only">Screen reader only</span>

Source: core/_utilities.scss, line 10

Default styling

A paragraph of text

.text-left left aligned

A paragraph of text

.text-center center aligned

A paragraph of text

.text-right right aligned

A paragraph of text

<p class="[modifier class]">A paragraph of text</p>

Source: core/_utilities.scss, line 42

1.8 Print

We override some default properties for better printing. There are also helper classes for hiding content from print and manipulating page breaks.

Source: core/_print.scss, line 1

1.8.1 Hidden for print

We override some default properties for better printing. There are also helper classes for hiding content from print and manipulating page breaks.

this will not be printed

<p class="hidden-for-print">this will not be printed</p>

Source: core/_print.scss, line 58

Before page break

After page break

<p>Before page break</p>
<div class="page-break"></div>
<p>After page break</p>

Source: core/_print.scss, line 75