Solv 框景金融科技登陸頁面 — 重建技能

1. 設計哲學

將此頁面打造為放在「柔和圓角、無瀏覽器邊框畫布」內的拋光產品展示，而非傳統的滿版企業網站。其對比來自三個系統的協同運作：

編輯式的簡潔： 大型無襯線字體、簡短文案、充足的空白空間，以及少量的顏色。
產品的觸感： 藥丸形按鈕、內嵌迷你介面、即時數字、滑桿、手風琴選單與儀表板片段。
柔和的電影級動態： 內容不會彈跳或飛入。它從模糊、低透明度與適度的垂直位移中逐漸呈現，並採用 ease-out 曲線，然後保持靜止。

頁面在靜止時應感覺平靜，在互動時則反應靈敏。動畫是用來建立層級的工具，而非裝飾。

2. 直接觀察與推斷項目

直接觀察

一個 22.38 秒、60 fps、2272×1440 解析度的桌面螢幕錄製。
固定的森林照片背景環繞著圓角的頁面外殼。
白色、橄欖綠、酸橙萊姆綠、淡藍色、淡薰衣草紫、灰色與照片質感的表面。
英雄區以模糊 + 淡入 + 垂直位移的方式依序載入。
流暢的垂直滾動，頁面外殼右邊緣有一個狹窄的萊姆綠滾動條。
區塊揭示使用模糊清除、透明度與短暫向上移動。
一個水平標誌走馬燈。
一個即時計算機，帶有方形範圍滑桿和即時的資金估算。
一個手風琴選單，以動畫高度和加/減圖示切換開啟的答案。
一個推薦區塊，包含圖片、引言文字與分頁圓點。
三張文章卡片、一個置中的行動呼籲區塊，以及一個深色嵌入式頁尾。
沒有明顯的滾動劫持或固定的水平序列。

高信度推斷

使用 Framer Motion、GSAP ScrollTrigger 或類似的基於 Intersection Observer 的揭示系統。
類似 Lenis 的平滑滾動層，或是非常流暢的觸控板/瀏覽器滾動。
標誌走馬燈使用重複的 CSS marquee 效果。
使用單一現代無襯線字體家族；很可能屬於 Suisse/Neue Haas/Aeonik 這個範疇。確切字體無法從錄製中還原。
平版/手機行為未顯示。以下響應式規則是為了在各種裝置上維持桌面版品質而設定的實作要求。

3. 視覺系統

3.1 色彩標記

以下數值是從錄製中取樣或視覺重建的。請將其作為標準實作用色盤。

:root {
  /* 核心色 */
  --ink: #273000;          /* 取樣的深橄欖色；常見問答/頁尾/文字 */
  --ink-strong: #1f2700;   /* 更深橄欖色，用於高對比控制項 */
  --acid: #ddff5a;         /* 取樣的計算機/強調色萊姆綠 */
  --acid-soft: #efffb0;    /* 行動呼籲光暈 / 柔和的高亮欄位 */
  --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 給主要行動呼籲、計算機、常見問答排版、自訂滾動條與小型狀態晶片。
不要在小型元件中使用超過一種淡色輔助色。一張卡片應是白色、藍色、薰衣草紫、萊姆綠、橄欖綠或照片質感，而非多色漸層。
避免在文字和控制項中使用純黑色。橄欖黑是原版設計的重要特色。
外殼後方的森林照片應保持足夠柔和，使頁面外殼始終保持主導地位。如有必要，可添加微妙的青藍/奶油色調色。

3.2 排版

字體

錄製中使用的是中性新無襯線字體，具有緊湊的字距和柔和幾何造型。請使用以下字體堆疊：

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 個字元。
常見問答回答：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 欄，中間有較大間距。
常見問答：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 區塊順序

英雄區 / 導航
客戶陳述標章 + 循環標誌走馬燈
產品概覽 — 左側標題/文案，右側兩張產品故事卡片
成長資金功能三欄
透明費用計算機
常見問答手風琴
推薦媒體 / 輪播
最新文章
融資專家行動呼籲
深色嵌入式頁尾

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 個連結。
中央：白色標誌。
右側：一個深色半透明帳戶藥丸，加上一個獨立的圓形選單按鈕。

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

寬度低於 900px 時：

隱藏左側連結藥丸。
保留置中的標誌。
保留一個主要動作和選單圖示。
確保標誌在視覺上居中，而非因兩側控制項不對稱而在數學上偏移。

4.5 標誌走馬燈

白色區塊。
標誌上方為置中的陳述標章。
標誌位於水平裁剪的走道中，並帶有重複的內容。
標誌大小應在視覺上標準化，而非設定為相同的原始寬度。
對選定的標記使用灰階/橄欖色處理並降低不透明度。

4.6 產品概覽

左側一個大型兩行標題。
正下方兩個藥丸按鈕。
兩個短段落；每個段落的前幾個字為半粗體。
右側使用兩張不同顏色的卡片，垂直錯位以創造不對稱感。
深色卡片比淡藍色卡片更窄/更高，並包含迷你產品 UI。

4.7 成長功能三欄

區塊標題橫跨大部分行，右側對齊一個小型外框「了解更多」藥丸。
三張卡片：
1. 柔和綠色照片/漸層卡片，帶有嵌入式白色 UI。
2. 薰衣草紫卡片，帶有餘額摘要面板。
3. 寬幅照片卡片，帶有大型白色標題和底部文案疊加。
卡片高度和圓角相同，但寬度不同。

4.8 計算機

白色區塊，上下有較大留白。
左側：標題、2–3 行描述、深色藥丸行動呼籲。
右側：酸橙萊姆綠卡片，包含標頭、分隔線、貨幣數值、範圍控制項、分隔線、資金估算。
計算機卡片約為正方形，寬度不應超過 650px。

4.9 常見問答

全寬深橄欖色區塊。
左欄：萊姆色標題與摘要。
右欄：四個手風琴行。
一次僅開啟一個答案。
行分隔線非常細微。
加號變為減號，但整個圖示容器不旋轉。

4.10 推薦

全寬照片卡片，位於常見問答區塊正下方。
大型人像/影片截圖。
圖片底部的模糊前景是照片本身的一部分，而非介面模糊效果。
引言與歸因位於較暗的底部左側漸層之上。
右下角有兩個小型分頁圓點/按鈕。
結構上將其視為輪播，儘管錄製中僅可見一個投影片轉場。

4.11 文章

白色區塊，標題在左側，小型「顯示全部」動作在右側。
三張等寬卡片。
每張卡片使用 16:9 或略高的圖片，帶有深色底部漸層和白色文章標題。
標題簡短，並固定在左下角。

4.12 行動呼籲

位於高區塊的置中內容。
背景從頂部的白色漸變到底部非常淡的萊姆色。
標題：兩行，最大寬度約 520–620px。
小型專家頭像群組與深色主要藥丸。
頂部和底部保留約 120–180px 的呼吸空間。

4.13 頁尾

行動呼籲背景延伸至頁尾後方。
頁尾本身是一個嵌入式深橄欖色圓角矩形，外側邊距為 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 中提問

說明文件