Solv 框架化金融科技着陆页 — 重建技能

1. 设计理念

将页面构建成一个精良的产品演示，放置在一个柔和圆角的“无浏览器画布”中，而非边缘到边缘的企业网站。对比度由三个系统协同工作产生：

编辑式克制： 大型 grotesk 标题、简短文案、充裕的留白空间和少量色彩。
产品触感： 药丸形控件、内置微型界面、实时数字、滑块、手风琴和仪表盘片段。
柔和电影感动态： 内容不会弹跳或飞入。它从模糊、低透明度和适度的垂直位移中解析出来，并带有缓出曲线，然后保持静止。

页面应在静止时感觉平静，在交互时响应迅速。动态是层级结构的工具，而非装饰。

2. 直接观察与推断

直接观察到的

一段 22.38 秒、60 fps 的桌面端录制，分辨率为 2272×1440。
一个固定的摄影森林背景，环绕着一个带圆角的页面外壳。
白色、橄榄色、酸性青柠色、淡蓝色、淡薰衣草色、灰色和摄影表面。
英雄区加载编排，包含模糊 + 淡入 + 垂直位移。
平滑的垂直滚动，页面外壳右侧边缘带有狭窄的青柠色滚动条。
区块显示使用模糊清除、透明度和短程向上运动。
一个水平标志条。
一个带有方形范围滑块和实时资金估算的交互式计算器。
一个手风琴，通过动画高度和加/减图标切换打开的答案。
一个带引文和分页点的推荐图片。
三张文章卡片、一个居中的 CTA 部分和一个深色内嵌页脚。
没有明显的滚动劫持或固定的水平序列。

高信度推断

Framer Motion、GSAP ScrollTrigger 或类似的交叉点触发显示系统。
类 Lenis 的平滑滚动层或非常流畅的触控板/浏览器滚动。
一个用于标志条的重复 CSS 滚动效果。
一个单一的现代 grotesk 字体家族；可能属于 Suisse/Neue Haas/Aeonik 范畴。仅凭录屏无法恢复确切的字体标识。
未显示平板/移动端行为。下面的响应式规则是旨在保留桌面端质量的实现要求。

3. 视觉系统

3.1 颜色令牌

这些值从录屏中采样或通过视觉重建。请将它们用作规范的实现调色板。

:root {
  /* 核心 */
  --ink: #273000;          /* 采样的深橄榄色；FAQ/页脚/文字 */
  --ink-strong: #1f2700;   /* 更深橄榄色，用于高对比度控件 */
  --acid: #ddff5a;         /* 采样的计算器/强调色酸橙绿 */
  --acid-soft: #efffb0;    /* CTA 发光 / 细微高亮字段 */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* 支撑卡片 */
  --sky: #cfe7e9;          /* 采样的淡蓝色 */
  --lavender: #d9def8;     /* 采样的淡薰衣草色 */
  --mist: #efeee9;         /* 芯片、标志声明药丸 */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* 文字 */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* 英雄区玻璃效果 */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

颜色使用规则

使用 --paper 覆盖约 65–75% 的页面表面。
对一个大的区块和页脚使用 --ink，不要用于每张卡片。
将 --acid 保留给主要行动号召、计算器、FAQ 排版、自定义滚动条和小的状态芯片。
不要在一个小组件中使用超过一种的淡色支撑色。一张卡片是白色、蓝色、薰衣草色、酸橙绿、橄榄色或摄影图片——而不是多色渐变。
避免在文本和控件中使用纯黑色。橄榄黑是原始角色的重要组成部分。
外壳后面的森林照片应保持足够柔和，以确保页面外壳始终占据主导地位。如有必要，可添加微妙的青色/奶油色滤镜。

3.2 排版

字体

录屏使用中性 neo-grotesk 字体，字母间距紧凑，几何形状柔和。使用以下字体栈：

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

对于开源实现，展示文本使用 Inter Tight，正文使用 Inter。不要引入衬线或等宽辅助字体家族。

字重系统

展示文本：400–500。大字不粗。
区块标题：400–500。
正文：400。
正文内强调：600。
按钮/导航：500–600。
大型数字读数：500。

桌面端字号缩放

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

行高与字距

英雄区/大型标题：line-height: 0.96–1.02, letter-spacing: -0.045em。
区块标题：line-height: 0.98–1.05, letter-spacing: -0.04em。
卡片标题：line-height: 1.0–1.08, letter-spacing: -0.035em。
正文：line-height: 1.42–1.55, letter-spacing: -0.01em。
按钮/导航：line-height: 1, letter-spacing: -0.01em。
大型货币值：letter-spacing: -0.055em；使用表格数字。

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

行宽规则

英雄区正文：42–54 个字符。
区块正文：48–64 个字符。
FAQ 答案：62–76 个字符。
不要让展示标题超过 14–18 个单词或超过三行（在移动端）。

3.3 间距与网格节奏

以 4px 为基础单位，大多数可见间距为 8 的倍数。

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

桌面端外壳尺寸

来自 2272×1440 的录屏：

页面外壳宽度：约 90vw。
水平外边距：约 5vw。
顶部/底部可见外边距：约 3–3.5vh。
外壳圆角半径：28–32px。
内部区块内边距：56–64px 左右。
大型垂直区块间距：96–144px。
主要卡片之间的间距：20–28px。
细分隔线：1px，透明度 12–16%。

网格

在外壳内部使用 12 列网格。

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

组合比例：

英雄区内容：左侧 6–7 列；浮动仪表盘卡片：右侧 3 列。
产品概览：文案 5 列；视觉模块 6–7 列。
功能三件套：约 3 / 3 / 4.5 列，摄影卡片最宽。
计算器：5.5 / 5.5 列，中间有宽敞的间隙。
FAQ：5 / 7 列。
文章：相等的 4 列卡片。
页脚：品牌区块 4 列；导航/联系方式/位置/语言填充其余部分。

3.4 圆角约定

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

规则：

外页面壳：28–32px。
大型媒体和区块卡片：20–24px。
微型仪表盘卡片：14–18px。
按钮、标签、分段导航和声明芯片：完全药丸形。
避免混用多种任意半径。仅使用这五个值。

3.5 阴影与高度

原始设计更依赖对比度和模糊效果，而非明显的阴影。

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

页面外壳得到一个大的柔和阴影。
浮动英雄仪表盘得到一个中等柔和的阴影。
大多数功能卡片没有阴影；使用边框或颜色分隔。
切勿使用尖锐的黑色阴影或多个堆叠的阴影。

4. 布局架构

4.1 全局画布

森林背景保持固定，而带圆角的内容外壳滚动。

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

不要在外壳周围放置沉重的边框。与背景的对比度已足够。

4.2 区块顺序

英雄区 / 导航
客户声明芯片 + 循环标志条
产品概览 — 左侧标题/文案，右侧两张产品故事卡片
成长资本功能三件套
透明费用计算器
FAQ 手风琴
推荐媒体/轮播
最新文章
融资专家 CTA
深色内嵌页脚

4.3 英雄区构成

高度：桌面端 min(92svh, 82rem)；最小 760px。
外壳内部全出血图片。
顶部导航浮于图片之上。
文案锚定在左下角。
产品/仪表盘卡片锚定在右下角。
添加深色底部渐变遮罩以提高可读性，并在照片上叠加非常微妙的暖色滤镜。

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 导航

桌面端由三个独立的集群组成：

左侧：一个半透明深色药丸，包含 3 个链接。
中间：白色 Logo。
右侧：一个深色半透明账户药丸，外加一个单独的圆形菜单按钮。

使用 backdrop-filter: blur(14px) 和半透明表面。保持导航高度 58–64px。

宽度低于 900px 时：

隐藏左侧链接药丸。
保留居中的 Logo。
保留一个主要操作和菜单图标。
确保 Logo 在视觉上保持居中，而不是因两侧控件不等而数学上偏移。

4.5 标志条

白色部分。
标志上方居中的声明芯片。
水平裁剪条内的标志，内容重复。
标志大小应在视觉上标准化，而非设置为相同的原始宽度。
对选定的标志使用灰度/橄榄色处理和降低不透明度。

4.6 产品概览

左侧两行大标题。
正下方两个药丸按钮。
两个短段落；每个段落的前几个字使用半粗体。
右侧使用两张颜色不同的卡片，垂直偏移以制造不对称感。
深色卡片比淡蓝色卡片更窄/更高，并包含微型产品 UI。

4.7 成长功能三件套

区块标题跨越大部分行，右侧有一个小的轮廓“了解更多”药丸对齐。
三张卡片：
1. 柔和绿色摄影/渐变卡片，带有内嵌白色 UI。
2. 薰衣草色卡片，带余额摘要面板。
3. 宽幅摄影卡片，带有大型白色标题和底部文案叠加。
卡片共享高度和圆角，但不共享宽度。

4.8 计算器

白色部分，上下留有大的空白。
左侧：标题、2–3 行描述、深色药丸 CTA。
右侧：酸橙绿卡片，包含头部、分隔线、货币值、范围控件、分隔线、资金估算。
计算器卡片大致为方形，宽度不应超过 650px。

4.9 FAQ

全宽深橄榄色部分。
左列：青柠色标题和摘要。
右列：四个手风琴行。
一次只打开一个答案。
行分隔线非常微妙。
加号变为减号，但整个图标容器不旋转。

4.10 推荐

FAQ 正下方的全宽摄影卡片。
大型肖像/视频静态图像。
图像底部的模糊前景是摄影的一部分，而非界面模糊效果。
引用和归属信息位于较暗的左下角渐变之上。
右下角有两个小的分页点/按钮。
在结构上将其视为轮播，尽管录屏中只可见一个幻灯片过渡。

4.11 文章

白色部分，左侧有标题，右侧有小的“显示全部”操作。
三张相等的卡片。
每张卡片使用 16:9 或略高的图像，带有深色底部渐变和白色文章标题。
标题简短，锚定在左下角。

4.12 CTA

在较高部分中居中内容。
背景从顶部的白色过渡到底部的非常淡的青柠色。
标题：两行，最大宽度约 520–620px。
小型专家头像簇和深色主要药丸。
保持大约 120–180px 的顶部和底部呼吸空间。

4.13 页脚

CTA 背景延续到页脚后面。
页脚本身是一个深橄榄色内嵌圆角矩形，外边距 24–32px。
品牌左上角，导航右上角，联系方式/位置/语言在较低区域，社交圆形图标左下角。
页脚应感觉像一个紧凑的仪表盘面板，而不是传统的边缘到边缘的法律页脚。

5. 响应式行为

录屏未显示响应式状态。请按以下要求实现以保留设计意图。

5.1 断点

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 桌面端 ≥ 1200px

保持 90vw 的外壳和所有多列组合。
使用 56–64px 的内部水平内边距。
英雄区高度：min(92svh, 82rem)。

在你喜欢的 AI 中提问

文档