【Design System】ペパボのデザインシステム

この間のWeb24で話に出ていたペパボのデザインシステムについての記事

tech.pepabo.com

気になったワード

Flavor：デザイントークンを差し替えるだけでそのサービスのブランドを崩さずにデザインする仕組み

色や形など、ブランドによって上書き可能なデザイントークンを、Flavorと呼ぶ変数にまとめておくことで、Flavorを差し替えることでブランドイメージを崩さないデザインができるようになります。

とのこと

面白いアイデアはデザイントークンをValue TokenとSemantic Tokenの2種類に分類していること

記事から拝借するとこのような感じ

// Value Token
$blue-400: #afb3ba;
$blue-500: #9297a1;
$blue-600: #3e6f99;
$blue-700: #585c63;
$blue-800: #393c41;

// Semantic Token
$informative-color: $blue-600;
$positive-color: $green-600;
$notice-color: $yellow-600;
$negative-color: $red-600;

.informative-button {
  color: $informative-color;
}

学んだのはタイポグラフィの話で、ページの縦方向のリズム（バーティカルリズム）を揃える話が勉強になった

なんらかの調和する比率をもとにスケールを作り、そのスケールをタイポグラフィのガイドラインにしようという話（モジュラースケール）や、実際にウェブサイトで調和する比率に「調和数列」を用いたという話は以下の記事を参考にされたと書かれていた

ekrits.jp

記事はとても読み応えがある

フォントサイズや行の高さなどを「調和数列」や「フィボナッチ数列」といった「ある秩序」を用いて作ることの美しさにちょっと感動する

キリの良さから何も考えず5px単位で作っていた自分がすこし恥ずかしい

ペパボさんはこの記事のアイデアからウェブ上でバリエーションをプレビューできるツールを作成したとのこと

⚖️ Harmonic Typographic Scale Calculator

今後参考にさせていただきたい

参考

Web24のデザインシステムのまとめ 　 https://togetter.com/li/1708694?page=2