Sliced/Design

This is Sliced’s interface framework and pattern library. It serves as a resource that helps to define a common visual language for the components of this platform.

This documentation was built for our internal needs, but it can also be used to teach new hires about our approach to design and front-end development. Feel free to reach out if you have questions or improvement ideas.

Sections

Voice & Tone

Using the right voice and tone is important as it allows us to better connect with our users. Use this section as a guide whenever writing content for the platform.

Our voice

  1. Visionary
  2. Results oriented, but positive
  3. Ambitious, yet down-to-earth and keen to have an impact

Our tone

  1. Down-to-earth
  2. Write on behalf of the company: “we aspire to…”
  3. Positive call-to-action

Brand colors

Sliced has four primary brand colors. Keep in mind that the green is only used in special cases like form validation, selected options, and success messages.

$color-coral #fd5e42
$color-topaz #ffdb80
$color-ocean #27b0cd
$color-grass #95d08e

For consistency, we also use this secondary grayscale palette throughout the interface.

$color-dark #3e3d3f
$color-mid #636164
$color-border #dcdcdc
$color-gray #f7f7f7
$color-light #ffffff

Sliced’s logo is used on the header and favicons. It is based on Founders Grotesk, a contem­porary amalgamation of classic grotesks designed by Klim Type Foundry. You can download the logo by clicking here.

Typography

We use Founders Grotesk for headings, Pitch for body copy, and Founders Grotesk Text for other interface elements.

A quick brown fox jumps $font-l, weight: 700
A quick brown fox jumps $font-m, weight: 400
A quick brown fox jumps $font-s, weight: 700
A quick brown fox jumps $font-s, weight: 400

Spacing

Sliced uses the following framework and Sass Mixins for creating a predictable and harmonious spacing.

1. Inset spacing

For all user interface containers. Usage in SCSS: @include inset-space($space).

2. Inset squish spacing

Same as previous, but a squished inset reduces space top and bottom. Used for buttons, inputs, table cells, etc. Usage in SCSS: @include inset-squish-space($space).

3. Stack spacing

For all stacked content. So for example panels, form fields and anything else that is stacked vertically. Usage in SCSS: @include stack-space($space).

4. Inline spacing

For pills, tags, side-by-side form fields etc. things that are displayed inline. Usage in SCSS: @include inline-space($space).

$space-xxxl 108px
$space-xxl 64px
$space-xl 48px
$space-l 32px
$space 21px
$space-s 16px
$space-xs 8px

Icons

Icons are used to provide additional meaning or in places where text label doesn’t fit. For most purposes, we use Streamline 3.0 iconset.

Animation

We use animation to add a sense of playfulness and delight to our interface. Animations also hint at functionality and inform the user's mental model of how an interface functions.

Fade in

Element fades in.

Fade in & down

Element fades in and slides down.

Fade out & up

Element fades out and slides up.

Fade in & scale

Element fades in while scaling down and slightly sliding.

Fade out & scale

Element fades out while scaling up and slightly sliding.

Move forward

Used to animate progress and loading.

Button

Buttons are generally used for interface actions. Suitable for all-purpose use. Defaults to primary call-to-action appearance.

1. Primary button

Should be used for main call-to-action on a page.

2. Secondary button

Should be used if not the main call-to-action on a page.

3. Negative button

Should be used in areas where contrast might be an issue. For example on top of images.

4. Destructive button

Should be used for any destructive actions.

5. Loading state

Loading animation. Used when showing progress inline.

Form controls

Used to create interactive controls for forms in order to accept data from the user.

1. Input

Used when the expected text input is short. For longer input, use the Textarea element.

2. Select

Used when there are more than 15 predefined options. For less options, consider using the Pick grid pattern.

Example select
&:hover
&:focus
&.has-error
&.disabled

3. Textarea

Used when the expected text input is long. For shorter input, use the Input element.

4. Sliding label

Used with an input when the space is limited.

5. Checkbox

Checkboxes for forms. Enhanced using CSS to look beautiful on modern browsers.

Combobox

Used in cases where it makes sense to tightly group an input and a related call-to-action together.

Pick grid (with icons)

Used when there are 6 or less predefined options. For more options, use the Pick grid without icons.

Pick grid (without icons)

Used when there are less than 15 predefined options. For lists that have both primary and secondary options, Pick grid can have up to 30 selectable items.

Banner

Banners are used to highlight and market specific call-to-actions on the platform.

Hero

Hero areas can be used to catch user’s attention. They should always be placed at the top of the page, just after the main header with logo and navigation.

We attract motivated people who have the skills and are true believers for the long term.

Card

Cards contain an image with a title and tagline below it. Generally used to list opportunities, but can be used in any context.

Notice

Shows supplementary information to a user without leaving the page. Used for example to display the cookie notice.

We use cookies to better understand how the site is used. By continuing to use this site, you consent to our policy. View policy.

Header

Main header with logo and navigation. Use .sticky on modifier on HTML element to float above page content.

Footer with social links & footer menus.

Toast

Toast panels provide contextual feedback messages, errors, and actions for the user.

This is an error toast.
This is a success toast.
This is an info toast.
This is an alert toast.

Heading

Various heading weights and styles.

Heading 1

Heading 2

Heading 3

Heading 4

List

Various list styles. Both unordered and ordered lists have predefined styles available.

  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Footnote

The fine print. Use for legal text, disclaimers, references, or help text.

By proceeding to create your account and use Sliced, you are agreeing to our Terms of Service and Privacy Policy.

Inline text that links to another URL.

Paragraph

The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt, and later around 1,200BC to Phoenician alphabets. Almost 2,500 years later, the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type.

Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type.

Punctuation

  • Don’t do: "It's a 'magic' sock"., do: “It’s a ‘magic’ sock.”
  • Don’t do: 1 x 0.5 - 0 = 1/2, do: 1 × 0.5 − 0 = ½
  • Don’t do: (c) 2015 Corp (TM), do: © 2015 Corp™
  • Don’t do: 1024 x 768, do: 1024×768
  • Don’t do: Steve Jobs is 6’ 10”, do: Steve Jobs is 6' 10"

Creating account