This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
INTRODUCTION
Design system: The single source of truth
We’re big believers in design systems and the value they bring to businesses, marketers, designers and developers alike.
Having produced them for our clients over the last 10 years a design system has helped them overcome fundamental usability issues on their website such as inconsistency, poor accessibility, poor usability and a fragmented user experience. It also speeds up processes.
Options & PRICING
Design system options
Each option is designed to offer maximum value and impact no matter what your stage of business.
Lite
Cover the basics
£2,950
One off
The fundamentals
- Primary & reversed brand
- Colours – primary, secondary, accent
- System colours – error, warning etc
- Neutral palette
- Monotones
- Shadow states
- Scrim states
- Typographic structure – desktop & mobile
Simple components
- Buttons
- Form fields
- Tabs
- List items
- Table headers and cells
- Validation messages
- Password validation
- Arrows
- Chips
- Carousel indicators
Register your interest and book in your free gameplan session
Growth
Inclusive & animated
£4,895
One off
Everything in Starter plus:
Accessibility check
- Colour contrast checks
- Colour combo recommendations
- Typography
- WCAG 2.1 AA or WCAG 2.1 AAA
Animation
- Buttons
- Forms
- Fields
- Arrows
Annotation
- Descriptions added to the design system for development team
Register your interest and book in your free gameplan session
Custom
Full coverage
£5,950 +
Custom one-off
Everything in Growth plus:
Complex components
- Site furniture (headers, footers, menus etc)
- Additional components dependant on needs
- Mobile, tablet & desktop
Custom-priced dependant on nature and number of components.
Register your interest and book in your free gameplan session
DIY DESIGN SYSTEM
Ready made design system to go!
Perhaps you’re new to design systems and want to create your own but need a guiding hand, our design system template is a great place to start.
You’ll receive the fully editable Figma file with generic non-branded elements such as colours, typographic structure, button styles and interactions, form styles and interactions, tabs, arrows, pagination, table styles, system alerts etc. Everything that’s included in the Growth package above.
Then you just need to update what’s there so it fits your brand.
Notes are included in the Figma file to help you complete it.
Our Valued Clients
We work with people who want to join us on our journey...
for maximum impact commercially and socially
WHY A DESIGN SYSTEM?
The 3 ways a design system will change your life
"We are very much looking forward to implementing the style guide. Thank you indeed to you and the team for their help!"
DESIGN SYSTEMS AND THE SMART SITE
The role of the design system in a SmartSite
A SmartSite is a website that operates efficiently with the end goal of conversion central to this.
Design systems provide the blueprint for this, ensuring the basics of heuristics are covered so you’re well on your way to creating more intuitive, user-friendly websites that enhance overall usability and user satisfaction.
How design systems aid conversion:
- A unified experience enhances user trust and familiarity.
- It enables quick updates and adherence to usability best practices, reducing friction and boosting user satisfaction.
- It provides a scalable framework that facilitates innovation and adaptation to respond quickly to optimisation opportunities.
THE PROCESS
So what is the process?
STEP 1
Discovery
We will hold an initial meeting to discuss branding and scope around that, as well as level of accessibility required.
STEP 2
The work
We will build your design system bespoke to your needs using Figma, and present it to you in a virtual meeting.
STEP 3
Hand-over
Following one round of amendments. The Figma file will be shared with you for implementation along with a ‘How to use’ guide brochure.
FAQS
You probably have some questions for us
1. What is a design system?
A design system is a comprehensive collection of design standards, guidelines, components, and tools that help maintain consistency across a product’s user interface (UI). It includes everything from typography, color palettes, and UI components, to code snippets and design principles. A design system serves as a single source of truth for designers and developers, ensuring that every part of a product looks, feels, and functions cohesively.
2. What is the purpose of a design system?
The purpose of a design system is to create a unified and consistent user experience across all touchpoints of a product. It streamlines the design and development process by providing reusable components and guidelines, reducing redundancy, and improving efficiency. A design system also helps teams scale their work, maintain brand consistency, and quickly implement changes or updates across multiple platforms.
3. How do I build a design system from scratch?
Building a design system from scratch involves several key steps:
- Audit existing assets: Start by gathering all current design assets, UI components, and code snippets to assess what you already have.
- Define principles: Establish design principles that will guide the system’s development, such as accessibility, scalability, and consistency.
- Create core components: Design and develop foundational UI elements like buttons, forms, and navigation elements that can be reused across the product.
- Document guidelines: Write detailed documentation on how to use each component, including code examples and design rationale.
- Test and iterate: Implement the design system in a small project first, gather feedback, and refine the components and guidelines before rolling it out more broadly.
4. What is an atomic design system?
An atomic design system is a methodology for creating design systems based on the concept of breaking down a UI into its smallest elements (atoms) and combining them to create more complex structures. The five levels of atomic design are:
- Atoms: Basic building blocks like buttons, inputs, and color swatches.
- Molecules: Combinations of atoms that form simple components, such as a search bar.
- Organisms: Groups of molecules working together to form a section of a UI, like a header or a card layout.
- Templates: Page-level components that define the structure and layout of a page.
- Pages: Real instances of templates with actual content, representing the final design.
5. How can a design system support heuristics?
A design system can support heuristics by embedding best practices and usability principles into its guidelines and components. For example, it can ensure that UI elements follow established usability standards, such as consistency, feedback, and error prevention. By incorporating heuristics into the design system, teams can create interfaces that are more intuitive and user-friendly, reducing cognitive load and improving the overall user experience.
6. What skills are needed to implement a design system?
Implementing a design system requires a mix of design and technical skills, including:
- UI/UX Design: To create consistent and user-friendly components.
- Front-end Development: To translate designs into reusable, scalable code.
- Documentation Writing: To clearly communicate guidelines and usage instructions.
- Collaboration and Communication: To work effectively with cross-functional teams and ensure the design system meets everyone’s needs.
- Project Management: To oversee the process, from planning to implementation and iteration.
7. What’s the difference between a design system, a style guide and a pattern library?
- Design System: A holistic framework that includes design principles, UI components, code, and documentation, aiming to create a consistent user experience across products.
- Style Guide: A subset of a design system that focuses on visual design elements, such as color schemes, typography, and branding guidelines.
- Pattern Library: A collection of reusable UI components and design patterns that address common design problems, often included within a design system but more focused on specific components rather than the entire system.
8. Where can I find out more about design systems?
To learn more about design systems, you can explore resources like:
- Books: “Design Systems” by Alla Kholmatova and “Atomic Design” by Brad Frost.
- Online Communities: Design Systems Slack group, and forums like Designer Hangout.
- Blogs and Websites: Sites like Smashing Magazine, Nielsen Norman Group, and Medium articles by design experts.
- Courses: Online platforms like Coursera, Udemy, and LinkedIn Learning offer courses on design systems.