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(255, 93, 3)
$COLOR_PRIMARY
Secondary
rgb(0, 0, 0)
$COLOR_SECONDARY
Text Primary
rgb(0, 0, 0)
$COLOR_TEXT_PRIMARY
Text Grey Dark
rgb(88, 88, 88)
$COLOR_TEXT_SECONDARY
Text Light
rgb(136, 136, 136)
$COLOR_TEXT_LIGHT
Text Grey Light
rgb(160, 160, 160);
$COLOR_TEXT_GREY_LIGHT
Text Inverse
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
Camo 40
rgb(32, 35, 30)
$COLOR_CAMO_40
Camo 30
rgb(67, 62, 52)
$COLOR_CAMO_30
Camo 20
rgb(112, 101, 76)
$COLOR_CAMO_20
Camo 10
rgb(98, 101, 68)
$COLOR_CAMO_10
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(136, 136, 136)
$COLOR_BORDER_LIGHT
Border Dark
rgb(173, 173, 173)
$COLOR_BORDER_DARK
Link
rgb(255, 93, 3)
$COLOR_LINK
Link Hover
rgb(255, 60, 0)
$COLOR_LINK_HOVER
Button
rgb(255, 93, 3)
$COLOR_BUTTON
Button Hover
rgb(255, 60, 0)
$COLOR_BUTTON_HOVER
Button Dark
rgb(52, 52, 52)
$COLOR_BUTTON_DARK
Button Dark Hover
rgb(0, 0, 0)
$COLOR_BUTTON_DARK_HOVER
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.button--primary
.button.button--primary.is-disabled
.button.button--primary.button--large
.button.button--primary.button--large.is-disabled
.button.button--purchase
.button.button--purchase.is-disabled
.button.button--rounded
.button.button--rounded.is-disabled
.button.button--rounded.large
.button.button--rounded.large
text-link.primary-13
text-link.primary-13.is-disabled
text-link.primary-15
text-link.primary-15.is-disabled
text-link.primary-18
text-link.primary-18.is-disabled
text-link.secondary-13
text-link.secondary-13.is-disabled
text-link.secondary-15
text-link.secondary-15.is-disabled
text-link.secondary-18
text-link.secondary-18.is-disabled

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.

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_1XL

$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 3 SEMIBOLD

h3.semibold, .h3.semibold

HEADING 4

h4, .h4

HEADING 4 - BOOK

h4.book, .h4.book

HEADING 4 - SEMIBOLD

h4.semibold, .h4.semibold
HEADING 5
h5, .h5
HEADING 5 BOOK
h5.book, .h5.book
HEADING 5 SEMIBOLD
h5.semibold, .h5.semibold
HEADING 6
h6, .h6
HEADING 6 BOOK
h6.book, .h6.book
HEADING 6 SEMIBOLD
h6.semibold, .h6.semibold

Subtitle 1

.subtitle-1

Subtitle 2

.subtitle-2

Body 1

p, .body-1

Body 2

.body-2

(flama basic italic)

.body-italic

(flama basic italic Semi bold)

.body-italic-semibold
Caption
.caption
Label
.label
BUTTON
button, .button
a, a.text-link, .text-link

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.

  • american_express
  • apple_pay
  • discover
  • elo
  • master
  • shopify_pay
  • visa

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 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.