groovisions
works #chappie news about
groovisions

グラフィック、モーション、Web、アートディレクション。無色で匿名的な器に徹し、色は作品そのものに委ねる。

MONOCHROME SYSTEM — #ffffff / #9f9f9f / #333333 · HELVETICA NEUE LIGHT · WEIGHT 400

01 — COLORS

カラーパレット

ブランドアクセント色を持たないモノクロ設計。純白の面、中間グレー #9f9f9f の文字、ホバー・強調のニアブラック #333333。彩度を持つ色は UI に現れず、色は作品サムネイルが担う。

Background
#ffffff
ページ背景(純白)
Text Primary
#9f9f9f
本文・見出し・ナビの既定(黒ではなく中間グレー)
Text Emphasis
#333333
リンクホバー・強調・サムネイルオーバーレイ
Hairline
#e5e5e5
区切り罫・入力枠
Danger(推測)
#c0392b
フォームエラー用に本リポジトリが推測で追加。実サイトに意味的な色は無い

02 — TYPOGRAPHY

タイポグラフィ

Helvetica Neue Light 一書体・weight 400 のみで全階層を組む。サイズ差は小さく(20 / 16 / 14px)、階層は色とレイアウトが担う。palt は使わない。letter-spacing は +0.02〜0.04em の小さな正の値で統一。

groovisions
Logo (h1) · 20px · weight 400 · lh 1.8 · ls 0.02em · color #9f9f9f
works news about — グローバルナビ
nav · 20px · weight 400 · lh 1.8 · ls 0.04em
#chappie — 作品リスト項目
li · 20px · weight 400 · lh 1.5
本文 — グルーヴィジョンズは、グラフィックからモーション、Web までを横断するデザインスタジオ。UI から表情を削ぎ落とし、単一の書体と単一のグレーだけで画面を成立させる。
Body · 16px · weight 400 · lh 1.5 · ls 0.04em · color #9f9f9f
強調・リンクホバー — 色だけで階層を作る(太字を使わない)
emphasis · 16px · weight 400 · color #333333(ウェイトは変えない)
© 2026 groovisions — 注記・フッターの補助テキスト。
Caption / Footer · 14px · weight 400 · lh 2.0 · ls 0.04em

03 — WORKS / ARTICLE

組版サンプル

色を、作品に委ねる。

groovisions のデザイン言語は、引き算でできています。UI に彩度を持つ色を足さず、白・中間グレー・ニアブラックの三色だけで構成する。装飾ではなく、余白とヘアラインの罫で秩序を作ります。

アバターシステム「chappie(チャッピー)」をはじめ、グラフィック・モーション・Web を横断する仕事は、器そのものを匿名で体系的に保つことで、作品それぞれの色を引き立てます。works を見る


04 — BUTTONS

ボタン

実サイトに面ボタンは存在せず、導線はすべてプレーンなテキストリンク(#9f9f9f → hover #333333)。以下の面ボタンはモノクロ設計を壊さない範囲で本リポジトリが設計したもの。実装時はまずテキストリンクを検討する。

works →(テキストリンク・実サイトの基本形) View(ニアブラック面) Contact(細罫アウトライン)

05 — CARDS

作品カード

四角い作品サムネイルを角丸なし・フラットで敷き詰める。ホバーで #333333 のオーバーレイが乗る。ここではグレースケールの見本だが、実際の色は作品側に委ねる。

View
chappie system
Character / Avatar
View
Motion Identity
Motion / Direction
View
Album Artwork
Graphic
View
Website
Web / Art Direction

06 — FORMS

フォーム

デフォルト / フォーカス / エラーの3状態。radius 2px、フォーカスはニアブラック #333333(彩度を持つフォーカスリングは使わない)。エラー色は実サイトに無く、推測で追加した #c0392b。

正しい電話番号を入力してください。
※ 実サイトに意味的な色は無い。エラー色は推測で追加
送信する

07 — ELEVATION

奥行き

奥行きはほとんど使わない。区切りは影ではなくヘアライン罫で示し、面はフラットに保つ。影は最小限の限定用途のみ。

Level 0 — none(既定)
Level 1 — dropdown
Level 2 — modal

08 — LAYOUT

スペーシング

8 / 16 / 24 / 40 / 64 / 96px。余白を大きく取り、ヘアラインの罫と作品グリッドだけで構成する。

XS 8
S 16
M 24
L 40
XL 64
XXL 96