Resend

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

风格描述

Resend 采用开发工具与平台方向的视觉语言，通过深色界面、充足留白、字体驱动、暖色氛围组织页面层级，让品牌表达与核心操作保持一致。 色彩系统围绕 #000000、#f0f0f0、#ffffff、#a1a4a5 展开，并通过主色、背景色与中性色的层级关系平衡识别度和可读性。 排版主要使用 DM Serif Display、Inter、Commit Mono，配合留白、字号和组件尺度形成可复用的界面节奏。

Reusable Visual System

可复用视觉系统灵感

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

当前输出

DESIGN.md· Claude / Cursor / Codex

Design foundation

Resend

Color roles

primary#000000
secondary#f0f0f0
surface#a1a4a5
on-surface#464a4d

Typography

body-md · fontFamily · DM Serif Display', Georgia, serifbody-md · fontSize · —body-md · fontWeight · —

Corner radius

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

Design System Inspired by Resend

1. Visual Theme & Atmosphere

Resend 采用开发工具与平台方向的视觉语言，通过深色界面、充足留白、字体驱动、暖色氛围组织页面层级，让品牌表达与核心操作保持一致。 色彩系统围绕 #000000、#f0f0f0、#ffffff、#a1a4a5 展开，并通过主色、背景色与中性色的层级关系平衡识别度和可读性。 排版主要使用 DM Serif Display、Inter、Commit Mono，配合留白、字号和组件尺度形成可复用的界面节奏。

Key Characteristics

  • 开发工具与平台
  • 深色界面
  • 充足留白
  • 字体驱动
  • 暖色氛围
  • 衬线标题
  • 等宽字体

2. Color Palette & Roles

Primary

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

Neutral Scale

  • Neutral 1 (#a1a4a5): 正文和标题
  • Neutral 2 (#464a4d): 说明文字和元数据
  • Neutral 3 (#5c5c5c): 卡片和面板

3. Typography Rules

Font Family

Primary: 'DM Serif Display', Georgia, serif

Hierarchy

RoleFontSizeWeightLine Height
展示标题'DM Serif Display', Georgia, serif56px5001.1
H1'DM Serif Display', Georgia, serif40px5001.2
H2'DM Serif Display', Georgia, serif28px5001.3
H3'Inter', ui-sans-serif, system-ui, sans-serif20px6001.4
正文'Inter', ui-sans-serif, system-ui, sans-serif17px4001.75
说明'Inter', ui-sans-serif, system-ui, sans-serif14px4001.5
代码'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace14px4001.6

Principles

  • 字体层级：使用 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace 等宽字体呈现代码、元数据和技术标签
  • 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: #000000 — 品牌强调、标题着色和主操作状态
  • Primary 2: #f0f0f0 — 悬停状态和次级强调
  • Primary 3: #ffffff — 辅助品牌场景和提示
  • Neutral 1: #a1a4a5 — 正文和标题
  • Neutral 2: #464a4d — 说明文字和元数据
  • Neutral 3: #5c5c5c — 卡片和面板

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://resend.com/

标签

#开发工具与平台#深色界面#充足留白#字体驱动#暖色氛围#衬线标题#等宽字体