What is this?

Frame Styleguide serves as a digital brand guideline to building websites and experiences. The goal of a styleguide is to improve consistency, quality and communication across the UI, making the design and development process more efficient and focused.

This Styleguide is to establish a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

More information on the importance of Design Systems.

Who is this for?

Anyone who is designing or developing a new website using Frame. Even if you don’t need to use these components directly, the base styling and documentation should be a useful reference for how we have done stuff elsewhere and to reduce duplication of work and contaminating the style sheets.

How do I use it?

See Getting started on Slite for how to integrate this into your project and how to edit the base styling of your theme.

Color brings a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations.

Primary
rgb(0, 0, 0)
$COLOR_PRIMARY
Secondary
rgb(99, 115, 129)
$COLOR_SECONDARY
Text Primary
rgb(0, 0, 0)
$COLOR_TEXT_PRIMARY
Text Secondary
rgb(81, 81, 81)
$COLOR_TEXT_SECONDARY
Text Light
rgb(148, 148, 148)
$COLOR_TEXT_LIGHT
Text Inverse
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
Background Dark
rgb(0, 0, 0)
$COLOR_BACKGROUND_DARK
Background Light
rgb(246, 246, 246)
$COLOR_BACKGROUND_LIGHT
Background White
rgb(255, 255, 255)
$COLOR_BACKGROUND_WHITE
Border Light
rgb(239, 239, 239)
$COLOR_BORDER_LIGHT
Border Dark
rgb(173, 173, 173)
$COLOR_LINK_HOVER
Link
rgb(222, 115, 58)
$COLOR_LINK
Link Hover
rgb(255, 132, 67)
$COLOR_LINK_HOVER
Button
rgb(30, 144, 255)
$COLOR_BUTTON
Button Hover
rgb(25, 120, 212)
$COLOR_BUTTON_HOVER
Link Seasonal (will change)
rgb(222, 115, 58)
$COLOR_SEASONAL
Info
rgb(0, 0, 0)
$COLOR_SUPPORT_INFO
Success
rgb(0, 170, 0)
$COLOR_SUPPORT_SUCCESS
Warning
rgb(230, 87, 34)
$COLOR_SUPPORT_WARNING
Error
rgb(246, 71, 71);
$COLOR_SUPPORT_ERROR
Focus
rgb(94, 158, 214)
$COLOR_SUPPORT_FOCUS

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

.button--primary
.button--secondary

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

We'll never share your email with anyone else.
Multiple options
Radio (input + label)

The Frame grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, order, flow, and gutters.

The grid system is based off materialize.css.

Container max-width - 1880px.

Standard columns

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6

Desktop 12 / Tablet 6 / Mobile 4

1
1
1
1
1
1
1
1
1
1
1
1

Desktop 12 / Tablet 6 / Mobile 4 (No gutters)

1
1
1
1
1
1
1
1
1
1
1
1

Icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics to either replace or accompany labels.

Spacing variables are used to consistently apply margin and padding across components and UIs. Having a set spacing scale brings a rhythm to the product and creates a natural and familiar flow from page to page.

$SPACING_3XS

$SPACING_2XS

$SPACING_XS

$SPACING_S

$SPACING_M

$SPACING_L

$SPACING_XL

$SPACING_2XL

$SPACING_3XL

$LAYOUT_S

$LAYOUT_M

$LAYOUT_L

Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Display 1

.d1

Display 2

.d2

Display 3

.d3

Heading 1

h1, .h1

Heading 2

h2, .h2

Heading 3

h3, .h3

Heading 4

h4, .h4
Heading 5
h5, .h5
Heading 6
h6, .h6
Heading 6 - Regular
h6, .h6.regular

Subtitle 1

.subtitle-1

Subtitle 2

.subtitle-2

Body 1

.body-1

Body 2

.body-2
Caption
.caption
Label
.label
Button
.btn
.text-link
Tag label
.tag
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
blockquote, .blockquote
  1. Ordered List level 1
    1. Ordered List level 2
    2. Ordered List level 2
  2. Ordered List level 1
  3. Ordered List level 1
ol, .ol
  • Unordered List level 1
    • Unordered List level 2
    • Unordered List level 2
  • Unordered List level 1
  • Unordered List level 1
ul, .ul

You can use the mark tag to highlight text.

mark

This line of text is meant to be treated as deleted text.

del

This line of text is meant to be treated as no longer accurate.

s

This line of text is meant to be treated as an addition to the document.

ins

This line of text will render as underlined

u

This line of text is meant to be treated as fine print.

small

This line rendered as bold text.

strong

This line rendered as italicized text.

em

Accordion enables users to expand and collapse sections of content.

Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

Example. An apple a day keeps the doctor away.

Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

Example. An apple a day keeps the doctor away.

Kiwis are a fun, under-appreciated fruit.

A component that can wrap any type of content to highlight information for a user or to just draw attention to a specific element.

Default
Sale
New in

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Notifications are messages that communicate information to the user.

A component that is used to concatenate long sets of data for a user to consume information easier.

The appearance of payment icons help reinforce the feeling of security on the website. These are the currently enabled payment options defined in the store settings.

  • Visa
  • Mastercard
  • American Express
  • Discover
  • Shop Pay
  • Apple Pay
  • Google Pay

Product cards are a medium-sized component that contains key product information such as a featured thumbnail, title and price. These products cards are shared across the theme and are one of the most re-usable components available.

The product form is one of the most important components of any e-commerce interface. It is the UI in which users are selecting and clicking around to customise options of the product they will ultimately be adding to their cart.

SKU: F02005200-000-000

12 Volt Charger for Ignite Batteries

Get IN5IDERS points
This is the number of 509 points you will receive for this order. Points are redeemable for exclusive rewards, experiences, content and free items. To redeem your points, check out the rewards section of your account.
Select Color: Black

Form field to decrement or increment a number input using attached buttons. Each quantity selector has a unique identifier to avoid conflicts.

A highly stylised radio input with the appearance of a selected choice card. There are active, inactive, disabled and empty states for each swatch. Can be used as labels or with filled backgrounds.

A cover listing is an extensible section that contains large visual blocks of content that can be used for a single promotion without being obvious with the call to action.

Cover listing

A grid of article cards containing the most recent articles of a single blog.
A grid of product cards from a single collection that can be displayed in a static grid or within a carousel if there are more than 5 products.
A flexible content slider using background images. This section has several content and text alignment options as well as settings for text and background colours.
A muted and repeating background video accompanied by short titles that is used to create a visually compelling narrative that draws the attention of users towards a specific promotion.

Value proposition statement

Subtitle statement

A block to show information about the brand

Write a nice description here

A block to showcase up to 3 collections with their sub-categories

A good site footer becomes the visual anchor of an e-commerce store in which users are able to see all the key categories and pages at a glance with minimal interaction.

The look and feel of the header is the key ingredient to a consistent user experience that all good websites share. It controls all the links guiding and navigating the user across the website which ultimately builds trust within the store.