Start a Goal
Interactor design system · v1

ブランドに沿ったInteractorインターフェースを作る

Interactorの画面を支えるビジュアル言語 — 明るいオフホワイトのOSキャンバス、グリーンのプライマリ、モノスペースの情報レイヤー。トークン、書体、コンポーネント、ブランドを、あなたのプロダクトにそのまま組み込めます。

Plain CSS variablesNo build stepMIT-friendlyLight canvas + dark bands
はじめに · インストール

トークンを取り込み、その上に築く

このシステムは純粋なCSSカスタムプロパティです — フレームワークもビルド工程も不要。フォントと2つのトークンファイルを読み込み、変数を参照するだけ。このページのすべてがそれで作られています。

app.css
/* 1 · fonts — Archivo, Open Sans, JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* 2 · tokens — load first, then the component layer */
@import 'colors_and_type.css';  /* color · type · radii · spacing */
@import 'interactor.css';       /* buttons · cards · nav · inputs */

/* 3 · build on the tokens */
.cta {
  background: var(--lime);
  color: var(--navy);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
}

含まれるもの

Light canvas + dark bandsGreen primaryMono info layer8-pt spacingCompact radiiStroked 24-grid icons
基礎 · カラー

明るいキャンバス、エネルギーはグリーンだけ

温かみのあるオフホワイトのベース、4段階のエレベーション、ほぼ黒のテキストランプ、そして唯一の彩度のある色であるグリーン。スウォッチをクリックするとトークンをコピーできます。

ブランド — 通常の使用で彩度のある色はグリーンだけ — アクション、状態、ブランドの瞬間にのみ使います。

キャンバスとエレベーション — 奥行きはドロップシャドウではなく、少し深いオフホワイトの色調で表現します。

テキストランプ — ほぼ黒は文字専用。見出しから無効状態まで4段階。

セマンティック — 状態表示のみ — 成功は同じグリーンです。

基礎 · 書体

3つの書体、ひとつの整った声

Archivoがディスプレイ領域を、Open Sansが本文とUIを担い、JetBrains Monoはシグネチャの情報レイヤーです — アイブロウ、タグ、ステータス、メタデータを広い字間の大文字で表示します。

Aa
Archivo
Display · headings
wght 400–700 · −0.025 to −0.04em
Aa
Open Sans
Body · UI
wght 400–700 · line-height 1.55
Aa
JetBrains Mono
The info layer
wght 400–500 · +0.04 to +0.12em

タイプスケール

.t-display-1Archivo 500 · clamp 44–76 · −0.035em
Intelligence at work
.t-display-2Archivo 500 · clamp 32–44 · −0.025em
Three modes, one conversation.
.t-h2Archivo 600 · 34 · −0.025em
Build on the foundation
.t-titleArchivo 600 · 22 · −0.02em
Self-host on day one
.t-body-lOpen Sans 400 · 17 · 1.55
Switch between pure chat, a split workspace, or a full app — without losing context, source or thread.
.t-bodyOpen Sans 400 · 15 · 1.55
Talk to your stack. Move beyond LLM wrappers.
.t-monoJetBrains Mono 400 · 12 · +0.04em
claude-sonnet-4.5 · auto-mode · 1.4s
.t-eyebrowJetBrains Mono 500 · 11 · +0.12em · UPPER
FOUNDATIONS · TYPOGRAPHY
基礎 · 余白と角丸

8ptのリズム、小さめの角丸

余白は8pt単位で段階的に、56pxのカラムリズムがマーケティングレイアウトを導きます。角丸は意図的に小さく — 完全に鋭くも、風船のように丸くもなく。

スペーシングスケール

4px--space-1
8px--space-2
12px--space-3
16px--space-4
24px--space-5
32px--space-6
48px--space-7
64px--space-8

角丸

6px · controls / buttons
--r-sm
10px · inputs / small cards
--r-md
14px · cards / composer
--r-lg
20px · hero / CTA
--r-xl
999px · chips / badges
--r-pill
基礎 · エレベーション

ヘアラインが仕事をし、グロウはひとつだけ

ほとんどの面は境界線で定義します。内側のヘアラインと、モーダル用の柔らかなシャドウひとつ — そしてエージェントの入口を示すためだけのミントのグロウ。

Elev 1
--elev-1
Elev 2
--elev-2
Elev 3
--elev-3
Glow
--elev-glow
基礎 · アイコン

24グリッドのストロークセットひとつ

単一のカスタムセット — 1.5〜1.7pxのストローク、丸い端、塗りなし、currentColor で描かれ、すべてのグリフが親の色を継承します。アイコンフォントも絵文字もありません。

arrow
send
plus
spark
chev
chart
book
code
check
star
paperclip
bolt
link
share
eye
flask
grid
user
refresh
lock
play
構築 · コンポーネント

コアキット

ボタン、チップ、ステータス、バッジ、カード、入力 — すべてトークンから直接作られています。ホバーで境界線が明るくなり、押すと1px動き、フォーカスリングはミントに変わります。

ボタン

チップ、ステータス、バッジ

auto-mode indexed pending deniedNew — agent is liveBetaPending

カードと入力

Automation engine

ベースカードはひとつ — elev-1の面、1pxのヘアライン、14pxの角丸。役割はその上に重ね、色のアクセントは使いません。

構築 · トーン

自信をもって、技術的に、率直に

ビルダーがビルダーに語りかけるように。センテンスケースの見出し、「you / your」、結果は事実として述べる。モノスペースの情報レイヤーがシステムのシグネチャを担います。

大文字・小文字

見出しと本文はセンテンスケース。情報レイヤー — アイブロウ、タグ、ステータス、メタデータ — は広い字間の大文字モノスペースです。

✓ Three modes, one conversation.
✓ FOUNDATIONS · TYPOGRAPHY
✗ Three Modes, One Conversation

中黒

· の中黒は情報レイヤーの結合組織です — モデル名、モード、レイテンシ、バージョン、ステータスをシステムログのようなリズムでつなぎます。

claude-sonnet-4.5 · auto-mode · 1.4s
MIT · v2.4 · updated 2026-05-20