画面は ac-page の中に、見出し（ac-page-header）→ 本文の順に置きます。見出しは画面名と件数だけ。説明文はヘルプへ。グリッドはスマホで自動的に 1 列になります。

画面の見出し

<header class="ac-page-header">
  <h1 class="ac-page-header__title">案件</h1>
  <span class="ac-page-header__meta">156 件・受注予定日の新しい順</span>
  <div class="ac-page-header__actions">
    <button class="ac-btn">CSV</button>
    <button class="ac-btn ac-btn--primary"><svg class="ac-btn__icon ac-btn__icon--left" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#plus"></use></svg>新しい案件</button>
  </div>
</header>

グリッド（ac-grid--3）

<div class="ac-grid ac-grid--3">
  <div class="ac-card"><div class="ac-card__body">1</div></div>
  <div class="ac-card"><div class="ac-card__body">2</div></div>
  <div class="ac-card"><div class="ac-card__body">3</div></div>
</div>

横並び（ac-row）と縦の並び（ac-stack）

<div class="ac-row ac-row--between ac-row--wrap">
  <span>左</span>
  <div class="ac-row"><button class="ac-btn">取消</button><button class="ac-btn ac-btn--primary">保存</button></div>
</div>
<div class="ac-stack ac-stack--sm ac-mt-md">
  <div>1 行目</div><div>2 行目</div>
</div>

セクション

<section class="ac-section">
  <h2 class="ac-section__title">基本情報</h2>
  <div class="ac-section__body">本文</div>
</section>

やってはいけない例

• 「ようこそ！」などの大きな見出しや、画面の説明を見出しの下に繰り返す

  <h1 class="ac-h1">ようこそ！ 今日も一日がんばりましょう</h1>

• 画面ごとに独自の余白（style="margin: 13px"）

  <div style="margin: 13px">…</div>

情報のまとまりを 1 枚に。影は「ごく薄い」1 段目だけ、角丸は 6px。表を入れるときは ac-card__body--flush で余白をなくします。

基本

<section class="ac-card">
  <header class="ac-card__header">
    <h2 class="ac-card__title">今日の予定</h2>
    <div class="ac-card__actions"><a class="ac-btn ac-btn--sm" href="#">すべて</a></div>
  </header>
  <div class="ac-card__body">10:00 株式会社テスト 打ち合わせ</div>
  <footer class="ac-card__footer"><a class="ac-card__footer-link" href="#">一覧を見る</a></footer>
</section>

やってはいけない例

• カードの中にカードを入れる（区切りは線か ac-section で）

  <div class="ac-card"><div class="ac-card">…</div></div>

• 大きな影・グラデーションで浮かせる

  .my-card { box-shadow: 0 20px 40px …; background: linear-gradient(…); }

主ボタン（--primary）は 1 画面に 1 つ。取り消せない操作は --danger。押すと少し沈み、キーボードで選ぶと青い枠が出ます。アイコンだけのボタンには必ず title と ac-sr-only の文字を付けます。

種類

<button class="ac-btn">標準</button>
<button class="ac-btn ac-btn--primary">保存</button>
<button class="ac-btn ac-btn--danger">削除</button>
<button class="ac-btn ac-btn--danger-text">取り消す</button>
<button class="ac-btn ac-btn--outline">枠だけ</button>
<button class="ac-btn ac-btn--ghost">文字だけ</button>
<button class="ac-btn" disabled>使えない</button>

大きさ・アイコン

<button class="ac-btn ac-btn--sm">小さい</button>
<button class="ac-btn"><svg class="ac-btn__icon ac-btn__icon--left" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#download"></use></svg>Excel</button>
<button class="ac-btn ac-btn--icon" title="編集"><svg class="ac-btn__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#pencil"></use></svg><span class="ac-sr-only">編集</span></button>
<button class="ac-btn ac-btn--icon-border" title="削除"><svg class="ac-btn__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#trash-2"></use></svg><span class="ac-sr-only">削除</span></button>

ボタンの組

<div class="ac-btn-group" role="group" aria-label="範囲">
  <button class="ac-btn ac-btn--primary" aria-pressed="true">自分</button>
  <button class="ac-btn">部署</button>
  <button class="ac-btn">全社</button>
</div>

やってはいけない例

• 主ボタンを 1 画面にいくつも並べる・色だけで意味を伝える

  <button class="ac-btn ac-btn--primary">保存</button><button class="ac-btn ac-btn--primary">印刷</button>

• 文字のないアイコンボタン（読み上げで分からない）

  <button class="ac-btn ac-btn--icon"><svg>…</svg></button>

項目は ac-field（ラベル・入力欄・説明・エラー）。必須は is-required、エラーは has-error と ac-field__error。スマホでは入力欄の文字が 16px になり、入力時に画面が拡大されません。

入力欄・選択・複数行

<div class="ac-grid ac-grid--2">
  <div class="ac-field is-required">
    <label class="ac-field__label" for="d-name">案件名</label>
    <input class="ac-input" id="d-name" value="テスト商事 - 新規導入">
    <div class="ac-field__help">例: 顧客名 - 内容</div>
  </div>
  <div class="ac-field has-error">
    <label class="ac-field__label" for="d-amt">金額</label>
    <input class="ac-input" id="d-amt" value="abc" aria-invalid="true" aria-describedby="d-amt-e">
    <div class="ac-field__error" id="d-amt-e">数字で入力してください。</div>
  </div>
  <div class="ac-field">
    <label class="ac-field__label" for="d-st">フェーズ</label>
    <div class="ac-select-wrap"><select class="ac-select" id="d-st"><option>見込み</option><option>提案</option></select></div>
  </div>
  <div class="ac-field">
    <label class="ac-field__label" for="d-q">検索</label>
    <input class="ac-search" id="d-q" type="search" placeholder="顧客・案件を検索">
  </div>
  <div class="ac-field ac-span-2">
    <label class="ac-field__label" for="d-memo">メモ</label>
    <textarea class="ac-textarea" id="d-memo"></textarea>
  </div>
</div>

チェック・ラジオ・スイッチ

<div class="ac-row ac-row--wrap ac-row--lg">
  <label class="ac-check"><input type="checkbox" checked><span>メールで知らせる</span></label>
  <label class="ac-radio"><input type="radio" name="d-r" checked><span>四半期</span></label>
  <label class="ac-radio"><input type="radio" name="d-r"><span>半期</span></label>
  <label class="ac-switch"><input type="checkbox" role="switch" checked><span class="ac-switch__track"></span><span>自動承認</span></label>
</div>

横並びの項目（ac-field--inline）

<div class="ac-field ac-field--inline">
  <label class="ac-field__label" for="d-in">担当</label>
  <input class="ac-input" id="d-in" value="山田 太郎">
</div>

やってはいけない例

• ラベルを placeholder だけで済ませる（入力すると消えて分からない）

  <input class="ac-input" placeholder="案件名">

• エラーを赤い枠だけで知らせる（理由と直し方を文字で）

  <input class="ac-input is-invalid">

数字は is-num で右揃え・等幅。横に長い表は ac-table-wrap で横スクロール。スマホでカードの並びにするときは ac-table--cards と各セルの data-label。

一覧

<div class="ac-table-wrap">
<table class="ac-table ac-table--cards">
  <thead><tr><th>案件名</th><th>フェーズ</th><th class="is-num">金額</th><th>受注予定日</th></tr></thead>
  <tbody>
    <tr><td data-label="案件名"><a href="#">テスト商事 - 新規導入</a></td><td data-label="フェーズ"><span class="ac-badge ac-badge--info">提案</span></td><td class="is-num" data-label="金額">¥1,200,000</td><td data-label="受注予定日">2026/11/30</td></tr>
    <tr><td data-label="案件名"><a href="#">テスト物流 - 追加</a></td><td data-label="フェーズ"><span class="ac-badge ac-badge--success">受注</span></td><td class="is-num" data-label="金額">¥480,000</td><td data-label="受注予定日">2026/10/31</td></tr>
  </tbody>
</table>
</div>

やってはいけない例

• 数字を左揃え・桁がそろわない字体のまま並べる

  <td>¥1,200,000</td>

色は意味があるときだけ。状態の色（--success 緑・--warning 黄・--danger 赤）は会社の色に関係なく固定です。

バッジ・タグ・アバター

<span class="ac-badge">下書き</span>
<span class="ac-badge ac-badge--info">提出済</span>
<span class="ac-badge ac-badge--success">入金済</span>
<span class="ac-badge ac-badge--warning">期限が近い</span>
<span class="ac-badge ac-badge--danger">期限超過</span>
<span class="ac-tag">展示会</span>
<span class="ac-avatar ac-avatar--sm">山</span>
<span class="ac-avatar">佐</span>

KPI

<div class="ac-grid ac-grid--3">
  <div class="ac-kpi"><span class="ac-kpi__label">今月の受注額</span><span class="ac-kpi__value">1,320<small>万円</small></span><span class="ac-kpi__delta is-up">前月比 +12%</span></div>
  <div class="ac-kpi"><span class="ac-kpi__label">期限切れの ToDo</span><span class="ac-kpi__value">5<small>件</small></span><span class="ac-kpi__delta is-down">前週比 +2 件</span></div>
  <div class="ac-kpi"><span class="ac-kpi__label">達成率</span><span class="ac-kpi__value ac-num">31%</span><div class="ac-progress"><span class="ac-progress__bar" style="width: 31%"></span></div></div>
</div>

0 件の案内

<div class="ac-empty">
  <svg class="ac-empty__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#inbox"></use></svg>
  <div class="ac-empty__title">承認待ちはありません</div>
  <div>申請が届くとここに出ます。</div>
</div>

ラベルと値（ac-dl）・リスト

<dl class="ac-dl">
  <dt>顧客番号</dt><dd class="ac-num">C-000123</dd>
  <dt>住所</dt><dd>東京都千代田区丸の内 9-9-9</dd>
</dl>
<ul class="ac-list ac-mt-md">
  <li class="ac-list__item"><span class="ac-list__main">見積書 Q-2026-0001</span><span class="ac-list__meta">10/18</span></li>
  <li class="ac-list__item"><span class="ac-list__main">請求書 INV-2026-0003</span><span class="ac-list__meta">09/23</span></li>
</ul>

やってはいけない例

• 紫や蛍光色・グラデーションのバッジ、絵文字で状態を表す

  <span style="background: linear-gradient(…)">完了</span>

画面の中の大事な知らせは ac-alert、操作の結果は ac-toast（JS の AgentCSS.toast() でも出せます）。

帯のお知らせ

<div class="ac-stack ac-stack--sm">
  <div class="ac-alert ac-alert--info" role="status"><svg class="ac-alert__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#info"></use></svg><div class="ac-alert__body">10 月分は 11/10 に自動で締めます。</div></div>
  <div class="ac-alert ac-alert--success" role="status"><svg class="ac-alert__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#circle-check"></use></svg><div class="ac-alert__body">発行しました。</div></div>
  <div class="ac-alert ac-alert--warning" role="status"><svg class="ac-alert__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#triangle-alert"></use></svg><div class="ac-alert__body">支払期限を過ぎた請求書が 1 件あります。</div></div>
  <div class="ac-alert ac-alert--danger" role="alert"><svg class="ac-alert__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#circle-x"></use></svg><div class="ac-alert__body">保存できませんでした。入力を確かめてください。</div></div>
</div>

トースト

<button class="ac-btn" data-dc-toast="保存しました">トーストを出す</button>
<div class="ac-toast ac-toast--success ac-mt-md" role="status" style="animation: none"><div class="ac-toast__body">保存しました</div></div>

タブは矢印キーで移動できます（data-ac-tabs）。ドロップダウンは data-ac-dropdown、Esc で閉じます。

タブ

<div class="ac-tabs" data-ac-tabs>
  <div class="ac-tabs__list" role="tablist" aria-label="案件の情報">
    <button class="ac-tabs__tab is-active" role="tab" aria-selected="true" aria-controls="d-p1" id="d-t1">関連情報</button>
    <button class="ac-tabs__tab" role="tab" aria-selected="false" aria-controls="d-p2" id="d-t2">詳細</button>
  </div>
  <div class="ac-tabs__panel" role="tabpanel" id="d-p1" aria-labelledby="d-t1">ToDo 3 件・書類 2 件</div>
  <div class="ac-tabs__panel" role="tabpanel" id="d-p2" aria-labelledby="d-t2" hidden>項目の一覧</div>
</div>

進捗の段階

<ol class="ac-path" aria-label="フェーズ">
  <li class="ac-path__step is-done">見込み</li>
  <li class="ac-path__step is-done">ヒアリング</li>
  <li class="ac-path__step is-current" aria-current="step">提案</li>
  <li class="ac-path__step">見積提示</li>
  <li class="ac-path__step">完了</li>
</ol>

パンくず・ページ送り

<ol class="ac-breadcrumb"><li><a href="#">システム設定</a></li><li><a href="#">組織情報</a></li><li>会計年度</li></ol>
<nav class="ac-pagination ac-mt-md" aria-label="ページ">
  <a class="ac-pagination__item" href="#">前へ</a>
  <span class="ac-pagination__item is-current" aria-current="page">1</span>
  <a class="ac-pagination__item" href="#">2</a>
  <a class="ac-pagination__item" href="#">次へ</a>
  <span class="ac-pagination__info">1-25 / 156 件</span>
</nav>

ドロップダウン・メニュー

<div class="ac-dropdown" data-ac-dropdown>
  <button class="ac-btn" aria-haspopup="true" aria-expanded="false">操作<svg class="ac-btn__icon ac-btn__icon--right" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#chevron-down"></use></svg></button>
  <div class="ac-dropdown__menu">
    <ul class="ac-menu" role="menu">
      <li class="ac-menu__item"><a href="#" role="menuitem">編集</a></li>
      <li class="ac-menu__item"><a href="#" role="menuitem">複製</a></li>
      <li class="ac-menu__divider" role="separator"></li>
      <li class="ac-menu__item"><a href="#" role="menuitem">削除</a></li>
    </ul>
  </div>
</div>

浮かぶものだけ 2 段目の影。ダイアログは data-ac-modal を付けると外側のクリックと Esc で閉じ、フォーカスは中に留まります。スマホでは入力のダイアログは全画面。

ダイアログ

<button class="ac-btn" data-ac-open="d-modal">ダイアログを開く</button>
<div class="ac-modal" id="d-modal" data-ac-modal role="dialog" aria-modal="true" aria-labelledby="d-modal-t">
  <div class="ac-modal__dialog">
    <header class="ac-modal__header"><h2 class="ac-modal__title" id="d-modal-t">削除の確認</h2></header>
    <button class="ac-btn ac-btn--icon ac-modal__close" data-ac-close title="閉じる"><svg class="ac-btn__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#x"></use></svg><span class="ac-sr-only">閉じる</span></button>
    <div class="ac-modal__body">案件「テスト商事 - 新規導入」を削除しますか？ ごみ箱から戻せます。</div>
    <footer class="ac-modal__footer"><button class="ac-btn" data-ac-close>キャンセル</button><button class="ac-btn ac-btn--danger" data-ac-close>削除</button></footer>
  </div>
</div>

ツールチップ・開閉

<span class="ac-row"><span>確度</span><span tabindex="0" data-ac-tooltip="受注できそうな見込み（%）。フェーズで自動で入ります。"><svg class="ac-icon ac-muted" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#info"></use></svg></span></span>
<div class="ac-collapse is-open ac-mt-md">
  <h3 class="ac-collapse__title"><button class="ac-collapse__toggle" data-ac-toggle="collapse" aria-expanded="true"><svg class="ac-collapse__icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#chevron-down"></use></svg>取引の形</button></h3>
  <div class="ac-collapse__body">請求先・紹介者・受注日</div>
</div>

活動の記録は ac-timeline、営業カレンダーは ac-calendar（休みは is-holiday、今日は is-today）。

時系列

<ol class="ac-timeline">
  <li class="ac-timeline__item is-done"><div class="ac-timeline__time">10/20 14:00</div><div class="ac-timeline__title">訪問</div><div class="ac-timeline__body">要件を確認した。</div></li>
  <li class="ac-timeline__item"><div class="ac-timeline__time">10/24</div><div class="ac-timeline__title">見積書を送る</div></li>
</ol>

カレンダー

<div class="ac-calendar" role="grid" aria-label="2026年11月">
  <div class="ac-calendar__dow is-holiday">日</div>
  <div class="ac-calendar__dow">月</div>
  <div class="ac-calendar__dow">火</div>
  <div class="ac-calendar__dow">水</div>
  <div class="ac-calendar__dow">木</div>
  <div class="ac-calendar__dow">金</div>
  <div class="ac-calendar__dow">土</div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">1</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">2</span></div>
  <div class="ac-calendar__day is-holiday"><span class="ac-calendar__num">3</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">4</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">5</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">6</span></div>
  <div class="ac-calendar__day is-holiday"><span class="ac-calendar__num">7</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">8</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">9</span></div>
  <div class="ac-calendar__day is-today"><span class="ac-calendar__num">10</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">11</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">12</span><span class=ac-calendar__event>打ち合わせ</span></div>
  <div class="ac-calendar__day"><span class="ac-calendar__num">13</span></div>
  <div class="ac-calendar__day is-holiday"><span class="ac-calendar__num">14</span></div>
</div>

会社ごとに差し替えてよいのは次のトークンだけです（自由な CSS は足さない）。色: --ac-brand（ブランド色）・--ac-brand-2（2 つ目の色）・--ac-accent（アクセント）・--ac-header-bg（ヘッダーの地）・--ac-btn-primary-bg（ボタン）・--ac-link（リンク）。フォント: --ac-font-family（本文）・--ac-font-family-heading（見出し）・--ac-font-family-num（数字）。文字の段は data-ac-density / data-ac-theme="relaxed"、角は data-ac-radius="subtle"、影は data-ac-shadow="none"。文字の色との組み合わせはコントラスト比 4.5:1 以上にします。状態の色（赤・黄・緑）は変えられません。

ヘッダー（地の色・アプリの色の細い帯）

<header class="ac-header ac-header--stripe">
  <strong>営業</strong>
  <a href="#">案件</a><a href="#">見積</a>
  <span class="ac-header__muted ac-small">ヘッダーの地 --ac-header-bg ／ 帯 --ac-app-color</span>
</header>

アクセント・分類の色

<span class="ac-badge ac-badge--accent">おすすめ</span>
<span class="ac-badge ac-badge--solid ac-badge--accent">新着</span>
<span class="ac-cat ac-cat--sales ac-cat-tile"><svg class="ac-icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#house"></use></svg></span>
<span class="ac-cat ac-cat--money ac-cat-tile"><svg class="ac-icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#download"></use></svg></span>
<span class="ac-cat ac-cat--people ac-cat-tile"><svg class="ac-icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#users"></use></svg></span>
<span class="ac-cat ac-cat--team ac-cat-tile"><svg class="ac-icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#calendar"></use></svg></span>
<span class="ac-cat ac-cat--base ac-cat-tile"><svg class="ac-icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#settings"></use></svg></span>

フォント 3 系統

<div class="ac-stack ac-stack--sm">
  <h3 class="ac-h2">見出し（--ac-font-family-heading）</h3>
  <p>本文（--ac-font-family）: 取引先・案件・見積書の本文です。</p>
  <p class="ac-num ac-h2">¥1,234,567.89</p>
  <p class="ac-muted ac-small">数字（--ac-font-family-num）</p>
</div>

角と影の段

<div class="ac-row ac-row--wrap">
  <button class="ac-btn" data-dc-toggle="acRadius:subtle">角: 標準 / 控えめ</button>
  <button class="ac-btn" data-dc-toggle="acShadow:none">影: やわらかい / なし</button>
</div>

やってはいけない例

• トークン以外の色で会社の色を足す・状態の色を会社の色に変える

  .ac-badge--danger { background: #FF00AA; }

• 白い文字が読めない明るいブランド色のまま使う（4.5:1 未満）

  :root { --ac-brand: #FDE047; }

全画面の下に版と推奨環境（ac-footer）。スマホの下のタブ（ac-bottom-nav）は役割ごとのよく使う 4 つ＋その他。

画面の下

<footer class="ac-footer">
  <span class="ac-footer__item ac-footer__start">推奨環境: Chrome・Edge の最新版・PC は 1280×800 以上</span>
  <span class="ac-footer__item"><a href="#">JirikiAI v2.0.0</a></span>
  <span class="ac-footer__item">AgentCSS v1.0.0</span>
</footer>

ロゴ

<span class="ac-logo" style="--ac-logo-size: 28px"><svg class="ac-logo__mark" viewBox="0 0 64 64" aria-hidden="true"><path class="ac-logo__j" d="M38 28 V44 A13 13 0 0 1 12 44" stroke-width="11" stroke-linecap="round"/><path class="ac-logo__spark" d="M38 1 Q40.5 10 50 12 Q40.5 14 38 23 Q35.5 14 26 12 Q35.5 10 38 1 Z"/></svg><span>Jiriki<span class="ac-logo__ai">AI</span></span></span>