---
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. #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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and most section backgrounds; preserves an airy, uninterrupted feel. |
| Slate Mist | `#737987` | `--color-slate-mist` | semantic | Frequent muted copy, especially supporting text and footer descriptions. |
| Soft Panel | `#efeff3` | `--color-soft-panel` | surface | Pale card and control surface that distinguishes UI blocks from the white canvas. |
| Deep Signal | `#394be0` | `--color-deep-signal` | accent | Secondary cobalt accent appearing sparingly in interface details and text. |
| Periwinkle Haze | `#9eb3f6` | `--color-periwinkle-haze` | semantic | Light blue detail in button or interface treatments, not a major page color. |
| Graphite Fog | `#666c77` | `--color-graphite-fog` | semantic | Muted footer and supporting text where a softer contrast is appropriate. |
| Cool Gray | `#7d8290` | `--color-cool-gray` | semantic | Secondary card text and interface copy, including product mockup labels. |
| Cloud Surface | `#f6f6f8` | `--color-cloud-surface` | surface | Subtle card, badge, and link-background treatment. |
| Signal Blue | `#4457ff` | `--color-signal-blue` | brand | Primary CTA fill and prominent blue text; the most recognizable brand action color. |
| Warm Hairline | `#e6e2dc` | `--color-warm-hairline` | neutral | Fine separators, most visibly in the footer. |
| Soft Ink | `#23252b` | `--color-soft-ink` | neutral | Headlines, primary copy, and high-contrast interface labels. |
| Cool Divider | `#d8dbe2` | `--color-cool-divider` | semantic | Fine dashed outlines and subtle boundaries on small controls. |
| Muted Indigo | `#596a98` | `--color-muted-indigo` | accent | Low-frequency blue-gray interface accent, mainly within controls. |
| Periwinkle Blue | `#5979d2` | `--color-periwinkle-blue` | accent | Occasional product UI button detail rather than a page-wide brand field. |
| Charcoal Ink | `#2c3038` | `--color-charcoal-ink` | neutral | Secondary dark text and fine interface copy. |
| Lavender Line | `#e1e5f4` | `--color-lavender-line` | semantic | Light blue-gray border detail within interface components. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efeff3` (Soft Panel) · `--color-surface-2` → `#f6f6f8` (Cloud Surface) · `--color-text` → `#23252b` (Soft Ink) · `--color-text-muted` → `#737987` (Slate Mist) · `--color-text-subtle` → `#666c77` (Graphite Fog) · `--color-border` → `#e6e2dc` (Warm Hairline) · `--color-accent` → `#394be0` (Deep Signal) · `--color-accent-2` → `#4457ff` (Signal Blue) · `--color-accent-3` → `#596a98` (Muted Indigo) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#23252b` | `#ffffff` | 15.32:1 | AAA |
| `#23252b` | `#efeff3` | 13.36:1 | AAA |
| `#23252b` | `#f6f6f8` | 14.19:1 | AAA |
| `#737987` | `#ffffff` | 4.36:1 | AA-large |
| `#737987` | `#efeff3` | 3.8:1 | AA-large |
| `#737987` | `#f6f6f8` | 4.04:1 | AA-large |
| `#666c77` | `#ffffff` | 5.28:1 | AA |
| `#666c77` | `#efeff3` | 4.6:1 | AA |
| `#666c77` | `#f6f6f8` | 4.89:1 | AA |
| `#394be0` | `#ffffff` | 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-#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.

### Measured component styles

- **Primary button** (“Sign Up”): background #4457ff · text #ffffff · radius 11px · padding 0px 18px · 500 14px Inter
- **Secondary button** (“Composer”): transparent background · text #585f6b · border 1px dashed #d8dbe2 · radius 3.35544e+07px · padding 0px 12px · 500 14px Inter
- **Link** (“AI AGENT · API ChatGPT ↗ Plan your socia”): background #f6f6f8 · text #20232b · radius 15px · padding 24px 34px 0px 34px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Facebook”): background #f5f5f8 · text #20232b · radius 28px · padding 0px · 400 16px Inter
- **Badge** (“v2.0”): background #f7f7f9 · text #4f5560 · border 1px solid #cfd1d9 · radius 6px · padding 2px 6px · 700 10px Inter
- **Navigation item** (“Product”): transparent background · text #4f5562 · radius 0px · padding 0px · 500 14px Inter

## Do

- 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.

## 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 (#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.

## 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: #4457ff;
--cc-bg: #fff;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #4457ff;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #4457ff;
--cc-btn-primary-hover-bg: #3347fb;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-border-color: #3347fb;
--cc-btn-secondary-bg: #f5f5f6;
--cc-btn-secondary-color: #262932;
--cc-btn-secondary-border-color: #f5f5f6;
--cc-btn-secondary-hover-bg: #eeeeef;
--cc-btn-secondary-hover-color: #262932;
--cc-btn-secondary-hover-border-color: #eeeeef;
--cc-separator-border-color: #f0f4f7;
--cc-toggle-on-bg: #4457ff;
--cc-toggle-off-bg: #667481;
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #fff;
--cc-toggle-enabled-icon-color: #fff;
--cc-toggle-disabled-icon-color: #fff;
--cc-toggle-readonly-bg: #d5dee2;
--cc-toggle-readonly-knob-bg: #fff;
--cc-toggle-readonly-knob-icon-color: #d5dee2;
--cc-section-category-border: #f0f4f7;
--cc-cookie-category-block-bg: #f0f4f7;
--cc-cookie-category-block-border: #f0f4f7;
--cc-cookie-category-block-hover-bg: #e9eff4;
--cc-cookie-category-block-hover-border: #e9eff4;
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: #dee4e9;
--cc-overlay-bg: #000000a6;
--cc-webkit-scrollbar-bg: #f0f4f7;
--cc-webkit-scrollbar-hover-bg: #3347fb;
--cc-footer-bg: #f5f5f6;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/feedhive-com