Design Systems
A ready-made kit of buttons, forms, colours and layouts that your designers and developers reuse, so everything you build looks like it belongs together.
One consistent look, built once, used everywhere.
Businesses with several products, websites or teams, and anyone whose screens have drifted apart over time.
- Design system
- UI kit
- Component library
- Style guide
- Brand guidelines
What you can do with it
Common ways businesses use Design Systems. Yours can be any of these, a mix, or something new.
- 01
New design system
Foundations and components for a new product family.
- 02
Consolidation
Bring inconsistent products back to one look.
- 03
Coded components
Ready-to-use components for your developers.
- 04
Accessibility
Contrast, focus and keyboard rules built into every component.
Everything it takes, handled
Every product looks and feels the same. New screens designed and built faster. Accessibility built in by default.
- Design tokens and brand foundations
- Component library in Figma
- Matching coded components
- Usage guidelines and documentation
- Training & ongoing support
How a Design Systems project runs
A clear process with a fixed scope, regular check-ins and nothing launched until you approve it.
- Step 01Week 1
Discover
A free call to understand your goals, users and budget. You get a written proposal with a fixed scope, timeline and price.
- Step 02Approval before build
Design
We map the experience and design the key screens. You review and approve before anything is built.
- Step 03Progress you can see
Build & test
We build in short cycles and share progress in your client workspace, then test on real devices for speed, security and accessibility.
- Step 04Ongoing
Launch & support
We launch, train your team and stay on hand with support, updates and improvements as you grow.
Built for performance and scale
Figma variables and components, design tokens, React component libraries with Tailwind CSS, Storybook documentation and automated accessibility checks. Documented, secure by design, and the source code is yours.
- 44+
- Technologies
- 7
- Disciplines
'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23114a8b'/%3e%3cstop%20offset='1'%20stop-color='%230669bc'/%3e%3c/linearGradient%3e%3clinearGradient%20id='ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15'%20x1='-1023.725'%20x2='-1029.98'%20y1='108.083'%20y2='105.968'%20gradientTransform='matrix(1%200%200%20-1%201075%20158)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-opacity='.3'/%3e%3cstop%20offset='.071'%20stop-opacity='.2'/%3e%3cstop%20offset='.321'%20stop-opacity='.1'/%3e%3cstop%20offset='.623'%20stop-opacity='.05'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='a7fee970-a784-4bb1-af8d-63d18e5f7db9'%20x1='-1027.165'%20x2='-997.482'%20y1='147.642'%20y2='68.561'%20gradientTransform='matrix(1%200%200%20-1%201075%20158)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%233ccbf4'/%3e%3cstop%20offset='1'%20stop-color='%232892df'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20fill='url(%23e399c19f-b68f-429d-b176-18c2117ff73c)'%20d='M33.338%206.544h26.038l-27.03%2080.087a4.152%204.152%200%200%201-3.933%202.824H8.149a4.145%204.145%200%200%201-3.928-5.47L29.404%209.368a4.152%204.152%200%200%201%203.934-2.825z'/%3e%3cpath%20fill='%230078d4'%20d='M71.175%2060.261h-41.29a1.911%201.911%200%200%200-1.305%203.309l26.532%2024.764a4.171%204.171%200%200%200%202.846%201.121h23.38z'/%3e%3cpath%20fill='url(%23ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15)'%20d='M33.338%206.544a4.118%204.118%200%200%200-3.943%202.879L4.252%2083.917a4.14%204.14%200%200%200%203.908%205.538h20.787a4.443%204.443%200%200%200%203.41-2.9l5.014-14.777%2017.91%2016.705a4.237%204.237%200%200%200%202.666.972H81.24L71.024%2060.261l-29.781.007L59.47%206.544z'/%3e%3cpath%20fill='url(%23a7fee970-a784-4bb1-af8d-63d18e5f7db9)'%20d='M66.595%209.364a4.145%204.145%200%200%200-3.928-2.82H33.648a4.146%204.146%200%200%201%203.928%202.82l25.184%2074.62a4.146%204.146%200%200%201-3.928%205.472h29.02a4.146%204.146%200%200%200%203.927-5.472z'/%3e%3c/svg%3e){kind=small}
%20-%20https://sketchapp.com%20--%3e%3ctitle%3ePBI%20Logo%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cdefs%3e%3clinearGradient%20x1='50%25'%20y1='0%25'%20x2='50%25'%20y2='100%25'%20id='linearGradient-1'%3e%3cstop%20stop-color='%23EBBB14'%20offset='0%25'%3e%3c/stop%3e%3cstop%20stop-color='%23B25400'%20offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient%20x1='50%25'%20y1='0%25'%20x2='50%25'%20y2='100%25'%20id='linearGradient-2'%3e%3cstop%20stop-color='%23F9E583'%20offset='0%25'%3e%3c/stop%3e%3cstop%20stop-color='%23DE9800'%20offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath%20d='M346,604%20L346,630%20L320,630%20L153,630%20C138.640597,630%20127,618.359403%20127,604%20L127,183%20C127,168.640597%20138.640597,157%20153,157%20L320,157%20C334.359403,157%20346,168.640597%20346,183%20L346,604%20Z'%20id='path-3'%3e%3c/path%3e%3cfilter%20x='-9.1%25'%20y='-6.3%25'%20width='136.5%25'%20height='116.9%25'%20filterUnits='objectBoundingBox'%20id='filter-4'%3e%3cfeOffset%20dx='20'%20dy='10'%20in='SourceAlpha'%20result='shadowOffsetOuter1'%3e%3c/feOffset%3e%3cfeGaussianBlur%20stdDeviation='10'%20in='shadowOffsetOuter1'%20result='shadowBlurOuter1'%3e%3c/feGaussianBlur%3e%3cfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.0530211976%200'%20type='matrix'%20in='shadowBlurOuter1'%3e%3c/feColorMatrix%3e%3c/filter%3e%3clinearGradient%20x1='50%25'%20y1='0%25'%20x2='50%25'%20y2='100%25'%20id='linearGradient-5'%3e%3cstop%20stop-color='%23F9E68B'%20offset='0%25'%3e%3c/stop%3e%3cstop%20stop-color='%23F3CD32'%20offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3cg%20id='PBI-Logo'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='Group'%20transform='translate(77.500000,%200.000000)'%3e%3crect%20id='Rectangle'%20fill='url(%23linearGradient-1)'%20x='256'%20y='0'%20width='219'%20height='630'%20rx='26'%3e%3c/rect%3e%3cg%20id='Combined-Shape'%3e%3cuse%20fill='black'%20fill-opacity='1'%20filter='url(%23filter-4)'%20xlink:href='%23path-3'%3e%3c/use%3e%3cuse%20fill='url(%23linearGradient-2)'%20fill-rule='evenodd'%20xlink:href='%23path-3'%3e%3c/use%3e%3c/g%3e%3cpath%20d='M219,604%20L219,630%20L193,630%20L26,630%20C11.6405965,630%201.75851975e-15,618.359403%200,604%20L0,341%20C-1.75851975e-15,326.640597%2011.6405965,315%2026,315%20L193,315%20C207.359403,315%20219,326.640597%20219,341%20L219,604%20Z'%20id='Combined-Shape'%20fill='url(%23linearGradient-5)'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e){kind=small}
%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20304%20182'%20style='enable-background:new%200%200%20304%20182;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23252F3E;}%20.st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FF9900;}%20%3c/style%3e%3cg%3e%3cpath%20class='st0'%20d='M86.4,66.4c0,3.7,0.4,6.7,1.1,8.9c0.8,2.2,1.8,4.6,3.2,7.2c0.5,0.8,0.7,1.6,0.7,2.3c0,1-0.6,2-1.9,3l-6.3,4.2%20c-0.9,0.6-1.8,0.9-2.6,0.9c-1,0-2-0.5-3-1.4C76.2,90,75,88.4,74,86.8c-1-1.7-2-3.6-3.1-5.9c-7.8,9.2-17.6,13.8-29.4,13.8%20c-8.4,0-15.1-2.4-20-7.2c-4.9-4.8-7.4-11.2-7.4-19.2c0-8.5,3-15.4,9.1-20.6c6.1-5.2,14.2-7.8,24.5-7.8c3.4,0,6.9,0.3,10.6,0.8%20c3.7,0.5,7.5,1.3,11.5,2.2v-7.3c0-7.6-1.6-12.9-4.7-16c-3.2-3.1-8.6-4.6-16.3-4.6c-3.5,0-7.1,0.4-10.8,1.3c-3.7,0.9-7.3,2-10.8,3.4%20c-1.6,0.7-2.8,1.1-3.5,1.3c-0.7,0.2-1.2,0.3-1.6,0.3c-1.4,0-2.1-1-2.1-3.1v-4.9c0-1.6,0.2-2.8,0.7-3.5c0.5-0.7,1.4-1.4,2.8-2.1%20c3.5-1.8,7.7-3.3,12.6-4.5c4.9-1.3,10.1-1.9,15.6-1.9c11.9,0,20.6,2.7,26.2,8.1c5.5,5.4,8.3,13.6,8.3,24.6V66.4z%20M45.8,81.6%20c3.3,0,6.7-0.6,10.3-1.8c3.6-1.2,6.8-3.4,9.5-6.4c1.6-1.9,2.8-4,3.4-6.4c0.6-2.4,1-5.3,1-8.7v-4.2c-2.9-0.7-6-1.3-9.2-1.7%20c-3.2-0.4-6.3-0.6-9.4-0.6c-6.7,0-11.6,1.3-14.9,4c-3.3,2.7-4.9,6.5-4.9,11.5c0,4.7,1.2,8.2,3.7,10.6%20C37.7,80.4,41.2,81.6,45.8,81.6z%20M126.1,92.4c-1.8,0-3-0.3-3.8-1c-0.8-0.6-1.5-2-2.1-3.9L96.7,10.2c-0.6-2-0.9-3.3-0.9-4%20c0-1.6,0.8-2.5,2.4-2.5h9.8c1.9,0,3.2,0.3,3.9,1c0.8,0.6,1.4,2,2,3.9l16.8,66.2l15.6-66.2c0.5-2,1.1-3.3,1.9-3.9c0.8-0.6,2.2-1,4-1%20h8c1.9,0,3.2,0.3,4,1c0.8,0.6,1.5,2,1.9,3.9l15.8,67l17.3-67c0.6-2,1.3-3.3,2-3.9c0.8-0.6,2.1-1,3.9-1h9.3c1.6,0,2.5,0.8,2.5,2.5%20c0,0.5-0.1,1-0.2,1.6c-0.1,0.6-0.3,1.4-0.7,2.5l-24.1,77.3c-0.6,2-1.3,3.3-2.1,3.9c-0.8,0.6-2.1,1-3.8,1h-8.6c-1.9,0-3.2-0.3-4-1%20c-0.8-0.7-1.5-2-1.9-4L156,23l-15.4,64.4c-0.5,2-1.1,3.3-1.9,4c-0.8,0.7-2.2,1-4,1H126.1z%20M254.6,95.1c-5.2,0-10.4-0.6-15.4-1.8%20c-5-1.2-8.9-2.5-11.5-4c-1.6-0.9-2.7-1.9-3.1-2.8c-0.4-0.9-0.6-1.9-0.6-2.8v-5.1c0-2.1,0.8-3.1,2.3-3.1c0.6,0,1.2,0.1,1.8,0.3%20c0.6,0.2,1.5,0.6,2.5,1c3.4,1.5,7.1,2.7,11,3.5c4,0.8,7.9,1.2,11.9,1.2c6.3,0,11.2-1.1,14.6-3.3c3.4-2.2,5.2-5.4,5.2-9.5%20c0-2.8-0.9-5.1-2.7-7c-1.8-1.9-5.2-3.6-10.1-5.2L246,52c-7.3-2.3-12.7-5.7-16-10.2c-3.3-4.4-5-9.3-5-14.5c0-4.2,0.9-7.9,2.7-11.1%20c1.8-3.2,4.2-6,7.2-8.2c3-2.3,6.4-4,10.4-5.2c4-1.2,8.2-1.7,12.6-1.7c2.2,0,4.5,0.1,6.7,0.4c2.3,0.3,4.4,0.7,6.5,1.1%20c2,0.5,3.9,1,5.7,1.6c1.8,0.6,3.2,1.2,4.2,1.8c1.4,0.8,2.4,1.6,3,2.5c0.6,0.8,0.9,1.9,0.9,3.3v4.7c0,2.1-0.8,3.2-2.3,3.2%20c-0.8,0-2.1-0.4-3.8-1.2c-5.7-2.6-12.1-3.9-19.2-3.9c-5.7,0-10.2,0.9-13.3,2.8c-3.1,1.9-4.7,4.8-4.7,8.9c0,2.8,1,5.2,3,7.1%20c2,1.9,5.7,3.8,11,5.5l14.2,4.5c7.2,2.3,12.4,5.5,15.5,9.6c3.1,4.1,4.6,8.8,4.6,14c0,4.3-0.9,8.2-2.6,11.6%20c-1.8,3.4-4.2,6.4-7.3,8.8c-3.1,2.5-6.8,4.3-11.1,5.6C264.4,94.4,259.7,95.1,254.6,95.1z'/%3e%3cg%3e%3cpath%20class='st1'%20d='M273.5,143.7c-32.9,24.3-80.7,37.2-121.8,37.2c-57.6,0-109.5-21.3-148.7-56.7c-3.1-2.8-0.3-6.6,3.4-4.4%20c42.4,24.6,94.7,39.5,148.8,39.5c36.5,0,76.6-7.6,113.5-23.2C274.2,133.6,278.9,139.7,273.5,143.7z'/%3e%3cpath%20class='st1'%20d='M287.2,128.1c-4.2-5.4-27.8-2.6-38.5-1.3c-3.2,0.4-3.7-2.4-0.8-4.5c18.8-13.2,49.7-9.4,53.3-5%20c3.6,4.5-1,35.4-18.6,50.2c-2.7,2.3-5.3,1.1-4.1-1.9C282.5,155.7,291.4,133.4,287.2,128.1z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e){kind=small}
Design
Research, prototypes and design systems.
- FigmaInterface design
- FigJamWorkshops & journeys
- ProtopieAdvanced prototypes
- Adobe Creative CloudBrand & media
We pick the right tool for each job, not the newest one. Everything is documented, and the code is yours.
Common questions
If you have more than one product or a growing team, it usually saves time within months.
Ready for Design Systems?
Tell us what you need. We reply within one working day.