Senastra Design System

一人の開発者が作るすべてのプロダクトに、統一された美しさと使いやすさを。

v1.0.0 2026.04 Web / Desktop / Landing
Design Specifications

Overview

デザイン哲学、カラーパレット、タイポグラフィ、スペーシング、ガイドラインの全体像。

design-guide.html
{

Tokens

色・フォント・余白・角丸・影・モーションすべてのCSS変数定義。そのまま使える。

tokens/design-tokens.css

Components

ボタン・インプット・モーダル・テーブルなど15種のUIパーツ、全状態・全サイズ。

components/

Layouts

サイドバー・ヘッダー・グリッド・フォームなど8つのレイアウトパターンとレスポンシブ仕様。

layouts/

Icons

58種のストロークベースSVGアイコン、サイズ・カラールール、使用ガイドライン。

icons/

Motion

デュレーション・イージング・遷移パターン・マイクロインタラクション。インタラクティブデモ付き。

motion/

Menu & Shortcuts

メニューバー構造、コンテキストメニュー、コマンドパレット、キーボードショートカット体系。

interactions/
🌐

i18n / 多言語対応

翻訳ファイル構造、キー命名規則、補間・複数形、テキスト伸長対策、RTL対応、カバレッジチェッカー。

i18n/
🎨

Themes / テーマ

14の和テーマ+カスタムカラー。日本の伝統色による外観切替、重色目シャドウ、カラーパレットAPI。

themes/
Mocks

Desktop App

Electron/Tauri風のサービスモニタリングアプリ。タイトルバー・サイドバー・ダッシュボード。

mocks/mock-desktop-app.html
Folder Structure
デザイン/ ├── index.html ← このページ(目次) ├── design-guide.html ← 全体概要・ガイドライン ├── design-tokens.css ← ルートトークン(従来互換) │ ├── tokens/ │ └── design-tokens.css ← CSS変数すべて │ ├── components/ │ └── components.html ← 15種UIパーツ × 全状態 │ ├── layouts/ │ └── layouts.html ← 8レイアウトパターン │ ├── icons/ │ └── icons.html ← 58アイコン + スタイルルール │ ├── motion/ │ └── motion.html ← アニメーション仕様 + デモ │ ├── interactions/ │ └── interactions.html ← メニューバー・ショートカット・コマンドパレット │ ├── i18n/ │ ├── i18n-guide.html ← 多言語対応ガイド + カバレッジチェッカー │ ├── i18n.ts ← TypeScript ヘルパー │ └── locales/ │ ├── ja.json ← 日本語(デフォルト) │ └── en.json ← 英語 │ ├── themes/ │ ├── themes.html ← テーマガイド + プレビュー + カスタムカラー │ └── themes.css ← 全14テーマ CSS変数定義 │ └── mocks/ └── mock-desktop-app.html ← デスクトップアプリモック