{"head":{"title":"What Is a Design System? Definition and Example | OceanLab","description":"A design system is a shared set of components, styles and rules used to build a product's screens. What it contains, why it saves time and common mistakes.","canonical":"https://oceanlab.in/glossary/design-system"},"crumbs":[{"name":"Home","path":"/"},{"name":"Glossary","path":"/glossary"},{"name":"design system","path":"/glossary/design-system"}],"slug":"design-system","term":"Design system","aka":["component library","UI kit"],"category":"Running a build","short":"A shared set of reusable components, styles and usage rules that designers and engineers both build screens from.","body":[["A design system has three layers. Tokens are the basic values: colours, type sizes, spacing and radii. Components are the building blocks made from them: buttons, inputs, tables, modals. Guidelines say when to use which, and how they should behave and read."],["The same components exist in the design tool and in code, with the same names. A designer who places a button in a ",{"href":"/glossary/high-fidelity-prototype","text":"high fidelity prototype"}," is placing something an engineer already has."]],"why":["Without one, every screen is designed and coded from scratch, so the same button ends up in six slightly different versions. A design system makes new screens faster, keeps the product consistent, and lets accessibility fixes happen once instead of on every page."],"example":["A SaaS team finds four date pickers in its app, each with different keyboard behaviour. They build one date picker component, document it and replace the other four. The next screen that needs dates takes an hour instead of a day."],"inBuild":["Every OceanLab case study is scoped as product design, UI build and development, so the components drawn in design are the same ones built in code. That shared set is the design system for the product."],"mistakes":[["Building a large system before the product needs it. Start with the components you use now."],["Letting design files and code drift apart, so the system in the design tool is not the one shipped."],["Skipping states: disabled, loading, error and empty are part of each component."]],"related":[{"href":"/glossary/wireframe","label":"Wireframe","detail":"A simple, usually grey, sketch of a screen showing layout, content and actions, without final styling."},{"href":"/glossary/high-fidelity-prototype","label":"High fidelity prototype","detail":"A prototype that looks almost exactly like the finished product, with final styling, real content and realistic interactions."},{"href":"/glossary/usability-testing","label":"Usability testing","detail":"Watching real people try to complete real tasks with a product, to find where they get stuck."},{"href":"/glossary/technical-debt","label":"Technical debt","detail":"The future cost of shortcuts taken in code today."}],"tools":[{"href":"/tools/software-development-cost","label":"Software development cost","detail":"Free tool"},{"href":"/tools/project-timeline-estimator","label":"Project timeline estimator","detail":"Free tool"}],"links":[{"href":"/case-studies","label":"Case studies","detail":"Product builds by OceanLab, by industry."},{"href":"/software","label":"Software by industry","detail":"Systems we build per industry, with guides and tools."}],"sources":[],"legal":false,"updatedAt":"2026-10-25"}