CINXE.COM
Style Guide - Algolia Style Guide
<!DOCTYPE html> <html class="mod mod-hub hub-light" lang="en"> <head> <title>Style Guide - Algolia Style Guide</title> <!-- Favicon --> <link rel="icon" href="https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoiYWxnb2xpYS1icmFuZFwvZmlsZVwvY2tLM0xwQ0FVUkxUc2pvbm9vcVMucG5nIn0:algolia-brand:PUjbQw3G65s5_U438ztCA8PkYhQhU3yqHoLmHEwguOY?width={width}" type="image/x-icon" /> <!-- This product is built using third-party software, as described here: https://app.frontify.com/licenses.md --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://cdn.frontify.com/css/frontify-common.6c8d4e2aebb77894.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.frontify.com/css/frontify-guideline.1b88793f9b2172a1.css" /> <meta name="x-csrf-token" content="42c789bd10b6f6cb9a266812772c0b3cd044e55ae4bd3ad9e8bdf562bbc75e6b"> <meta property="og:title" content="Style Guide" /> <meta property="og:description" content="A Powerful Brand Powered by Frontify" /> <style class="hub-appearance-css" type="text/css">.a-p, .page-content .block, .co-editor, .cm-setting-typostyle__label--body, .cm-setting-typostyle__preview--body{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(54, 57, 90);font-size: 16px;line-height: 1.5;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;letter-spacing: normal;}.a-h1, .page-content .page-title, .co-editor h1, .co-editor h1, .cm-setting-typostyle__label--heading1, .cm-setting-typostyle__preview--heading1, .quill-h1, .a-image-caption h1{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(54, 57, 90);font-size: 56px;line-height: 1.3;font-weight: 300;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.a-h2, .page-content .block h2, .page-content .section-title, .co-editor h2, .co-editor h2, .cm-setting-typostyle__label--heading2, .cm-setting-typostyle__preview--heading2, .quill-h2, .a-image-caption h2{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(54, 57, 90);font-size: 36px;line-height: 1.3;font-weight: 300;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.a-h3, .page-content .block h3, .co-editor h3, .cm-setting-typostyle__label--heading3, .cm-setting-typostyle__preview--heading3, .quill-h3, .a-image-caption h3{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(54, 57, 90);font-size: 28px;line-height: 1.3;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.a-h4, .page-content .block h4, .co-editor h4, .cm-setting-typostyle__label--heading4, .cm-setting-typostyle__preview--heading4, .quill-h4, .a-image-caption h4{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(54, 57, 90);font-size: 24px;line-height: 1.3;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.o-collection-area__title, .o-library__assets-title, .o-library__document-category-title{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(54, 57, 90);font-size: 18px;line-height: 1.3;font-weight: 300;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 0;letter-spacing: normal;}.a-custom1, .co-editor .custom1, .cm-setting-typostyle__label--custom1, .cm-setting-typostyle__preview--custom1, .quill-custom1, .a-image-caption .custom1{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(0,0,0,1);font-size: 16px;line-height: 1.3;font-weight: bold;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.a-custom2, .co-editor .custom2, .cm-setting-typostyle__label--custom2, .cm-setting-typostyle__preview--custom2, .quill-custom2, .a-image-caption .custom2{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(0,0,0,1);font-size: 16px;line-height: 1.3;font-weight: bold;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.a-custom3, .co-editor .custom3, .cm-setting-typostyle__label--custom3, .cm-setting-typostyle__preview--custom3, .quill-custom3, .a-image-caption .custom3{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(0,0,0,1);font-size: 16px;line-height: 1.3;font-weight: bold;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 10px;letter-spacing: normal;}.a-quote, .page-content .block .quote, .cm-setting-typostyle__label--quote, .co-editor blockquote, .co-editor blockquote .link, .cm-setting-typostyle__preview--quote, .quill-blockquote, .a-image-caption blockquote{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(90, 94, 154);font-size: 16px;line-height: 1.3;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;margin-bottom: 10px;letter-spacing: normal;}.a-image-title, .page-content .block .a-image-title, .cm-setting-typostyle__label--image-title, .cm-setting-typostyle__preview--image-title{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(0,0,0,1);font-size: 16px;line-height: 1.4;font-weight: normal;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 3px;letter-spacing: normal;}.a-image-caption, .page-content .block .a-image-caption, .co-editor--image-caption, .cm-setting-typostyle__label--image-caption, .cm-setting-typostyle__preview--image-caption{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(153, 153, 153);font-size: 14.4px;line-height: 1.5;font-weight: normal;text-transform: none;font-style: normal;text-decoration: none;letter-spacing: normal;position: relative;}.a-link, .mod-block-text .richtext a, .co-editor .link, .cm-setting-typostyle__label--link, .cm-setting-typostyle__preview--link, .a-image-caption .link, .a-image-title .link{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(0, 61, 255);font-size: 12px;line-height: 1.3;font-weight: 600;text-transform: uppercase;font-style: normal;text-decoration: none;margin-bottom: 10px;letter-spacing: 1px;}.a-link--color, .ffy-lnk, .o-medialibrary__filter-selected, .o-medialibrary__filter-radio:checked ~ .o-medialibrary__filter-bubble, .b-imagegrid__desc .link, .b-image__caption .link{color: rgb(0, 61, 255);}.cm-setting-typostyle__label--body, .cm-setting-typostyle__preview--body, .cm-setting-typostyle__label--documents, .cm-setting-typostyle__preview--documents, .cm-setting-typostyle__label--categories, .cm-setting-typostyle__preview--categories, .cm-setting-typostyle__label--pages, .cm-setting-typostyle__preview--pages, .cm-setting-typostyle__label--sections, .cm-setting-typostyle__preview--sections, .cm-setting-typostyle__label--heading1, .cm-setting-typostyle__preview--heading1, .cm-setting-typostyle__label--heading2, .cm-setting-typostyle__preview--heading2, .cm-setting-typostyle__label--heading3, .cm-setting-typostyle__preview--heading3, .cm-setting-typostyle__label--heading4, .cm-setting-typostyle__preview--heading4, .cm-setting-typostyle__label--custom1, .cm-setting-typostyle__preview--custom1, .cm-setting-typostyle__label--custom2, .cm-setting-typostyle__preview--custom2, .cm-setting-typostyle__label--custom3, .cm-setting-typostyle__preview--custom3, .cm-setting-typostyle__label--link, .cm-setting-typostyle__preview--link, .cm-setting-typostyle__label--quote, .cm-setting-typostyle__preview--quote, .cm-setting-typostyle__label--image-title, .cm-setting-typostyle__preview--image-title, .cm-setting-typostyle__label--image-caption, .cm-setting-typostyle__preview--image-caption{line-height: 1;margin: 0;}.a-navigation-categories, .document-sidebar .nav-pages h4, .cm-setting-typostyle__preview--categories, .cm-setting-typostyle__label--categories{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(150, 152, 195);font-size: 11px;line-height: 1.3;font-weight: 600;text-transform: uppercase;font-style: normal;text-decoration: none;letter-spacing: 1px;}.m-navdocuments__mobile-category-title{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 600;text-transform: uppercase;font-style: normal;text-decoration: none;letter-spacing: 1px;}.a-navigation-pages, .document-sidebar .nav-pages .item > a, .cm-setting-typostyle__preview--pages, .cm-setting-typostyle__label--pages, .document-sidebar .nav-pages .item > a > i{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(72, 76, 122);font-size: 16px;line-height: 1.3;font-weight: 400;text-transform: none;font-style: normal;text-decoration: normal;letter-spacing: 0;hyphens: none;-webkit-hyphens: none;}.m-navdocuments__mobile-page-link{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 400;text-transform: none;font-style: normal;text-decoration: normal;letter-spacing: 0;}.a-navigation-pages, .document-sidebar .nav-pages .item > a:hover, .document-sidebar .nav-pages .item > a:hover > i{color: rgb(54, 57, 90);background: rgba(255, 255, 255, 0);font-size: 16px;line-height: 1.3;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;letter-spacing: 0;}.a-navigation-pages, .document-sidebar .nav-pages .item.item-active > a, .document-sidebar .nav-pages .item.item-active > a > i{color: rgb(0, 61, 255);background: rgba(255, 255, 255, 0);font-size: 16px;line-height: 1.3;font-weight: 600;text-transform: none;font-style: normal;text-decoration: none;letter-spacing: 0;}.a-navigation-pages--active, .document-sidebar .nav-pages .item-active > a{font-weight: 700;}.a-navigation-sections, .document-sidebar .nav-sections > li > a, .cm-setting-typostyle__preview--sections, .cm-setting-typostyle__label--sections{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(119, 122, 175);font-size: 14px;line-height: 1.3;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;letter-spacing: 0;}.a-button-primary, .a-button-secondary, .a-button-tertiary, .cm-setting-button__button--button_primary, .cm-setting-button__instant-preview-button--button_primary, .btn-primary, .cm-setting-button__button--button_secondary, .cm-setting-button__instant-preview-button--button_secondary, .btn-secondary, .cm-setting-button__button--button_tertiary, .cm-setting-button__instant-preview-button--button_tertiary, .btn-tertiary{display: inline-block;border-style: solid;text-decoration: none;cursor: pointer;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;}.a-button-primary, .cm-setting-button__button--button_primary, .cm-setting-button__instant-preview-button--button_primary, .btn-primary{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(255, 255, 255);font-size: 12px;line-height: 1.3;font-weight: 600;text-transform: uppercase;font-style: normal;border-width: 0px;border-radius: 5px;border-color: rgb(84, 104, 255);background-color: rgb(0, 61, 255);padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;}.a-button-primary:hover, .a-button-primary:active, .btn-primary:hover, .btn-primary:active{color: rgb(255, 255, 255);border-color: rgb(50, 0, 236);background-color: rgb(2, 49, 200);}.a-button-secondary, .cm-setting-button__button--button_secondary, .cm-setting-button__instant-preview-button--button_secondary, .btn-secondary{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(0, 61, 255);font-size: 12px;line-height: 1.3;font-weight: 600;text-transform: uppercase;font-style: normal;border-width: 2px;border-radius: 5px;border-color: rgb(164, 186, 255);background-color: rgb(255, 255, 255);padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;}.a-button-secondary:hover, .a-button-secondary:active, .btn-secondary:hover, .btn-secondary:active{color: rgb(0, 61, 255);border-color: rgb(0, 61, 255);background-color: rgb(255, 255, 255);}.a-button-tertiary, .cm-setting-button__button--button_tertiary, .cm-setting-button__instant-preview-button--button_tertiary, .btn-tertiary{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgb(72, 76, 122);font-size: 12px;line-height: 1.3;font-weight: 600;text-transform: uppercase;font-style: normal;border-width: 2px;border-radius: 5px;border-color: rgb(214, 214, 231);background-color: rgb(255, 255, 255);padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;}.a-button-tertiary:hover, .a-button-tertiary:active, .btn-tertiary:hover, .btn-tertiary:active{color: rgb(54, 57, 90);border-color: rgb(72, 76, 122);background-color: rgb(255, 255, 255);}.document-sidebar{position: absolute;}.cm-btn--brandcolor-inverted{background: rgba(255,255,255,1);border-color: rgba(255,255,255,1);color: rgb(0, 61, 255);}.cm-btn--brandcolor-inverted:hover, .cm-btn--brandcolor-inverted:active, .cm-btn--brandcolor-inverted:focus{background: rgb(0, 61, 255);border-color: rgba(255,255,255,1);color: rgba(255,255,255,1);}.block-dosanddonts-images__grid--dos .block-dosanddonts-images__grid__item__title{border-color: rgba(13,229,137,1.00);color: rgba(13,229,137,1.00);}.block-dosanddonts-images__grid--donts .block-dosanddonts-images__grid__item__title{border-color: rgba(212,20,42,1.00);color: rgba(212,20,42,1.00);}.block-dosanddonts-images__grid--donts .block-dosanddonts-images__grid__item__figure::after{background-color: rgba(212,20,42,1.00);}.block-dosanddonts-images__icon-do{font-size: 28px;color: rgba(13,229,137,1.00);}.block-dosanddonts-images__icon-dont{font-size: 28px;color: rgba(212,20,42,1.00);}.block-dosanddonts-images__title-container{margin-bottom: 10px;}.a-main-font{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}</style> <style class="document-appearance-css" type="text/css">.o-header, .co-settings__fieldset--header-typostyles .cm-setting[data-type="typostyle"], .co-settings__fieldset--header-typostyles .cm-setting-typostyle__preview--documents, .co-settings__fieldset--header-typostyles .cm-setting-typostyle__preview--heading, .co-settings__fieldset--header-typostyles .cm-setting-typostyle__preview--subheading, .co-settings__headersize .cm-setting-headersize__size-head{background: rgb(35, 38, 59);}.o-header{background-image: url("https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoiYWxnb2xpYS1icmFuZFwvZmlsZVwvaVdCQmtmU1h4dnlDTFhwN2FzcDkucG5nIn0:algolia-brand:rTfyVlSDqK0ozlUT18-rFfK6U59FDS4e6KPiK97KfDg?width={width}&rect=0,114.64243271246,800,233.33239734184&reference_width=800");}.m-navdocuments__item-link, .m-navdocuments__dropdown-item-toggle, .m-navdocuments__more-items .m-navdocuments__item-link, .m-navdocuments__item-toggle, .cm-setting-typostyle__preview--documents, .cm-setting-typostyle__label--documents, .m-nav-search__input, .nav-brandportal__item, .m-navdocuments__icon-more{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(255,255,255,0.8);font-size: 14px;letter-spacing: normal;line-height: 1.3;font-weight: 700;text-transform: none;font-style: normal;text-decoration: none;}.m-navdocuments__mobile-item-link, .m-navdocuments__mobile-document-group-toggle{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 700;text-transform: none;font-style: normal;text-decoration: none;}.m-navdocuments__open-document-setting{color: rgba(255,255,255,0.8);border-color: rgba(255,255,255,0.3);background: transparent;}.m-navdocuments__open-document-setting:hover, .m-navdocuments__open-document-setting:active{color: rgba(255,255,255,1.00);border-color: rgba(255,255,255,0.3);}.m-navdocuments__activate{color: rgba(255,255,255,0.8);border-color: rgba(255,255,255,0.3);background: transparent;}.m-navdocuments__activate:hover, .m-navdocuments__activate:active, .m-navdocuments__activate:focus{color: rgba(255,255,255,1.00);border-color: rgba(255,255,255,1.00);}.m-navdocuments__item--border-before{border-color: rgba(255,255,255,0.8);}.m-navdocuments__item-link.state-active, .m-navdocuments__item-toggle.state-active, .m-navdocuments__item-link:hover, .m-navdocuments__item-toggle:hover, .m-navdocuments__toggle-settings, .m-navdocuments__item--more:hover > .m-navdocuments__item-link, .nav-brandportal__item:hover{color: rgba(255,255,255,1.00);}.m-navdocuments__item-link.state-active, .m-navdocuments__item-toggle.state-active{border-bottom: 2px solid;border-color: rgba(255,255,255,0.8);}.m-navdocuments__more-items .m-navdocuments__item-link.state-active, .m-navdocuments__more-items .m-navdocuments__item-toggle.state-active{border-bottom: none;}.m-navdocuments__toggle{color: rgba(255,255,255,0.8);}.m-navdocuments__toggle:hover, .m-navdocuments__toggle:active{color: rgba(255,255,255,1.00);}.o-header__logo-wrapper{left: 0px;top: 7px;}.o-header__logo-upload{font-family: "Sora", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size: 14px;line-height: 1.3;font-weight: 700;text-transform: none;font-style: normal;}.m-nav-search__icon, .m-nav-search__input, .nav-brandportal__item, .nav-tools__lang-toggle, .nav-tools__print{color: rgba(255,255,255,0.8);}.mod-c-brand-portal-link:hover{color: rgba(255,255,255,1.00);}.m-nav-search__icon:hover, .m-nav-search__icon-active, .nav-tools__lang-toggle:hover, .nav-tools__print:hover{color: rgba(255,255,255,1.00);}.m-nav-search__input{background: rgba(255,255,255,0.33);color: black;}.editor-enabled .o-header__logo-wrapper{border: 1px dashed rgba(255,255,255,0.8);color: rgba(255,255,255,0.8);}.editor-enabled .o-header__logo-wrapper:hover{border-color: rgba(255,255,255,1.00);color: rgba(255,255,255,1.00);}.cm-setting-typostyle__label--heading, .cm-setting-typostyle__preview--heading, .header-hero__heading{font-family: "Poppins", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(255, 255, 255, 0.9);letter-spacing: 0;font-size: 56px;line-height: 1.2;font-weight: 600;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 15px;}.cm-setting-typostyle__label--subheading, .cm-setting-typostyle__preview--subheading, .header-hero__subheading{font-family: "Poppins", "Space Grotesk Frontify", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color: rgba(255, 255, 255, 0.7);font-size: 1.25rem;letter-spacing: 0;line-height: 1.2;font-weight: 400;text-transform: none;font-style: normal;text-decoration: none;margin-top: 0;margin-bottom: 15px;}.co-settings__fieldset--header-typostyles .cm-setting-typostyle__preview--heading, .co-settings__fieldset--header-typostyles .cm-setting-typostyle__preview--documents, .co-settings__fieldset--subheader-typostyles .cm-setting-typostyle__preview--subheading{padding: 10px;}.cm-setting-typostyle__label--heading, .cm-setting-typostyle__preview--heading, .cm-setting-typostyle__label--subheading, .cm-setting-typostyle__preview--subheading{line-height: 1;margin: 0;}.o-header__logo{width: auto;height: 32px;}.o-library__search{border-radius: 26px;}.o-library__search-btn{border-radius: 26px;}.o-librarymain__tile-content--colored{background: rgb(0, 61, 255);color: rgba(255,255,255,1);}</style> <link rel="stylesheet" type="text/css" href="https://frontify-artifacts.com/cl5w9yz1l00010lw8dvragbie.e74d7d7b53658cf6da33a7e4d7c3d93b99c8c59067babb353231b7fc31cf0084.css" onload="this.setAttribute('data-loaded', 'true')" /> <link rel="stylesheet" type="text/css" href="https://frontify-artifacts.com/cldju6bkp0001a8w43x1fgzzu.f17341032e2eb9ba5d2649d1fb7ea42a875cc6124bbfc0e7976be438d241947d.css" onload="this.setAttribute('data-loaded', 'true')" /> <link rel="stylesheet" type="text/css" href="https://frontify-artifacts.com/clncxpkhl00014muq6fm3u7i0.7492d2c56236cfac4e3a275eb7d9c560824a95f2710eaeb4de59fc8484a29dd5.css" onload="this.setAttribute('data-loaded', 'true')" /> <!-- lazy load webfonts --> <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> <script type="text/javascript"> var data = {"provider":{"google":{"families":["Sora:400,300","Sora:400","Sora:400,600","Sora:400","Sora:400,700","Sora:400,300","Sora:400,600","Poppins:400,600","Poppins:400"]}}}; for (p in data.provider) { if (p === 'google') { var request = {'google': data.provider[p]}; WebFont.load(request); } else if (p === 'typekit') { for(id in data.provider[p].id) { var token = data.provider[p].id[id]; var request = {}; request[p] = { id: token }; WebFont.load(request); } } } </script> </head> <body class="mod mod-document document " data-editmode="" data-hub="1" data-hub-title="Algolia Style Guide" data-authenticated="" data-editor="" data-editing="" data-document="1" data-document-title="Style Guide" data-document-mode="DEFAULT" data-document-is-child-of-document-group="" data-project="1" data-brand="1" data-printview="" data-is-brandportal="" data-brandhome-draft="0" data-brandportal-enabled="" data-baseurl="/document/1" data-searchmapping="" data-user-name="" data-user-signup-mode="" data-public="" data-public-link-enabled="1" data-collapsible="disabled" data-share-url-default="" data-translator="" data-translation-language="" data-main-font-css="Sora" data-sticky="enabled" data-adobe-creative-cloud-libraries-integration-enabled="" > <div class="main-content" data-powerbar-visibility="hidden" data-login-button-settings="{"enabled":false,"background":"rgba(0,61,255,1.00)","color":"#fff"}" > <div class="mod mod-skip-to-main-content skip-to-main-content"></div> <div class="mod mod-c-outstandingpayment co-outstandingpayment"></div> <div class="mod mod-c-globalmessage c-globalmessage c-globalmessage--hidden"> <div class="c-globalmessage__container js-c-globalmessage__container c-globalmessage__container--fixed"></div> <div class="c-globalmessage__spacer"></div> </div> <header id="top" class="mod mod-header o-header js-o-header header-size-m" > <div class="container row o-header__container"> <div class="row o-header__upper"> <div class="o-header__main-logo js-o-header__main-logo logo-available"> <a class="o-header__logo-wrapper btn-logo btn-upload btn-upload-logo js-o-header__logo-link" href="/hub/1" > <img class="js-o-header__logo o-header__logo" src="https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoiYWxnb2xpYS1icmFuZFwvZmlsZVwveXpEbzVvc1hXNTlGcVlnWlQ2SEguc3ZnIn0:algolia-brand:Bbl0TCQZ4yWnfRou9C9wQjeQxx0QVhpbULuoYy4-AX4?width={width}" alt="Go to Algolia Style Guide" data-test-id="logo" /> <label class="o-header__logo-upload" for="o-header__fileupload-logo" > Upload Logo </label> </a> </div> <nav class="mod mod-navdocuments" role="navigation" aria-label="Brand documents" ></nav> <div class="header-main__right js-header-main__right"> <div class="mod mod-c-brand-portal-link c-brand-portal-link"></div> <div class="mod mod-navsearch m-nav-search"> <div id="guideline-search"></div> <div id="react-ai-brand-assistant"></div> </div> </div> <div class="mod mod-settings-header o-settings-header" data-mode="default" ></div> </div> </div> <div class="container row"> <div class="js-header-hero header-hero header-hero--center"> <div class="header-hero__heading js-header-hero__heading" data-editable="true" data-field="heading" > Algolia Brand & Style Guide </div> <p class="header-hero__subheading js-header-hero__subheading" data-editable="true" data-field="subheading" > A Brand toolkit comprising resources and guidance </p> </div> </div> </header> <div id="react-modal"></div> <div class="container js-container-document row"> <div class="document-sidebar"> <nav role="navigation" class="mod mod-navsidebar nav nav-pages state-hidden" aria-label="Document pages" > <div class="nav-pages__navigation-manager-container js-nav-pages__navigation-manager-container"> <div class="nav-pages__sidebar-navigation"> Sidebar navigation </div> <button class="nav-pages__open-navigation-manager js-nav-pages__open-navigation-manager" aria-label="Navigation Manager"> <i class="ca-icon--diagram-tree ca-icon--sm"></i> </button> <div class="js-category-items category-items"> <div class="category js-category" data-category="5" data-category-slug="intro" > <h4 class="category-title js-category-title">Intro</h4> <div class="js-category-pages-container category-pages-container"> <ul class="category-pages"> <li class="item item-link-internal js-item-link-internal" data-page="13" data-link-type="internal" > <a class="js-item-link-anchor" href="#/intro/welcome" > <span class="item-link-text js-item-link-text"> Welcome! </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> </ul> </li> </ul> </div> </div> <div class="category js-category" data-category="1" data-category-slug="basics" > <h4 class="category-title js-category-title">Basics</h4> <div class="js-category-pages-container category-pages-container"> <ul class="category-pages"> <li class="item item-link-internal js-item-link-internal" data-page="1" data-link-type="internal" > <a class="js-item-link-anchor" href="#/basics/algolia-logo" > <span class="item-link-text js-item-link-text"> Algolia Logo </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="10"> <a href="#/basics/algolia-logo/color-variations"> Color Variations </a> </li> <li class="item-section " data-id="52"> <a href="#/basics/algolia-logo/containers"> Containers </a> </li> <li class="item-section " data-id="11"> <a href="#/basics/algolia-logo/downloads"> Downloads </a> </li> <li class="item-section " data-id="20"> <a href="#/basics/algolia-logo/guidance"> Guidance </a> </li> <li class="item-section " data-id="28"> <a href="#/basics/algolia-logo/algolia-and-partners"> Algolia and Partners </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="2" data-link-type="internal" > <a class="js-item-link-anchor" href="#/basics/colors" > <span class="item-link-text js-item-link-text"> Colors </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="18"> <a href="#/basics/colors/color-range"> Color Range </a> </li> <li class="item-section " data-id="12"> <a href="#/basics/colors/gray-color"> Gray Color </a> </li> <li class="item-section " data-id="14"> <a href="#/basics/colors/accent-colors"> Accent Colors </a> </li> <li class="item-section " data-id="50"> <a href="#/basics/colors/tonic-color"> Tonic color </a> </li> <li class="item-section " data-id="13"> <a href="#/basics/colors/secondary-colors"> Secondary Colors </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="14" data-link-type="internal" > <a class="js-item-link-anchor" href="#/basics/gradients" > <span class="item-link-text js-item-link-text"> Gradients </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="3" data-link-type="internal" > <a class="js-item-link-anchor" href="#/basics/typography" > <span class="item-link-text js-item-link-text"> Typography </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="15"> <a href="#/basics/typography/algolia-primary-typeface"> Algolia Primary Typeface </a> </li> <li class="item-section " data-id="1"> <a href="#/basics/typography/typeface-scale"> Typeface Scale </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="4" data-link-type="internal" > <a class="js-item-link-anchor" href="#/basics/icons" > <span class="item-link-text js-item-link-text"> Icons </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="9"> <a href="#/basics/icons/web-icons"> Web Icons </a> </li> <li class="item-section " data-id="8"> <a href="#/basics/icons/feature-icons"> Feature icons </a> </li> </ul> </li> </ul> </div> </div> <div class="category js-category" data-category="2" data-category-slug="visual-language" > <h4 class="category-title js-category-title">Visual language</h4> <div class="js-category-pages-container category-pages-container"> <ul class="category-pages"> <li class="item item-link-internal js-item-link-internal" data-page="28" data-link-type="internal" > <a class="js-item-link-anchor" href="#/visual-language/the-spotlight" > <span class="item-link-text js-item-link-text"> The Spotlight </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="51"> <a href="#/visual-language/the-spotlight/spotlight-examples"> Spotlight examples </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="5" data-link-type="internal" > <a class="js-item-link-anchor" href="#/visual-language/photography" > <span class="item-link-text js-item-link-text"> Photography </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="17" data-link-type="internal" > <a class="js-item-link-anchor" href="#/visual-language/digital-assets" > <span class="item-link-text js-item-link-text"> Digital Assets </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="57"> <a href="#/visual-language/digital-assets/light-background"> Light Background </a> </li> <li class="item-section " data-id="58"> <a href="#/visual-language/digital-assets/dark-background"> Dark Background </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="6" data-link-type="internal" > <a class="js-item-link-anchor" href="#/visual-language/3d-illustrations" > <span class="item-link-text js-item-link-text"> 3D Illustrations </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> </ul> </li> </ul> </div> </div> <div class="category js-category" data-category="6" data-category-slug="content" > <h4 class="category-title js-category-title">Content</h4> <div class="js-category-pages-container category-pages-container"> <ul class="category-pages"> <li class="item item-link-internal js-item-link-internal" data-page="19" data-link-type="internal" > <a class="js-item-link-anchor" href="#/content/editorial" > <span class="item-link-text js-item-link-text"> Editorial </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="21"> <a href="#/content/editorial/standards-and-guidelines"> Standards and Guidelines </a> </li> <li class="item-section " data-id="23"> <a href="#/content/editorial/abbreviations"> Abbreviations </a> </li> <li class="item-section " data-id="24"> <a href="#/content/editorial/acronyms"> Acronyms </a> </li> <li class="item-section " data-id="25"> <a href="#/content/editorial/algolia-references"> Algolia References </a> </li> <li class="item-section " data-id="26"> <a href="#/content/editorial/anthropomorphism"> Anthropomorphism </a> </li> <li class="item-section " data-id="27"> <a href="#/content/editorial/capitalization"> Capitalization </a> </li> <li class="item-section " data-id="29"> <a href="#/content/editorial/emphasis"> Emphasis </a> </li> <li class="item-section " data-id="30"> <a href="#/content/editorial/job-titles"> Job Titles </a> </li> <li class="item-section " data-id="31"> <a href="#/content/editorial/lists"> Lists </a> </li> <li class="item-section " data-id="32"> <a href="#/content/editorial/numbers"> Numbers </a> </li> <li class="item-section " data-id="33"> <a href="#/content/editorial/punctuation"> Punctuation </a> </li> <li class="item-section " data-id="34"> <a href="#/content/editorial/web-elements"> Web Elements </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="21" data-link-type="internal" > <a class="js-item-link-anchor" href="#/content/algolia-slide-template" > <span class="item-link-text js-item-link-text"> Algolia Slide Template </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="41"> <a href="#/content/algolia-slide-template/slide-template-2025"> Slide Template 2025 </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="22" data-link-type="internal" > <a class="js-item-link-anchor" href="#/content/algolia-descriptions" > <span class="item-link-text js-item-link-text"> Algolia Descriptions </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="42"> <a href="#/content/algolia-descriptions/company-profile"> Company Profile </a> </li> <li class="item-section " data-id="43"> <a href="#/content/algolia-descriptions/tagline"> Tagline </a> </li> <li class="item-section " data-id="44"> <a href="#/content/algolia-descriptions/pr-boilerplate"> PR Boilerplate </a> </li> <li class="item-section " data-id="45"> <a href="#/content/algolia-descriptions/35-word-description"> 35-Word description </a> </li> <li class="item-section " data-id="46"> <a href="#/content/algolia-descriptions/50-word-description"> 50-Word description </a> </li> <li class="item-section " data-id="56"> <a href="#/content/algolia-descriptions/elevator-pitch"> Elevator Pitch </a> </li> </ul> </li> </ul> </div> </div> <div class="category js-category" data-category="8" data-category-slug="external-comms" > <h4 class="category-title js-category-title">External Comms</h4> <div class="js-category-pages-container category-pages-container"> <ul class="category-pages"> <li class="item item-link-internal js-item-link-internal" data-page="20" data-link-type="internal" > <a class="js-item-link-anchor" href="#/external-comms/social-media" > <span class="item-link-text js-item-link-text"> Social Media </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="36"> <a href="#/external-comms/social-media/introduction"> Introduction </a> </li> <li class="item-section " data-id="38"> <a href="#/external-comms/social-media/what-do-our-policies-mean"> What do our policies mean? </a> </li> <li class="item-section " data-id="39"> <a href="#/external-comms/social-media/guidelines"> Guidelines </a> </li> <li class="item-section " data-id="55"> <a href="#/external-comms/social-media/social-media-channel-banners"> Social Media Channel Banners </a> </li> </ul> </li> <li class="item item-link-internal js-item-link-internal" data-page="24" data-link-type="internal" > <a class="js-item-link-anchor" href="#/external-comms/wallpapers" > <span class="item-link-text js-item-link-text"> Wallpapers </span> <span data-o-tooltip="Draft" class="o-tooltip js-o-navsidebar__draft-bubble o-navsidebar__draft-bubble "></span> </a> <ul class="nav nav-sections"> <li class="item-section " data-id="53"> <a href="#/external-comms/wallpapers/desktop"> Desktop </a> </li> <li class="item-section " data-id="54"> <a href="#/external-comms/wallpapers/mobile"> Mobile </a> </li> </ul> </li> </ul> </div> </div> </div> <div class="js-uncategorized uncategorized"> <div class="js-category-pages-container category-pages-container state-open"> <ul class="js-uncategorized-pages uncategorized-pages"> </ul> </div> </div> </div> </nav> </div> <div class="mod mod-contentmanager content-manager js-contentmanager" data-test-id="content-manager" id="content-manager"> <div class="page page-empty js-skiptomaincontent__target" data-navigation-manager-enabled="1" data-id="" > <main class="page-content"> <h1 class="page-title js-page-title" data-test-id="page-title"></h1> <div class="js-content-manager__content"></div> </main> </div> </div> </div> <!-- js-o-sidebar-settings is also used to prevent clicks in the sidebar from unfocusing block in Feature/Guideline/ContentManager/components/FocusableWrapper.tsx --> <div class="mod mod-sidebar-settings o-sidebar-settings js-o-sidebar-settings"> <div class="react-container"></div> </div> </div> <div class="mod mod-terms-banner m-terms-banner state-hidden " data-enabled="" data-message="<p></p>" data-message-hash="8fd2aba9f77c4a3e14584f7536e00884" data-redirect-url="" data-banner-background-color="rgba(255,255,255,1)" data-banner-shadow-enabled="" data-prevent-user-interaction="" > <div class="m-terms-banner__container js-m-terms-banner__container"> <div class="m-terms-banner__message js-m-terms-banner__message"></div> <div class="m-terms-banner__buttons"> <button class="m-terms-banner__button js-m-terms-banner__accept a-button-primary"> Accept </button> <button class="m-terms-banner__button js-m-terms-banner__decline a-button-secondary"> Decline </button> </div> </div> </div> <div class="mod mod-c-swal"></div> <div class="mod mod-c-payment co-payment clearfix"></div> <div class="mod mod-c-downloader co-downloader js-co-downloader"></div> <div class="mod mod-email-change-request"></div> <!-- Setup Global Application Config --> <script type="text/javascript"> window.currentLanguage = "en" || window.currentLanguage; window.__frontify_do_not_use_or_you_will_be_fired = { context: {"route_initial":true,"view":"styleguide","user":[],"marketplace_app_cdn_url":"https:\/\/frontify-artifacts.com","appearance":{"background":null,"callout":{"tip":"rgb(13, 229, 137)","info":"rgb(0, 61, 255)","note":"rgb(250, 160, 75)","warning":"rgb(212, 20, 42)"},"logo":null,"headings":null,"navigation":{"pages":{"size":"16px","color":"rgb(72, 76, 122)","family":"inherit","italic":false,"weight":"400","provider":"system","underline":false,"uppercase":false,"family_css":"inherit","size_hover":"16px","color_hover":"rgb(54, 57, 90)","line_height":"1.3","size_active":"16px","color_active":"rgb(0, 61, 255)","italic_hover":false,"weight_hover":"400","italic_active":false,"letterspacing":0,"weight_active":"600","underline_hover":false,"uppercase_hover":false,"underline_active":false,"uppercase_active":false,"line_height_hover":"1.3","line_height_active":"1.3","letterspacing_hover":0,"letterspacing_active":0,"background_color_hover":"rgba(255, 255, 255, 0)","background_color_active":"rgba(255, 255, 255, 0)"},"sections":{"size":"14px","color":"rgb(119, 122, 175)","family":"inherit","italic":false,"weight":"400","provider":"system","underline":false,"uppercase":false,"family_css":"inherit","line_height":"1.3","letterspacing":0},"categories":{"size":"11px","color":"rgb(150, 152, 195)","family":"Sora","italic":false,"weight":"600","provider":"google","underline":false,"uppercase":true,"family_css":"Sora","line_height":"1.3","letterspacing":"1px"}},"font":null,"preview":null,"main_font":{"family":"Sora","provider":"Google","family_css":"Sora","display_name":""},"body":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"400","uppercase":"","size":"16px","line_height":"1.5","color":"rgb(54, 57, 90)","italic":"","underline":"","letter_spacing":"normal","margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"body","css_styles":{"font-family":"Sora","font-weight":"400","text-transform":"none","font-size":"16px","line-height":"1.5","color":"rgb(54, 57, 90)","font-style":"normal","text-decoration":"none","letter-spacing":"normal"},"css_selector":"p","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"heading1":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"300","uppercase":"","size":"56px","line_height":"1.3","color":"rgb(54, 57, 90)","italic":"","underline":"","letter_spacing":"normal","margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"heading1","css_styles":{"font-family":"Sora","font-weight":"300","text-transform":"none","font-size":"56px","line-height":"1.3","color":"rgb(54, 57, 90)","font-style":"normal","text-decoration":"none","letter-spacing":"normal","margin-top":"0px","margin-bottom":"10px"},"css_selector":"h1","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"heading2":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"300","uppercase":"","size":"36px","line_height":"1.3","color":"rgb(54, 57, 90)","italic":"","underline":"","letter_spacing":"normal","margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"heading2","css_styles":{"font-family":"Sora","font-weight":"300","text-transform":"none","font-size":"36px","line-height":"1.3","color":"rgb(54, 57, 90)","font-style":"normal","text-decoration":"none","letter-spacing":"normal","margin-top":"0px","margin-bottom":"10px"},"css_selector":"h2","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"heading3":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"400","uppercase":"","size":"28px","line_height":"1.3","color":"rgb(54, 57, 90)","italic":"","underline":"","letter_spacing":"normal","margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"heading3","css_styles":{"font-family":"Sora","font-weight":"400","text-transform":"none","font-size":"28px","line-height":"1.3","color":"rgb(54, 57, 90)","font-style":"normal","text-decoration":"none","letter-spacing":"normal","margin-top":"0px","margin-bottom":"10px"},"css_selector":"h3","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"heading4":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"400","uppercase":"","size":"24px","line_height":"1.3","color":"rgb(54, 57, 90)","italic":"","underline":"","letter_spacing":"normal","margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"heading4","css_styles":{"font-family":"Sora","font-weight":"400","text-transform":"none","font-size":"24px","line-height":"1.3","color":"rgb(54, 57, 90)","font-style":"normal","text-decoration":"none","letter-spacing":"normal","margin-top":"0px","margin-bottom":"10px"},"css_selector":"h4","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"custom1":{"family":null,"family_css":null,"frame":null,"provider":null,"weight":"bold","uppercase":null,"size":"16px","line_height":"1.3","color":null,"italic":null,"underline":null,"letter_spacing":null,"margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"custom1","css_styles":{"font-weight":"bold","text-transform":"none","font-size":"16px","line-height":"1.3","font-style":"normal","text-decoration":"none","margin-top":"0px","margin-bottom":"10px"},"css_selector":".custom1","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"custom2":{"family":null,"family_css":null,"frame":null,"provider":null,"weight":"bold","uppercase":null,"size":"16px","line_height":"1.3","color":null,"italic":null,"underline":null,"letter_spacing":null,"margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"custom2","css_styles":{"font-weight":"bold","text-transform":"none","font-size":"16px","line-height":"1.3","font-style":"normal","text-decoration":"none","margin-top":"0px","margin-bottom":"10px"},"css_selector":".custom2","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"custom3":{"family":null,"family_css":null,"frame":null,"provider":null,"weight":"bold","uppercase":null,"size":"16px","line_height":"1.3","color":null,"italic":null,"underline":null,"letter_spacing":null,"margin_top":"0px","margin_bottom":"10px","display_name":null,"text_type":"custom3","css_styles":{"font-weight":"bold","text-transform":"none","font-size":"16px","line-height":"1.3","font-style":"normal","text-decoration":"none","margin-top":"0px","margin-bottom":"10px"},"css_selector":".custom3","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"link":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(0, 61, 255)","italic":"","underline":"","letter_spacing":"1px","margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"link","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(0, 61, 255)","font-style":"normal","text-decoration":"none","letter-spacing":"1px"},"css_selector":"a","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"quote":{"family":"Sora","family_css":"Sora","frame":null,"provider":"google","weight":"400","uppercase":"","size":"16px","line_height":"1.3","color":"rgb(90, 94, 154)","italic":"","underline":"","letter_spacing":"normal","margin_top":null,"margin_bottom":"10px","display_name":null,"text_type":"quote","css_styles":{"font-family":"Sora","font-weight":"400","text-transform":"none","font-size":"16px","line-height":"1.3","color":"rgb(90, 94, 154)","font-style":"normal","text-decoration":"none","letter-spacing":"normal","margin-bottom":"10px"},"css_selector":"blockquote","background_color":null,"border_width":null,"border_color":null,"border_radius":null,"border_style":null,"background_color_hover":null,"color_hover":null,"border_color_hover":null},"image_title":null,"image_caption":null,"button_primary":{"family":"Sora","family_css":"Sora","frame":{"top":"10","left":"20","right":"20","bottom":"10"},"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(255, 255, 255)","italic":"","underline":null,"letter_spacing":null,"margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"buttonPrimary","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(255, 255, 255)","font-style":"normal","text-decoration":"none","background-color":"rgb(0, 61, 255)","border-width":"0px","border-color":"rgb(84, 104, 255)","border-radius":"5px","border-style":"solid"},"css_selector":".btn-primary","background_color":"rgb(0, 61, 255)","border_width":"0px","border_color":"rgb(84, 104, 255)","border_radius":"5px","border_style":"solid","background_color_hover":"rgb(2, 49, 200)","color_hover":"rgb(255, 255, 255)","border_color_hover":"rgb(50, 0, 236)"},"button_secondary":{"family":"Sora","family_css":"Sora","frame":{"top":"10","left":"20","right":"20","bottom":"10"},"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(0, 61, 255)","italic":"","underline":null,"letter_spacing":null,"margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"buttonSecondary","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(0, 61, 255)","font-style":"normal","text-decoration":"none","background-color":"rgb(255, 255, 255)","border-width":"2px","border-color":"rgb(164, 186, 255)","border-radius":"5px","border-style":"solid"},"css_selector":".btn-secondary","background_color":"rgb(255, 255, 255)","border_width":"2px","border_color":"rgb(164, 186, 255)","border_radius":"5px","border_style":"solid","background_color_hover":"rgb(255, 255, 255)","color_hover":"rgb(0, 61, 255)","border_color_hover":"rgb(0, 61, 255)"},"button_tertiary":{"family":"Sora","family_css":"Sora","frame":{"top":"10","left":"20","right":"20","bottom":"10"},"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(72, 76, 122)","italic":"","underline":null,"letter_spacing":null,"margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"buttonTertiary","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(72, 76, 122)","font-style":"normal","text-decoration":"none","background-color":"rgb(255, 255, 255)","border-width":"2px","border-color":"rgb(214, 214, 231)","border-radius":"5px","border-style":"solid"},"css_selector":".btn-tertiary","background_color":"rgb(255, 255, 255)","border_width":"2px","border_color":"rgb(214, 214, 231)","border_radius":"5px","border_style":"solid","background_color_hover":"rgb(255, 255, 255)","color_hover":"rgb(54, 57, 90)","border_color_hover":"rgb(72, 76, 122)"},"button_primary_hover":{"family":"Sora","family_css":"Sora","frame":{"top":"10","left":"20","right":"20","bottom":"10"},"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(255, 255, 255)","italic":"","underline":null,"letter_spacing":null,"margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"buttonPrimaryHover","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(255, 255, 255)","font-style":"normal","text-decoration":"none","background-color":"rgb(2, 49, 200)","border-width":"0px","border-color":"rgb(50, 0, 236)","border-radius":"5px"},"css_selector":".btn-primary:hover","background_color":"rgb(0, 61, 255)","border_width":"0px","border_color":"rgb(84, 104, 255)","border_radius":"5px","border_style":null,"background_color_hover":"rgb(2, 49, 200)","color_hover":"rgb(255, 255, 255)","border_color_hover":"rgb(50, 0, 236)"},"button_secondary_hover":{"family":"Sora","family_css":"Sora","frame":{"top":"10","left":"20","right":"20","bottom":"10"},"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(0, 61, 255)","italic":"","underline":null,"letter_spacing":null,"margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"buttonSecondaryHover","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(0, 61, 255)","font-style":"normal","text-decoration":"none","background-color":"rgb(255, 255, 255)","border-width":"2px","border-color":"rgb(0, 61, 255)","border-radius":"5px"},"css_selector":".btn-secondary:hover","background_color":"rgb(255, 255, 255)","border_width":"2px","border_color":"rgb(164, 186, 255)","border_radius":"5px","border_style":null,"background_color_hover":"rgb(255, 255, 255)","color_hover":"rgb(0, 61, 255)","border_color_hover":"rgb(0, 61, 255)"},"button_tertiary_hover":{"family":"Sora","family_css":"Sora","frame":{"top":"10","left":"20","right":"20","bottom":"10"},"provider":"google","weight":"600","uppercase":"1","size":"12px","line_height":"1.3","color":"rgb(72, 76, 122)","italic":"","underline":null,"letter_spacing":null,"margin_top":null,"margin_bottom":null,"display_name":null,"text_type":"buttonTertiaryHover","css_styles":{"font-family":"Sora","font-weight":"600","text-transform":"uppercase","font-size":"12px","line-height":"1.3","color":"rgb(54, 57, 90)","font-style":"normal","text-decoration":"none","background-color":"rgb(255, 255, 255)","border-width":"2px","border-color":"rgb(72, 76, 122)","border-radius":"5px"},"css_selector":".btn-tertiary:hover","background_color":"rgb(255, 255, 255)","border_width":"2px","border_color":"rgb(214, 214, 231)","border_radius":"5px","border_style":null,"background_color_hover":"rgb(255, 255, 255)","color_hover":"rgb(54, 57, 90)","border_color_hover":"rgb(72, 76, 122)"},"search_icon":"icon-search4","login_button":null,"terms":{"enabled":false,"message":"<p><\/p>","message_hash":"8fd2aba9f77c4a3e14584f7536e00884"},"privacy":null,"asset_viewer_enabled":null},"product":"styleguide","success":true,"brand":{"id":1,"name":"Algolia Brand Guidelines","slug":"algolia-brand-guidelines","creator":9,"color":"rgb(0, 61, 255)","account_id":4001181,"logo_file_id":"CEtKsvTUXBqMzctiG7HT","logo_settings":"{\"x\": 70.7276945660828, \"y\": 48.70854274482484, \"width\": 720.5753010549363, \"height\": 720.5753010549363, \"reference_width\": 800}","image":"https:\/\/cdn-assets-eu.frontify.com\/s3\/frontify-enterprise-files-eu\/eyJwYXRoIjoiYWxnb2xpYS1icmFuZFwvZmlsZVwvcHpLR2E4VmRpSjlpNHNOUEdqR3UucG5nIn0:algolia-brand:gd_22PkXtbKf6wS03wehfe2J1DsloTe6JSuQR1B8kWg?width={width}&rect=70.727694566083,48.708542744825,720.57530105494,720.57530105494&reference_width=800","permission_view_brand_updates_list":false},"project":{"id":1,"account":4001181,"hub_id":1,"project_type":"STYLEGUIDE","permissions":{"view":false,"comment":false,"translate":false,"edit":false,"admin":false}},"features":["ANALYTICS","ASSET_AUDIT_TRAIL","ASSET_EXPIRY_NOTIFICATIONS","ASSET_LIFECYCLE","AUTO_TAGGING","BRAND_UPDATE","COLLECTIONS","CONDITIONAL_FACETS","CORE_ACCESS_REQUEST","CORE_BRANDED_LOGIN_PAGE","CORE_CUSTOM_EMAIL_TEMPLATE","CORE_CUSTOM_SUBDOMAIN","CORE_DASHBOARD","CORE_MULTIPLE_STYLEGUIDE","CORE_USER_GROUPS","CUSTOM_CROPPING","DAM_METADATA","DOWNLOAD_REQUEST","FOCAL_POINT","MARKETPLACE","MARKETPLACE_SHARE_LINK","PROJECT_BRIEFING","PROJECT_METADATA","PUBLIC_API","PUBLISHING_SAVE_TO","STYLEGUIDE_BRAND_PORTAL","STYLEGUIDE_CHANGELOG","STYLEGUIDE_PUBLIC_SHARING","STYLEGUIDE_SEARCH","STYLEGUIDE_SEGMENT_ANALYTICS","STYLEGUIDE_SETTING_SEARCH_ICON","STYLEGUIDE_STATS","STYLEGUIDE_TERMS","TARGETS","TWO_FACTOR_AUTHENTICATION","WORKSPACE_APPROVAL_REQUESTS","WORKSPACE_EXTERNAL_ASSET","WORKSPACE_EXTERNAL_ASSET_PASSWORD_PROTECTION","WORKSPACE_INSPECT","WORKSPACE_PROTOTYPING","WORKSPACE_WORKFLOW","WORKSPACE_WORKFLOW_CUSTOM"],"products":["BRAND_PORTAL","DAM","DOCUMENT_LIBRARY","ICON_LIBRARY","LOGO_LIBRARY","STYLEGUIDE","WORKSPACE"],"account":{"development_flags":["ASSET_SEARCH_DAM_MODULE","HIDE_PATTERN_LIBRARY","MARKETPLACE_INTEGRATION","NEW_SECTION_WRAPPER","NEW_SECTION_WRAPPER_MIGRATED","SEARCH_HIGHLIGHTER_SINGLE_FRAGMENT","SINGLE_SELECT_FACETS_BUGFIX","STYLEGUIDE_NEW_IMAGE_BLOCK"]},"global_message":{"enabled":false,"text":"","admin_only":true},"authenticated":false}, documents: {"brandhome":{"id":1,"title":"Home","url":"\/hub\/1","draft":0,"enabled":0,"active":false,"hide_in_nav":null},"brand_portal":{"enabled":false,"url":null,"label":null},"items":{"1":{"id":1,"created":"2021-10-26 17:55:46","mode":"DEFAULT","title":"Style Guide","slug":"style-guide","heading":"Algolia Brand & Style Guide","description":null,"link_type":"internal","link_url":null,"settings":null,"link_settings":null,"appearance":{"hero":{"heading":{"size":"56px","color":"rgba(255, 255, 255, 0.9)","family":"Poppins","italic":"","weight":"600","provider":"google","underline":"","uppercase":"","family_css":"Poppins","margin_top":"0","line_height":"1.2","letterspacing":"0","margin_bottom":"15px"},"subheading":{"size":"1.25rem","color":"rgba(255, 255, 255, 0.7)","family":"Poppins","italic":"","weight":"400","provider":"google","underline":"","uppercase":"","family_css":"Poppins","margin_top":"0","line_height":"1.2","letterspacing":"0","margin_bottom":"15px"}},"logo":{"x":25,"y":32,"width":"auto","height":"32"},"header":{"size":"m"},"background":{"url":"https:\/\/cdn-assets-eu.frontify.com\/s3\/frontify-enterprise-files-eu\/eyJwYXRoIjoiYWxnb2xpYS1icmFuZFwvZmlsZVwvaVdCQmtmU1h4dnlDTFhwN2FzcDkucG5nIn0:algolia-brand:rTfyVlSDqK0ozlUT18-rFfK6U59FDS4e6KPiK97KfDg?width={width}&rect=0,114.64243271246,800,233.33239734184&reference_width=800","i18n":"","color":"rgb(35, 38, 59)","image":{"x":0,"y":0,"width":null,"height":null},"url_id":"18","version":1637188056,"url_crop":{"x":"0","y":"114.64243271246","width":"800","height":"233.33239734184","reference_width":"800"},"url_isWorkspaceAsset":""}},"sort":1,"background_file_id":"Z4B8NwHpXUqS4PZdsWYP","background_settings":"{\"x\":0,\"y\":114.64243271246193,\"width\":800,\"height\":233.3323973418445,\"reference_width\":800}","document_group_id":null,"link":"\/document\/1"},"9":{"id":9,"created":"2024-06-25 18:58:11","mode":"MEDIALIBRARY","title":"Digital Assets","slug":"digital-assets","heading":"Digital Assets","description":null,"link_type":"internal","link_url":null,"settings":{"project":14},"link_settings":null,"appearance":{"hero":{"heading":{"size":"56px","color":"rgba(255, 255, 255, 0.9)","family":"Poppins","italic":"","weight":"600","provider":"google","underline":"","uppercase":"","family_css":"Poppins","margin_top":"0","line_height":"1.2","letterspacing":"0","margin_bottom":"15px"},"subheading":{"size":"1.25rem","color":"rgba(255, 255, 255, 0.7)","family":"Poppins","italic":"","weight":"400","provider":"google","underline":"","uppercase":"","family_css":"Poppins","margin_top":"0","line_height":"1.2","letterspacing":"0","margin_bottom":"15px"}},"logo":{"x":25,"y":32,"width":"auto","height":"32"},"header":{"size":"m","size1":"s"},"background":{"url":"https:\/\/cdn-assets-eu.frontify.com\/s3\/frontify-enterprise-files-eu\/eyJwYXRoIjoiYWxnb2xpYS1icmFuZFwvZmlsZVwvckZKM1ppMjFiZFJKaVVWclVTMkMucG5nIn0:algolia-brand:6GAOic3fWUxZjhigbw9L1zugWmq0D-wlRquDY5oMwlg?width={width}","i18n":"","color":"rgb(35, 38, 59)","image":{"x":0,"y":0,"width":null,"height":null},"url_id":"18","version":1637188056,"url_crop":"","url_isWorkspaceAsset":""},"medialibrary":{"viewer_theme":"light","facettes_layout":"pills"}},"sort":3,"background_file_id":"C7heSwaxubUdnWRjMRsC","background_settings":null,"document_group_id":null,"link":"\/document\/9"}},"document_groups":[],"navigation_mode":"default"}, }; window.APPLICATION_CONFIG = { version: "web-app-2025-02-17T17-31-28Z-8ffbc715", locales: {"de.json":"https:\/\/cdn.frontify.com\/locales\/de.852e835448a64fbd.json","en.json":"https:\/\/cdn.frontify.com\/locales\/en.e23486c1c92cef5d.json","fr.json":"https:\/\/cdn.frontify.com\/locales\/fr.c7659fcf03cb8966.json"}, sentryClientDsn: "https:\/\/07efd26759d575d252eb3fb4f5539d3d@sentryapp.appsupport.frontify.dev\/51", thirdParty: { amplitude: { enabled: true, region: "EU", amplitudeId: "ebff31b9da313efd071a193786671111", accountId: 4001181, enterpriseEnabled: true, enterpriseId: 4001181, plan: "ENTERPRISE", isPaid: true, isTrial: false, user: { id: null, creator: null, signUpDate: null, referer: null, landing: null, }, }, intercom: { enabled: false, settings: null, }, pusher: { enabled: null, key: null, cluster: null, projectIds: null, }, segment: { enabled: false, key: null, user: { signUpMode: null, }, }, sentry: { enabled: true, dsn: "https:\/\/07efd26759d575d252eb3fb4f5539d3d@sentryapp.appsupport.frontify.dev\/51", }, }, }; </script> <!-- load frontify libraries --> <script data-react-mode="production" src="https://cdn.frontify.com/js/frontify-react-vendors-production.0cdc5cdb0b02fcfd.js"></script> <script src="https://cdn.frontify.com/js/frontify-runtime.1d91e39358945357.js"></script> <script src="https://cdn.frontify.com/js/frontify-vendors.78225291c3b85ac7.js"></script> <script src="https://cdn.frontify.com/js/frontify-common.86d45533b16f1294.js"></script> <script src="https://cdn.frontify.com/js/frontify-guideline.ae7a0bb5ed27430d.js"></script> <script src="https://frontify-artifacts.com/cl5w9yz1l00010lw8dvragbie.6c4eb371d16648cf85b22601fe54d5213774148323b1e38c8f9638938906b553.js" onload="this.setAttribute('data-loaded', 'true')"></script> <script src="https://frontify-artifacts.com/cldju6bkp0001a8w43x1fgzzu.e54f3e45d71ac0cfc5abaaa09d7299e6f17f139ead92d44bcf6c753efb11af49.js" onload="this.setAttribute('data-loaded', 'true')"></script> <script src="https://frontify-artifacts.com/clncxpkhl00014muq6fm3u7i0.a2c3d025d5b7ae8fbb2dfef835dce6b270bfc13ca43115590cf9aa8f0ead5414.js" onload="this.setAttribute('data-loaded', 'true')"></script> <script src="https://cdn.frontify.com/js/frontify-bootstrap.9d5d70b4aa728d7f.js"></script> <div class="js-co-viewer__container"></div> <div class="js-co-modals__container"></div> </body> </html>