Style Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 1
Logo Styling
Color
script slate
script slate
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.
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.
The baseline of the wordmark aligns with the base of the square one up from the bottom
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.
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.
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.
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.
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.
If for some reason the purple “S” mark isn’t feasible, designers can also use one of the monochrome options
above.
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.
Designers are also able to use these shades of gray in order to give their designs more depth.
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.
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.
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.
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.
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.
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.
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.
script slate
script slate
script slate
script slate script slate
Overview
Logo Colors
Accents
Grays
Spacing & Alignment
Sizing
script slate
16px by 16px squares
(234px x 68px)
script slate
12px by 12px squares
(175px x 48px)
script slate
24px by 24px squares
(350px x 96px)
8px by 8px squares
(118px x 32px)
#A216D9 #292929
#292929
#1998FF
#EEEEEE
#FF9214
#BBBBBB #747474
#FE5F55
#EBF2FA
#EBF2FA
script slate
Typography
Buttons
Icon Set
Padding / Sizing
Fields with Buttons
Button Colors
Emphasis / States
Typeface families
Body Typeface Sizes
Poppins Open Sans
Logo Typeface Body Typeface
Heading 1 - 48/72
Heading 2 - 34/51
Heading 3 - 26/39
Large - 22/33
Regular - 16/24
Small - 12/18
Filled Button
(High Emphasis)
Outlined Button
(Medium Emphasis)
Text Button
(Low Emphasis)
Enabled Hover
SubmitSubmit
Small Button
Top & Bottom Padding: 10px
Left & Right Padding: 15px
Submit
Regular Button
Top & Bottom Padding: 10px
Left & Right Padding: 20px
Submit
Large Button
Top & Bottom Padding: 10px
Left & Right Padding: 25px
Submit
Enabled Hover
Submit Submit
Enabled Hover
Submit Submit
DisabledDisabled Disabled
Submit
Submit
Submit
Submit
Default Text…
Submit
Submit
Submit
Submit
Submit
Submit
Submit SubmitSubmit
