褪せた色、セリフやタイプライター書体、紙の質感で懐かしさを演出。カフェ・雑貨・出版・クラフト系ブランドに。
向いているプロダクト: カフェ・ベーカリー、クラフト・雑貨、出版・雑誌、レコード・古着
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「時間の重なり」。印刷物のような質感と少し褪せた配色で、デジタルの均質さをあえて崩す。手仕事の温度と物語性を感じさせる。
古紙に刷られた、いまの情報。
#F3E9D2古紙色のページ背景
#FAF3E3カード
#2E2A25インク色
#7A6E5Fキャプション
#B4432F褪せた赤。ボタン・強調
#2F5D62褪せた青緑。リンク・バッジ
#D9A441ハイライト
#2E2A25罫線（インク色の細線または二重線）
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* レトロ（Retro / Vintage）のデザイントークン — CSS辞書 /design/retro/ */
:root {
/* カラー */
--color-bg: #F3E9D2; /* 背景: 古紙色のページ背景 */
--color-surface: #FAF3E3; /* サーフェス: カード */
--color-text: #2E2A25; /* 本文: インク色 */
--color-muted: #7A6E5F; /* 補足: キャプション */
--color-primary: #B4432F; /* メイン: 褪せた赤。ボタン・強調 */
--color-secondary: #2F5D62; /* サブ: 褪せた青緑。リンク・バッジ */
--color-mustard: #D9A441; /* マスタード: ハイライト */
--color-border: #2E2A25; /* ボーダー: 罫線（インク色の細線または二重線） */
/* フォント */
--font-heading: "Abril Fatface", "Rozha One", "Noto Serif JP", serif;
--font-body: "Lora", "Noto Serif JP", serif;
--font-mono: "Courier Prime", "Courier New", monospace;
/* 角丸 */
--radius-sm: 0;
--radius-md: 2px;
--radius-lg: 4px;
--radius-full: 0;
/* 影 */
--shadow-sm: none;
--shadow-md: 2px 2px 0 #2E2A25;
--shadow-lg: 3px 3px 0 #2E2A25;
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--easing: steps(3, end);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
古紙色の背景と褪せた彩度の配色、セリフ/スラブセリフ書体、二重罫線・スタンプ風装飾で「印刷物」の質感を出すこと。角丸・ぼかし影・グラデーションは禁止。