ホームへ

EN 中文 日本語

デザインシステム

Cute with Shiny Elegance

エンジニアリングの精度に、柔らかな光を纏わせる。アクセントは声 — 希少さが効く。

  • モノインク + 単一アクセント（Quiet Rose / Warm Apricot）
  • 塗りよりヘアライン
  • 三言語タイポ（en / zh / ja）
  • 入場リビール、420ms ease-out-quart
  • 単一カラム狭幅（最大 42rem）

タイポグラフィ

階層

  • Display

    Hanken Grotesk · 30px · 500

  • Headline

    Hanken Grotesk · 24px · 500

  • Title

    Hanken Grotesk · 18px · 600

  • Body

    Hanken Grotesk + MiSans · 16px / 28px · 400

  • Label

    Hanken Grotesk · 14px · 500

  • Mono

    Calling Code · 12px · 400

  • Bio lead

    Source Han Serif SC · 16px / 28px · 600

  • Wordmark

    Fugaz One · 24–30px · 400 · 「Xat」のみ

見本

  • Hanken Grotesk — Display & UI

    The quick brown fox jumps over the lazy dog

    The quick brown fox jumps over the lazy dog

  • MiSans — CJK

    打造生产级界面与 AI 原生产品

    本番品質の UI と AI ネイティブなプロダクトをつくる

  • Fugaz One — アクセント

    Xat

  • Calling Code — 等幅

    const greeting = "Hello"

  • Source Han Serif — セリフ

    Building production-quality interfaces

カラー

ワイドではパレットを並べて表示、ナローではタブで切り替える。既定値は現在のテーマに揃う。

サーフェス

ページのキャンバス、せり上がったパネル、オーバーレイ。ダークでは層が段差を持ち、ライトでは白に揃え、塗りではなくボーダーで分ける。

  • background

    ページキャンバス

    —

  • surface

    インラインサーフェス（カード、パネル）

    —

  • card

    カードの塗り（surface のエイリアス）

    —

  • popover

    フローティング層（ポップオーバー、メニュー）

    —

  • background

    ページキャンバス

    —

  • surface

    インラインサーフェス（カード、パネル）

    —

  • card

    カードの塗り（surface のエイリアス）

    —

  • popover

    フローティング層（ポップオーバー、メニュー）

    —

コンテンツ

テキストとアイコンの前景色。

  • foreground

    主要なインク

    —

  • muted-foreground

    副次的なインク

    —

  • primary

    主アクションの塗り（モノインク）

    —

  • foreground

    主要なインク

    —

  • muted-foreground

    副次的なインク

    —

  • primary

    主アクションの塗り（モノインク）

    —

ウォッシュとエッジ

ホバー / 選択ステートの薄塗りと、構造を支える細線。

  • muted

    静的ウォッシュ

    —

  • accent

    インタラクティブウォッシュ（hover、pressed）

    —

  • border

    ヘアラインの区切り

    —

  • muted

    静的ウォッシュ

    —

  • accent

    インタラクティブウォッシュ（hover、pressed）

    —

  • border

    ヘアラインの区切り

    —

ハイライト

ブランドの声。アイデンティティ、強調、リンクの示唆に控えめに使う。

  • highlight-soft

    ブランドの薄塗り

    —

  • highlight-text

    ブランドの文字色

    —

  • highlight-icon

    ブランドのアイコン色

    —

  • highlight-soft

    ブランドの薄塗り

    —

  • highlight-text

    ブランドの文字色

    —

  • highlight-icon

    ブランドのアイコン色

    —

ステータス

セマンティックなフィードバック。装飾ではなく意図で使う。

  • destructive

    エラー、破壊的操作

    —

  • info

    情報

    —

  • success

    確認、ポジティブ

    —

  • warning

    注意

    —

  • destructive

    エラー、破壊的操作

    —

  • info

    情報

    —

  • success

    確認、ポジティブ

    —

  • warning

    注意

    —

エレベーション

一つだけのささやかな影、highlight-soft で染める。グラスなし、ドロップシャドウなし、エレベーション演出なし。

面は静止時フラット。深さはヘアラインで、持ち上げではない。

shadow-halo

0 1px 2px · highlight-soft / 30%

コンポーネント

二層構成：そのまま取り込んだプリミティブと、その上に組んだ小さなコンポーネント。

Prime

ボタン、バッジ、ポップオーバー、ダイアログ。bejamas/ui からそのままコピーし、触らない。

bejamas/uiAstro ネイティブのコンポーネント。コピーして自分のものに。

Particles

Prime の上に重ねる薄い層。このサイトの声を担うプロジェクト固有のパーツ。

  • すべて見る

    TextLink — 丸みのあるカプセル下線（text-decoration ではない）

  • 旅人

    Wanderer gradient — グラデーションのアニメーションテキスト、footer の強調のみ

命名ルール

  • The One Voice Rule

    highlight-text と highlight-soft の合計は画面の約 10% 以下。

  • The Hairlines-Not-Walls Rule

    ライトモードでは surface / card / popover は background に揃う。塗りではなくボーダーで分ける。

  • The One Wordmark Rule

    font-fugaz-one は文字列「Xat」以外では禁止。

  • The One Gradient Rule

    background-clip: text のグラデーションはフッターの wanderer 行のみ。

  • The Code Stays Dark Rule

    コードブロックはライト / ダークどちらのサイトモードでも Vesper ダークのまま。