Design system
A design system is a shared set of reusable components, styles and rules, such as colors, typography, spacing, buttons and sections, that keeps a website or product consistent as it grows.
On a website, a design system usually lives inside the build tool. In Framer, that means color and text styles, components and a library of page sections that teams can combine into new pages.
Why it matters
New pages ship faster because teams reuse proven sections.
The brand looks the same everywhere.
Marketing teams can build pages without breaking the design.
A design system is narrower than a brand system: the brand system defines the identity, the design system turns it into reusable building blocks. Gather’s team now builds pages with a modular section library; see the Gather case study.
FAQ
What is the difference between a design system and a style guide?
A style guide documents rules. A design system also includes the working components and sections teams use to build.
Does a small website need a design system?
A light one, yes: shared styles and components save time with every new page.
Related terms
Brand system
A brand system is the full set of elements that define how a brand looks and sounds, including logo, colors, typography, imagery, motion, voice and rules for using them, across website, product and marketing.
Marketing website
A marketing website is a company's public website built to explain what it offers, build trust and turn visitors into leads, sign-ups or sales, as opposed to the product or app itself.
Framer
Framer is a visual website builder and design tool for creating, hosting and managing production websites without hand-written code, with a built-in CMS, localization, animations and hosting.
Related at Trueform:
