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.
$COLOR_PRIMARY
$COLOR_SECONDARY
$COLOR_TERTIARY
$COLOR_GREY
$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_BORDER_DARK
$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
Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
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.
$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
Display 2
Display 3
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Subtitle 1
Subtitle 2
Body 1
Body 2
- 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.
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 castors).
- Solid wood feet to the rear of the sofa.
- Available in Flanders brushed cotton linen mix fabric - 35% linen 65% cotton.
Our current delivery timescale is approximately 6-8 weeks for fabric and 6-8 weeks for leather furniture orders. All of 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'.
Unfortunately, our premium service is currently unavailable.
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.
The goods will be delivered by a two person delivery team to your property and into the desired room which must be either on the ground floor or via adequate stairs to the first floor (as a guide, maximum 2 flights/30 steps but please contact us to discuss further if your access is over this guide) or by elevator above the first floor. Deliveries above a first floor may be reasonably refused if not easily accessible.
ACCESS RESTRICTIONS
Our 7.5 ton trucks can deliver to 99% of residential locations, but some rural locations can create a bit of a challenge. If you live down a narrow lane or have restricted access to your property we may be able to offer the services of our smaller Luton truck ( dependent on your proximity to our South Wales Workshop). Please call us on 01495 246763 to discuss.
PRICES FOR STANDARD DELIVERY
Mainland England and Wales: we charge £75 for our standard delivery service to any address in mainland England and Wales. Scotland: we charge £125 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. 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 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.* 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.
*Collection charges will apply to Scottish regions. 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.
CANCELLATIONS
You can cancel up to 21 days from the day of delivery of your furniture for a full refund (subject to a collection charge in Scotland). If you wish to 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. Should you decide to cancel your order after delivery, we will arrange collection of your cancelled goods free of charge ( a collection fee applies in Scotland). Once the goods are returned to our workshop they will be inspected and, provided the goods are undamaged, a full refund will be issued. For full 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, Alice, Earl, Florence, Grosvenor, Hampton, Harper, Jasper, Mia, Moda, Morgan, Otto, Percy, Sutton and Tate
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, Amelia, Arthur, Balmoral, Banbury, Blenheim, Burton, Cambridge, Chesterfield, Chiswick, Clifton, Denver, Elgar, Felix, Florence, George, Grosvenor, Hampton, Hugo, Jasper, Lydia, Madrid, Malmo, Marino, Marlow, Mezzo, Mia, Monaco, Monk, Morgan, Newport, Otto, Parker, Poppy, Positano, Regent, Scala, Senator, Tate, Taylor, Victoria, 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: Aspen, Burlington, Blenheim, Cambridge, Darcy, Grand Chesterfield, Hudson, Woburn and Wilmington
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, Jasper, Kate, Madrid, Newport, Otto, Positano.
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.
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
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.
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.
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.
Fabric Samples
Request your free fabric samples to try at home.
Samples
Request Now
Arm Chairs
Shop now
-
![Some alt text here]()
Modular Corner Sofas
Shop now -
![]()
Leather Sofas
Shop Leather SofasLorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus et arcus enim, enim adipiscing non.
Looks We Love
Unique selling points
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.