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.

rgb(227, 82, 5)
rgb(220, 197, 156)
rgb(165, 182, 198)
rgb(83, 86, 90)
Text Primary
rgb(34, 34, 34)
Text Secondary
rgb(83, 86, 90)
Text Light
rgb(148, 148, 148)
Text Inverse
rgb(255, 255, 255)
Background Dark
rgb(34, 34, 34)
Background Light
rgb(242, 244, 243)
Background White
rgb(255, 255, 255)
Border Light
rgb(227, 227, 225)
Border Dark
rgb(34, 34, 34)
rgb(34, 34, 34)
Link Hover
rgb(34, 34, 34)
rgb(34, 34, 34)
Button Hover
rgb(255, 255, 255)
rgb(34, 34, 34)
rgb(0, 170, 0)
rgb(230, 87, 34)
rgb(246, 71, 71);
rgb(94, 158, 214)

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

.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

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


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.
















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

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 2


Body 1

p, .body-1

Body 2

  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.


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.


Accordion enables users to expand and collapse sections of content.


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


Our current delivery timescale for new orders is approximately 6 weeks for fabric furniture and softgrain leather furniture, and 8 weeks for vintage, antique and milton leather furniture. We appreciate that these timescales are slightly longer than normal due to the unprecedented challenges that we face during the pandemic. We are extremely grateful for your patience and understanding. All our sofas and chairs are hand made to order in the UK and this does take time. As they say, 'good things come to those who wait'.

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


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 kerbside 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 only be able to offer kerbside delivery to households in certain areas with very high coronavirus levels.


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.


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.


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! On occasion, we may need to use a third party carrier to deliver to some areas. 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.

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.

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.

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. 

Choosing the right design is just the first step in finding the perfect sofa.  We understand how important comfort is and our handy guide gives advice on our different seat cushion options. 

Foam with a Feather Wrap

The foam core offers support whilst a duck feather wrap attached to each side gives the feeling of luxury and softness.  Although quite a firm sit to start, it softens with use and is perfect for sinking into at the end of the day.  This is the most popular choice with our customers.

Available on: Agatha, Austen, Ava, Chelsea, Florence, Grosvenor, Hampton and Mia.

Moulded Foam

This is our firmest choice of seat cushion.  Flat in appearance, it requires occasional turning to ensure even wear and will look as good as new for years to come.  Perfect if you want a low maintenance cushion.
Available on: Agatha, Albany, Alfie, Amelia, Aspen, Austen, Ava, Balmoral, Banbury, Bari, Belgravia, Blenheim, Brunello, Burlington, Cambridge, Chelsea, Chesterfield, Darcy, Denver, Earl, Elgar, Elizabeth, Ella, Florence, Genoa, Georgie, Grand Chesterfield, Grosvenor, Hampton, HarryHenryHudson, Ismay, Lincoln, Madrid, Malmo, Marcie, Marino, Marlow, Megan, Mezzo, Mia, Monaco, Monk, Montana, Monza, Newport, Olivia, Palma, Poppy, Portofino, Positano, Rebecca, Regent, Richmond, Rio, Scala, Senator, Sienna, Sophia, Theo, Victoria, Wentworth, Wilmington, Windsor and Woburn.

Moulded Foam with a Dacron Wrap

Dacron is a type of polyester wadding that is bonded to either side of the foam core.  The foam offers support whereas the dacron gives a loft to the cushion and softens the sit.  A great mixture of style and support.

Available on: Blenheim, Wentworth and Woburn

Hollowfill Fibre

By far our softest seat cushion.  The more you sit on it, the softer it gets and it's like having a big hug at the end of the day. Regular plumping and turning is required but if soft and squishy is your thing, then this cushion is for you! This is great for a more relaxed look.

Available on: Albany, Banbury, Charlotte, Elton, Ismay, Kate, Madrid, Newport, Positano and Rebecca.




Product card badges.


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.


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.

Unique selling points

translation missing: en.layout.carousels.previous_image
translation missing: en.layout.carousels.next_image

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.