グラフィック、モーション、Web、アートディレクション。無色で匿名的な器に徹し、色は作品そのものに委ねる。
ブランドアクセント色を持たないモノクロ設計。純白の面、中間グレー #9f9f9f の文字、ホバー・強調のニアブラック #333333。彩度を持つ色は UI に現れず、色は作品サムネイルが担う。
Helvetica Neue Light 一書体・weight 400 のみで全階層を組む。サイズ差は小さく(20 / 16 / 14px)、階層は色とレイアウトが担う。palt は使わない。letter-spacing は +0.02〜0.04em の小さな正の値で統一。
groovisions のデザイン言語は、引き算でできています。UI に彩度を持つ色を足さず、白・中間グレー・ニアブラックの三色だけで構成する。装飾ではなく、余白とヘアラインの罫で秩序を作ります。
アバターシステム「chappie(チャッピー)」をはじめ、グラフィック・モーション・Web を横断する仕事は、器そのものを匿名で体系的に保つことで、作品それぞれの色を引き立てます。works を見る。
実サイトに面ボタンは存在せず、導線はすべてプレーンなテキストリンク(#9f9f9f → hover #333333)。以下の面ボタンはモノクロ設計を壊さない範囲で本リポジトリが設計したもの。実装時はまずテキストリンクを検討する。
四角い作品サムネイルを角丸なし・フラットで敷き詰める。ホバーで #333333 のオーバーレイが乗る。ここではグレースケールの見本だが、実際の色は作品側に委ねる。
デフォルト / フォーカス / エラーの3状態。radius 2px、フォーカスはニアブラック #333333(彩度を持つフォーカスリングは使わない)。エラー色は実サイトに無く、推測で追加した #c0392b。
奥行きはほとんど使わない。区切りは影ではなくヘアライン罫で示し、面はフラットに保つ。影は最小限の限定用途のみ。
8 / 16 / 24 / 40 / 64 / 96px。余白を大きく取り、ヘアラインの罫と作品グリッドだけで構成する。