ダーク背景にモノスペース、グリッド線、発光するアクセント。開発者ツール・AI・セキュリティ・フィンテックなど「先端」を伝えたいプロダクトに。
向いているプロダクト: 開発者ツール、AI・機械学習、フィンテック・ダッシュボード、セキュリティ
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「精密な機械の内側」。ターミナルや計器盤のメタファーで、正確さと速さを視覚化する。光は控えめに、情報の密度で先進性を出す。
正確さが、そのまま美しさになる。
#09090Bページ背景
#111114カード・パネル
#E4E4E7本文
#71717Aラベル・キャプション
#27272A罫線・グリッド線
#22D3EEシアン。アクション・発光・グラフ
#A78BFA紫。第2系列・AI表現
#4ADE80ステータス
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* テック・フューチャリスティック（Tech / Futuristic）のデザイントークン — CSS辞書 /design/tech/ */
:root {
/* カラー */
--color-bg: #09090B; /* 背景: ページ背景 */
--color-surface: #111114; /* サーフェス: カード・パネル */
--color-text: #E4E4E7; /* 本文: 本文 */
--color-muted: #71717A; /* 補足: ラベル・キャプション */
--color-border: #27272A; /* ボーダー: 罫線・グリッド線 */
--color-accent: #22D3EE; /* アクセント: シアン。アクション・発光・グラフ */
--color-accent-2: #A78BFA; /* サブアクセント: 紫。第2系列・AI表現 */
--color-success: #4ADE80; /* 成功: ステータス */
/* フォント */
--font-heading: "Space Grotesk", "Geist", "Noto Sans JP", sans-serif;
--font-body: "Geist", "Inter", "Noto Sans JP", sans-serif;
--font-mono: "JetBrains Mono", "Geist Mono", monospace;
/* 角丸 */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-full: 9999px;
/* 影 */
--shadow-sm: none;
--shadow-md: 0 0 0 1px #22D3EE;
--shadow-lg: 0 0 0 1px #22D3EE, 0 0 14px rgb(34 211 238 / 0.4);
/* 余白の基準・線幅 */
--space-unit: 4px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 120ms;
--duration-base: 160ms;
--duration-slow: 200ms;
--easing: ease-out;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
ほぼ黒の背景にグリッド線、モノスペースのラベル、シアン1色の控えめな発光で「精密な機械」を表現すること。角丸は小さく、影は使わず1pxボーダーで区切る。数値・データを主役に。