Style Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 1
| Download | |
| Open PDF In Browser | View PDF |
Logo Styling Overview script slate The Script Slate logo consists of two main parts: our “S” mark, and our wordmark to the right of it. The “S” mark is a solid, rich purple to convey creative and kinetic energy. It’s made from four equally sized squares that touch at their verticies to form the shape of the “S”. The font size of the wordmark is always twice the size of a single square. It is always Poppins Extra Bold. Above, the squares are 16px by 16px, so the wordmark is 32pt. This ratio keeps the “S” mark bigger and gives it more contrast with the heavy weight and block-like glyphs of the typeface. Spacing & Alignment script slate The space between the “S” mark and the wordmark is the size of one of the squares in the “S”. So, it will change in exact size as the logo changes sizes. script slate The baseline of the wordmark aligns with the base of the square one up from the bottom script slate There should always be one square of space around the logo from the points above. This allows the logo sufficient room to breath in layouts. This scalable system gives bigger logos the bigger space they need. Sizing script slate script slate script slate 12px by 12px squares (175px x 48px) 16px by 16px squares (234px x 68px) 24px by 24px squares (350px x 96px) The size of the logo is based on the size of the squares in the “S” mark since that will also determine the size of the word mark. The measurement of a size of one of the squares should always be a multiple of 4. If showing multiple logos on one page, ensure there is a difference of at least 8 between the sides for sufficient contrast. script slate 8px by 8px squares (118px x 32px) The smallest size the logo should ever be is with 8px by 8px squares. Any smaller and the weight of the typeface makes the logo difficult to read. Color Logo Colors script slate #A216D9 #292929 Here are the exact colors of the logo. Purple is the primary color of Script Slate because it combines the professionalism of blue with the energy of red. Combine those with the creative psychology of purple, and it’s the perfect choice for our logo. It also Note the unique black hue’s hex. This gives us a softer, almost less opaque black that creates harmony with the purple. script slate #EBF2FA On a dark background, the only thing that changes is the color of the wordmark. Purple remains constant as it provides good contrast on both light and dark backdrops. The chosen light color for the wordmark is a slightly grayish white with a hint of blue that helps tie it together with the purple. The slight gray also ties into the “slate” of Script Slate. script slate script slate #292929 #EBF2FA If for some reason the purple “S” mark isn’t feasible, designers can also use one of the monochrome options above. Accents #1998FF #FF9214 #FE5F55 To add more color to a component, use one of the above accent colors. The blue and orange also give good contrast and energy that communicates creativity as well as professionalism. The muted red orange ties together the purple from the logo and the other accents. Grays #EEEEEE #BBBBBB #747474 Designers are also able to use these shades of gray in order to give their designs more depth. Typography Typeface families Poppins Open Sans Body Typeface Logo Typeface The combination of these two sans serif fonts gives a professional, future-forword look to Script Slate. Open Sans as the body typeface gives a lot of readibility as well. Body Typeface Sizes Heading 1 - 48/72 Heading 2 - 34/51 Heading 3 - 26/39 Large - 22/33 Regular - 16/24 Small - 12/18 While all the body type uses the Open Sans family, the headings use the light weight to provide contrast and give a clean, modern look. The others use semibold to give better readability without being so thick that they detract from the headings. All of the type is the same soft black from the logo to give the brand uniformity. Buttons Emphasis / States Submit Submit Submit Submit Submit Submit Enabled Hover Enabled Hover Enabled Hover Submit Submit Submit Disabled Disabled Disabled Filled Button (High Emphasis) Outlined Button (Medium Emphasis) Text Button (Low Emphasis) Script Slate has three different types of buttons for designers to utilize with different ranks of emphasis. This will allow for more control over hierarchy and contrast within designs. Padding / Sizing Submit Submit Submit Small Button Top & Bottom Padding: 10px Left & Right Padding: 15px Regular Button Top & Bottom Padding: 10px Left & Right Padding: 20px Large Button Top & Bottom Padding: 10px Left & Right Padding: 25px We have three different size buttons to use in different situations. Each button size uses the corresponding type size, and then applies the above padding specifications. Corners are rounded with an radius of 5. Fields with Buttons Default Text… Submit Fields should be the same height as the buttons with them. They should primarily be used with filled buttons for contrast that favors the button. The outline of the fields should always be the medium gray, not the brand or accent colors. Button Colors Submit Submit Submit Submit Submit Submit Submit Submit Submit The accent colors can be used in any type of button in order to give more contrast to a design. However, the red accent buttons should be used more for actions with negative connotations such as cancelling or deleting items. Icon Set The icons are defaulted to the soft black from our color palette. However, they can be put in the Script Slate purple or any of the accent colors if neccessary for a design. Although, that should be a rare occurence.
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf Linearized : No Page Count : 1 PDF Version : 1.4 Producer : Mac OS X 10.13.6 Quartz PDFContext Create Date : 2019:05:25 01:17:52Z Modify Date : 2019:05:25 01:17:52ZEXIF Metadata provided by EXIF.tools