{"id":"atlassian-design-system","no":545,"name":"Atlassian Design System","ja":"Atlassian Design System","era":"2012–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 27","addedAt":"2026-08-22","source":{"title":"Atlassian Design System — About","url":"https://atlassian.design/get-started/about-atlassian-design-system"},"reference":{"status":"verified","pageUrl":"https://atlassian.design/get-started/about-atlassian-design-system","credit":"Atlassian Design System — About"},"essence":"JiraやConfluenceの複雑な共同作業を、トークン、文章、余白、グリッド、部品の共有規則へ落とす体系。調和と信頼を一貫性から作りながら、利用者が大量の課題・文書・状態を見失わないことを優先する。","cues":["白い面と薄い灰色の階層に青を主操作として置く","角丸のカードとロゼンジ型の状態ラベル","サイドバー、表、詳細ペインの明確な分割","色・余白・角丸・影がトークンで揃う"],"intents":["信頼","技術","親密"],"works":["課題管理やナレッジ共有で、一覧と詳細を往復する業務画面を作るとき","複数製品に同じ信頼感を保ちつつ、各製品の複雑さを吸収したいとき"],"recipe":{"type":"見出し、本文、ラベルの段階を固定し、状態名は短いロゼンジの中へ収める。","layout":"左の移動、中央の一覧、右または別面の詳細という役割を崩さず、余白はトークンの倍数にする。","material":"白と淡い灰を基礎に青を主操作へ割り当て、状態色は意味を重ねない。"},"avoid":"カードと状態ラベルを増やしすぎると、すべてが部品として同じ強さになり、いま進めるべき仕事が見えなくなる。","colors":["#FFFFFF","#0C66E4","#172B4D"],"motif":"ui","pair":["github-primer","corporate-memphis"],"study":["Atlassianのdesign principles","状態を示すlozenge","spacing・radius・elevation tokens"],"en":{"essence":"A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.","cues":["White and pale gray layers with blue primary actions","Rounded cards and lozenge-shaped status labels","Clear divisions among sidebar, table and detail pane","Color, spacing, radius and elevation controlled by tokens"],"works":["Work-management products where people move repeatedly between lists and details","Keeping a trusted family resemblance across products without hiding their complexity"],"recipe":{"type":"Fix the steps for headings, body and labels; keep status names short inside lozenges.","layout":"Keep navigation, list and detail roles stable; use token multiples for spacing.","material":"Use white and pale gray as the base, blue for primary actions and one semantic meaning per status color."},"avoid":"Too many cards and status labels give every component equal force and hide the work that matters next.","study":["Atlassian design principles","Status lozenges","Spacing, radius and elevation tokens"]},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}