デザインシステムとは、Webサイトやアプリケーションのデザインに関するルール・コンポーネント・ガイドラインを体系的にまとめた設計基盤だ。CSS変数によるカラーパレットの一元管理、共通コンポーネント(ボタン・カード・ヘッダーなど)の定義、タイポグラフィのルールなどが含まれる。大規模なデザインシステムとしてはGoogleのMaterial DesignやIBMのCarbon Design Systemが有名だが、中小規模のサイトでもCSS変数+共通CSSクラスの組み合わせで簡易的なデザインシステムを構築できる。ページ間のデザイン統一、新規ページ作成の効率化、ブランドカラー変更時の一括対応が主なメリットだ。