Base System Style Guide

The following elements on this page account for virtually all of the elements available in the Benz Segal Showcase system (i.e., Benzy theme).

This document serves as an automatically generated, miniature design system. Most importantly, it serves as an illustration of how the base variables — color, font(s), and logo assets — feed the theme.

The principal idea to acquire from this document is how the updating of these base variables will ripple through the theme you create branching off of Benzy.

Note: This style guide does not address "customized" builds of Showcase. It is merely to show how simple base variable updates trickle through the theme.

Typography

The base typography will inherit $black. This will apply to all typography unless specified otherwise at the page- or component-level.

Note: The system is only setup for one font-family. Adding another is considered a "customization".

h1: Hello Friend.

h2: Hello Friend.

h3: Hello Friend.

h4: Hello Friend.

h5: Hello Friend.
h6: Hello Friend.

Basic paragraph styles, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod bold text incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, italic text quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Basic unordered list style.
  • lorem ipsum dolor sit amet
    • Nested list item.
    • Duis aute irure dolor
  • sunt in culpa qui officia deserunt mollit anim id est laborum
  1. Basic ordered list style.
  2. lorem ipsum dolor sit amet
    1. Nested list item.
    2. Duis aute irure dolor
  3. sunt in culpa qui officia deserunt mollit anim id est laborum

Colors

The following are the base colors built into the system. It is important to note that at the base level (Benzy) only the following values are manually applied*: $black, $white, $primary-color, $secondary-color, and $tertiary-color.

*"Manually applied" refers to the fact that we set these variables with a specific hexidecimal color code. The others not in the list above are automatically calculated and augmented based on the rules specified below (e.g., making use of color.adjust($base-color-variable, $lightness: [positive or negative value, to render lighter or darker value respectively]). This can be manually input instead per site, however!

Colors variables:

$black
$white
$grey
$primary-color
$secondary-color
$tertiary-color

Derivated colors from the above base color variables:

Though, note that these can be updated per site instance. The base Benzy theme uses color-adjust() method to generate these following variables.

$translucent
$grey--light
$grey--lightest
$grey--dark
$page-background-color
$primary-color--light
$primary-color--dark
$secondary-color--light
$secondary-color--dark
$tertiary-color--light
$tertiary-color--dark

Icons:

All iconography employing image assets (SVG format) cannot automatically inherit the base colors. They must be manually updated. Typically, the hex code for the $primary-color is used, however the designs ultimately determine their color.

Changing, adding to, or removing this iconography is considered a "customization".

Menu close button: "close-x-black.svg"

Content grouping icon: "content-group-icon.svg"

Menu right nav: "arrow-right-nav.svg"

Menu right nav active state: "arrow-right-nav-active.svg"

Hamburger menu: "hamburger-menu.svg"

Search: "search-icon.svg"

Search active: "search-icon-active.svg"

Select dropdown: (forms) "select-drop-down.svg"