Skip to content

Enjoy Free Shipping and Returns. Details.

Enjoy Free Shipping and Returns. Details.

Free Global DHL Express shipping + FRAME covers the cost of duties

Free Global DHL Express shipping + FRAME covers the cost of duties

Style Guide

Headings

Example Classes Notes

Heading 1

h1, .h1

Heading 2

h2, .h2

Heading 3

h3, .h3

Heading 4

h4, .h4
Heading 5
h5, .h5

Upcase

.upcase

Subhead

.subhead

Caption

.caption, a

Heading

.u-serif Use serif font

Heading

.u-white Make text white

Heading

.u-center Center text

Basic Font Styles

Example Classes Notes
FRAME is a brand that bridges the heritage and quality of manufacturing in Los Angeles with a distinctly European aesthetic. Its collections take inspiration from a French way of "dressed up casual" embodied by the style icons of the 1970s. Default
FRAME is a brand that bridges the heritage and quality of manufacturing in Los Angeles with a distinctly European aesthetic. Its collections take inspiration from a French way of "dressed up casual" embodied by the style icons of the 1970s. .rte Rich Text

Icons

Example Classes Notes
.icon .social include the relevant SVG snippet
.icon include the relevant SVG snippet. To create new SVGs, save a snippet as svg-[title].liquid and include it. Use transform: scale(x) if necessary to size the snippet appropriately.
.icon include the relevant SVG snippet. When .is-full is applied, heart becomes solid. Click for animation.
.icon-carrot .up, .icon-carrot .down When .is-active is applied to parent, carrot rotates 180deg
.icon-arrow .up, .icon-arrow .down, .icon-arrow .left, .icon-arrow .right When .is-active is applied to parent, arrow rotates 180deg. Wrap in .icon .icon-padding to create a 50px click area.
.icon-arrow.up.small, .icon-arrow.up.large When .is-active is applied to parent, arrow rotates 180deg. Wrap in .icon .icon-padding to create a 50px click area.
.icon .icon-close, .icon .icon-close .circle
.icon .icon-menu When .is-open is applied, transforms into X icon. Click for animation.

Buttons & CTAs

Example Classes Notes
Click Me .btn Default Button Hover applied at width $desktop and up
Click Me .btn .primary Primary Button
Click Me .btn .hollow Hollow button used in home page hero
Click Me .btn .disabled Disabled button state - still clickable.
Click Me .btn .text Text-only "button"
Click Me .btn .block Full-width button mostly used in forms.

Product Tiles






Form Fields & Dropdowns

Example HTML Notes
<div class="form-field"> <label>Name</label> <input type="text" maxlength="255" /> </div>
Name should not be blank
<div class="form-field is-error"> <label>Name</label> <input type="text" maxlength="255" /> <span class="error">Name should not be blank</span> </div>
<div class="form-field dropdown required"> <label>State</label> <select> <option value="">Please select your state</option> <option>California</option> <option>Other</option> </select> </div>
<div class="form-field dropdown option"> <label>State</label> <select> <option value="">Please select your state</option> <option>California</option> <option>Other</option> </select> <span class="error">Please select a size to add to your bag</span> </div>
<div class="form-field dropdown option is-error"> <label>State</label> <select> <option value="">Please select your state</option> <option>California</option> <option>Other</option> </select> <span class="error">Please select a size to add to your bag</span> </div>
Dropdown w/ Carrot
Dropdown w/ Arrow
.js-dropdown Class that toggles .is-active on element parent.

Filter

Filter Sort




include 'filter' include 'sort'