スタイルガイド

開発者ポータルで使う共通コンポーネントとデザイントークン。ライト／ダークは右上のトグルで切り替えて確認できます。

カラートークン

Primary

#05ae99

Primary dark

#0d9488

Primary soft

#e7f7f3

Navy (hero)

#111b2e

Dark bg

#0b1220

Code bg

#0f1a2e

Link

#2f7dc0

Heading

#1c2b3a

Body

#334155

Muted

#94a3b8

Page bg

#f6f8fb

Border

#e6ebf1

Warning

#9a6a00

Warning bg

#fdf6e3

タイポグラフィ

H1 32/900更新したいところだけ、更新できるCMS。

H2 24/900APIリファレンス

H3 19/800最初のリクエスト

Body 14/1.95本文は Noto Sans JP 14px、行間1.95。ドキュメント本文が主役なので、コントラストと行間を優先します。

Code 12.5cms.posts.list('news', { perPage: 6 })

バッジ

GET POST 200 429 403 New Beta リリースノート SDK

Callout

info：補足情報や仕様の背景説明に使います。

tip：より良い実装のための推奨事項に使います。

warning：セキュリティ・破壊的変更・制限に関する注意に使います。

コードブロック（常にダーク面）

TypeScript

const faqs = await cms.faqs.list({ category: 'support' });
for (const f of faqs.items) {
  console.log(f.question, renderProseMirror(f.answer));
}

ボタン・パンくず・ページネーション

プライマリセカンダリテキストリンク →

テーブル

名前型説明

per_pageinteger1ページの件数（1〜100、既定 20）

pageintegerページ番号（1始まり、既定 1）

categorystringカテゴリのslugで絞り込み

FEEDBACK

このページはお役に立ちましたか？

改善要望・不具合・ドキュメントの分かりにくい点など、お気軽にお寄せください。いただいた内容は今後の改善に役立てます。