[Skip to content](/content/pages/styleguide#MainContent/index.html) [Subscribe & Save 15%](/content/pages/subscribe "https://necessaire.com/pages/subscribe"/index.html) Free US Shipping \| Orders $75+ [Subscribe & Save 15%](/content/pages/subscribe "https://necessaire.com/pages/subscribe"/index.html) Free US Shipping \| Orders $75+ Close ## Menu [Shop](/content/pages/styleguide#mobile-primary-menu-1/index.html) - [Shop All](/content/collections/shop-all/index.html) - [New](/content/collections/new/index.html) - [Bestsellers](/content/collections/best-sellers/index.html) - [By Scent](/content/pages/scent/index.html) [Body](/content/pages/styleguide#mobile-primary-menu-2/index.html) - [All Body](/content/collections/body/index.html) - [Cleanse](/content/collections/cleanse/index.html) - [Moisture](/content/collections/body-lotion/index.html) - [Treatments](/content/collections/treatment/index.html) - [Exfoliants](/content/collections/exfoliator/index.html) - [Deodorant](/content/collections/deodorant-1/index.html) - [Hand](/content/collections/hand/index.html) - [Lip](/content/collections/lip/index.html) - [Objects](/content/collections/objects-1/index.html) [Hair](/content/pages/styleguide#mobile-primary-menu-3/index.html) - [All Hair](/content/collections/hair/index.html) - [Shampoo](/content/collections/shampoo/index.html) - [Conditioner](/content/collections/conditioner/index.html) - [Treatments](/content/collections/hair-treatments/index.html) - [Objects](/content/collections/objects-1/index.html) [Sets](/content/collections/kits/index.html) [Travel](/content/collections/travel/index.html) [About](/content/pages/styleguide#mobile-primary-menu-6/index.html) - [Awards](/content/pages/awards/index.html) - [Footprint](/content/pages/footprint/index.html) [My Account](/content/account/login "Login or register"/index.html) ## New! The Hand Wash + The Hand Lotion. # Styleguide This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file named `page.styles.liquid`. ## Table of Contents - [Fonts](/content/pages/styleguide#fonts/index.html) - [Colors](/content/pages/styleguide#docs-colors/index.html) - [Typography](/content/pages/styleguide#docs-typography/index.html) - [Buttons](/content/pages/styleguide#docs-buttons/index.html) - [Forms](/content/pages/styleguide#docs-forms/index.html) - [UI Elements](/content/pages/styleguide#docs-ui-elements/index.html) - [Breadcrumbs](/content/pages/styleguide#docs-breadcrumbs/index.html) - [Pagination](/content/pages/styleguide#docs-pagination/index.html) - [Social Sharing](/content/pages/styleguide#docs-social-sharing/index.html) - [Minimal Input](/content/pages/styleguide#docs-minimal-input/index.html) ## Fonts Graebenbach Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Graebenbach Black Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Graebenbach Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Graebenbach Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Graebenbach Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Graebenbach Medium Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Graebenbach Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ## Colors #### greyscale Black #111 `$black` White #fff `$white` Grey Bergamot #757575 `$grey-bergamot` Grey Silver #c4c4c4 `$grey-silver` Grey Seashell #f1f1f1 `$grey-seashell` #### Main Sand #c4c4bd `$sand` Eucalyptus #b2bab0 `$eucalyptus` Red #EB0000 `$red` Red Valencia #db4b4b `$red-valencia` ## Typography #### Headings # H1 Graebenbach Medium ## H2 Graebenbach Medium ### H3 Graebenbach Medium #### Type variations P1 Graebenbach Bold Regular P2 Graebenbach Bold P3 Graebenbach Bold Regular #### Paragraphs Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien. Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros. Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper. #### Type styles - **Strong** - _Emphasis_ - [Inline link](/content/pages/styleguide#/index.html) - Strike - Sup #### Text Utilities - .font-weight-normal - .font-weight-bold - .letter-spacing-base - .text-black - .text-grey-darkest - .text-grey-darker - .text-grey-dark - .text-grey - .text-grey-light - .text-grey-lighter - .text-white - .text-muted - .text-black-50 - .text-white-50 - .text-primary - .text-secondary - .text-success - .text-info - .text-warning - .text-danger #### Background Color Utilities - .bg-black - .bg-grey - .bg-grey-light - .bg-grey-lighter - .bg-white - .bg-primary - .bg-secondary - .bg-success - .bg-warning - .bg-danger ## Buttons [Primary button](/content/pages/styleguide#/index.html) [Secondary button](/content/pages/styleguide#/index.html) [Primary Outline button](/content/pages/styleguide#/index.html) [Secondary Outline button](/content/pages/styleguide#/index.html) [Primary button (Disabled)](/content/pages/styleguide#/index.html) [Secondary button (Disabled)](/content/pages/styleguide#/index.html) [Primary Outline button (Disabled)](/content/pages/styleguide#/index.html) [Secondary Outline button (Disabled)](/content/pages/styleguide#/index.html) [Block Level Primary Button](/content/pages/styleguide#/index.html) [Block Level Secondary Button](/content/pages/styleguide#/index.html) [Primary Outline button](/content/pages/styleguide#/index.html) [Secondary Outline button](/content/pages/styleguide#/index.html) [Link Button](/content/pages/styleguide#/index.html) [Small Primary Button](/content/pages/styleguide#/index.html) [Small Secondary Button](/content/pages/styleguide#/index.html) [Large Primary Button](/content/pages/styleguide#/index.html) [Large Secondary Button](/content/pages/styleguide#/index.html) ## Forms Forms are based on Bootstrap 4's form component. Simple examples to listed here to use as a reference for styling, for more detailed information about how they work, please see the [official documentation](https://getbootstrap.com/docs/4.0/components/forms). #### Default Forms Label Label 2 Text Field (Valid) Validation Feedback goes here Text Field (Error) Invalid Feedback goes here Label 3\-\- Choose --Option 1Option 2Option 3 \-\- Choose -- I'm helper text to explain what's going on with this form input. #### Invisible labels Add a class of `sr-only` to a label to visually hide it, while keeping it accessible to screen readers. Use the `placeholder` attribute as your visible label. **Note:** The `placeholder` attribute only works in IE10+, so invisible labels are disabled in IE9 and below. First Name Last Name Email #### Horizontal Forms Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your label elements as well so they’re vertically centered with their associated form controls. Text Field Placeholder Disabled Field Text Field (Valid) Text Field (Error) Select Field \-\- Choose --Option 1Option 2Option 3Option 4 \-\- Choose -- Text Area Default checkbox Default checkbox Disabled checkbox One Time Delivery Subscribe With Benefits Disabled radio Radio with Icon Second Radio with Icon Textarea ## UI Elements - Liquid error (templates/page.styles line 1057): Could not find asset snippets/icon-chevron-up.liquid #### Breadcrumbs #### Pagination [1](/content/pages/styleguide# ""/index.html)2[3](/content/pages/styleguide# ""/index.html)[10](/content/pages/styleguide# ""/index.html) #### Social Sharing [ShareShare on Facebook](https://www.facebook.com/sharer.php?u=https://necessaire.com "Share on Facebook") [TweetTweet on Twitter](https://twitter.com/share?text=&url=https://necessaire.com "Tweet on Twitter") [Pin itPin on Pinterest](https://pinterest.com/pin/create/button/?url=https://necessaire.com&media=//necessaire.com/cdn/shopifycloud/storefront/assets/no-image-2048-a2addb12_1024x1024.gif&description= "Pin on Pinterest") [TumblrShare on Tumblr](https://www.tumblr.com/share/link?url=https://necessaire.com&description= "Share on Tumblr") [EmailShare via Email](mailto:?subject=N%C3%A9cessaire&body=https://necessaire.com "Share via Email") #### Minimal Input Normal Search Inverted Search Large Search CloseRemove Give The Gift Of Nécessaire. E-gift cards can be scheduled for immediate delivery or at a date and time of your choice. You will be able to email the gift card to an email address of your choice - your own email address or the email address of the person you are gifting. To To is required Invalid From From is required Invalid Message 0/210 Message is required Invalid Recipient's email Invalid Recipient's phone number Invalid Enter a mobile phone number Email and/or phone number is required ### When should we send your message? - On Delivery - Send Now - Send Later Select a method for your message Your message will be sent when you complete your order Your message will be sent at the selected date and time Date Date is required Select a date in the future Time12:00 AM12:30 AM1:00 AM1:30 AM2:00 AM2:30 AM3:00 AM3:30 AM4:00 AM4:30 AM5:00 AM5:30 AM6:00 AM6:30 AM7:00 AM7:30 AM8:00 AM8:30 AM9:00 AM9:30 AM10:00 AM10:30 AM11:00 AM11:30 AM12:00 PM12:30 PM1:00 PM1:30 PM2:00 PM2:30 PM3:00 PM3:30 PM4:00 PM4:30 PM5:00 PM5:30 PM6:00 PM6:30 PM7:00 PM7:30 PM8:00 PM8:30 PM9:00 PM9:30 PM10:00 PM10:30 PM11:00 PM11:30 PM Time is required Select a time in the future Your message will be sent when your order is delivered to your shipping address Save messageAdd to cart [Powered by](https://giftnote.com/) Message saved Gift card added to cart! Message removed Add a gift message 🎁Edit gift message 🎁 Check the balance of your gift card Searching... Not found Expired on Balance: Initial balance: Expires on: CloseRemove Give The Gift Of Nécessaire. To To is required Invalid From From is required Invalid Message 0/210 Message is required Invalid Recipient's email Invalid Recipient's phone number 244 results found No results found - United States+1 - Afghanistan+93 - Åland Islands+358 - Albania+355 - Algeria+213 - American Samoa+1 - Andorra+376 - Angola+244 - Anguilla+1 - Antigua & Barbuda+1 - Argentina+54 - Armenia+374 - Aruba+297 - Ascension Island+247 - Australia+61 - Austria+43 - Azerbaijan+994 - Bahamas+1 - Bahrain+973 - Bangladesh+880 - Barbados+1 - Belarus+375 - Belgium+32 - Belize+501 - Benin+229 - Bermuda+1 - Bhutan+975 - Bolivia+591 - Bosnia & Herzegovina+387 - Botswana+267 - Brazil+55 - British Indian Ocean Territory+246 - British Virgin Islands+1 - Brunei+673 - Bulgaria+359 - Burkina Faso+226 - Burundi+257 - Cambodia+855 - Cameroon+237 - Canada+1 - Cape Verde+238 - Caribbean Netherlands+599 - Cayman Islands+1 - Central African Republic+236 - Chad+235 - Chile+56 - China+86 - Christmas Island+61 - Cocos (Keeling) Islands+61 - Colombia+57 - Comoros+269 - Congo - Brazzaville+242 - Congo - Kinshasa+243 - Cook Islands+682 - Costa Rica+506 - Côte d’Ivoire+225 - Croatia+385 - Cuba+53 - Curaçao+599 - Cyprus+357 - Czechia+420 - Denmark+45 - Djibouti+253 - Dominica+1 - Dominican Republic+1 - Ecuador+593 - Egypt+20 - El Salvador+503 - Equatorial Guinea+240 - Eritrea+291 - Estonia+372 - Eswatini+268 - Ethiopia+251 - Falkland Islands+500 - Faroe Islands+298 - Fiji+679 - Finland+358 - France+33 - French Guiana+594 - French Polynesia+689 - Gabon+241 - Gambia+220 - Georgia+995 - Germany+49 - Ghana+233 - Gibraltar+350 - Greece+30 - Greenland+299 - Grenada+1 - Guadeloupe+590 - Guam+1 - Guatemala+502 - Guernsey+44 - Guinea+224 - Guinea-Bissau+245 - Guyana+592 - Haiti+509 - Honduras+504 - Hong Kong SAR China+852 - Hungary+36 - Iceland+354 - India+91 - Indonesia+62 - Iran+98 - Iraq+964 - Ireland+353 - Isle of Man+44 - Israel+972 - Italy+39 - Jamaica+1 - Japan+81 - Jersey+44 - Jordan+962 - Kazakhstan+7 - Kenya+254 - Kiribati+686 - Kosovo+383 - Kuwait+965 - Kyrgyzstan+996 - Laos+856 - Latvia+371 - Lebanon+961 - Lesotho+266 - Liberia+231 - Libya+218 - Liechtenstein+423 - Lithuania+370 - Luxembourg+352 - Macao SAR China+853 - Madagascar+261 - Malawi+265 - Malaysia+60 - Maldives+960 - Mali+223 - Malta+356 - Marshall Islands+692 - Martinique+596 - Mauritania+222 - Mauritius+230 - Mayotte+262 - Mexico+52 - Micronesia+691 - Moldova+373 - Monaco+377 - Mongolia+976 - Montenegro+382 - Montserrat+1 - Morocco+212 - Mozambique+258 - Myanmar (Burma)+95 - Namibia+264 - Nauru+674 - Nepal+977 - Netherlands+31 - New Caledonia+687 - New Zealand+64 - Nicaragua+505 - Niger+227 - Nigeria+234 - Niue+683 - Norfolk Island+672 - North Korea+850 - North Macedonia+389 - Northern Mariana Islands+1 - Norway+47 - Oman+968 - Pakistan+92 - Palau+680 - Palestinian Territories+970 - Panama+507 - Papua New Guinea+675 - Paraguay+595 - Peru+51 - Philippines+63 - Poland+48 - Portugal+351 - Puerto Rico+1 - Qatar+974 - Réunion+262 - Romania+40 - Russia+7 - Rwanda+250 - Samoa+685 - San Marino+378 - São Tomé & Príncipe+239 - Saudi Arabia+966 - Senegal+221 - Serbia+381 - Seychelles+248 - Sierra Leone+232 - Singapore+65 - Sint Maarten+1 - Slovakia+421 - Slovenia+386 - Solomon Islands+677 - Somalia+252 - South Africa+27 - South Korea+82 - South Sudan+211 - Spain+34 - Sri Lanka+94 - St. Barthélemy+590 - St. Helena+290 - St. Kitts & Nevis+1 - St. Lucia+1 - St. Martin+590 - St. Pierre & Miquelon+508 - St. Vincent & Grenadines+1 - Sudan+249 - Suriname+597 - Svalbard & Jan Mayen+47 - Sweden+46 - Switzerland+41 - Syria+963 - Taiwan+886 - Tajikistan+992 - Tanzania+255 - Thailand+66 - Timor-Leste+670 - Togo+228 - Tokelau+690 - Tonga+676 - Trinidad & Tobago+1 - Tunisia+216 - Turkey+90 - Turkmenistan+993 - Turks & Caicos Islands+1 - Tuvalu+688 - U.S. Virgin Islands+1 - Uganda+256 - Ukraine+380 - United Arab Emirates+971 - United Kingdom+44 - Uruguay+598 - Uzbekistan+998 - Vanuatu+678 - Vatican City+39 - Venezuela+58 - Vietnam+84 - Wallis & Futuna+681 - Western Sahara+212 - Yemen+967 - Zambia+260 - Zimbabwe+263 Invalid Enter a mobile phone number Email and/or phone number is required ### When should we send your message? - On Delivery - Send Now - Send Later Select a method for your message Your message will be sent when you complete your order Your message will be sent at the selected date and time Date Date is required Select a date in the future Time is required Select a time in the future Your message will be sent when your order is delivered to your shipping address Save messageAdd to cart [Powered by](https://giftnote.com/) Message saved Gift card added to cart! Message removed necessaire.com # necessaire.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension necessaire.com # necessaire.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension necessaire.com # necessaire.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension necessaire.com # necessaire.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension shop.app # shop.app is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension Close Cart Free Shipping Progress: 0% $75.00 To Qualify For Free Shipping. ## Your Cart #### Start Here [Shop Bestsellers](/content/collections/best-sellers/index.html)