drawn-notebook-ui は何をしますか？
name: drawn-notebook-ui description: > 「描かれたノート」の美学を再現するための完全なデザインシステムと実装ガイド。 Askarのポートフォリオのために作成された、静かでエディトリアルで手作り感のあるUI言語。 すべてのトークン、コンポーネント、アニメーション、インタラクションパターンを、 Flutter（Dart）とバニラWeb（HTML/CSS/JS）の両方、ライトモードとダークモードの両方で 余すところなく詳細にカバーしています。ユーザーがこの特定のビジュアル言語を あらゆるコンテキストで構築、適応、拡張したい場合にこのスキルを使用してください。
概要
Drawn Notebookはコンポーネントライブラリではありません。これはデザイン言語です。すべてのピクセル、すべての線の太さ、すべてのスペーシングのリズム、すべてのアニメーションのタイミングカーブが、その一貫した哲学に奉仕します。その根本原則は、インターフェースが生きているノートのように感じられることです：クリーム色の紙にインクで描かれ、スクロールダウンするにつれてゆっくりと明らかになる内容、物理的な旅のようにページを横断するナビゲーショナルスレッド。何も騒がしくはありません。何も目的なく装飾的ではありません。UIはすべてのビジュアル要素を、意味に結びつけることで正当化します。
このスキルは、正確で包括的なリファレンスです。このUIを実装する際は、各セクションを順番に従ってください。トークン定義をスキップしないでください。すべてのスペーシング、色、モーションの値は重要な役割を担っています。ダークモードのセクションもスキップしないでください。両方のテーマは同等の第一級市民であり、常に同時に正しくなければなりません。
セクション1 — デザイン哲学
1.1 基本原則
ミニマリズムそのもののためではなく、静かな自信。 デザインは控えめですが、残っているすべての要素には目的があります。空白は怠惰ではなく、ページが呼吸しているのです。ユーザーの視線は、彩度や装飾的な飾りではなく、構成、重み、動きによって導かれます。
文字通りのスキューモーフィズムではなく、手書きの美学。 UIは描画のクラフトを参照しています — 細いストロークの太さ、セリフのエディトリアルタイポグラフィ、紙質のテクスチャ、線画としてレンダリングされたSVGイラスト — しかし、紙のふりをすることはありません。それは、アナログのクラフトの触感性を尊重するデジタルサーフェスであり、それを不器用に模倣することはありません。
すべてのセクションはチャプターです。 ページは連続したスクロールであり、各セクションはノートの新しいページをめくるように感じられます。セクションの背景は、暖かみのあるニュートラルカラーの間で微妙にシフトします。継続的な金色の糸（ジャーニーラインSVG）が視覚的にそれらを縫い合わせます。
モーションはナレーションであり、エンターテイメントではありません。 アニメーションは、手が言葉を書くようにコンテンツを明らかにします — 下から上に現れ、柔らかくフェードインし、SVGパスをトレースします。持続時間は現代の基準では遅いです（リビールで1.2〜2秒）。これは意図的です。スピードはノイズを意味します。遅さはクラフトを意味します。
AIによるスロップパターンを避ける。 以下のパターンは明示的に禁止されています：紫からピンクへのグラデーションヒーロー背景、同一の高さと角丸を持つカードグリッド、ネオンに光るホバー状態、ほとんどの要素で14pxを超える大きな角丸、パーセンテージ数字付きのカラーコード化されたスキルバー、箇条書きと太字の日付付きのタイムライン、装飾としての絵文字の使用。
セクション2 — デザイントークン
2.1 カラーパレット — ライトモード（昼光ノートブック）
ライトモードのすべての色は、紙、クリーム色、自然なインクに由来する暖かみのあるニュートラルカラーです。単一のアクセントファミリーがあります：ゴールド/テラコッタ。くすんだ琥珀色から暖かみのあるレンガ色までの範囲です。
/* ライトモード（:rootに適用） */
--cream: #F7F5F0; /* ページ背景 — 主要サーフェス */
--sage: #EEF3ED; /* Aboutセクション背景 — 最も明るいグリーングレー */
--parchment: #F1ECE3; /* Experience + Resumeセクション背景 */
--warm-white: #FAF8F5; /* Skillsセクション背景 — 最も明るいサーフェス */
--linen: #F3EFE8; /* Projectsセクション背景 */
--sage-tint: #EFF3EE; /* Learningセクション背景 */
--charcoal: #1A1A1A; /* 主要テキスト、SVGストローク、ボーダー */
--soft-black: #2C2C2C; /* セカンダリテキスト、強いラベル */
--warm-grey: #8A8580; /* ミュートされたラベル、タイムスタンプ、キャプション */
--light-grey: #C5BFB8; /* スクロールプロンプト、装飾セパレータ */
--terracotta: #B87A5A; /* ホバー状態、箇条書き、アクティブウェイポイント */
--indigo: #6B6EA0; /* 予約 — プライマリパターンでは未使用 */
--gold: #C4956A; /* 主要アクセント — ジャーニーライン、スキルアイコン、チップ */
--gold-dim: rgba(196, 149, 106, 0.3); /* シャドウ、ボーダー用のソフトゴールド */
--blush: #F0EBE5; /* ホバー時のチップ/バッジ背景 */
--sage-dark: #8B9E8B; /* セクションボーダーセパレータの色合い */
2.2 カラーパレット — ダークモード（夜間ノートブック）
ダークモードは単純な反転ではありません。背景は暖かみのあるクリーム色から深い暖かみのある黒へと移行します — ほとんどインクの染みたような質感です。アクセントカラーは暗い表面でも読みやすさを保つためにわずかに明るくなります。
/* ダークモード（:root[data-theme="dark"]に適用） */
--cream: #141210; /* ページ背景 — 深い暖かみのある黒 */
--sage: #171816; /* Aboutセクション背景 */
--parchment: #1A1815; /* Experience + Resume背景 */
--warm-white: #1E1B18; /* Skillsセクション背景 */
--linen: #181614; /* Projectsセクション背景 */
--sage-tint: #161815; /* Learningセクション背景 */
--charcoal: #EDE8E1; /* 主要テキスト — 暖かみのあるオフホワイト */
--soft-black: #D8D2C8; /* セカンダリテキスト */
--warm-grey: #9E978F; /* ミュートされたラベル */
--light-grey: #38342E; /* 装飾セパレータ */
--terracotta: #D98A62; /* ホバーアクセント — ライトモードよりわずかに明るい */
--indigo: #8C8FB8;
--gold: #D4A373; /* 主要アクセント — ライトモードよりわずかに暖かい */
--gold-dim: rgba(212, 163, 115, 0.3);
--blush: #241E1A;
--sage-dark: #9EAF9E;
/* サーフェストークン */
--card-glass: rgba(30, 27, 24, 0.72);
--card-glass-hover: rgba(42, 38, 34, 0.95);
--card-item-bg: rgba(24, 21, 19, 0.78);
--card-item-hover: rgba(38, 34, 30, 0.96);
--card-border: rgba(212, 163, 115, 0.22);
--card-border-hover: rgba(212, 163, 115, 0.48);
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
--card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
--card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08);
--badge-bg: rgba(24, 21, 19, 0.88);
--grain-opacity: 0.022; /* 暗闇での濁りを避けるため低く */
2.3 カラーパレット — ライトモードサーフェストークン
/* ライトモードサーフェストークン */
--card-glass: rgba(255, 255, 255, 0.65);
--card-glass-hover: #ffffff;
--card-item-bg: rgba(247, 245, 240, 0.8);
--card-item-hover: rgba(255, 255, 255, 0.98);
--card-border: rgba(196, 149, 106, 0.22);
--card-border-hover: rgba(196, 149, 106, 0.45);
--card-shadow: 0 4px 16px rgba(26, 26, 26, 0.04);
--card-shadow-hover: 0 6px 20px rgba(196, 149, 106, 0.12);
--card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95);
--badge-bg: rgba(247, 245, 240, 0.82);
--grain-opacity: 0.035;
2.4 テーマ切り替え — フラッシュフリー実装
テーマ検出は、ページがレンダリングされる前に<head>内で同期的に実行されなければなりません。これにより、間違ったテーマのフラッシュ（FOUT）を防ぎます。これは重要な実装要件です：
<head>
<!-- スタイルシートリンクより前に、<head>内の最初のスクリプトである必要があります -->
<script>
(function () {
try {
var stored = localStorage.getItem('color-scheme');
var prefersDark = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = (stored === 'dark' || (!stored && prefersDark)) ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
var meta = document.querySelector('meta[name="color-scheme"]');
if (meta && (stored === 'dark' || stored === 'light')) meta.content = stored;
var themeColor = document.querySelector('meta[name="theme-color"]');
if (themeColor) themeColor.content = theme === 'dark' ? '#141210' : '#F8F4F0';
} catch (e) {}
})();
</script>
</head>
Flutter/Dartでは、デフォルトでThemeMode.systemを使用し、SharedPreferencesを介して永続的なオーバーライドを行います。キーはcolor-scheme、値は'dark'または'light'です。
2.5 タイポグラフィトークン
--font-serif: 'Cormorant Garamond', 'Georgia', serif;
--font-sans: 'Inter', 'Helvetica Neue', sans-serif;
Cormorant Garamondは、このデザインのエディトリアルな声にとって交渉の余地がありません。ウェイト300、400、500、600でロードされ、300と400にはイタリックバリアントがあります。すべての見出し、セクションタイトル、ヒーロー名、チップ、レールラベル、ウェイポイントメッセージ、および「書かれた」品質が必要なあらゆる場所で使用されます。ウェイト600を超えて使用してはなりません — これはボールドタイプフェイスではありません。
Interは機能的なコンパニオンです。キャプション、スキルタグ、タイムスタンプ、大文字のキッカー、および情報密度の高いコンテキストの本文テキストに使用されます。ウェイト300、400、500のみをロードします。
/* Google Fontsインポート */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
2.6 スペーシングトークン
すべてのスペーシングはclamp()を使用して流動的です。セクションのパディングやコンテンツ幅の制約にハードなピクセル値を使用しないでください。
--section-pad: clamp(80px, 12vh, 160px); /* 主要セクションの垂直パディング */
--content-max: 800px; /* 狭い散文カラム */
--content-wide: 1100px; /* グリッド用のワイドレイアウト */
--side-pad: clamp(24px, 5vw, 80px); /* 水平ページマージン */
2.7 アニメーショントークン
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 一般的なイーズアウト */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* マテリアルライクなスムーズ */
--duration-slow: 1.2s; /* リビールアニメーション */
--duration-med: 0.8s; /* 中程度のトランジション */
--duration-fast: 0.4s; /* クイックマイクロインタラクション */
セクション3 — グローバルファンデーション
3.1 CSSリセットとベース
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--cream);
color: var(--charcoal);
font-family: var(--font-sans);
font-weight: 300;
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
3.2 テキスト選択
選択ハイライトはソフトなゴールドウォッシュです — 攻撃的にならずにアクセントパレットを反映します：
::selection {
background: rgba(196, 149, 106, 0.2);
color: var(--charcoal);
}
::-moz-selection {
background: rgba(196, 149, 106, 0.2);
color: var(--charcoal);
}
3.3 SVGストローク適応
すべてのインラインSVGは、ライトモードパレットからハードコードされた16進ストローク（#1A1A1A、#2C2C2C）を使用します。SVGマークアップに触れずにダークモードに適応させるには、CSS属性セレクタオーバーライドを使用します：
svg [stroke="#1A1A1A"], svg [stroke="#1a1a1a"] { stroke: var(--charcoal); }
svg [fill="#1A1A1A"], svg [fill="#1a1a1a"] { fill: var(--charcoal); }
svg [stroke="#2C2C2C"], svg [stroke="#2c2c2c"] { stroke: var(--soft-black); }
svg [fill="#2C2C2C"], svg [fill="#2c2c2c"] { fill: var(--soft-black); }
svg text[fill="#1A1A1A"] { fill: var(--charcoal); }
svg text[fill="#8A8580"] { fill: var(--warm-grey); }
SVG内のゴールドアクセント（#C4956A）は意図的にオーバーライドされません。 ゴールドアクセントは両方のテーマで固定の基準色です。ダークモードではトークン--goldが#D4A373に明るくなりますが、SVGインラインゴールドは暗い背景に対するコントラストがまだ許容できるため、再マッピングする必要はありません。
3.4 スムーズなテーマトランジション
テーマ間で変化するすべてのサーフェスに調整されたトランジションを適用します。これにより、色の急激なジャンプを防ぎます：
body, section,
.about, .experience, .resume-section, .skills, .projects, .learning, .closing,
.exp-card, .exp-item, .skill-cell, .compact-card, .compact-card__icon,
.about__point, .about__visual-card, .about__chip, .closing__link,
.journey-waypoint__message, .rail-node__label, .resume-modal__panel,
.resume-modal__header {
transition:
background-color 0.35s var(--ease-out),
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out);
}
/* ユーザーのモーション設定を常に尊重 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
セクション4 — ペーパーグレインオーバーレイ
微妙な紙質テクスチャが、全ビューポート固定オーバーレイとして適用されます。z-index: 9999 — すべての上に配置されますが、pointer-events: noneにより、インタラクションを妨げないようにします。
.grain-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: var(--grain-opacity, 0.035);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
transform: translateZ(0);
will-change: transform;
transition: opacity 0.35s var(--ease-out);
}
/* ダークモードでは、スクリーンブレンドがグレインをより自然に表示 */
:root[data-theme="dark"] .grain-overlay {
mix-blend-mode: screen;
}
Flutterの場合： ウィジェットツリーの最上部にCustomPaintウィジェットとshaderベースのノイズパターンを使用してこれを再現するか、グレインを約3%の不透明度のPNGアセットとしてベイクし、ダークモードではBlendMode.screenを使用します。
セクション5 — テーマトグル（天体スイッチャー）
テーマトグルは、右上隅に固定配置された小さなピルボタンです。
…（このスキルの完全版については元のドキュメントを参照）