FeedHive 以明亮开阔的页面展示 AI 社媒发布工具，醒目的蓝色按钮引导用户开始体验。产品界面示意图与淡雅网格背景，将自动化工作流清晰呈现。
North star · Keep the canvas quiet and let clear product interfaces and a few precise blue actions carry the story.
The visual strategy pairs a white canvas with crisp charcoal typography and restrained blue accents. #4457ff marks the primary signup and start buttons, while #394be0 and adjacent blues appear sparingly in text and interface details. Pale gray surfaces separate cards and workflow panels without creating heavy section bands; most sections retain the same white background. Plus Jakarta Sans gives headlines a rounded, compact presence, contrasted with practical Inter body copy and small Sometype Mono uppercase labels. The page alternates centered explanatory sections with two-column product stories and broad UI demonstrations. Interface mockups, social-platform marks, and AI workflow examples provide the visual color and proof; the colorful gradient is reserved for the final conversion panel. Large gaps between sections keep the long page calm, while dense feature catalogs and footer link groups become more compact. Rounded buttons and generous card corners soften the otherwise clean, product-led presentation.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Signal Blue
#4457ff
Primary CTA fill and prominent blue text; the most recognizable brand action color.
强调色
Deep Signal
#394be0
Secondary cobalt accent appearing sparingly in interface details and text.
Muted Indigo
#596a98
Low-frequency blue-gray interface accent, mainly within controls.
Periwinkle Blue
#5979d2
Occasional product UI button detail rather than a page-wide brand field.
表层色
Soft Panel
#efeff3
Pale card and control surface that distinguishes UI blocks from the white canvas.
Cloud Surface
#f6f6f8
Subtle card, badge, and link-background treatment.
中性色
Gallery White
#ffffff
Primary page canvas and most section backgrounds; preserves an airy, uninterrupted feel.
Warm Hairline
#e6e2dc
Fine separators, most visibly in the footer.
Soft Ink
#23252b
Headlines, primary copy, and high-contrast interface labels.
Charcoal Ink
#2c3038
Secondary dark text and fine interface copy.
功能色
Slate Mist
#737987
Frequent muted copy, especially supporting text and footer descriptions.
Periwinkle Haze
#9eb3f6
Light blue detail in button or interface treatments, not a major page color.
Graphite Fog
#666c77
Muted footer and supporting text where a softer contrast is appropriate.
Cool Gray
#7d8290
Secondary card text and interface copy, including product mockup labels.
Cool Divider
#d8dbe2
Fine dashed outlines and subtle boundaries on small controls.
Lavender Line
#e1e5f4
Light blue-gray border detail within interface components.
文字 背景 对比度 WCAG #23252b Soft Ink#ffffff Gallery White15.32:1 AAA #23252b Soft Ink#efeff3 Soft Panel13.36:1 AAA #23252b Soft Ink#f6f6f8 Cloud Surface14.19:1 AAA #737987 Slate Mist#ffffff Gallery White4.36:1 AA-large #737987 Slate Mist#efeff3 Soft Panel3.8:1 AA-large #737987 Slate Mist#f6f6f8 Cloud Surface4.04:1 AA-large
字体 字号阶梯：Perfect Fourth（比例约 1.349，正文 13px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Inter 网络字体 · 字重 400 / 500 / 600 / 700 · 占比 80%
免费替代：Roboto
Body copy, navigation, buttons, captions, and most interface text
Aa 设计
Plus Jakarta Sans 网络字体 · 字重 600 / 800 / 700 · 占比 15%
免费替代：DM Sans
Display headlines and section headings
Aa 设计
Sometype Mono 网络字体 · 字重 700 · 占比 5%
免费替代：Space Mono
Eyebrows and compact uppercase labels
角色 示例 字号 字重 行高 字距 特大标题 Large hero and prominent display headlines.
FeedHive
58px 600 0.98 -0.03em 一级标题 Primary page headline and major feature statements.
FeedHive
54px 600 1 -0.025em 二级标题 Centered section headings throughout the homepage.
FeedHive
29px 800 1.01 -0.025em 三级标题 Feature-card titles and supporting subheads.
The quick brown fox 敏捷的狐狸
18px 600 1.5 -0.035em 四级标题 Larger supporting descriptions and introductory copy.
The quick brown fox 敏捷的狐狸
17px 400 1.55 0 正文 Paragraphs, product explanations, and footer descriptions.
The quick brown fox 敏捷的狐狸
13px 400 1.54 -0.01em 辅助文字 Small helper text and compact interface labels.
The quick brown fox 敏捷的狐狸
12px 500 1.2 -0.02em 按钮 Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
14px 500 1.5 -0.02em 导航 Header navigation links.
The quick brown fox 敏捷的狐狸
14px 500 1.5 -0.01em 眉题 Uppercase section labels above headings.
The quick brown fox 敏捷的狐狸
14px 700 1.5 0.14em 代码 Compact mono-style technical labels and workflow categories.
const style = 1;
14px 700 1.5 0.14em
间距与布局 基准单位 4px · 密度：紧凑
32px 版块间距
1px 元素间距
— 卡片内边距
1188px 内容最大宽度
1px
4px
6px
7px
8px
9px
10px
12px
14px
16px
17px
20px
24px
26px
28px
32px
The page uses a centered content frame measured at 1188px maximum width, with a compact density inside components and broad whitespace between sections. The hero is a two-column composition: copy and actions on the left, a large product interface on the right. Later sections alternate centered headings, three-column steps, two-column feature stories, and broad UI showcases. The measured section rhythm is consistent, while spacious vertical pauses make the overall page feel much less dense than its detailed product content. Footer navigation tightens into multiple link columns.
圆角与层次 inset · link, card
xl · card
Most sections remain flat on the white canvas, with light gray surfaces and thin boundaries doing the separation work. Product cards and interface mockups gain depth from soft, broad shadows rather than strong outlines. Rounded cards and panels contrast with the thin footer hairlines; buttons are flat, saturated pills with little visible shadow.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement bar A slim top strip centers a short launch offer, with the linked incentive picked out in blue.
Header navigation Brand mark and compact Inter navigation sit on white; Login is a pale control and Sign Up uses a cobalt pill.
Hero Large two-column introduction pairs a tight headline, short copy, checklist, and blue CTA with a cropped product interface.
Eyebrow label Small uppercase Sometype Mono text introduces sections and feature groups with wide tracking.
Product cards Pale gray rounded panels contain agent or workflow examples; restrained shadows lift UI mockups from the canvas.
Primary CTA White-on-#4457ff Inter text inside a rounded pill, with nearby low-emphasis trial reassurance.
Footer A compact brand summary and dense link columns are organized with delicate horizontal separators.
Imagery · Imagery is predominantly product-interface illustration rather than photography: dashboards, social post previews, assistant conversations, scheduling panels, and workflow cards. Mockups sit in pale rounded containers with subtle shadows and small platform icons. The hero pairs its headline with a large cropped interface preview. A video block appears in the middle of the page, and a vivid multicolor gradient supports the final CTA; colorful social logos and UI states are mostly illustrative rather than core palette colors.
页面版块 共 10 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Keep most section backgrounds white. Use #4457ff for the primary action. Use pale gray panels to frame interface content. Pair rounded headline typography with pragmatic Inter copy. Label sections with small uppercase mono eyebrows. Use product mockups as the primary visual evidence. ✕ 不该做 Do not add large dark section bands. Do not use the gradient as a page-wide background. Do not turn every card into a brightly colored block. Do not crowd the hero copy or its CTA. Do not add heavy borders or dramatic shadows. Do not treat mockup colors as the core brand palette. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new FeedHive-style SaaS page on a mostly white canvas. Use Gallery White (#ffffff) as the dominant background, Soft Ink (#23252b) for headlines, Slate Mist (#737987) for secondary copy, and Signal Blue (#4457ff) for the main CTA and select links. Set rounded, tightly tracked headlines in Plus Jakarta Sans and practical body, navigation, and buttons in Inter; use Sometype Mono for small uppercase section labels. Favor a centered content frame, broad section pauses, and alternating centered, split, and grid layouts. Show the product through realistic dashboard and workflow mockups on Cloud Surface (#f6f6f8) or Soft Panel (#efeff3), with restrained shadows and generous rounded corners. Keep the page light and uncluttered; reserve a vivid gradient for a single closing conversion panel.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "FeedHive design system"
variant: extended
source: https://www.feedhive.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/feedhive-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# FeedHive · Design System
> A bright workspace for AI-powered social publishing
**Theme:** light · **Industry:** saas · **Source:** https://www.feedhive.com/ · **Captured:** 2026-10-12 (1440×900 desktop)
_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._
FeedHive presents AI-assisted social publishing through a bright, spacious homepage anchored by sharp cobalt calls to action. Product interface mockups and subtle grid lines make the abstract workflow feel concrete.
## North star
Keep the canvas quiet and let clear product interfaces and a few precise blue actions carry the story.
## Overview
The visual strategy pairs a white canvas with crisp charcoal typography and restrained blue accents. ## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | neutral | Primary page canvas and most section backgrounds; preserves an airy, uninterrupted feel. |
| Slate Mist | ` | `--color-slate-mist` | semantic | Frequent muted copy, especially supporting text and footer descriptions. |
| Soft Panel | ` | `--color-soft-panel` | surface | Pale card and control surface that distinguishes UI blocks from the white canvas. |
| Deep Signal | ` | `--color-deep-signal` | accent | Secondary cobalt accent appearing sparingly in interface details and text. |
| Periwinkle Haze | ` | `--color-periwinkle-haze` | semantic | Light blue detail in button or interface treatments, not a major page color. |
| Graphite Fog | ` | `--color-graphite-fog` | semantic | Muted footer and supporting text where a softer contrast is appropriate. |
| Cool Gray | ` | `--color-cool-gray` | semantic | Secondary card text and interface copy, including product mockup labels. |
| Cloud Surface | ` | `--color-cloud-surface` | surface | Subtle card, badge, and link-background treatment. |
| Signal Blue | ` | `--color-signal-blue` | brand | Primary CTA fill and prominent blue text; the most recognizable brand action color. |
| Warm Hairline | ` | `--color-warm-hairline` | neutral | Fine separators, most visibly in the footer. |
| Soft Ink | ` | `--color-soft-ink` | neutral | Headlines, primary copy, and high-contrast interface labels. |
| Cool Divider | ` | `--color-cool-divider` | semantic | Fine dashed outlines and subtle boundaries on small controls. |
| Muted Indigo | ` | `--color-muted-indigo` | accent | Low-frequency blue-gray interface accent, mainly within controls. |
| Periwinkle Blue | ` | `--color-periwinkle-blue` | accent | Occasional product UI button detail rather than a page-wide brand field. |
| Charcoal Ink | ` | `--color-charcoal-ink` | neutral | Secondary dark text and fine interface copy. |
| Lavender Line | ` | `--color-lavender-line` | semantic | Light blue-gray border detail within interface components. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Soft Panel) · `--color-surface-2` → ` (Cloud Surface) · `--color-text` → ` (Soft Ink) · `--color-text-muted` → ` (Slate Mist) · `--color-text-subtle` → ` (Graphite Fog) · `--color-border` → ` (Warm Hairline) · `--color-accent` → ` (Deep Signal) · `--color-accent-2` → ` (Signal Blue) · `--color-accent-3` → ` (Muted Indigo) · `--color-on-accent` → ` (Gallery White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 15.32:1 | AAA |
| ` | ` | 13.36:1 | AAA |
| ` | ` | 14.19:1 | AAA |
| ` | ` | 4.36:1 | AA-large |
| ` | ` | 3.8:1 | AA-large |
| ` | ` | 4.04:1 | AA-large |
| ` | ` | 5.28:1 | AA |
| ` | ` | 4.6:1 | AA |
| ` | ` | 4.89:1 | AA |
| ` | ` | 6.45:1 | AA |
### Gradients
- `linear-gradient(to right, rgb(255, 255, 255) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.94) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, rgb(255, 255, 255) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.94) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right, rgba(61, 86, 255, 0.055) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(61, 86, 255, 0.055) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(135deg, rgb(78, 124, 255) 0%, rgb(159, 75, 255) 24%, rgb(213, 74, 150) 58%, rgb(237, 125, 63) 100%)`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Body copy, navigation, buttons, captions, and most interface text | Roboto |
| Plus Jakarta Sans | `--font-display` | webfont | 600, 800, 700 | Display headlines and section headings | DM Sans |
| Sometype Mono | `--font-mono` | webfont | 700 | Eyebrows and compact uppercase labels | Space Mono |
- **Inter:** Functional, compact sans; primarily regular to medium weights, with restrained negative tracking.
- **Plus Jakarta Sans:** Rounded, confident headlines; semibold to extra-bold with tight tracking and close line-height.
- **Sometype Mono:** Bold monospaced labels in uppercase with widely spaced characters.
### Type scale — Perfect Fourth (ratio ≈ 1.349, base 13px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 600 | 0.98 | -0.03em | — | Plus Jakarta Sans | Large hero and prominent display headlines. |
| h1 | 54px | 600 | 1 | -0.025em | — | Plus Jakarta Sans | Primary page headline and major feature statements. |
| h2 | 29px | 800 | 1.01 | -0.025em | — | Plus Jakarta Sans | Centered section headings throughout the homepage. |
| h3 | 18px | 600 | 1.5 | -0.035em | — | Plus Jakarta Sans | Feature-card titles and supporting subheads. |
| h4 | 17px | 400 | 1.55 | 0 | — | Inter | Larger supporting descriptions and introductory copy. |
| body | 13px | 400 | 1.54 | -0.01em | — | Inter | Paragraphs, product explanations, and footer descriptions. |
| caption | 12px | 500 | 1.2 | -0.02em | — | Inter | Small helper text and compact interface labels. |
| button | 14px | 500 | 1.5 | -0.02em | — | Inter | Primary and secondary action labels. |
| nav | 14px | 500 | 1.5 | -0.01em | — | Inter | Header navigation links. |
| eyebrow | 14px | 700 | 1.5 | 0.14em | uppercase | Sometype Mono | Uppercase section labels above headings. |
| code | 14px | 700 | 1.5 | 0.14em | uppercase | Sometype Mono | Compact mono-style technical labels and workflow categories. |
## Spacing & layout
- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 4, 6, 7, 8, 9, 10, 12, 14, 16, 17, 20, 24, 26, 28, 32 px.
- Section rhythm 32px · element gap 1px · card padding — · max content width 1188px.
The page uses a centered content frame measured at 1188px maximum width, with a compact density inside components and broad whitespace between sections. The hero is a two-column composition: copy and actions on the left, a large product interface on the right. Later sections alternate centered headings, three-column steps, two-column feature stories, and broad UI showcases. The measured section rhythm is consistent, while spacious vertical pauses make the overall page feel much less dense than its detailed product content. Footer navigation tightens into multiple link columns.
## Shape & elevation
- Radius: button `9999px` · card `28px` · media `50%` · badge `6px` · link `15px` · xs `5px` · sm `8px` · md `11px` · lg `12px` · xl `15px` · 2xl `16px` · pill `9999px`
- Shadow `inset` (link, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(66, 74, 119, 0.08) 0px 24px 60px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.
Most sections remain flat on the white canvas, with light gray surfaces and thin boundaries doing the separation work. Product cards and interface mockups gain depth from soft, broad shadows rather than strong outlines. Rounded cards and panels contrast with the thin footer hairlines; buttons are flat, saturated pills with little visible shadow.
## Imagery
Imagery is predominantly product-interface illustration rather than photography: dashboards, social post previews, assistant conversations, scheduling panels, and workflow cards. Mockups sit in pale rounded containers with subtle shadows and small platform icons. The hero pairs its headline with a large cropped interface preview. A video block appears in the middle of the page, and a vivid multicolor gradient supports the final CTA; colorful social logos and UI states are mostly illustrative rather than core palette colors.
## Components
### Announcement bar
A slim top strip centers a short launch offer, with the linked incentive picked out in blue.
### Header navigation
Brand mark and compact Inter navigation sit on white; Login is a pale control and Sign Up uses a cobalt pill.
### Hero
Large two-column introduction pairs a tight headline, short copy, checklist, and blue CTA with a cropped product interface.
### Eyebrow label
Small uppercase Sometype Mono text introduces sections and feature groups with wide tracking.
### Product cards
Pale gray rounded panels contain agent or workflow examples; restrained shadows lift UI mockups from the canvas.
### Primary CTA
White-on-### Footer
A compact brand summary and dense link columns are organized with delicate horizontal separators.
### Measured component styles
- **Primary button** (“Sign Up”): background ## Do
- Keep most section backgrounds white.
- Use ## Don't
- Do not add large dark section bands.
- Do not use the gradient as a page-wide background.
- Do not turn every card into a brightly colored block.
- Do not crowd the hero copy or its CTA.
- Do not add heavy borders or dramatic shadows.
- Do not treat mockup colors as the core brand palette.
## Agent prompt
Build a new FeedHive-style SaaS page on a mostly white canvas. Use Gallery White (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero: concise copy and CTA left, large product interface preview right. | Primary signup action, Feature checklist, Trial reassurance | Announcement strip, Blue pill CTA, Mono eyebrow, Product mockup |
| 2 | how-it-works | Centered heading followed by three side-by-side illustrated steps and concise descriptions. | Three-step explanation, Sequential guidance | Centered heading, Three product panels, Small step labels |
| 3 | video | Centered title above a wide, framed video player. | Watch product demo, Native playback controls | Centered eyebrow, Large video frame, Visible player controls |
| 4 | testimonials | Centered section heading with testimonial content and outcome highlights across two columns. | Customer proof, Business outcome highlights | Centered headline, Quote treatment, Two-column benefit content |
| 5 | integrations | Centered title above a broad, multi-row grid of social-platform icons. | Platform compatibility scan, Recognizable service marks | Icon tiles, Pale rounded surfaces, Centered heading |
| 6 | integrations | Centered introduction above a two-column agent-card grid and a compact integration-method list. | Browse agent examples, Compare connection methods | Soft gray cards, Compact text links, Small mono labels |
| 7 | feature-split | Centered heading followed by alternating two-column image-and-copy feature rows. | Feature-by-feature explanation, Repeated secondary actions | Alternating image placement, UI mockup illustrations, Compact links |
| 8 | feature-grid | Centered title above a dense multi-column catalog of small feature icons and colored highlight panels. | Feature discovery, Quick scan of capabilities | Icon matrix, Compact labels, Select pastel feature cards |
| 9 | cta | Wide rounded gradient panel with copy and CTA above a large product interface image. | Start free trial, Repeat primary conversion | Multicolor gradient, White CTA pill, Embedded product mockup |
| 10 | footer | Brand summary and link columns above dense directory lists and a separated legal and social row. | Browse site destinations, Social and legal navigation | Multi-column links, Thin separators, Compact footer copy |
## Source CSS custom properties (selected)
```css
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: 
