Nosto Website Design System

Tokens

Colors

Custom color utility classes have been created so you can set the background color of any element by adding the class ".has-*-background-color", where "*" is the SCSS name of the color. To set the text color, use ".has-*-color".

Bootstrap Documentation
Ink

HEX: #18132C
SCSS: $dark

Magenta

HEX: #FF1BA4
SCSS: $magenta

Purple

HEX: #6761E7
SCSS: $purple

Peach

HEX: #FFE9DA
SCSS: $peach

Red

HEX: #FC3434
SCSS: $red

Ink 600

HEX: #433D59
SCSS: $ink-600

Magenta 200

HEX: #F6BFE2
SCSS: $magenta-200

Purple 200

HEX: #8682F3
SCSS: $purple-200

Purple 100

HEX: #DEDDFF
SCSS: $purple-100

Peach 100

HEX: #fff8f4
SCSS: $peach-100

White

HEX: #FFFFFF
SCSS: $white

Gray 100

HEX: #F8F8F8
SCSS: $gray-100

Gray 200

HEX: #EAEAEA
SCSS: $gray-200

Gray 300

HEX: #C4C4C4
SCSS: $gray-300

Gray 400

HEX: #ADADAD
SCSS: $gray-400

Gray 500

HEX: #8A8994
SCSS: $gray-500

Green (Co-branding only)

HEX: #5FD0CA
SCSS: $green

Green 100(Co-branding only)

HEX: #b4e9e6
SCSS: $green-100

Typography

To combine best practices for accessibility and scalable typography, the body text is set relative to the browser default (usually 16px), while all headings above h5 are sized according to a fluid-type scale based on screen width.

Within articles (e.g. .entry-content) additional top margins are added to the headings to allow for better spacing after paragraphs.

Bootstrap Documentation

Display 1

Display 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Integer 01

This is regular body text. It is usually set to $gray-500.

Here is an example of lead text. It is a larger version of body text.

Here is an example of fine print text. It is a smaller version of body text.

You can use the mark tag to highlight text.

Here is an example of deleted text or text that is no longer accurate.

Here is an example of underlined text or text that is meant to be an addition to the document.

Here is an example of bold text.

Here is an example of italicized text.

Here is an example of regular hyperlinked text.

Here is an example of a CTA Link

Here is an alternative CTA Link

Here is an example of a tag.

Here is an example of entry meta text.

Here is an exmaple of attribution.

  • This is a list styled with arrows
  • Only used on homepage currently
  • To change font color, add color class to ul
  • To remove left padding, add py-0 class to ul

Here is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
  • This is an unstyled list
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Spacing

Bootstrap Documentation
An example of padding 0
An example of padding 1
An example of padding 2
An example of padding 3
An example of padding 4
An example of padding 5
An example of padding 6
An example of padding 7

Elements

Patterns

Card

Bootstrap Documentation
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
2 days ago
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card linkAnother link
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Forms

This section is in progress. As most website forms are actually Marketo embeds, custom style rules need to be added for these and the Bootstrap defaults are not applied.
Bootstrap Documentation

WP Editor

Custom Wordpress Blocks

Custom Table of Contents Block

Table of Contents
  1. Item One
  2. Section Two
  3. Another Section Heading Here
  4. Jump to WP Editor Typography

Custom Lists Blocks

  • Item One
  • Item Two
  • Item Three
  • Item One
  • Item Two
  • Item Three
  • Item One
  • Item Two
  • Item Three

WP Editor Typography

These all follow the global typographic styles listed above; the key differences are that paragraphs are always styled as grey and all headings have an extra top margin to improve readability.

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading
This is a h6 heading

This is what a standard blockquote looks like in the block editor. This should only be used for quotes.

Emma Englishby

This is CTA text

You can set paragraph text to “small” in the WP Editor.

Or you can set it to large.

Unused

Images

Bootstrap Documentation
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Tables

Bootstrap Documentation
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Accordion

Bootstrap Documentation

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alerts

Bootstrap Documentation

Badge

Bootstrap Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

PrimarySecondarySuccessDangerWarningInfoLightDark

Overview

Bootstrap Documentation
We'll never share your email with anyone else.
Radios buttons

Disabled forms

Bootstrap Documentation
Disabled radios buttons

Validation

Bootstrap Documentation
Looks good !
Looks good !
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

List group

Bootstrap Documentation
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis inA simple primary list group itemA simple secondary list group itemA simple success list group itemA simple danger list group itemA simple warning list group itemA simple info list group itemA simple light list group itemA simple dark list group item

Popovers

Bootstrap Documentation

Scrollspy

Bootstrap Documentation

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson+1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Spinners

Bootstrap Documentation

Tooltips

Bootstrap Documentation