Sigma Brand Guidelines February 2021 Building on our passion to provide data access to everyone, our visual direction unites dynamic data elements with organic textures. Sigma Brand Guidelines 3 04 Brand Attributes Table of 05 Logo 11 Color Contents 16 Typography 24 Shape System 36 Photography 47 Minimal UI & Product 1:1 51 Iconography 55 Illustration Sigma Brand Attributes 4 Brand Human-First Attributes Fresh Passionate Polished Sigma Brand Guidelines 5 Logo The Sigma Logo Lockup The Sigma Crane Symbol Scale & Clearspace Color Use Do's & Don'ts Sigma Logo 6 Sigma Logo Lockup The logo lockup consists of our brand symbol and our word-mark. The letter forms of the word-mark are clean, modern, and polished to exude a balance between inviting and 'you can trust us with your data' vibe. The crane symbol serves as a metaphor for what Sigma stands for. The triangles within the symbol represent data coming together as a dataset, which like the folds in origami, are malleable. Sigma Logo 7 Sigma Crane Symbol Depending on the context and the audience, the crane symbol can be used independently. In other cases, it should be used in partnership with the main logo lockup. As a general rule of thumb the crane symbol used independently is permissible for internal company contexts, like swag and signage. Sigma Logo 8 Logo Use 75px wide minimum Always allow for adequate clear space when using the Sigma logo lockup or crane symbol. Always use the Sigma logo lockup and crane symbol at a 25px wide minimum legible size. The logo lockup should be no smaller than 75 pixels wide and the logo symbol is 25 pixels wide. Clear space Minimum size Sigma Logo 9 Color Use Typography should only be black or white. White should only be used when a darker color contrasts effectively against the background. Primary color logo Primary color logo on black background Only use all black logo for gray scale layouts Only use all white for gray scale layouts and when placed on an image Sigma Logo 10 Logo No-Nos We appreciate your creativity, but the design of the Sigma logo is locked so please don't bastardize. Don't Stretch Horizontally Don't Add Effects To Logo Don't Rotate Logo Don't Reposition Elements in partnership with Dunder Mifflin Don't Stretch Vertically Don't Use Transparency Don't Change Logo Colors Don't Add Any Additional Elements Sigma Brand Guidelines 11 Color Hierarchy Specifications Pairings Sigma Color 12 Hierarchy Proper color hierarchy is the key to creating cohesion with the color palette. White or black should always be the dominant colors. Secondary accents colors should not dominate any composition. Secondary neutrals are to be used subtly or as a full background. Sigma Color 13 Specifications Sigma Black Sigma Teal White Sigma Teal should be used in the logo and when defining #000000 #2FB2AF #FFFFFF Sigma in promotional communications. R0 G0 B0 R47 G178 B175 R255 G255 B255 C0 M0 Y0 K0 C72 M6 Y36 K0 C0 M0 Y0 K0 Black and white are the Sigma brand primary colors and should be used to define the brand and add bold contrast on backgrounds or copy. Secondary accent colors are meant to be used sparingly on the shapes or on headlines to add visual interest. Secondary neutral colors are meant to be used as Coral Peach Clay Chartreuse Emerald Seafoam Purple Lilac background colors when necessary and to mute body #F85F4E #FDCFB6 #DD9684 #C1A836 #005C4A #82D1CF #964F7D #C9C7F5 R248 G95 B78 R252 G207 B181 R221 G150 B133 R194 G168 B54 R0 G92 B74 R130 G209 B207 R150 G79 B125 R201 G199 B245 copy. C0 M78 Y70 K0 C0 M21 Y25 K0 C11 M47 Y44 K0 C27 M28 Y97 K1 C90 M40 Y73 K33 C47 M0 Y22 K0 C44 M80 Y27 K4 C19 M19 Y0 K0 Dark Gray Medium Gray Soft Coral Soft Chartreuse Soft Peach Soft Seafoam Light Gray Light Lilac #666766 #B2B2B2 #FFDFDB #EFE8CA #FFECE1 #D5F0EF #E5E5E5 #E8E8FB R102 G102 B102 R178 G178 B178 R255 G2225 B219 R239 G232 B202 R255 G237 B224 R213 G240 B239 R229 G229 B229 R232 G232 B250 C60 M51 Y51 K20 C31 M25 Y25 K0 C0 M14 Y8 K0 C6 M6 Y22 K0 C11 M7 Y9 K0 C15 M0 Y6 K0 C9 M6 Y7 K0 C7 M7 Y0 K0 Sigma Color 14 Color Pairings V1 WARM COOL In general when creating shape patterns, you will want to combine two colors from the high saturation category and one color from the low saturation category. For high HIGH SAT saturation, pick one warm and one cool per pairing. For example, you could pick Coral to pair with Teal, and then pair with Peach. Colors that are low saturation work better for color fills than high saturation because they don't dominate as much. LOW SAT LOW Sigma Color 15 Color Pairings V2 WARM COOL In some cases, you'll want to have two low saturation colors, and one high saturation color. This is applicable namely when you have a much larger shape in the pattern HIGH SAT and perhaps you want to overlay text such as with ads and e-mail (see examples on pages 65 and 66). LOW SAT LOW Sigma Brand Guidelines 16 Typography The Sigma Typeface Web: Hierarchy & Leading Print: Hierarchy & Leading Color Use Sigma Typography 17 The Sigma Typeface National is a welcoming and sophisticated typeface. National — our primary typeface for all brand communications — has a friendly personality and humanist forms that allow for comfortable reading in both short and long form. National Book We are use three weights, and each has an assigned purpose in our typography system. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 National Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 National Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Sigma Typography 18 Print Typeface IBM Plex Sans is equally inviting Alternative with similarly curved terminals. IBM Plex Sans is the default back up when National is not available. It is the primary typeface for templates that are used by non-designers, like one sheets and slide decks created in Google Slides and Google Docs. IBM Plex Sans Regular This font has a large x-height and should be sized down about 7-10 pts the sizes set on page 16, which are based ABCDEFGHIJKLMNOPQRSTUVWXYZ on National's x-height. abcdefghijklmnopqrstuvwxyz For instance on this page the IBM Plex Sans headline copy 1234567890 is 65pt, while on page 16 National's headline is 75px. IBM Plex Sans Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 IBM Plex Sans Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Sigma Typography 19 Digital Typeface Lato is a balanced typeface, Alternative possessing warmth & strength. Lato is the primary typeface for all brand marketing e-mails sent to customers, prospects and partners. This typeface is prioritized for digital applications where National is not available. It should not be used for print materials. Lato Regular This font has a large x-height, so size down approximately ABCDEFGHIJKLMNOPQRSTUVWXYZ 7-10 px from the sizes set on page 16, which are based on abcdefghijklmnopqrstuvwxyz National's x-height. 1234567890 For instance on this page the Lato headline copy is 65px, while on page 16 National's headline is 75px. Lato Medium In regards to weight, Lato Bold is used in substitute of a medium or semibold weight. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Lato Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Sigma Typography 20 Website: Type Scale H1: 76px | National Semibold Body copy: 18px | National Book Hierarchy & Spacing Give everyone the power of direct, real-time data access and the confidence to Answers Are use it with Sigma—the first analytics and BI tool built for your CDW. • The minimum amount of space between lines should be a little more than the type size Waiting Body copy - stylized: 18px | National Semi-bold • Larger type can have tighter leading. Smaller type Jessica Nielson should have looser leading Data Analytics Manager The E.W. Scripps Company • Leading for h1: 2-3px H2: 38px | National Medium • Leading for h2, h3 and body copy: 4-8px Sigma Empowers Teams to Explore Link Button: 14px | National Semibold | All caps | .29px letter spacing • Leading for quotes: 12px Data Without Limits GET ACCESS H3: 26px | National Medium Button: 14px | National Semibold | All caps | .29px letter spacing Live, instant access to your cloud data warehouse TRY IT FOR FREE Quote / Call outs: 26px | National Medium Small copy: 15px | National Book | Gray #666666 "With the combined compute speed and ©2020 Sigma Computing analytics capabilities of Sigma and Snowflake, we reduced our time to data insight by 93%.” Sigma Typography 21 E-mail: Type Scale H1: 30-32 px | Lato Bold Button Links: 13px | Lato Bold | All Caps Hierarchy & Spacing Data Your Company's Biggest Asset EXPLORE NOW • The minimum amount of space between lines should be a little more than the type size H2: 24px | Lato Bold Footer Links: 14px | Lato Bold • Larger type can have tighter leading. Smaller type Visit our site should have looser leading Sigma Gives Everyone the Power of Direct, Real-time, Governed Data Acess • Leading for h1: 2-3px • Leading for h2, h3 and body copy: 4-8px • Leading for quotes: 12px Body copy: 16px | Lato Medium Button: 14px | Lato Bold | All caps | .29px letter spacing Visit Snowflake’s Partner Connect and try Sigma for free! TRY IT FOR FREE H3: 22px | Lato Medium Small text - footer: 11px | Lato Medium | Gray #666666 The cloud-based BI tool designed or everybody Sigma, 90 New Montgomery Street, Suite 1500, SF, CA Sigma Typography 22 Print: Type Scale H1: 30-34 pt | National Medium Body copy: 11pt | National Book Sigma is the first enterprise-ready cloud analytics and business intelligence (A&BI) solution designed to run natively with cloud Hierarchy & Spacing data warehouses (CDWs).