stylepoint - Guidepoint's Style Guide

Color Palette

background-color: bg-yellow

color: text-yellow

Hex: FFCD00
RGB: 255 205 0
HSL: 48 100 50

background-color: bg-black

color: text-black

Hex: 000000
RGB: 0 0 0
HSL: 0 0 0

background-color: bg-charcoalblack

color: text-charcoalblack

Hex: 212322
RGB: 33 35 34
HSL: 150 3 13

background-color: bg-white

color: text-white

Hex: ffffff
RGB: 255 255 255
HSL: 0 0 100

background-color: bg-blue

color: text-blue

Hex: 008bce
RGB: 0 139 206
HSL: 200 100 40

background-color: bg-lightblue

color: text-lightblue

Hex: 7fc5e6
RGB: 127 197 230
HSL: 199 67 70

background-color: bg-lightblue2

color: text-lightblue2

Hex: 008bce
RGB: 229 246 255
HSL: 201 100 94

background-color: bg-darkgrey

color: text-darkgrey

Hex: 5e5e5e
RGB: 94 94 94
HSL: 0 0 36

background-color: bg-darkgrey2

color: text-darkgrey2

Hex: 666666
RGB:102 102 102
HSL: 0 0 40

background-color: bg-midgrey1

color: text-midgrey1

Hex: 7e7e7e
RGB: 126 126 126
HSL: 0 0 49

background-color: bg-midgrey2

color: text-midgrey2

Hex: 999999
RGB: 153 153 153
HSL: 0 0 60

background-color: bg-lightgrey

color: text-lightgrey

Hex: e9e9e9
RGB: 233 233 233
HSL: 0 0 91

background-color: bg-lightgrey2

color: text-lightgrey2

Hex: f2f2f2
RGB: 242 242 242
HSL: 0 0 95

background-color: bg-red

color: text-red

Hex: af272f
RGB: 175 39 47
HSL: 356 63 42

background-color: bg-orange

color: text-orange

Hex: ff7f32
RGB: 255 127 50
HSL: 23 100 60

bg-cerise text-cerise	bg-matisse text-matisse	bg-sea-green text-sea-green	bg-burnt-orange text-burnt-orange	bg-royal-purple text-royal-purple	bg-summer-sky text-summer-sky	bg-persian-green text-persian-green	bg-cardinal text-cardinal
bg-java text-java	bg-olive text-olive	bg-elm text-elm	bg-crazy-orange text-crazy-orange	bg-apple-blossom text-apple-blossom	bg-kashmir-blue text-kashmir-blue	bg-cherry text-cherry	bg-oxford-blue text-oxford-blue
bg-dandelion text-dandelion	bg-magenta text-magenta	bg-rose text-rose	bg-pompadour text-pompadour	bg-daisy text-daisy	bg-silver text-silver	bg-amethyst text-amethyst	bg-black-currant text-black-currant

Headers

<h1> = ~22px

<h2> = 20px

<h3> = 18px

<h4> = 16px

<h5> = 14px

<h6> = 12px

Headers class - Match h-tag sizing

Grid Reference

A lot of the initial Bootstrap conventions have remained the same. A container .row precedes nested children with .col.

However there is no more xs variable. This is a mobile first framework. If you write col-12 you are saying that from the smallest viewport up to the largest that a column will span the entire screen. If you wrote this instead col-12 col-md-10 the element would be 12 columns until it you hit the medium viewport size whereby the element will shrink to 10 columns. This paragrah is using this same principal if you care to inspect it further.

col-12 col-sm-6 col-md-3 bg-lightblue

col bg-lightgrey

Spacing Reference

Margin

m-0

m-1

m-2

m-3

m-4

m-5

Padding

p-0

p-1

p-2

p-3

p-4

p-5

Specific Sides - works the same for padding (p)

my-2

mx-2

mt-3

mr-3

mb-3

ml-3

Horizontal centering

mx-auto // note need to declare a fixed width here

Integer(0-5) = Pixels
0 = 0px | 1 = 4px | 2 = 8px | 3 = 16px | 4 = 25px | 5 = 48px

Buttons

Standard

    <button type="button" class="btn btn-primary m-1">Primary</button>
    <button type="button" class="btn btn-secondary m-1">Secondary</button>
    <button type="button" class="btn btn-success m-1">Success</button>
    <button type="button" class="btn btn-danger m-1">Danger</button>
    <button type="button" class="btn btn-warning m-1">Warning</button>
    <button type="button" class="btn btn-info m-1">Info</button>
    <button type="button" class="btn btn-light m-1">Light</button>
    <button type="button" class="btn btn-dark m-1">Dark</button>
    <button type="button" class="btn btn-link m-1">Link</button>

Varying Sizes

    <button type="button" class="btn btn-primary btn-sm">Small Button</button>
    <button type="button" class="btn btn-primary">Regular Button</button>
    <button type="button" class="btn btn-primary btn-lg">Large Button</button>

Outlined Buttons

    <button type="button" class="btn btn-outline-primary m-2">Primary</button>
    <button type="button" class="btn btn-outline-secondary m-2">Secondary</button>
    <button type="button" class="btn btn-outline-success m-2">Success</button>
    <button type="button" class="btn btn-outline-danger m-2">Danger</button>
    <button type="button" class="btn btn-outline-warning m-2">Warning</button>
    <button type="button" class="btn btn-outline-info m-2">Info</button>
    <button type="button" class="btn btn-outline-light m-2">Light</button>
    <button type="button" class="btn btn-outline-dark m-2">Dark</button>
    <button type="button" class="btn btn-outline-link m-2">Link</button>

Disabled Buttons

    <button type="button" class="btn btn-primary disabled="">Primary</button>
    <button type="button" class="btn btn-secondary disabled="">Secondary</button>

Disabled Anchor Tags acting like a button

Primary link Link

    <a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
    <a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Grouped Buttons

Basic

    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>

Badges in Buttons

    <button type="button" class="btn btn-primary">
        Notifications <span class="badge blue mx-1">4</span>
    </button>

Form

Basic Inputs

    <form>
        <div class="form-group">
            <label for="inputEmail">Email address</label>
            <input type="email" class="form-control mb-2" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email">

            <label for="inputText">Plain input</label>
            <input type="text" class="form-control mb-2" id="inputText" aria-describedby="emailHelp" placeholder="Enter text">
        </div>
    </form>

Different Sizing

    <input class="form-control form-control-lg my-3" type="text" placeholder="large input">
    <input class="form-control form-control-sm my-3" type="text" placeholder="small input">

Input group

Text inputs with submit

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox" placeholder="Email">
    </div>

    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-primary py-2 px-4" type="button">Go!</button>
        </div>
    </div>

Textarea with Button

    <div class="input-group">
        <textarea class="form-control" aria-label="With textarea"></textarea>
        <div class="input-group-append">
            <button class="btn btn-primary" type="button">Go!</button>
        </div>
    </div>

Input with Checkbox

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox" placeholder="Email">
    </div>

Basic Selects

Example select

Modals

Tabs — reference


    …
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active px-2 px-md-4" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Bio & Responses</a>
    …


    <a class="nav-link active px-2 px-md-4" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Bio & Responses</a>

Icons

extra small


  <span class="icon-avatar icon-xs"></span>

small


    <span class="icon-avatar icon-sm"></span>

large


    <span class="icon-avatar icon-lg"></span>


    <span class="icon-hamburger"></span>
    <span class="icon-hamburger--hover"></span>
    <span class="icon-hamburger active"></span>


    <span class="icon-flyout-menu"></span>


    <span class="icon-projects-mobile-menu"></span>
    <span class="icon-projects-mobile-menu--hover"></span>
    <span class="icon-projects-mobile-menu active"></span>


    <span class="icon-avatar-mobile-menu"></span>
    <span class="icon-avatar-mobile-menu--hover"></span>
    <span class="icon-avatar-mobile-menu active"></span>


    <span class="icon-view-list"></span>
    <span class="icon-view-list--hover"></span>
    <span class="icon-view-list active"></span>


    <span class="icon-view-details"></span>
    <span class="icon-view-details--hover"></span>
    <span class="icon-view-details active"></span>


    <span class="icon-view-tiles"></span>
    <span class="icon-view-tiles--hover"></span>
    <span class="icon-view-tiles active"></span>


    <span class="icon-advisors-for-review"></span>
    <span class="icon-advisors-for-review--hover"></span>
    <span class="icon-advisors-for-review active"></span>


    <span class="icon-avatar"></span>
    <span class="icon-avatar--hover"></span>
    <span class="icon-avatar active"></span>


    <span class="icon-company"></span>
    <span class="icon-company--hover"></span>


    <span class="icon-favorite-new"></span>
    <span class="icon-favorite-new--hover"></span>
    <span class="icon-favorite-new active"></span>


    <span class="icon-filter"></span>
    <span class="icon-filter--hover"></span>
    <span class="icon-filter active"></span>
    <span class="icon-filter--outline"></span>


    <span class="icon-folder-projects-open"></span>
    <span class="icon-project-open"></span>
    <span class="icon-project-open--hover"></span>
    <span class="icon-project-open active"></span>
    <span class="icon-project-open--white bg-black-currant"></span>


    <span class="icon-project-requested"></span>
    <span class="icon-project-requested--hover"></span>
    <span class="icon-project-requested active"></span>
    <span class="icon-project-requested--white bg-black-currant"></span>


    <span class="icon-project-closed"></span>
    <span class="icon-project-closed--hover"></span>
    <span class="icon-project-closed active"></span>
    <span class="icon-project-closed--white bg-black-currant"></span>


    <span class="icon-project-closed-authorization"></span>
    <span class="icon-project-closed-authorization--hover"></span>
    <span class="icon-project-closed-authorization active"></span>


    <span class="icon-projects"></span>
    <span class="icon-projects--hover"></span>
    <span class="icon-projects active"></span>


    <span class="icon-get-more-actions"></span>
    <span class="icon-get-more-actions--hover"></span>
    <span class="icon-get-more-actions active"></span>


    <span class="icon-group-meetings"></span>
    <span class="icon-group-meetings--hover"></span>
    <span class="icon-group-meetings active"></span>


    <span class="icon-advisor-selected"></span>
    <span class="icon-advisor-selected--hover"></span>
    <span class="icon-advisor-selected active"></span>


    <span class="icon-advisor-not-interested"></span>
    <span class="icon-advisor-not-interested--hover"></span>
    <span class="icon-advisor-not-interested active"></span>


    <span class="icon-advisors-completed"></span>
    <span class="icon-advisors-completed--hover"></span>
    <span class="icon-advisors-completed active"></span>


    <span class="icon-advisor-no-bio"></span>
    <span class="icon-advisor-no-bio--hover"></span>
    <span class="icon-advisor-no-bio active"></span>


    <span class="icon-advisor-no-response"></span>
    <span class="icon-advisor-no-response--hover"></span>
    <span class="icon-advisor-no-response active"></span>


    <span class="icon-advisor-no-job-history"></span>
    <span class="icon-advisor-no-job-history--hover"></span>
    <span class="icon-advisor-no-job-history active"></span>


    <span class="icon-library"></span>
    <span class="icon-library--hover"></span>
    <span class="icon-library active"></span>


    <span class="icon-log-out"></span>
    <span class="icon-log-out--hover"></span>
    <span class="icon-log-out active"></span>


    <span class="icon-pin"></span>
    <span class="icon-pin--hover"></span>
    <span class="icon-pin active"></span>
    <span class="icon-pin--outline"></span>


    <span class="icon-roundtable"></span>
    <span class="icon-roundtable--hover"></span>
    <span class="icon-roundtable active"></span>


    <span class="icon-sector"></span>
    <span class="icon-sector--hover"></span>
    <span class="icon-sector active"></span>


    <span class="icon-settings"></span>
    <span class="icon-settings--black"></span>
    <span class="icon-settings--blue"></span>


    <span class="icon-survey"></span>
    <span class="icon-survey--hover"></span>
    <span class="icon-survey active"></span>


    <span class="icon-teleconferences"></span>
    <span class="icon-teleconferences--hover"></span>
    <span class="icon-teleconferences active"></span>


    <span class="icon-group-meetings"></span>
    <span class="icon-group-meetings--hover"></span>
    <span class="icon-group-meetings active"></span>


    <span class="icon-chevron"></span>
    <span class="icon-chevron--hover"></span>
    <span class="icon-chevron active"></span>


    <span class="icon-close-new"></span>
    <span class="icon-close-new--hover"></span>
    <span class="icon-close-new active"></span>
    <span class="icon-close-new--white bg-black-currant"></span>


    <span class="icon-arrow-go-back"></span>
    <span class="icon-arrow-go-back--hover"></span>
    <span class="icon-arrow-go-back active"></span>


    <span class="icon-search"></span>
    <span class="icon-search--hover"></span>
    <span class="icon-search active"></span>


    <span class="icon-time-occurrence"></span>
    <span class="icon-time-occurrence--hover"></span>
    <span class="icon-time-occurrence active"></span>


    <span class="icon-location"></span>
    <span class="icon-location--hover"></span>
    <span class="icon-location active"></span>


    <span class="icon-star-rating"></span>
    <span class="icon-star-rating--hover"></span>
    <span class="icon-star-rating active"></span>


    <span class="icon-info"></span>
    <span class="icon-info--hover"></span>
    <span class="icon-info active"></span>


    <span class="icon-guidepoint"></span>
    <span class="icon-guidepoint--hover"></span>
    <span class="icon-guidepoint active"></span>
    <span class="icon-guidepoint--outline"></span>


    <span class="icon-warning"></span>
    <span class="icon-warning--hover"></span>
    <span class="icon-warning active"></span>


  <span class="icon-lock"></span>
  <span class="icon-lock--hover"></span>
  <span class="icon-lock active"></span>


    <span class="icon-social-media-facebook"></span>
    <span class="icon-social-media-facebook--hover"></span>
    <span class="icon-social-media-facebook active"></span>


    <span class="icon-social-media-twitter"></span>
    <span class="icon-social-media-twitter--hover"></span>
    <span class="icon-social-media-twitter active"></span>


    <span class="icon-social-media-instagram"></span>
    <span class="icon-social-media-instagram--hover"></span>
    <span class="icon-social-media-instagram active"></span>


    <span class="icon-social-media-linkedin"></span>
    <span class="icon-social-media-linkedin--hover"></span>
    <span class="icon-social-media-linkedin active"></span>


    <span class="icon-not-available"></span>


    <span class="icon-reports-all-usage"></span>


    <span class="icon-calendar"></span>
    <span class="icon-calendar--hover"></span>
    <span class="icon-calendar active"></span>


    <span class="icon-transcript"></span>
    <span class="icon-transcript--hover"></span>
    <span class="icon-transcript active"></span>


    <span class="icon-excel"></span>


    <span class="icon-adobe-pdf"></span>


    <span class="icon-email"></span>


  <span class="icon-gp-logo"></span>


<span class="icon-yellow-tile--transcript"></span>
<span class="icon-yellow-tile--teleconferences"></span>
<span class="icon-yellow-tile--advisors"></span>
<span class="icon-yellow-tile--survey"></span>
<span class="icon-yellow-tile--roundtable"></span>
<span class="icon-yellow-tile--group-meetings"></span>
<span class="icon-yellow-tile--company"></span>


  <span class="icon-delete"></span>
  <span class="icon-delete--hover"></span>
  <span class="icon-delete active"></span>
  <span class="icon-delete--white bg-black-currant"></span>


  <span class="icon-edit"></span>
  <span class="icon-edit--hover"></span>
  <span class="icon-edit active"></span>
  <span class="icon-edit--white bg-black-currant"></span>


  <span class="icon-sound"></span>
  <span class="icon-sound--hover"></span>
  <span class="icon-sound active"></span>


  <span class="icon-plus"></span>
  <span class="icon-plus--hover"></span>
  <span class="icon-plus active"></span>
  <span class="icon-plus--white bg-black-currant"></span>


  <span class="icon-notifications"></span>
  <span class="icon-notifications--hover"></span>
  <span class="icon-notifications active"></span>
  <span class="icon-notifications--outline"></span>


  <span class="icon-downloads"></span>
  <span class="icon-downloads--hover"></span>
  <span class="icon-downloads active"></span>


  <span class="icon-sort"></span>
  <span class="icon-sort--hover"></span>
  <span class="icon-sort active"></span>
  <span class="icon-sort--grey"></span>


  <span class="icon-angles"></span>
  <span class="icon-angles--hover"></span>
  <span class="icon-angles active"></span>
  <span class="icon-angles--grey"></span>


  <span class="icon-help"></span>
  <span class="icon-help--hover"></span>
  <span class="icon-help active"></span>
  <span class="icon-help--grey"></span>
  <span class="icon-help--yellow"></span>
  <span class="icon-help--white bg-black-currant"></span>


  <span class="icon-meetingavatar"></span>
  <span class="icon-meetingavatar--hover"></span>
  <span class="icon-meetingavatar active"></span>
  <span class="icon-meetingavatar--grey"></span>
  <span class="icon-meetingavatar--yellow"></span>
  <span class="icon-meetingavatar--white bg-black-currant"></span>


  <span class="icon-meetingphone"></span>
  <span class="icon-meetingphone--hover"></span>
  <span class="icon-meetingphone active"></span>
  <span class="icon-meetingphone--grey"></span>
  <span class="icon-meetingphone--yellow"></span>
  <span class="icon-meetingphone--white bg-black-currant"></span>


  <span class="icon-recordings-transcript"></span>
  <span class="icon-recordings-transcript--hover"></span>
  <span class="icon-recordings-transcript active"></span>
  <span class="icon-recordings-transcript--grey"></span>
  <span class="icon-recordings-transcript--yellow"></span>
  <span class="icon-recordings-transcript--white bg-black-currant"></span>


  <span class="icon-doublechevron"></span>
  <span class="icon-doublechevron--hover"></span>
  <span class="icon-doublechevron active"></span>
  <span class="icon-doublechevron--grey"></span>
  <span class="icon-doublechevron--greyandblack"></span>
  <span class="icon-doublechevron--white bg-black-currant"></span>


  <span class="icon-transcript-list"></span>
  <span class="icon-transcript-list--hover"></span>
  <span class="icon-transcript-list active"></span>
  <span class="icon-transcript-list--white bg-black-currant"></span>


    <span class="icon-sprite-icon-polls"></span>
    <span class="icon-sprite-icon-polls--hover"></span>
    <span class="icon-sprite-icon-polls active"></span>
    <span class="icon-sprite-icon-polls--grey"></span>
    <span class="icon-sprite-icon-polls--yellow"></span>
    <span class="icon-sprite-icon-polls--white bg-black-currant"></span>


    <span class="icon-sprite-survey"></span>
    <span class="icon-sprite-survey--hover"></span>
    <span class="icon-sprite-survey active"></span>
    <span class="icon-sprite-survey--grey"></span>
    <span class="icon-sprite-survey--yellow"></span>
    <span class="icon-sprite-survey--white bg-black-currant"></span>


    <span class="icon-sprite-meetings"></span>
    <span class="icon-sprite-meetings--hover"></span>
    <span class="icon-sprite-meetings active"></span>
    <span class="icon-sprite-meetings--grey"></span>
    <span class="icon-sprite-meetings--yellow"></span>
    <span class="icon-sprite-meetings--white bg-black-currant"></span>


    <span class="icon-sprite-phone-outline"></span>
    <span class="icon-sprite-phone-outline--hover"></span>
    <span class="icon-sprite-phone-outline active"></span>
    <span class="icon-sprite-phone-outline--grey"></span>
    <span class="icon-sprite-phone-outline--yellow"></span>
    <span class="icon-sprite-phone-outline--white bg-black-currant"></span>


    <span class="icon-sprite-reports-all-usage"></span>
    <span class="icon-sprite-reports-all-usage--hover"></span>
    <span class="icon-sprite-reports-all-usage active"></span>
    <span class="icon-sprite-reports-all-usage--grey"></span>
    <span class="icon-sprite-reports-all-usage--yellow"></span>
    <span class="icon-sprite-reports-all-usage--white bg-black-currant"></span>


    <span class="icon-sprite-sent-advisors-report"></span>
    <span class="icon-sprite-sent-advisors-report--hover"></span>
    <span class="icon-sprite-sent-advisors-report active"></span>
    <span class="icon-sprite-sent-advisors-report--grey"></span>
    <span class="icon-sprite-sent-advisors-report--yellow"></span>
    <span class="icon-sprite-sent-advisors-report--white bg-black-currant"></span>


    <span class="icon-sprite-teleconferences"></span>
    <span class="icon-sprite-teleconferences--hover"></span>
    <span class="icon-sprite-teleconferences active"></span>
    <span class="icon-sprite-teleconferences--grey"></span>
    <span class="icon-sprite-teleconferences--yellow"></span>
    <span class="icon-sprite-teleconferences--white bg-black-currant"></span>


    <span class="icon-sprite-requires-translator"></span>
    <span class="icon-sprite-requires-translator--hover"></span>
    <span class="icon-sprite-requires-translator active"></span>
    <span class="icon-sprite-requires-translator--grey"></span>
    <span class="icon-sprite-requires-translator--yellow"></span>
    <span class="icon-sprite-requires-translator--white bg-black-currant"></span>


    <span class="icon-sprite-video"></span>
    <span class="icon-sprite-video--hover"></span>
    <span class="icon-sprite-video active"></span>
    <span class="icon-sprite-video--grey"></span>
    <span class="icon-sprite-video--yellow"></span>
    <span class="icon-sprite-video--white bg-black-currant"></span>


    <span class="icon-sprite-audio"></span>
    <span class="icon-sprite-audio--hover"></span>
    <span class="icon-sprite-audio active"></span>
    <span class="icon-sprite-audio--grey"></span>
    <span class="icon-sprite-audio--yellow"></span>
    <span class="icon-sprite-audio--white bg-black-currant"></span>


    <span class="icon-sprite-view-list2"></span>
    <span class="icon-sprite-view-list2--hover"></span>
    <span class="icon-sprite-view-list2 active"></span>


    <span class="icon-sprite-consultation2"></span>
    <span class="icon-sprite-consultation2--hover"></span>
    <span class="icon-sprite-consultation2 active"></span>
    <span class="icon-sprite-consultation2--grey"></span>
    <span class="icon-sprite-consultation2--yellow"></span>
    <span class="icon-sprite-consultation2--white bg-black-currant"></span>

Badges — Reference


  <span class="badge badge-primary"></span>

Badge Primary


    <span class="badge badge-requested"></span>

Badge Requested


    <span class="badge badge-pending"></span>

Badge Pending


    <span class="badge badge-available"></span>

Badge Available


    <span class="badge badge-downloaded"></span>

Badge Downloaded


    <span class="badge badge-rsvp"></span>

Badge RSVP