Creative Agency — Tokyo

We inspire
the mark.

私たちは、課題解決、ビジネス変革、そして人の心を動かすアイデアで、ブランドに新しい印を刻む。

DESIGN.md から抽出したデザイントークンのカタログ。純白・ライトグレー・ニアブラックのモノクローム基調に、ただ一点だけ差す赤 #f23030。角丸なしの大胆なエディトリアル。computed style 実測値(2026-07-21)に基づく。

WORKS を見る CONTACT DESIGN.md を読む

01 / Colors

Color Palette

無彩色を基調に、彩度を持つのは赤 #f23030 ただ一色。白・ライトグレー・ニアブラックのコントラストで階層を作り、赤は一点差しに限定する。

Accent(唯一の彩度)
Accent Red
#f23030
一点差し・住所ラベル等
Base / Surface
White
#ffffff
ページ・ヘッダー地
BG Cover
#eeeeee
ヒーロー / cover 帯
Surface Tint
#f7f7f7
NEWS 等セクション面
Surface Dark
#1a1a1a
WORKS カード地
Surface Dark Alt
#262626
暗面 alt
Text
Text Strong
#222222
見出し・ナビ
Text Primary
#404040
本文
Text Muted
#808080
メタ・ラベル
Button Text
#333333
テキストボタン

02 / Typography — 実測値

Typography

原典は欧文=Maison Neue(Milieu Grotesque)、和文=YakuHanJP + 游ゴシック。本プレビューは代替の Work Sans / Noto Sans JP で表示。和文本文は line-height 2.0、英字ラベルは letter-spacing 0.1em、ヒーロー欧文だけ -0.015em と詰める。

We inspire the mark.
Display (Hero, en) — Maison Neue(代替 Work Sans)/ 80px / 700 / lh 1.1 / ls -0.015emheader.main_copy
TOYOTA
GR Brand Communication
Work Title / Client (en, ダーク地) — 48px / 24px / 400 / lh 1.0 / 色 #ffffffarticle.title / .client
本文テキスト — 私たちは、課題解決、ビジネス変革、そして人の心を動かすアイデアで、ブランドコミュニケーションを開発します。ABCabc 0123
Body (和文) — YakuHanJP+游ゴシック(代替 Noto Sans JP)/ 18px / 400 / lh 2.0 / ls 0.04emarticle.text.ja
NEWS 本文 — ADFEST 2026 において ENTERTAINMENT 部門ほかで 8つのメダル獲得と 1つのファイナリストに選出されました。
Body S / News (和文) — 16px / 400 / lh 2.0 / ls 0.04em / 色 #808080article.text.ja
NEWS
Section Label (en) — 16px / 400 / lh 1.0 / ls 1.6px (0.1em) / 色 #808080article.title.ja
WORKS SERVICE PEOPLE NEWS CONTACT
Nav / UI — 14px / 400 / lh 1.0 / ls 0.7px (0.05em) / 色 #222222nav.gnav

03 / Works — editorial グリッド

Selected Works

CTA は塗りのカラーボタンではなく、ニアブラック #1a1a1a 地+白文字の作例カードが担う。作例ビジュアルを大きく主役に置き、その上にクライアント名・作例名・READ MORE を重ねる。角丸なし。

IMAGE
TOYOTA
GR Brand Communication
READ MORE
IMAGE
SMBC 日興証券
日興フロッギー
READ MORE
IMAGE
popIn
popIn Aladdin
READ MORE

04 / Buttons

Buttons

塗りのブランドカラーボタンは持たない。CTA はニアブラック面+白文字が基本。ゴースト(枠のみ)とテキストリンクを併用し、赤 #f23030 は一点差しの用途に限定。すべて角丸なし(radius 0)。

WORKS を見る
Primary(#1a1a1a 地・白文字)
CONTACT
Ghost(#222 枠・hover 反転)
READ MORE
Text link(矢印付き)
お問い合わせ
Accent(#f23030・限定用途)

05 / Forms

Forms

フォームの抽出データは取れなかったため、基調トークンからの推定値で表示。角丸なし(radius 0)を踏襲。フォーカスは枠 #222222 +薄い墨リング、エラーはアクセントの赤。

デフォルト — border: #dddddd, radius: 0
フォーカス — border: #222222 + 薄い墨リング
エラー — border: #f23030(アクセントの赤を転用)

06 / Elevation

Depth & Elevation

影はほぼ使わず、白・ライトグレー・ニアブラックの地色コントラストで階層を作る。作例カードをニアブラックで沈めることで奥行きを出す。フラットが基本。

Level 0: Flat
影なし、地色のコントラストで階層(基本)
Level 1
0 1px 3px rgba(0,0,0,0.08)
Level 2
0 12px 32px rgba(0,0,0,0.16)

07 / Layout — Spacing Scale

Spacing

8px グリッド基準の目安スケール。横余白はビューポートに比例(約 6vw)。広い余白で作例を主役にする。

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