デザイン原則

このデザインシステムは以下の原則を念頭にデザインされています。

技術面

• シンプルな API を念頭に、開発者フレンドリーなインターフェース

  • 必要以上に機能を詰め込まず、納得感のあるサイズに収める

• フレームワークに依存しない

  • ３つの異なる依存戦略を提供：
    • Pure-CSS デザインシステムとして
    • Custom Element ライブラリとして
    • Preact Element ライブラリとして

• ダークモードに勝手に対応する

• フォーム部品がフォーム部品として機能するように

  • Web Components においてこれは自明ではない

ビジュアル面

• 「ポジティブ、生き生きとした、友好的・平和」な印象を目指す

  • 華やかでもなく、フォーマルでもない、適度にカジュアルなラインを意識する

• サクサク感を重視する

  • 豪華な装飾や、無駄なアニメーションは使用しない（「ぬるぬる動」かない）
  • アニメーションは、ユーザーが「要素の行方を追うために必要な場合」に限る

• インタラクションを大切にする

  • 操作可能な部品は（ホバーしなくても）見分けがつくように
  • ホバー時および操作時に、必ず見た目に変化をつける（ただし、アニメーションは原則つけない）

カラーパレット

ライトモード

ブランドカラー

Hover [#ffb81c / okhsl(80, 100, 80)]Default [#eeaa00 / okhsl(80, 100, 75)]Active [#cd9200 / okhsl(80, 100, 65)]

エラー・危険

Hover [#fa837e / okhsl(24, 90, 70)]Default [#f76b68 / okhsl(24, 90, 65)]Active [#e53c42 / okhsl(24, 90, 55)]

Background [#ffffff]Border [#00000040]Foreground [#000000d0]

ダークモード

ブランドカラー

Hover [#c79431 / okhsl(80, 80, 65)]Default [#d7a139 / okhsl(80, 80, 70)]Active [#e6af47 / okhsl(80, 80, 75)]

エラー・危険

Hover [#e65f5c / okhsl(24, 80, 60)]Default [#ee736e / okhsl(24, 80, 65)]Active [#f38882 / okhsl(24, 80, 70)]

その他

Background [#222222]Border [#ffffff40]Foreground [#ffffffd0]