$30 off During Our Annual Pro Sale. View Details »

Charcoal 2.0: デザインシステムの基盤を再構築

小神
October 08, 2024

Charcoal 2.0: デザインシステムの基盤を再構築

スライドだけみると面白くないので、こちら台本付きのをおすすめします: https://www.figma.com/community/file/1424823581198686752/charcoal-2-0

小神

October 08, 2024
Tweet

Other Decks in Design

Transcript

  1. 2.0

  2. 0 2 4 6 8 12 16 20 24 28

    32 40 48 64 80 96 0 4 8 16 24 40 64 104 168 272 Head ing Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption Heading Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption Heading Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption 2.0
  3. 0 2 4 6 8 12 16 20 24 28

    32 40 48 64 80 96 0 4 8 16 24 40 64 104 168 272 Head ing Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption Heading Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption Heading Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption 2.0 色
  4. #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag NEW

    R-18 9月23日まで 1 2 3 ↑
  5. #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag NEW

    R-18 9月23日まで 1 2 3 ↑ 色を指定 ユーザー A ユーザー C ユーザー B ユーザー D
  6. 列が簡単に一貫性を保てるようになれば
 アクセシビリティの調整も容易になります 文 文 文 文 文 文 文 文

    文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文
  7. HSL HSB 4.66 1 1 21 21 21 1 3.41

    2.99 7.33 2.52 3.99 21 21 21 1 10.6 3.84 WCAG2 値の分布図 質問:本文色として合格する3点はどのあたりにありますか?
  8. 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫

    吾輩は猫 吾輩は猫 WCAG2 + HSB
 で設計 不安定な視認性 輝度/彩度/色相 3軸で
 コントラスト比が「ランダム」に変わる APCA + OKLCH
 で設計 一貫する視認性 OKLCH の輝度だけを調整