暗黑极客风

AI 生成的风格描述及提示词

风格描述

纯黑背景营造沉浸式深邃空间感，产品界面截图作为视觉焦点悬浮于暗色基底之上。顶部极简导航栏，无衬线大标题左对齐占据视觉重心，右侧辅以产品更新标签形成非对称平衡。界面截图展示真实的SaaS工具面板，带有侧边栏、状态标签、时间线等复杂功能组件，体现产品的专业深度。整体构图采用「深色画布+亮色产品」的剧院式打光逻辑，让产品本身成为光源。 近乎纯黑的背景(#0A0A0A)构建极暗基调，文字采用高对比度纯白(#FFFFFF)确保可读性。色彩策略极度克制：无彩色为主，仅通过界面截图中的微弱彩色状态标签(黄色星星、绿色进度指示)提供视觉锚点。边框和分割线使用深灰色(#1F1F1F)形成微妙的层次分隔而非强烈切割。整体色温偏冷，情绪内敛、专注、具有技术神秘感，典型的开发者工具/生产力产品美学。 开发者工具官网、生产力SaaS产品着陆页、AI/技术公司品牌站、深色主题优先的产品展示、极客向B2B平台

Reusable Visual System

可复用视觉系统灵感

从灵感中提取上下文、提示词和代码 token。

当前输出

DESIGN.md· Claude / Cursor / Codex

Design foundation

暗黑极客风

Color roles

primary#FFFFFF
secondary#0A0A0A
surface#1F1F1F
on-surface#08090B

Typography

body-md · fontFamily · System UIbody-md · fontSize · —body-md · fontWeight · —

Corner radius

md · radius-sm: 4px，用于小型控件和标签

Design System Inspired by 暗黑极客风

1. Visual Theme & Atmosphere

纯黑背景营造沉浸式深邃空间感，产品界面截图作为视觉焦点悬浮于暗色基底之上。顶部极简导航栏，无衬线大标题左对齐占据视觉重心，右侧辅以产品更新标签形成非对称平衡。界面截图展示真实的SaaS工具面板，带有侧边栏、状态标签、时间线等复杂功能组件，体现产品的专业深度。整体构图采用「深色画布+亮色产品」的剧院式打光逻辑，让产品本身成为光源。 近乎纯黑的背景(#0A0A0A)构建极暗基调，文字采用高对比度纯白(#FFFFFF)确保可读性。色彩策略极度克制：无彩色为主，仅通过界面截图中的微弱彩色状态标签(黄色星星、绿色进度指示)提供视觉锚点。边框和分割线使用深灰色(#1F1F1F)形成微妙的层次分隔而非强烈切割。整体色温偏冷，情绪内敛、专注、具有技术神秘感，典型的开发者工具/生产力产品美学。 开发者工具官网、生产力SaaS产品着陆页、AI/技术公司品牌站、深色主题优先的产品展示、极客向B2B平台

Key Characteristics

  • 导入灵感
  • 深色界面
  • 技术感
  • 克制极简
  • 未来感

2. Color Palette & Roles

Primary

  • Primary 1 (#FFFFFF): 品牌强调、标题着色和主操作状态
  • Primary 2 (#0A0A0A): 悬停状态和次级强调
  • Primary 3 (#8A8F98): 辅助品牌场景和提示

Neutral Scale

  • Neutral 1 (#1F1F1F): 正文和标题
  • Neutral 2 (#08090B): 说明文字和元数据
  • Neutral 3 (#28292B): 卡片和面板

3. Typography Rules

Font Family

Primary: System UI

Hierarchy

RoleFontSizeWeightLine Height
HeadingSystem UI———
BodySystem UI———

Principles

  • 字体层级：使用大号标题、紧凑元数据、易读正文并保持一致的左对齐
  • Preserve readable contrast and do not introduce type treatments that are unsupported by the reference.

4. Component Stylings

  • No component was extracted with sufficient confidence. Reuse the foundation rules above before introducing new patterns.

5. Layout Principles

Spacing System

  • space-2: 8px，用于紧凑元素之间的基础间距
  • space-4: 16px，用于组件内边距和成组控件
  • space-6: 24px，用于卡片和内容列间距
  • space-12: 48px，用于章节节奏和大面积留白

Grid & Container

  • 内容层级：使用明确的标题、正文和元数据层级
  • 容器节奏：保持一致的卡片边距和内容对齐
  • 响应式布局：窄屏单列呈现，宽屏强化信息对照

Border Radius Scale

  • radius-sm: 4px，用于小型控件和标签
  • radius-md: 8px，用于紧凑卡片和输入框
  • radius-lg: 16px，用于预览容器和主要卡片

6. Depth & Elevation

  • Use elevation only where it is visible in the reference. Keep borders, shadows, and overlays subordinate to content hierarchy.

7. Do's and Don'ts

Do

  • Use extracted colors according to their documented roles.
  • Preserve the spacing, hierarchy, and component patterns defined above.
  • Maintain accessible contrast and visible interaction states.

Don't

  • Do not introduce unverified colors, radii, or shadows as if they came from the reference.
  • Do not collapse visual hierarchy or reduce touch targets below a usable size.

8. Responsive Behavior

  • Keep content readable at small widths: stack related controls, preserve spacing rhythm, and avoid horizontal overflow.
  • Retain the same color roles and hierarchy across breakpoints; simplify layout before reducing legibility.

9. Agent Prompt Guide

Quick Color Reference

  • Primary 1: #FFFFFF — 品牌强调、标题着色和主操作状态
  • Primary 2: #0A0A0A — 悬停状态和次级强调
  • Primary 3: #8A8F98 — 辅助品牌场景和提示
  • Neutral 1: #1F1F1F — 正文和标题
  • Neutral 2: #08090B — 说明文字和元数据
  • Neutral 3: #28292B — 卡片和面板

Implementation Guide

  1. Treat this file as the source of truth for visual decisions; use the listed tokens before inventing new values.
  2. Recreate the component patterns and interaction hierarchy with semantic HTML and accessible focus states.
  3. When information is absent, keep the design restrained instead of guessing a new visual language.

Source: https://linear.app

标签

#导入灵感#深色界面#技术感#克制极简#未来感
暗黑极客风 | IdeaDesign