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(248, 163, 188)
$COLOR_PRIMARY
Secondary
rgb(26, 17, 19)
$COLOR_SECONDARY
Text Primary
rgb(26, 17, 19)
$COLOR_TEXT_PRIMARY
Text Secondary
rgb(0, 151, 88)
$COLOR_TEXT_SECONDARY
Text Light
rgb(245, 218, 223)
$COLOR_TEXT_LIGHT
Text Inverse
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
Text Sale
rgb(248, 50, 50)
$COLOR_TEXT_SALE
Text Iron
rgb(212, 214, 216)
$COLOR_TEXT_IRON
Background Dark
rgb(248, 163, 188)
$COLOR_BACKGROUND_DARK
Background Light
rgb(246, 246, 246)
$COLOR_BACKGROUND_LIGHT
Background White
rgb(255, 255, 255)
$COLOR_BACKGROUND_WHITE
Background Pink Tint
rgb(254, 246, 248)
$COLOR_BACKGROUND_PINK_TINT
Background Green Tint
rgb(236, 254, 246)
$COLOR_BACKGROUND_GREEN_TINT
Background Sale
rgb(255, 229, 229)
$COLOR_BACKGROUND_SALE
Border Dark
rgb(173, 173, 173)
$COLOR_BORDER_DARK
Border Light
rgb(239, 239, 239)
$COLOR_BORDER_LIGHT
Border Pink
rgb(253, 231, 238)
$COLOR_BORDER_PINK
Border White
rgb(255, 255, 255)
$COLOR_BORDER_WHITE
Link
rgb(0, 151, 88)
$COLOR_LINK
Link Hover
rgb(0, 166, 97)
$COLOR_LINK_HOVER
Button
rgb(30, 144, 255)
$COLOR_BUTTON
Button Hover
rgb(25, 120, 212)
$COLOR_BUTTON_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(253, 231, 238)
$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
.button--light
.button--alt
.button--alt__pink
.button--alt__green
.button--alt__white
.button.button--small
.button.button--large
.button.button--block
.button.is-active
.button.is-disabled or .button[disabled]
.button.is-loading

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.

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.

Flight No sticker found! ]
No sticker found!
No sticker found!

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

$SPACING_4XL

$LAYOUT_S

$LAYOUT_M

$LAYOUT_1XL

$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 0

.d0

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

Subtitle 1

.subtitle-1

Subtitle 2

.subtitle-2

Body 1

p, .body-1

Body 2

.body-2
Caption
.caption
Label
.label
.text-link
Error
.error
Success
.success
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.

Article cards are a medium-sized component that contains key article information such as a featured thumbnail, title and link.

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.

A table of the customer's cart contents. Add products from the front-end to enable the preview.

A global banner for stating the site's cookie policies.

A dropdown selector allowing the user to see different prices on the store to the selected currency.

icon flag gbp

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.

  • Amazon
  • American Express
  • Apple Pay
  • Google Pay
  • Klarna
  • Maestro
  • Mastercard
  • PayPal
  • 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.

Skinnydip London Glass Screen Protector
Skinnydip London Glass Screen Protector

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.

Providing protection against the inevitable 

Glass Screen Protector

£10.00
Rated 4.3 out of 5
18 Reviews

A small promo banner to appear on the product page, cart page and cart drawer.

LAST CHANCE! USE CODE “EXTRA10” TO GET AN EXTRA 10% OFF

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

A group of social media icons with preset links for sharing content.

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 carousel displaying blog articles.

Article carousel

Some sample content that explains the section and content further.

Learn more
A content based carousel with image and label.
A hero banner with image, text and video option for the careers page.

Wanna work for us?

Whether you’ve got a keen creative eye, you’re good with numbers or have a passion for designing like-no other products, there’s something for everyone here at Skinnydip!
Current Vacancies
3 Images with text and button below.

Content hero

A short description for the content hero banner. It should be information and complement the images.

Displays a featured article with thumbnail.
Details about the featured article can go here. Featured article

The short description of the article will go here. It will describe where the link leads to.

Read More
Two image blocks with captions and links.
A grid of promotional image blocks.
A featured image with title and button.
A product carousel with introduction and button.
A hero banner with image, text and video option.

Hiya, Hola, Bonjour!

We're Skinnydip London! It's so great to meet you!
A hero slider with text, image and video capabilities.
Full width banner with image and optional text.

Subtitle for the banner

Image banner

Content can go here to complement the image banner.

Shop Now
3 image blocks in a carousel on mobile.
Large image with background, text and button.

Hate Sucks Title

We see ourselves as more than just a ‘brand that sells cool stuff’, but as a lifestyle choice, and that choice includes giving the finger to hate and working hard to make the world a better place. In 2017 we created Hate Sucks to bring our vision of a hate-free zone to life and we’ve worked on some pretty amazing things since.

Find out more
Large image with background and text.

Founders Title

Launching our first phone case design in 2011, we’ve been on quite the rollercoaster ride since. Co-founders James, Lewis and Richard (yep, these guys right here) started Skinnydip shortly after the Apple iPhone launched, quickly realising that fun designs for phone cases were incredibly limited. They had just the idea that was about to change that forever, and that’s when Skinnydip London was officially born. Since launching, we’ve grown a lot, and quite frankly matured like a fine wine when it comes to serving up the most fun and quirky accessories, clothing and lifestyle products for all to love and enjoy!

Large image with info text - editable for image to sit left or right.

What's it like working at Skinnydip?

Being a family-run brand from the get-go, if there’s one thing you can guarantee when working at Skinnydip it’s that we’re all one big family. A working environment that’ll make all your friends and family jealous (i.e. there’s resident dogs and 24/7 snacks), if you like being a part of a close-knit team then you’ve come to the right place.

Large image with info text - editable for image to sit left or right.

Culture is key

Things that you can guarantee when working here at Skinnydip is that we don’t take ourselves too seriously, we make sure to have lots of fun and essentially see ourselves as one big family. Being passionate and enjoying what you do is so important to us, because let's face it, getting out from under that duvet every morning is hard enough!

Image banner with text and button.

Skinnydip X Disney

Collaborations Title

We’ve collaborated with the likes of The Simpsons, Disney, Nintendo and many more. We’ve also worked with a bunch of pretty amazing people from Julia Michaels to Maggie Lindemann and Zara Martin (to name a few!) to create pretty epic products and collections for you to love and basically be obsessed with forever, and the fun certainly doesn’t stop there!

Large images with title and button.
Image banner with text and button plus social media icons.
Displays 3 static products in a carousel.
A banner with a title, text and optional links.

Text banner

Content to introduce the page and acompany the title. It can be long or short depending on the context.
Simple text box section with multiple columns.

Text box

It’s bloody cold outside, you’re slightly rounder than you was pre-Christmas and quite frankly you’re ready for summer 2020 to hurry up and get here already. So to see you through this seriously glum time, we’ve rounded up our best (zero calorie) accessories set to see you through until the warm weather comes back around again. So whether you’re calorie counting or you’ve finally got your ass back to the gym and introduced some greens back into your diet, treat yourself to some fun fruit without the added calories.

Large callout text with an animation on scroll.

If work isn't fun

you're not playing on the right team

Two image blocks with captions and links.

Product Title

We’re inspired by the cool, the kind and the relatable and if there’s one thing we know for sure, it’s that all our products are guaranteed to make you laugh, smile or think ‘damn that’s accurate…’.

Shop New In
Used to display a .mp4 or .mov file using HTML5 video

Value proposition statement

A global drawer for displaying the cart's content anywhere on the website. The customer can also manage their cart from the cart drawer.

A global drawer for displaying the navigation anywhere on the website, available on mobile.

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.