k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
ダークモードに切り替え
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

Theming

k8ordo UIは、CSS変数ベースのデザイントークンシステムを使用しています。ライトモードとダークモードの両方に対応し、カスタマイズが容易です。

カラーパレット

10色のベースカラーファミリーがあり、各色に50〜950の11段階のシェードが用意されています。

Gray
50
100
200
300
400
500
600
700
800
900
950
Red
50
100
200
300
400
500
600
700
800
900
950
Pink
50
100
200
300
400
500
600
700
800
900
950
Purple
50
100
200
300
400
500
600
700
800
900
950
Cyan
50
100
200
300
400
500
600
700
800
900
950
Blue
50
100
200
300
400
500
600
700
800
900
950
Teal
50
100
200
300
400
500
600
700
800
900
950
Green
50
100
200
300
400
500
600
700
800
900
950
Yellow
50
100
200
300
400
500
600
700
800
900
950
Orange
50
100
200
300
400
500
600
700
800
900
950

セマンティックカラー

ベースカラーをもとにした用途別のカラートークンです。テーマ切り替え時に自動的に適切な値に変わります。

前景色（Foreground）

fg-base

Light gray-900 · Dark gray-50

基本のテキスト

fg-subtle

Light gray-600 · Dark gray-400

プレースホルダーなど最も弱いテキスト

fg-mute

Light gray-700 · Dark gray-300

説明文やキャプションなどの補足テキスト

fg-inverse

Light gray-50 · Dark gray-900

反転背景（bg-inverse）の上に置くテキスト

fg-info

Light blue-800 · Dark blue-200

情報メッセージのテキスト

fg-success

Light green-800 · Dark green-200

成功メッセージのテキスト

fg-warning

Light yellow-800 · Dark yellow-200

警告メッセージのテキスト

fg-error

Light red-800 · Dark red-200

エラーメッセージのテキスト

背景色（Background）

bg-base

Light white · Dark gray-800

カードなど主要な面の背景

bg-raised

Light white · Dark gray-800

メニューやポップオーバーなど浮き上がる面

bg-surface

Light gray-50 · Dark gray-950

ページ全体の背景

bg-subtle

Light gray-100 · Dark gray-900

セクションの地など一段沈んだ背景

bg-mute

Light gray-200 · Dark gray-700

ホバー状態の背景

bg-emphasize

Light gray-300 · Dark gray-600

アクティブ状態の背景

bg-inverse

Light gray-900 · Dark white

反転背景。fg-inverseと組み合わせる

bg-info

Light blue-100 · Dark blue-900

情報メッセージの背景

bg-success

Light green-100 · Dark green-900

成功メッセージの背景

bg-warning

Light yellow-100 · Dark yellow-900

警告メッセージの背景

bg-error

Light red-100 · Dark red-900

エラーメッセージの背景

ボーダー（Border）

border-base

Light gray-400 · Dark gray-600

入力欄など標準のボーダー

border-subtle

Light gray-100 · Dark gray-700

ごく薄い罫線

border-mute

Light gray-200 · Dark gray-600

区切り線などの控えめな罫線

border-emphasize

Light gray-500 · Dark gray-500

ホバー時などの強調ボーダー

border-inverse

Light gray-700 · Dark gray-300

反転面の上に引くボーダー

border-info

Light blue-500 · Dark blue-400

情報ボーダー。フォーカスリングにも使用

border-success

Light green-500 · Dark green-400

成功状態のボーダー

border-warning

Light yellow-500 · Dark yellow-400

警告状態のボーダー

border-error

Light red-500 · Dark red-400

エラー状態のボーダー

ブランドカラー

PrimaryはTeal、SecondaryはCyanをベースとしたブランドカラーです。

Primary

primary-fg

Light teal-800 · Dark teal-300

Primaryのテキストとアイコン

primary-bg

Light teal-200 · Dark teal-800

Primaryの塗り。ソリッドボタンなどに

primary-bg-subtle

Light teal-50 · Dark teal-950

最も薄いPrimary背景。選択状態の地に

primary-bg-mute

Light teal-100 · Dark teal-900

控えめなPrimary背景

primary-bg-emphasize

Light teal-300 · Dark teal-700

ホバー時などの強いPrimary背景

primary-border

Light teal-500 · Dark teal-500

Primaryのボーダーとアクセント線

Secondary

secondary-fg

Light cyan-800 · Dark cyan-300

Secondaryのテキストとアイコン

secondary-bg

Light cyan-200 · Dark cyan-800

Secondaryの塗り

secondary-bg-subtle

Light cyan-50 · Dark cyan-950

最も薄いSecondary背景

secondary-bg-mute

Light cyan-100 · Dark cyan-900

控えめなSecondary背景

secondary-bg-emphasize

Light cyan-300 · Dark cyan-700

ホバー時などの強いSecondary背景

secondary-border

Light cyan-500 · Dark cyan-500

Secondaryのボーダー

Group

group-primary

Light teal-800 · Dark teal-200

データ可視化の系列色1

group-secondary

Light cyan-800 · Dark cyan-200

データ可視化の系列色2

group-tertiary

Light pink-800 · Dark pink-200

データ可視化の系列色3

group-quaternary

Light purple-800 · Dark purple-200

データ可視化の系列色4

タイポグラフィ

テキストサイズ、フォントウェイト、レタースペーシング、行の高さのデザイントークンです。

テキストサイズ

xsk8ordo0.75rem / 1.333
smk8ordo0.875rem / 1.429
mdk8ordo1rem / 1.5
lgk8ordo1.125rem / 1.556
xlk8ordo1.25rem / 1.4
2xlk8ordo1.5rem / 1.333
3xlk8ordo1.875rem / 1.2
emphasizek8ordo3rem / 1
highlightk8ordo6rem / 1

フォントウェイト

ボーダーラディウス

角丸のデザイントークンです。

xs0.125rem
sm0.375rem
md0.5rem
lg0.75rem
xl1rem
2xl1.25rem

シャドウ

ボックスシャドウのデザイントークンです。

2xs0 1px rgb(0 0 0 / 0.05)
xs0 1px 2px 0 rgb(0 0 0 / 0.05)
sm0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl0 25px 50px -12px rgb(0 0 0 / 0.25)

スペーシング

スペーシングスケールです。基本単位は0.25rem（4px）で、p-{n}やgap-{n}はn × 0.25remに計算されます。

0.5
0.125rem (2px)
1
0.25rem (4px)
2
0.5rem (8px)
3
0.75rem (12px)
4
1rem (16px)
5
1.25rem (20px)
6
1.5rem (24px)
8
2rem (32px)
10
2.5rem (40px)
12
3rem (48px)
16
4rem (64px)
20
5rem (80px)

ブレイクポイント

レスポンシブブレイクポイントです。

sm≥ 640px (40rem)
md≥ 768px (48rem)
lg≥ 1024px (64rem)
xl≥ 1280px (80rem)
2xl≥ 1536px (96rem)

Z-Indexレイヤ

オーバーレイ系コンポーネントの重なり順を定義する3層スケールです。triggerに紐付く浮遊UI（Popover / DropdownMenu / ListBox / Tooltip）はoverlay、Modal / Drawerはmodal、Toastはtoastに配置されます。

z-overlayPopover, DropdownMenu, ListBox, Tooltip1000
z-modalModal, Drawer1300
z-toastToast1500

ダークモード

ルート要素にdarkクラスを追加することで、ダークモードが有効になります。セマンティックカラートークンは自動的にダークモード用の値に切り替わります。

トークンを上書きする

すべてのトークンはCSS変数なので、k8ordo UIのスタイルシートより後に読み込むCSSで同名の変数を再定義すれば上書きできます。ベースカラーの変数（--purple-200など）も定義済みなので、参照を差し替えるだけでブランドカラーを丸ごと切り替えられます。ダークモードの値は.dark側で再定義します。

シェードの参照ではなく、値そのものを直接指定することもできます。

medium
k8ordo
450
boldk8ordo700

レタースペーシング

nonek8ordo0em
normalk8ordo0.025em

行の高さ

none
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
1
tight
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
1.25
snug
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
1.375
normal
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
1.5
relaxed
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
1.625
loose
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
2
24
6rem (96px)
// Enable dark mode
document.documentElement.classList.add('dark');

// Disable dark mode
document.documentElement.classList.remove('dark');
/* app.css — import after the k8ordo UI stylesheet */
:root {
  --primary-fg: var(--purple-800);
  --primary-bg: var(--purple-200);
  --primary-bg-subtle: var(--purple-50);
  --primary-bg-mute: var(--purple-100);
  --primary-bg-emphasize: var(--purple-300);
  --primary-border: var(--purple-500);
}

.dark {
  --primary-fg: var(--purple-300);
  --primary-bg: var(--purple-800);
  --primary-bg-subtle: var(--purple-950);
  --primary-bg-mute: var(--purple-900);
  --primary-bg-emphasize: var(--purple-700);
  --primary-border: var(--purple-500);
}
:root {
  --primary-border: oklch(0.55 0.15 300);
}