Seavine Brand ID

2022 Version

Table of Contents:

Last update: November 24, 2021

Logo

Download logo files

Centering the logo: don't just select the logo and click the "center" button. The vertical alignment will be off because of the hand that sticks out. Instead, center the letters in "Seavine".

The above logo files contain official profile picture files where the logo is centered correctly for both a square and circle.

Incorrect vs. correct logo centering

Typography

  • Atkinson Hyperlegible
    Use this typeface as much as possible, in all fonts (regular, italic, bold, bold italic).
    • Atkinson Hyperlegible was developed by the American Braille Institute, with the visually impaired in mind. Each character has distinct shapes so as to maximize legibility. Besides being more inclusive, it's also a cool grotesque typeface with some mono-space-like elements (e.g. the lowercase i).
  • DM Mono
    Use this typeface sparingly. Only use it in all caps because the lowercase characters are too similar to Atkinson's lowercase.
    • "Overline" subheadings ("Our Classic" in the example below)
      Weight: use the regular weight. It creates a nice contrast with Atkison Bold.
    • Button labels (see button example below)
      Weight: use the medium weight.
  • Tracking (letter spacing): use normal tracking (0) everywhere.
Example:
Seavine Type Example

Backup typefaces: Source Sans Pro and Source Code Pro (Google Fonts). Backup typefaces are a last resort when a certain platform doesn't allow us to upload Atkinson & DM Mono (note that both are accessible through Google Fonts). Anything designed in any design software should use Atkinson & DM Mono.

Colors

  • Our primary colors are black, white, blue, and fuchsia.
    • Note that our black and white aren't pure black and pure white. See color codes below and/or download the swatches as an .ASE file.
  • Our secondary colors are gray, purple, and red.
    • Use gray for secondary text such as the date on a blog post and a product category.
    • Use purple as the middle color between blue and fuchsia in the gradient. (Also see "gradients" below.)
    • Only use red for discounts and alerts.

Download swatches as .ASE file

  • The top row (Contrast with white) has been tested and passes accessibility standards: it shows enough contrast with white to be legible even for people who don't have great vision. Use it for text color on a white or light background.
  • The bottom row (Contrast with black) has been tested and passes accessibility standards: it shows enough contrast with black to be legible even for people who don't have great vision. Use it for text color on a black or dark background.

Seavine color palette, primary and secondary colors

Gradients

  • Blue and fuchsia are the end points, purple is the middle color.
  • Avoid gradients straight across (horizontally, 0°, 180°), straight up and down (vertically, 90°, -90°), or at a perfect 45° diagonal. Instead, try angles between 10°-35°, 55°-80°, 100°-125°, etc.
    • For surfaces, angles around 30°, 60°, -30°, -60° work well.
    • For type, flatter angles such as 10° or -10° work well.
    • For each individual case, experiment and look what looks best. Generally speaking, we want a long transition area, avoiding large areas that look like they're one static color.

Seavine 2022 Gradient Examples

Buttons

  • Use rectangular buttons. No rounded corners, no pill buttons.
  • Use a thin border (1px)
  • Make sure there's enough padding inside the button so the button label text has room to breathe and doesn't look squished.
  • On a white or light background:
    • Use black text and a black border.
    • Use gradient with lightest shades of colors.
  • On a black or dark background:
    • Use white text and a white border.
    • Use gradient with darkest shades of colors.

Seavine button styles

Seavine Cymbal Education

Logo, typography, colors

Sensei Yellow:

  • RGB HEX: #f6cf41
  • CMYK: 4, 16, 86, 0

Download Seavine Education logo files