WHATEVER
Watch Reel
Make whatever.
Rules, whatever.

わたしたちは、誰も見たことがないようなアイデアを考え、

あらゆる方法でそれを実現していくクリエイティブスタジオ。

Watch Reel Learn more

Colors

地は純白、文字は純黒。UI に単色のブランドカラーは現れず、9 色のスペクトラムはすべてグラデーションの構成色として使われる。2 色を linear-gradient(to right in oklab, A, B) で繋ぎ、ノイズテクスチャを必ず重ねる。in oklab を省略すると、補色寄りの組み合わせで中間がグレーに濁る。

#0d44fb
#29ebfe
#00c745
#89e82b
#ffeb00
#ff9201
#ff2300
#fd1eba
#a725fc
in oklab · #0d44fb → #29ebfe
in oklab · #fd1eba → #ff2300
in oklab · #ff9201 → #0d44fb
in oklab · #00c745 → #fd1eba
in oklab · #89e82b → #fd1eba
in oklab · #a725fc → #0d44fb
Gradient Text
background-clip: text — 同じグラデーションを文字マスクとして流す(.grad-effect-base)

Typography

font-family は Apercu, "Noto Sans JP", sans-serif の 1 スタックを全要素で使い回す(欧文優先)。html の font-size は 10px、本文は言語別に 15px / 17px。見出しは vw 基準の流体で、12px と 151px のような極端なジャンプで階層を作る。

Make whatever.
Hero · Apercu · 10.5vw(1440px 幅で 151.23px)· weight 700 · lh normal
Featured Works
Section Head · Apercu · 約 2.64vw(38.07px)· weight 700 · lh normal
考えるだけではなく、作るだけでもなく、「考えて作る」からこそ生み出せる。
Lead (JP) · Noto Sans JP · 約 1.91vw(27.50px)· weight 700 · lh 2.31(太くて行間が極端に広い)
Silent Cleaning
Work Detail H2 · Apercu · 32px · weight 700 · lh 1.3 · ls 0.01em
everies
Card Title · Apercu · 28px · weight 700 · lh 1.2
Watch Reel
Button · Apercu · 18px · weight 700 · ls 0.04em
お問い合わせ
Nav / CTA (JP) · Noto Sans JP · 16px · weight 700 · ls 0.04em
Body (EN) — We think and make. An idea that stays on a deck is only half an idea, so we build it, ship it, and see what the world does with it.
Body (EN) · Apercu · 17px · weight 200 · lh 1.76(行送り 30px)
本文(和文)— アイデアと実現力を武器に、世界中の人々に驚き愛されるような体験を作り続けています。和文 15px と欧文 17px で、行送りの実寸をどちらも 30px に揃えている。
Body (JP) · Noto Sans JP · 15px · weight 300 · lh 2.0(行送り 30px)
カード説明 — 身の回りのモノと会話できる AR アプリ。
Card Meta · Noto Sans JP · 15px · weight 500 · lh 1.6
BRANDING / WEB / APP / EVENT
Label / Tag · Apercu · 12px · weight 300 · ls 0.12em
Oct 01, 2025
Caption · Apercu · 12px · weight 300 · ls 0.03em · #cccccc

Article

Think and make.

考えるだけではなく、作るだけでもなく。デッキの中に留まったアイデアは、まだ半分しかできていません。だから作って、出して、世界がそれをどう扱うかを見にいきます。

Body (EN) — The gap between an idea and a thing is where most of the work lives. We keep both hands in it: strategy and production, concept and craft, in the same room.

和文は 15px・行間 2.0、欧文は 17px・行間 1.76。サイズは違っても行送りの実寸は 30px で揃えているので、和欧が混ざっても行のリズムは崩れません。All Works

Buttons

ボタンは黒ベタの矩形ひとつだけ。border-radius は 0、影も無し。ホバーでブランドグラデーションに差し替える。タグは 1px solid #b4b4b4 の枠に 12px / letter-spacing 0.12em。

Watch Reel Learn more All Works
Branding Web / App Event / Installation Film

Cards

Work のサムネイルが主役。画像も角丸にしない。作品名 28px / 700、説明 15px / 500、タグ 12px / 300 / ls 0.12em という並び。

everies
身の回りのモノと会話できる AR アプリ
Web / AppBranding
Oct 01, 2025
Silent Cleaning
音を立てずに街をきれいにする、という提案
Event / Installation
Aug 08, 2025

Forms

デフォルト / フォーカス / エラーの3状態。radius 0、罫は #b4b4b4、フォーカスで純黒に。エラーはスペクトラムの #ff2300 を単色で使う。

正しい電話番号を入力してください。
Send

Elevation

Whatever のサイトには box-shadow が存在しない。奥行きは白地・黒面・グラデーション帯の 3 層で作る。ノイズテクスチャが唯一の「質感」で、影の代わりに平面へ厚みを与えている。

Level 0
none(既定にして唯一)
Ink
#000000 のベタ面
Gradient
noise + in oklab のグラデーション帯

Layout

rem 基準が 10px なので余白は 10 の倍数で刻む。max-width のコンテナは持たず、要素は全幅にブリードして左右 padding だけで寄せる。

XS 4
S 10
M 20
L 40
XL 80
XXL 120