はじめに

Thinca Design Systemとは

Thinca Design System（TDS）は、シンカのプロダクトを同じ語彙でつくるための仕組みです。色や余白といった値（デザイントークン）、画面を構成する部品（コンポーネント）、繰り返し現れる画面構造（パターン）と、それぞれの使い方をまとめています。

デザインとコードが同じ定義を参照しているため、Figma上の見た目と実装された画面は同じ根拠を持ちます。

なぜ存在するのか

デザインの判断が、個人の記憶に依存しない状態をつくるため。

ボタンの色、余白の取り方、確認ダイアログの文言——こうした判断をその都度おこなうと、つくる人や時期によって画面がばらつきます。判断の結果を書き残しておけば、誰がつくっても同じ品質の画面になり、考える時間を本来考えるべきことに使えます。

プロダクトの姿を、誰でも見られる状態をつくるため。

シンカのプロダクトがどんな部品でできていて、これからどう変わっていくのか。開発に関わっていなくても、ここを見れば分かる。そういう場所にします。

扱う範囲

画面ごとの仕様は各プロダクトの設計ドキュメントに、ブランド表現は別のガイドラインにあります。TDSは「プロダクトのUIをつくるための語彙」に範囲を限定します。

構成と読み方

• Foundation — 色・タイポグラフィ・スペーシングなど、すべての土台になる値
• Components — Button、Input、Dialogなど、画面を組み立てる部品
• Patterns — フォーム、テーブル操作、フィードバックなど、部品を組み合わせた構造

はじめて読む場合はFoundationから。つくる画面が決まっている場合はComponentsから引く、という使い方を想定しています。

使うときの基本ルール

• 色や余白は値を直接書かず、トークンを参照する
• 既存のコンポーネントで実現できる場合は、新しくつくらない
• 足りない部品や判断に迷うことが出てきたら、自分で決める前に相談する

現在の状態

相談・要望の出し方

{{CONTACT}} へ。「こういう部品が欲しい」という要望と、「この使い分けが判断できない」という相談の両方を受け付けます。声が集まるほどシステムは正確になります。