Getting started
Overview
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.
Styles
Colors
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.
$COLOR_PRIMARY
$COLOR_SECONDARY
$COLOR_TEXT_PRIMARY
$COLOR_TEXT_SECONDARY
$COLOR_TEXT_LIGHT
$COLOR_TEXT_INVERSE
$COLOR_BACKGROUND_DARK
$COLOR_BACKGROUND_LIGHT
$COLOR_BACKGROUND_WHITE
$COLOR_BORDER_LIGHT
$COLOR_LINK_HOVER
$COLOR_LINK
$COLOR_LINK_HOVER
$COLOR_BUTTON
$COLOR_BUTTON_HOVER
$COLOR_SUPPORT_INFO
$COLOR_SUPPORT_SUCCESS
$COLOR_SUPPORT_WARNING
$COLOR_SUPPORT_ERROR
$COLOR_SUPPORT_FOCUS
Styles
Button
Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Styles
Form
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Styles
Grid
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
Desktop 12 / Tablet 6 / Mobile 4
Desktop 12 / Tablet 6 / Mobile 4 (No gutters)
Styles
Iconography
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.
Media
Pause
pausePlay
playMisc
Account
accountAccount
accountBasket
basketCart
cartClose
closeExpand
expandError
errorHamburger
hamburgerHeart
heartMinus
minusPlus
plusPhone
phonePin
pinPreview
previewSearch
searchSort
sortStar
starStar filled
star-filledTick
tickZoom-in
zoom-inZoom-out
zoom-outDirection
Arrow up
arrow-upArrow right
arrow-rightArrow down
arrow-downArrow left
arrow-leftCaret up
caret-upCaret right
caret-rightCaret down
caret-downCaret left
caret-leftChevron up
chevron-upChevron right
chevron-rightChevron down
chevron-downChevron left
chevron-leftSocial media
Gplus
gplusYoutube
youtubeStyles
Spacing
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
Styles
Typography
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
Display 2
Display 3
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Subtitle 1
Subtitle 2
Body 1
Body 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Ordered List level 1
- Ordered List level 2
- Ordered List level 2
- Ordered List level 1
- Ordered List level 1
- Unordered List level 1
- Unordered List level 2
- Unordered List level 2
- Unordered List level 1
- Unordered List level 1
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Components
Accordion
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.
Components
Badge
A component that can wrap any type of content to highlight information for a user or to just draw attention to a specific element.
Components
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Components
Modal
Add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal title
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
- Ut non enim metus.
Components
Notification
Notifications are messages that communicate information to the user.
Notification title
Notification text goes here.
Notification title
Notification text goes here.
Components
Pagination
A component that is used to concatenate long sets of data for a user to consume information easier.
Components
Payment icons
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.
Components
Product card
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.
Components
Product form
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.
Components
Quantity selector
Form field to decrement or increment a number input using attached buttons. Each quantity selector has a unique identifier to avoid conflicts.
Components
Swatch
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.
Sections
Cover listing
Denim you can get behind
Clean Energy
Renewable energy — and virtually no waste.
Clean waste
A sustainable legacy — built brick by brick.
Sections
Featured blog
Featured blog
Sections
Featured collection
Women's Jeans
- test
ADA Boyfriend in Indigo Brushed TribecaFrom £20.00 
Alexa Skinny in Jet Black£118.00- sale
Alissa Ankle Super Skinny in Dark Brushed Fringe SupersoftOn Sale from £20.00 Regular price£118.00 
Alissa Super Skinny in Dark SupersoftFrom £30.00
Lexy Super Skinny£128.00- test
Adriana Super Skinny JeansFrom £20.00 
Adriana Ankle Super Skinny in Mid Indigo Supersoft£98.00
Kendra Straight Leg in Rinse Supersoft£128.00
Sections
Image slider
Slide title
Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.
Slide title
Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.
Sections
Video hero
The world's cleanest denim factory.
Learn moreGlobal
Site footer
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.
Global
Site header
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.