スタイルガイド#

このページは リファレンスであると同時に、その証明 でもあります――以下の すべての要素は Ovellum のデフォルトテンプレートでレンダリングされた本物の Markdown なので、ここで目にするものはそのままあなた自身のページに反映されます。 タイプスケール、垂直リズム、カラーシステム、そして書ける各コンテンツ要素を ここで説明します。

読みながら、トップバーの 外観コントロール を試してみてください。モード （自動 / ライト / ダーク）を切り替えたり、テーマを選んだり、色を設定したり、 テキストサイズ を上げたり、フォント（Default / Serif / Inter / Geist）を 変えたりできます。このページのすべてが同じデザイントークンで駆動されているため、 リアルタイムで再着色・再フローします。

タイポグラフィ#

テキストと見出しは、デフォルトで システムのサンセリフ スタックを使います―― 初回描画が即座で、ウェブフォントの読み込み待ちがありません。読者は外観 コントロールの フォント ピッカーから Serif、Inter、Geist に 切り替えられ（Inter と Geist はテンプレートに同梱され、選択されたときのみ 読み込まれます）、テキストサイズ を上下に調整できます。書体とサイズは 読者 の選択ですが、以下のスケール、リズム、カラーは Ovellum 出荷時の デフォルトであり、どのテンプレートにも適用されます。

本文は 76ch の measure の内側で 1.55 の行間 で組まれます――読書用の 段は約 76 文字/行に制限されており、長い散文でも快適さが保たれる帯域です。 見出しは 1.2 の行間 に締まり、わずかな負の字間によって、間延びした語の 並びではなく一つのまとまりとして読めます。

タイプスケール#

サイズは モジュラースケール から導かれます。一つの基準サイズに、各ステップで 固定の比率を掛けていきます。Ovellum は、小さな画面の約 15px から広い画面の 16px まで成長する流動的な基準（単一の clamp()――ブレークポイントなし）の上で 長三度（1.25） を使います。各見出しはステップに対応するため、階層は手作業で 選んだものではなく数学的です。

各ステップが calc(previous × var(--ratio)) であるため、一つの --ratio トークンを変えるだけで、階層全体が比例して再フローします。

見出し#

6 つのレベルを、実際のサイズでレンダリングしたものです。

見出しレベル 1#

見出しレベル 2#

見出しレベル 3#

見出しレベル 4#

見出しレベル 5#

見出しレベル 6#

各見出しには安定した id とホバー時のアンカー（#）が付くため、どのセクションにも 直接リンクできます。また h2/h3 は右側の「このページの内容」リストに 集約されます。

垂直リズム#

スペーシングは場当たり的ではなく、流動的なスペーススケール （--space-3xs から --space-3xl まで）です。各ステップはビューポートとともに 緩やかに成長する clamp() です。ブロック要素は一つのルールを共有します―― 上マージンなし、下に一貫した間隔――そのため、リズムはページを下るにつれて 予測可能に積み重なります。見出しはより大きな導入の間隔を 上 に追加します （h2 は手前に十分な間隔、後ろにわずかな間隔を取って新しいセクションを開きます）。 これが、見出しを、それが導く本文に結びついているように感じさせる仕組みです。

段落とインラインテキスト#

段落が基準を定めます。この文は、強調のための太字、ストレスのための斜体、 そして識別子のための inline code を示しています――コードはかすかな色味と 等幅書体を得るため、OvellumUserConfig のようなシンボルが散文と取り違えられる ことはありません。設定リファレンス のような リンクはアクセントカラーと、ベースラインからオフセットした細い下線を帯び、 ホバーで色味が変わります。撤回のために 取り消し線 でテキストに線を引くこともできます。

引用は、先頭の縁に 1 本のルールを引き、文字を控えめにして、わずかに字下げ されます――箱で囲むのではなく、静かに。傍注や引用句に使い、強調には使わない でください（それは太字の役割です）。

コールアウト#

GitHub スタイルのアラート引用は、色付きのコールアウトパネルになります。

リスト#

順序なしリストは、控えめな色の静かなマーカーを使い、間隔を詰めて入れ子になる ため、深さが階層として読めます。

• 1 行か 2 行に収めた最初の項目。
• 入れ子の詳細を伴う 2 番目の項目:
  • 入れ子のポイント。
  • インデントのステップを示すための、もう一つ。
    • さらに 1 段深いもの。
• 最後の項目。

順序付きリストも同じリズムを帯びます。

1. Markdown でページを書く。
2. ovellum build を実行する。
3. dist/ の出力を任意の静的ホスティングにデプロイする。

タスクリストはチェックボックスをレンダリングします。

• タイポグラフィスケール
• カラーシステム
• あなたの次のページ

脚注#

脚注の参照は小さな上付き文字として置かれ¹、脚注へリンクし、脚注からは元へ 戻れます。参照は出現順に番号が振られ、脚注は本文より 1 段小さい、うっすらと色のついた パネルにページ末尾でまとめられます。²

コード#

インラインコードは const x = 1 のように読めます。フェンスで囲まれたブロックは、 CSS 変数を介して出力されるライト/ダークのデュアルテーマで Shiki により ハイライトされます――そのため色は外観モードとともに切り替わり、ランタイムの コストはゼロです――言語のラベルとコピーボタンが付きます。

import { defineConfig } from 'ovellum';

export default defineConfig({
  mode: 'manual',
  input: 'content',
  output: 'dist',
  site: {
    title: 'My Docs',
    palette: 'default',
  },
});

ovellum build

テーブル#

テーブルはエディトリアルカーム――横罫のみで、格子線もヘッダーの塗りもありません。 ヘッダーは太さとより厚い下罫で読み取れます。列より幅の広いテーブルは、レイアウトを 崩すのではなく横スクロールします。

画像#

画像は段の幅にスケールし、アスペクト比を保ち、他のメディアと同じ角丸を帯びます。

これはページの Markdown ファイルの隣（styleguide-sample.jpg）に置かれ、 ルート絶対パスで参照されています――アセットとダウンロード ガイドが、ページ固有の画像に推奨するパターンです。

動画#

YouTube や Vimeo から埋め込みコードをそのまま貼り付けてください――「共有 → 埋め込む」をそのままコピーするだけ――それで動きます。Ovellum は、それらの既知の 動画ホストからの <iframe> のみ を許可し、堅牢化し、レスポンシブな 16:9 の フレームで包みます。

上の YouTube 動画埋め込みのコードがこれです――YouTube が 共有 → 埋め込む で 渡してくる正確なスニペットを、そのまま Markdown に落とし込んだものです。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/1Jpjw2w_0l8"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

ほかに何もする必要はありません――固定の width/height と frameborder は 無害なまま付いてきます。Ovellum のレスポンシブラッパーがピクセル寸法を上書きし、 loading="lazy" と厳格なリファラーポリシーが自動的に適用されます。 （YouTube のプライバシー保護ホストには https://www.youtube-nocookie.com/embed/… に差し替えてください。）セルフホストのクリップには、ネイティブの <video> / <audio> プレーヤーも使えます。どちらも アセットとダウンロード で説明しています。

水平線#

テーマ区切りは、文章のまとまりの間に静かな仕切りを置きます。

そのルールも、上のすべてと同様に、デフォルトテンプレートが仕事をしている だけのものです――このページにはカスタム CSS は一切ありません。

カラーシステム#

5 つのパレットが出荷されており、それぞれ OKLCH（知覚的に均一なので、 ランプが sRGB の 16 進数のような不均一な跳びではなく、視覚的に均等な刻みで 進む）で作られています。

• Ovellum ――ニュートラルなグレー、デフォルト。
• Nord ――クールで凍えるようなブルーグレー。
• Flexoki ――暖かくインクの乗った紙。
• Solarized ――Ethan Schoonover による計算された基調色。
• E-ink ――高コントラストの暖かい紙とインク、モノクロ。

各パレットは 1 本のグレーランプとアクセント 1 色から成ります。ダークモードは インデックスを反転させて同じランプを再利用する ため、維持すべき値のセットが 二つになることはありません。外観コントロールの カラー ピッカーは、アクセント だけをリアルタイムで上書きします。そのすべてはセマンティックトークン（surface、 border、foreground、link）を通じて流れます。だからこそ、一度の切り替えで ページ全体が――このページも含めて――再着色されるのです。