ホームへ

EN中文日本語

デザインシステム

かわいく、きらめいて、上品に

骨格は精密に、表面は柔らかく。アクセントカラーは必要なときだけ。

  • モノインク基調 + 単一アクセント（Quiet Rose / Warm Apricot）
  • 余白、リズム、タイポグラフィの整列でページを組む
  • 三言語の組版を最適化（zh / en / 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

    カードの塗り

    —

  • popover

    フローティングレイヤー

    —

  • background

    ページ背景

    —

  • surface

    サーフェス

    —

  • card

    カードの塗り

    —

  • popover

    フローティングレイヤー

    —

コンテンツ

文字とアイコンの基本色。

  • foreground

    主テキスト色

    —

  • muted-foreground

    弱いテキスト色

    —

  • primary

    主操作の塗り

    —

  • foreground

    主テキスト色

    —

  • muted-foreground

    弱いテキスト色

    —

  • primary

    主操作の塗り

    —

背景色と境界

操作状態の淡い背景色と、囲われた面の静かな境界。

  • muted

    淡い背景色

    —

  • accent

    操作状態の淡い背景色

    —

  • border

    ボーダー

    —

  • muted

    淡い背景色

    —

  • accent

    操作状態の淡い背景色

    —

  • 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%

shadow-image-edge

記事メディアのエッジ

1px インクエッジ · shadow-halo

コンポーネント

二層構成。ひとつは primitive をそのまま保ち、もうひとつはその上にこのサイトらしいコンポーネントを組む。

Prime

ボタン、バッジ、ポップオーバー、ダイアログ。すべて bejamas/ui から。

bejamas/uiAstro ネイティブのコンポーネントライブラリ。

Particles

このサイトの空気に馴染む小さなパーツ。

  • すべて見る

    TextLink — 両端が丸いカプセル下線

  • 旅人

    Wanderer gradient — グラデーションで動く文字。フッターの装飾だけに使う。

  • 927

    Stat digits — フッターのリアルタイム訪問数に使う、金属質のオドメーター数字

デザイン原則

  • ひとつの声の原則

    highlight-text と highlight-soft は、ひとつの画面の 10% 以下に抑える。

  • 余白優先のレイアウト原則

    余白、リズム、タイポグラフィの整列でページを組み、細線は必要な面の境界にだけ使う。

  • ひとつのワードマークの原則

    font-fugaz-one は「Xat」というロゴ文字にだけ使う。

  • ひとつのグラデーションの原則

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

  • コードはダークのまま

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