Atlassian Design System

実物のデザインシステム ／ 一覧

図を大きく見る

雰囲気の見本#

見本を新しいページで開く

この見本は公式サイトの画面ではありません。公開されているトークンの値（色・角丸・影・密度）で、この資料の架空の画面を組み直したものです。文言・図版・ロゴ・独自書体は使っていません。

どんなシステムか#

Atlassian が公開しています。部品の数が多く、状態の持たせ方が細かい。分類は「企業のプロダクト向け」です。

見た目の骨格#

値は公開されている資料から採っています。共通の部品は全件で同じ内容（見出し帯・タブ・ ボタン一式・入力一式・カード・表・通知・タグ・進捗・ダイアログ・文字の段・色）なので、 ほかのシステムと横に置いて、色・角・影・密度・書体・部品の形の違いを見比べられます。 「特有」と印を付けた節は、そのシステムだけが持つ部品です。

ここから借りるもの#

丸ごとまねる相手ではありません。借りるのは、トークンの名前の付け方と、 同じ部品をどう分けているかです。見た目は結果です。

公式#

• Atlassian Design System（Atlassian）

近いものと比べる#

• Polaris
• Primer
• 実物のデザインシステムから一覧に戻る