Together Design System
毎日を、もっと近く。
Togetherは「投稿する場所」ではなく、生活の一部になるサービスです。 このドキュメントは、そのための言語 — 色・文字・余白・動き・部品 — をひとつにまとめたものです。 ここに載っている例はすべて実物のコンポーネントで描かれています。
毎日を、もっと近く。
Togetherは「投稿する場所」ではなく、生活の一部になるサービスです。 このドキュメントは、そのための言語 — 色・文字・余白・動き・部品 — をひとつにまとめたものです。 ここに載っている例はすべて実物のコンポーネントで描かれています。
Brand
一目で覚えられて、モノクロでも成立し、16pxでも判別できること。3案とも同じ骨格 — 一定の線幅、丸い端点、幾何学的な曲線 — でできています。
01 · The Convergence T
第一候補 — プライマリマーク
2本の線が上で離れ、中央でひとつの軸に合流して「T」になる。人と人が同じ場所にたどり着く瞬間そのもの。線は1種類の太さ、1種類の丸み。16pxでも形が壊れない。
02 · Constellation
第二候補 — コミュニティ
やわらかい環の上に置かれた5つの点が、細い線で結ばれる。「世界中の人がTogetherでつながる」。コミュニティや地図まわりの面で使う。
03 · Speech T
第三候補 — メッセージ
吹き出しの尻尾がそのまま「T」の縦画になる。会話・交流・コミュニケーション。メッセージ機能まわりのアイコンとして使う。
カラーバリエーション
アプリアイコン
角丸は辺の30%（squircle近似）。マークは0.78倍に縮めて、アイコンの余白を十分に取ります。
ロックアップと最小サイズ
ブランドメッセージ
Every moment, together.
毎日を、もっと近く。
やってはいけないこと
Color
ダークが基準です。すべての色はセマンティックなCSS変数で、ライトモードは同じ変数の差し替えだけで成立します。彩度の高い色は「行動」と「いま」にしか使いません。
Surfaces — 5段の奥行き
#09090B#111113#18181B#1F1F23#27272AAccents — 意味を持つ色
#5E7BFF#7C4DFF#22C55E#F59E0B#EF4444Text — 3段の階層
#FAFAFA#A1A1AA#71717ABrand gradient
135° / primary → accent。CTA・ロゴ・ライブリングのみ。背景全面には使わない。
Glass
blur(28px) + saturate(180%) + 1pxのハイライト。重ねるのは1枚まで。
ライトモード
ライトでは彩度を少し落として、白地でのコントラストを4.5:1以上に保ちます。
Typography
英数字はInter、日本語はNoto Sans JP。見出しは700、本文は400〜500。サイズが上がるほど字間を詰めて、大きな文字ほど落ち着いて見えるようにしています。
56 / 700 / -3.5%36 / 700 / -2.8%26 / 700 / -2.2%20 / 600 / -1.7%17 / 600 / -1.1%15 / 400 / -0.6%14 / 40013 / 40011 / 500 / +2%本文の測り幅
長い文章は68文字までで折り返します。日本語は行間1.7、英数字は1.6。 読むことが目的の面（投稿本文・コミュニティの説明）では、行長を守ることが フォントサイズを上げることよりも効きます。
数字
1時間18分 · 19:24 · 8.4K
時間・カウント・経過はすべて等幅数字（tabular-nums）。1秒ごとに数字が揺れないためです。 Pulseの経過時間はこの指定がないと成立しません。
Spacing
すべての余白は8pxの倍数です（光学的な調整のみ4pxを許可）。Togetherの上質さの8割はここから来ています — 情報を減らすのではなく、間を増やす。
grid-18pxgrid-216pxgrid-324pxgrid-432pxgrid-648pxgrid-864pxgrid-1296pxレイアウトの柱
カード内の余白
カードのパディングは24px、要素間は16px、密なリストは8px。 カードの中でさらにカードを重ねるときだけ16pxに落とします。
ブレークポイント
Radius & Elevation
Togetherの標準はlg(20px)とxl(24px)。影は黒を薄く、広く、下方向に。輪郭を強調するための影は使いません — 影は「浮いている」という事実だけを伝えます。
Radius
Elevation
Motion
動きは装飾ではなく説明です。どこから来て、どこへ戻るのか。すべてtransformとopacityだけで作り、60FPSを守ります。イージングは cubic-bezier(0.32, 0.72, 0, 1)。
デュレーション
taphovermodalcardpageスプリング
面の移動はスプリングで表現します。到着はするが、揺れ戻らない。 リアクションの絵文字だけが唯一、少しだけ跳ねることを許されています。
ホバーしてみてください。prefers-reduced-motion では すべて即座に切り替わります — CSS側はメディアクエリ、Framer Motion側は MotionConfig の2層で対応しています。 JS駆動のアニメーションにCSSのメディアクエリは効かないためです。
Components
Atomic Designで整理しています。atoms（Button, Avatar, Badge, Chip, Input, Logo）→ molecules（Card, Modal, Dropdown, Tooltip, Tabs, Toast）→ organisms（Navbar, Sidebar, Feed, PulseBar, PulseCard, PulseComposer, Chat …）。
Button
Chip / Badge
Avatar
Form
いつでも変更できます
このアドレスは使われています
メールアドレスまたはパスワードが正しくありません
Card
フィードの標準
境界線 + 影xs。中身が主役。
他の内容の上に浮くとき
blur(28px)。重ねるのは1枚まで。
ホバーで2px持ち上がる
Modal / Dropdown / Tooltip / Toast
Tabs
Skeleton
スピナーではなく、これから来るものの「形」を見せます。
Navbar
ホーム
Sidebar
≥1024px
≥768
実装の原則