@teq/ui — TEQ Design System Catalog

Principles

docs/principles.md

Monochrome【Tier 1 エディトリアル面の原則】色は foreground / foreground-muted / border 系のみ。アクセント色・色付き Badge を Tier 1 に入れない
Tier 2 Color監視・制御面は severity トークン経由の色が正(モノクロの例外ではなく層が違う)。生色(#hex・bg-red-500)は全層禁止
Hairline区切りは 1px 罫線。カード・影・囲み箱で区切らない
Typography見出しはサンセリフ(Helvetica 系)+トラッキング。ラベル英字は大文字+letter-spacing .08–.22em
State有効=太字 / 無効・取消=~~打ち消し線~~(色に頼らない)
Numerals数字は tabular-nums。コード類は monospace
Actionボタン箱より下線リンク

Semantic Tokens

Tier 2 — 製品が触ってよい層はここまで

右上のテーマ切替でライト/ダークが入れ替わります — 製品側でも同じく [data-theme] の切替だけで全トークンが差し替わります。Tier 1(エディトリアル)部品が使ってよいのは Ink / Border 系のみ。Action / Status / Severity は Tier 2(監視・制御面)と UI フィードバック用。

Surface

--background--white

--background-elevated--gray-50

--background-sunken--gray-100

Ink

--foreground--gray-900

--foreground-muted--gray-600

--foreground-subtle--gray-500

Border

--border-subtle--gray-200

--border-default--gray-300

--border-strong--gray-400

Action

--primary--midnight-500

--secondary--gray-100

--accent--olive-500

--destructive--red-600

Status(UI フィードバック)

--success--green-600

--warning--yellow-500

--error--red-600

--info--blue-500

Severity スケール(Tier 2 監視・制御面 — QUOTA#2791 裁定)

--critical--red-700 · 即対応(error より上位)

--error--red-600 · 重大(--danger は作らない)

--warning--yellow-500 · 注意

--success--green-600 · 正常・軽微

--info--blue-500 · 情報

severity は既存 Status トークンの再利用+--critical 追加(各 -foreground ペアあり)。製品の分類軸(QUAD criticality / Factory phase)→トークンの写像は docs/severity-mapping.md が正本。停止・待機・退役は色を使わない(--foreground-muted+打ち消し線)。色だけに意味を負わせない・面塗りは最小 — 規律は principles.md「運用/フィードバック面の色」。

Palette — sacai Seasonal (OKLCH)

Tier 1 primitives

Midnight Navy

Espresso Leather

Dry Olive

Trench Beige

Mist Greige

Black

Warm Gray (base)

Slate / Zinc / Stone の中立スケールと Status フルスケールは teq-base.css を参照(ここでは省略)。

Type · Density · Shape

semantic 経由で使う

--font-size-2xl · 24px商品マスター Editorial

--font-size-xl · 20px見出し Subheading

--text-body · 14px本文・ボタンラベル。The quick brown fox jumps over the lazy dog.

--text-caption · 13pxキャプション・ヘルプテキスト

--text-label · 11pxLabel / Kicker Style

tabular-nums1,024 / 20,900 — ¥3,980,000

--space-gap-tight · 8px

--space-gap-normal · 16px

--space-gap-loose · 24px

--space-inset-surface · 24px

--radius-badge · 2px

--radius-interactive · 4px

--radius-surface · 8px

--radius-pill

Components — Editorial

Tier 1 · registry:ui · copy-to-own

以下は registry 収載部品の実表示(このページ自身のヘッダ・セクション見出しにも同じ部品様式を使用)。トークンだけで描画され、テーマ切替に追従します。

EditorialPageHeader

editorial-page-header

Products

商品マスター

商品と在庫を管理します

Props kicker · title · description? Tokens --foreground --foreground-muted --font-size-2xl --text-label

EditorialSectionHeader

editorial-section-header

SKU一覧

+ Add SKU

Props label · actions?(下線リンク等) Tokens --foreground --border-default --text-label

EditorialStatus

editorial-status

Active Inactive Cancelled

Props variant('active' | 'inactive' | 'cancelled') · children(i18n 済み文字列) · className? Tokens --foreground --text-label — 色 Badge を使わない状態表現(太字/打ち消し線)

EditorialAction

editorial-action

Props children(i18n 済み) · as?(button / 任意 Link — router 非依存) · disabled? · className? Tokens --foreground --text-label — ボタン箱ではなく下線リンク(様式原則「操作」の正典)

EditorialSearchInput

editorial-search-input

Props ariaLabel · placeholder? · debounceMs?=300 · onValueChange? · onDebouncedChange? Tokens --border-default --foreground --foreground-muted --text-caption

EditorialPagination

editorial-pagination

Page 1 / 209

Props pagination: PaginationState(最小互換型を同梱) · pageLabel? · previousLabel? · nextLabel?(文言は製品側で i18n 接続) Tokens --foreground-muted --foreground --text-label

EditorialTable

editorial-table

SKU	名称	在庫
TQ-0021	ウールギャバジンコート	1,240
TQ-0022	ハイブリッドブルゾン(取消)	86

構成 EditorialTable / Head / Row / Cell(Head・Cell に numeric prop = 右寄せ+tabular-nums。桁区切りは製品側整形) Tokens --border-default(ヘッダ罫)--border-subtle(行罫・Row の CSS 変数で上書き可)--text-label --text-body — ゼブラ・箱・影なし

Components — Ops

Tier 2 · registry:ui · copy-to-own

監視・制御面の部品(QUANTS 還流・Q-UI#3 / PR#6)。色は severity トークン経由のみ・閾値写像は製品側 props(severityFor)・グリフ/太字併記で色に依存しない。規律は principles.md「運用/フィードバック面の色」。

StatTile

stat-tile

Equity¥12,480,000

Drawdown-3.2%

Open Positions4

Props label · value(整形済み) · tone?(severity 語彙) · glyph?(tone とセットで併記推奨) Tokens --foreground-muted --foreground + severity 各種

GaugeBar / GaugeRow

gauge-bar

Risk Cap 使用率62.0%

Queue 深度108.0% +8%

Props ratio · severityFor?(閾値→severity 写像は製品側・既定は超過のみ error) · valueLabel? · overLabel? · barLabel? Tokens --background-sunken --border-subtle --radius-badge + severity 各種(fill のみ色・超過はストライプ+⚠併記)

Scoreboard

scoreboard

Live Gates2/4

データ鮮度 < 5s

損益整合(会計 vs 執行)

リスク上限テスト

cap 超過シナリオ 2 件未解消

ペーパー検証 30 日

Props groups(label+items[label/state/note?]) · countLabel? · severityFor? · stateLabel?(sr-only 文言) Tokens ✓=--success ✗=--error –=--foreground-subtle+打ち消し(色は添え・意味はグリフ/太字)。進捗は GaugeBar 合成

Pending — B部品

着地で収載 → v0.1.0

Alert / 状態部品 / Toast / アイコン集(Tier 2)QUOTA#2791 · QUAD/Factory 還流+QUOTA Toast 原型 · v0.2.0 計画Planned

Usage

copy-to-own

# テーマ(CSS変数)— 採用製品には cron が自動同期(20分毎)
registry/themes/teq-base.css → <product>/…/tokens.css

# 部品 — shadcn add で copy-to-own(取り込み後はコードを所有)
npx shadcn add editorial-page-header editorial-section-header \
  editorial-search-input editorial-pagination

# 改善は本リポへ還流 PR(silent fork しない)。pin は git tag(semver)

# 導入手順・Tailwind 配線・採用申請テンプレ →
docs/ADOPTION.md