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(227, 82, 5)
$COLOR_PRIMARY
Secondary
rgb(220, 197, 156)
$COLOR_SECONDARY
Tertiary
rgb(165, 182, 198)
$COLOR_TERTIARY
Grey
rgb(83, 86, 90)
$COLOR_GREY
Text Primary
rgb(34, 34, 34)
$COLOR_TEXT_PRIMARY
Text Secondary
rgb(83, 86, 90)
$COLOR_TEXT_SECONDARY
Text Light
rgb(148, 148, 148)
$COLOR_TEXT_LIGHT
Text Inverse
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
Background Dark
rgb(34, 34, 34)
$COLOR_BACKGROUND_DARK
Background Light
rgb(242, 244, 243)
$COLOR_BACKGROUND_LIGHT
Background White
rgb(255, 255, 255)
$COLOR_BACKGROUND_WHITE
Border Light
rgb(227, 227, 225)
$COLOR_BORDER_LIGHT
Border Dark
rgb(34, 34, 34)
$COLOR_BORDER_DARK
Link
rgb(34, 34, 34)
$COLOR_LINK
Link Hover
rgb(34, 34, 34)
$COLOR_LINK_HOVER
Button
rgb(34, 34, 34)
$COLOR_BUTTON
Button Hover
rgb(255, 255, 255)
$COLOR_BUTTON_HOVER
Info
rgb(34, 34, 34)
$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--outlined
.button--secondary,
.button--outlined
.button--light,
.button--outlined
.button.button--block
.button.is-active
.button.is-disabled or .button[disabled]

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

Standard checkbox
Filter checkbox
Sofa Finder filter checkbox
Radio

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
12

Desktop 12 / Tablet 6 / Mobile 4

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

$SPACING_4XL

$LAYOUT_S

$LAYOUT_M

$LAYOUT_L

$LAYOUT_XL

$LAYOUT_2XL

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

Subtitle 1

.subtitle-1

Subtitle 2

.subtitle-2

Body 1

p, .body-1

Body 2

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

Description

Our perfectly formed Agatha 2 seater sofa comes in a choice of luxuriously soft velvet or stylish linen. Solid hardwood feet give this small sofa a touch of elegance.

Agatha specifications

  • Choice of moulded foam or moulded foam wrapped in duck feather casing seat cushions
  • Fixed back fully sprung with zig-zag springs
  • Mounted on brown or grey-wash hardwood legs, (brown available with or without antique castors).
  • Solid wood feet to the rear of the sofa.
  • Available in a choice of 10 Flanders linen colours and 8 Opulence velvet colours

DELIVERY AND RETURNS

Our current delivery timescale for new orders is approximately 10 to 12 weeks.

We are pleased to confirm that we have now resumed full production and deliveries and we will be working through our delivery backlog in chronological order. We are experiencing a very high demand for new sofas and we regret that delivery is taking longer than normal. We would like to thank all our customers who have stuck with us through these difficult times and waited so patiently for the delivery of their new furniture.

Our usual delivery procedures have been altered to safeguard both our delivery teams and our customers (details below).


NEW DELIVERY PROCEDURES TO PREVENT THE SPREAD OF CORONAVIRUS

Please note new procedures have been introduced to protect both our customers and our delivery teams from the spread of Coronavirus. Unfortunately, this has inevitably led to a reduction in the delivery service we are able to offer for a while. Unfortunately, we are no longer able to unbag and fit feet to furniture in your house. All furniture will be left bagged in your room of choice and you will be required to unbag and fit feet and dispose of the packaging. We do not require any paperwork exchange or signature on delivery. Our delivery team will take a photo of the delivered furniture inside to confirm delivery. Please provide our delivery team with washing facilities to wash their hands before and after delivery. Our delivery teams will be equipped with gloves, face masks, and face shields which they will use throughout the delivery to protect themselves and our customers. Our delivery teams will be health checked prior to departure and all vehicles disinfected. Please maintain social distancing with our delivery teams at all times. Delivery can only be made into households that have remained coronavirus symptom-free for fourteen days prior to delivery. We are not able to deliver into potentially infected households but we can make a curbside delivery if required. Absolutely no contact will be made between delivery teams and household members in such circumstances. Our delivery team will contact you immediately prior to delivery to reconfirm that there are no symptoms in your household in the last fourteen days. Unfortunately, our premium service is currently unavailable.

Please note, we may have to postpone deliveries at very short notice to areas facing localised lockdown restrictions.


OUR STANDARD DELIVERY

We will contact you at least 7 days prior to delivery with the anticipated day of delivery. If you are happy with this date, we will then contact you at least 5 days prior to the delivery date with a three-hour timeslot. If the initial delivery date or time is not right for you, we will happily postpone your delivery to the next time we are in your area (usually within a couple of weeks). Of course the delivery team will be happy to call you en route to give you precise information as to their arrival if required. We deliver direct from our South Wales factories to your home using our fleet of 7.5 ton lorries (pictured above with freshly washed drivers). We deliver to any address on the UK Mainland or to a UK port of your choosing for onward shipment to Northern Ireland, any of the islands and abroad. All deliveries are undertaken by a two man delivery team so all you have to do is open the door and, if you’re feeling really sociable, put the kettle on. Our delivery team will position the furniture in the room of your choosing, take away all packaging if you want them to and allow you to inspect your furniture before signing for safe receipt. They are fully house trained and extremely skilled in getting sofas into the tightest of spots.

ACCESS RESTRICTIONS

Our 7.5 ton trucks can get to 99% of residential locations, but some rural locations can create a bit of a challenge. If you live down a narrow lane we can offer the services of our smaller truck, ‘Little Nell’. Little Nell can deliver to any location on the UK Mainland on a specific date of your choice. Prices start at £100 dependent on distance from our South Wales factory. For a quote please ring us on 01495 244226.

PRICES FOR STANDARD DELIVERY

Mainland England and Wales: we charge £29 per sofa or chair up to a maximum cost of £49 for our standard delivery service to any address in mainland England and Wales. Scotland: we charge £69 per sofa or chair to a maximum cost of £99 for standard delivery to any address in the lowland Scotland postcodes DG, TD, KA, ML, EH, G, FK, PH, KY and DD.  An additional charge is made for deliveries to the remaining Scottish postcode areas. Sorry Highlanders! Please contact us on 01495 244226 for more details.

Accessory charges vary, depending on the weight and value of the goods and if they are sent by Royal Mail or courier, to mainland England and Wales or Scotland. Please use our price calculator on the basket page or call for more information.

21 DAY MONEY BACK GUARANTEE
We know that choosing a new sofa online means you can’t necessarily try it out first. That’s why we offer a 21 day money back guarantee on all our furniture. You have 21 days from the day of delivery to try out your new sofas and chairs in the place it matters: your home. If, for whatever reason, you decide your new purchase is not quite right for you, simply let us know within 21 days and we will come and collect it free of charge. *
* Collection charges will apply to certain Scottish areas (Sorry Highlanders!). Charges will reflect the initial delivery charge.

PRODUCT GUARANTEES
All SofaSofa furniture is guaranteed for two years against any defect in manufacture and materials, and five years for frames for your sofa or chair. In the unlikely event of a fault, we will collect, repair and return the furniture to you entirely free of charge. Find out more about our SofaSofa Guarantees here. We will refund your money in full including all delivery charges so you are not left out of pocket. Alternatively we will happily organise an exchange to a different model, colour or size. And we promise not to quibble or pout.

CANCELLATIONS
You can cancel free of charge within 21 days after your furniture has been delivered. If you wish you cancel your order or return your goods, please put your request in writing in an email on our contact page or via post addressed to SofaSofa, Viaduct Works, Crumlin Road, Crumlin, South Wales, NP11 3PL For all details on cancellations and refunds, please see our Terms and Conditions. 

Product card badges.

Bestseller
Sale
Handmade

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

Hero banner shown at the top of collection pages. Text only banner shown first with a featured image banner shown second.

Sofas

Traditional or modern, velvet or Chesterfield, fabric or leather, and then there are compact 2 seater sofas and grand 4 seaters, with so many designs and colours to choose from, we are sure you'll find the right sofa for you.

All our sofas are handcrafted in our UK workshops and delivered direct to the room of your choice.

Ava Collection

Ava Collection

The stylish Ava just oozes class. Beautifully upholstered in soft Castello fabric and featuring contrast piping detail to arms and cushions, adding that extra special touch of class.

Popup notification used to indicate an action has been performed.

Liquid error: Could not find asset snippets/notifications.liquid

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.

  • apple_pay
  • google_pay
  • maestro
  • 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.

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

Zendesk chat button toggle used to trigger chat window.

Modular multimedia content blocks.

Fabric Samples

Request your free fabric samples to try at home.

Arm Chairs

Shop now
Full bleed static hero banner with featured product

Leather Sofas

Good news! All our leather sofa beds are now available in all leather types: antique, vintage and softgrain.

Shop Leather Sofas
Full width hero carousel with up to four blocks.
Instagram feed managed using the Covet Pics app

Looks We Love

Trustpilot reviews carousel widget
Full width carousel showcasing products from a featured collection
Three unique selling points with icons.

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.