ダークトーンとセリフ体、たっぷりの余白で「格」を演出。ホテル・ジュエリー・ハイエンドブランド・会員制サービスに。
向いているプロダクト: ホテル・旅館、ジュエリー・時計、会員制サービス、ハイエンドEC
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「静かな自信」。声を張らず、余白・上質な書体・抑えた色数で品格を示す。ユーザーを急かさず、じっくり眺めさせる体験を作る。
囁くように語る格。
#0F0E0Cページ背景。真っ黒ではなく墨
#1A1815カード。背景との差はわずかに
#EDE6D8生成り色のテキスト。純白は使わない
#8C8272キャプション
#C9A961アクセント。ボタン枠・罫線・強調。面で塗らない
#2C2925罫線
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* プレミアム・高級感（Premium / Luxury）のデザイントークン — CSS辞書 /design/premium/ */
:root {
/* カラー */
--color-bg: #0F0E0C; /* 背景: ページ背景。真っ黒ではなく墨 */
--color-surface: #1A1815; /* サーフェス: カード。背景との差はわずかに */
--color-text: #EDE6D8; /* 本文: 生成り色のテキスト。純白は使わない */
--color-muted: #8C8272; /* 補足: キャプション */
--color-gold: #C9A961; /* ゴールド: アクセント。ボタン枠・罫線・強調。面で塗らない */
--color-border: #2C2925; /* ボーダー: 罫線 */
/* フォント */
--font-heading: "Cormorant Garamond", "Shippori Mincho", serif;
--font-body: "Hiragino Mincho ProN", "Noto Serif JP", serif;
/* 角丸 */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 2px;
--radius-full: 0;
/* 影 */
--shadow-sm: none;
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.4);
--shadow-lg: 0 24px 48px rgb(0 0 0 / 0.5);
/* 余白の基準・線幅 */
--space-unit: 16px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 300ms;
--duration-base: 400ms;
--duration-slow: 800ms;
--easing: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
墨色の背景・生成りの文字・金の「線」の3色に限定し、セリフ体と広い余白で品格を出すこと。動きはゆっくり、太字と煽り表現は禁止。