Featurebase 以深色、产品驱动的首页展示客服与用户反馈工具。明亮的产品界面预览、简洁的功能模块和克制的淡紫色点缀，让长页面保持清晰有序。
North star · Keep the interface nearly black and let crisp type and vivid product screenshots carry the story.
The page is grounded in near-black canvas tones, alternating between #050608 and #0a0b0f to separate major bands without introducing a bright background. White headlines establish hierarchy, while cool muted grays carry navigation, supporting copy, and secondary links. The measured palette contains no semantic accent colour; lavender and purple are mainly visible within product-interface previews and logo artwork, so treat them as media details rather than broad UI fills. Inter is used throughout, with centered, tightly tracked hero typography giving way to left-aligned feature headings and compact supporting text. A wide desktop content area organizes feature showcases, integration marks, proof points, and trust details into distinct blocks. Large screenshots act as the primary imagery and are framed by subtle borders and violet-lit edges. Comfortable section spacing, restrained cards, and small rounded controls preserve a polished, technical feel across the long scroll.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
Midnight Ink
#050608
Primary dark section surface and the background tone used behind several broad page bands.
Canvas Black
#0a0b0f
Main page canvas and alternating background for the core feature sections.
Panel Charcoal
#0f1219
Subtle card, button, and media panel surface; also provides the page's measured border tone.
Violet Charcoal
#1f1e2a
Secondary dark detail detected in borders or other UI areas, not a dominant page surface.
Graphite Detail
#15161a
Dark button, link, and small UI details rather than broad section fills.
中性色
Cool Mist
#dee1ea
Primary muted text tone, especially navigation and secondary UI labels.
Clean White
#ffffff
Main heading and high-emphasis text on the dark canvas.
Soft Slate
#c9ccd5
Supporting paragraph and lower-emphasis copy against dark backgrounds.
Lavender Slate
#b2b8cd
Link text and selected secondary labels; keep its use restrained.
Frosted Pearl
#ecedf0
Light CTA fill and pale heading or control details.
Porcelain Glow
#f8f9fc
Bright text and white-tinted gradient details, including the light CTA treatment.
Muted Silver
#b4b6be
Low-emphasis body copy appearing in measured text samples.
Cloud Gray
#e8e8e8
Pale text and button details; similar to the light primary CTA fill.
Pale Pewter
#bec0c8
Occasional low-emphasis heading text in measured samples.
Ash Gray
#9fa1a9
Low-priority supporting text, used sparingly.
功能色
Slate Indigo
#404864
Subtle supporting border/detail colour; keep limited to fine UI treatment.
文字 背景 对比度 WCAG #ffffff Clean White#0a0b0f Canvas Black19.67:1 AAA #ffffff Clean White#050608 Midnight Ink20.27:1 AAA #ffffff Clean White#0f1219 Panel Charcoal18.74:1 AAA #dee1ea Cool Mist#0a0b0f Canvas Black15.05:1 AAA #dee1ea Cool Mist#050608 Midnight Ink15.51:1 AAA #dee1ea Cool Mist#0f1219 Panel Charcoal14.33:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.361，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
__Inter_d8ebd1 网络字体 · 字重 400 / 500 / 600 / 700 · 占比 100%
免费替代：Inter
All page typography, from navigation and body text to headings, buttons, and links.
角色 示例 字号 字重 行高 字距 一级标题 Centered hero headline introducing the support and feedback platform.
Featurebase
48px 500 1.25 -0.02em 二级标题 Major feature, trust, scale, and closing CTA section headings.
Featurebase
36px 500 1.11 -0.02em 三级标题 Feature titles and smaller subsection headings.
The quick brown fox 敏捷的狐狸
24px 500 1.63 0 四级标题 Supporting headings within testimonials and detail blocks.
The quick brown fox 敏捷的狐狸
23px 400 1.5 0 正文 Feature descriptions, explanatory paragraphs, and footer copy.
The quick brown fox 敏捷的狐狸
14px 400 1.43 0 辅助文字 Compact product labels and tertiary interface text.
The quick brown fox 敏捷的狐狸
13px 500 1.5 0 按钮 Primary and secondary CTA labels and small action controls.
The quick brown fox 敏捷的狐狸
14px 500 1.43 0 链接 Navigation, feature exploration, and footer links.
The quick brown fox 敏捷的狐狸
16px 400 1.5 0 眉题 Uppercase category labels above feature section titles.
The quick brown fox 敏捷的狐狸
14px 500 1.43 0.05em
间距与布局 基准单位 8px · 密度：适中
64px 版块间距
16px 元素间距
40px 卡片内边距
1152px 内容最大宽度
4px
6px
8px
10px
12px
14px
16px
24px
32px
40px
48px
56px
64px
80px
Use a centered desktop container capped at the measured 1152px max width, with the hero centered and most later section headings aligned left. The homepage alternates full-width dark bands and inset feature panels, keeping a comfortable measured 64px section rhythm and 16px element gaps. Product showcases sit prominently beneath concise copy; feature summaries and integration marks form compact multi-column groups. The measured density is comfortable, with generous negative space around the long-form sections rather than tight dashboard packing.
圆角与层次 lg · button
sm · other, card
hairline · link, other, button
inset · other
The visual system favors flat dark surfaces over pronounced card shadows. Thin charcoal borders and subtle inset or ambient shadows distinguish panels from the canvas; screenshot media can carry a more visible luminous edge. Keep layering restrained, reserving stronger depth for product UI previews and the floating support widget shown inside the hero capture.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary CTA Light-filled button with dark text, a measured 12px radius, and compact horizontal padding; used for free-start actions.
Secondary CTA Dark button with a fine charcoal border and white label, paired beside the light primary action.
Feature showcase Left-aligned category label and heading, short description, exploration link or button, then a wide product screenshot.
Feature summary row Three compact columns beneath a product preview, each with a small icon, concise title, and brief descriptive copy.
Testimonial block Customer quote set apart from feature content, with a customer logo and attribution aligned as supporting proof.
Integration marks A loose, dark-on-dark field of recognizable tool icons, shown as small colorful marks rather than large branded tiles.
Imagery · Product screenshots are the defining imagery: large dark UI captures show inboxes, feedback tables, help centers, and changelogs. Present them as wide, carefully cropped media with visible interface detail, subtle dark blending, and occasional violet edge glow. The page also uses customer and integration logos as small supporting marks. Avoid stock photography or decorative illustration as the main visual; screenshots should make the software tangible.
页面版块 共 12 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Use near-black section backgrounds and preserve clear band changes. Set hero copy centrally and align feature content to the left. Let product screenshots dominate each feature showcase. Use white for primary headings and muted gray for supporting copy. Keep purple or lavender mostly within product media and small icons. Use thin borders and restrained shadows to define panels. Maintain generous gaps between long-page sections. ✕ 不该做 Do not introduce a bright full-page background. Do not make purple a large primary CTA or section fill. Do not replace product screenshots with generic stock photos. Do not crowd feature sections with dense dashboard-like cards. Do not use heavy shadows as the default panel treatment. Do not center-align every section after the hero. Do not invent extra palette colours or measured spacing values. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new SaaS page using Featurebase's dark, product-led visual language. Use Midnight Ink (#050608) and Canvas Black (#0a0b0f) for restrained alternating bands, with Panel Charcoal (#0f1219) for subtle surfaces. Set headlines in white (#ffffff), and use Cool Mist (#dee1ea) or Soft Slate (#c9ccd5) for secondary copy. Use Inter throughout, with crisp medium-weight headings and compact regular body text. Keep the hero centered, then shift into left-aligned feature sections with concise copy above wide, dark product screenshots. Use lavender only as a restrained media or icon detail. Prefer fine borders and light depth over prominent shadows; preserve comfortable vertical rhythm and compact rounded CTAs. Make screenshots, not decorative imagery, the focal point.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Featurebase design system"
variant: extended
source: https://www.featurebase.app/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/featurebase-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Featurebase · Design System
> A dark canvas for clear product storytelling
**Theme:** dark · **Industry:** saas · **Source:** https://www.featurebase.app/ · **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._
Featurebase presents its support and feedback suite through a dark, product-led homepage. Bright interface previews, concise feature sections, and restrained lavender highlights bring clarity and rhythm to a long page.
## North star
Keep the interface nearly black and let crisp type and vivid product screenshots carry the story.
## Overview
The page is grounded in near-black canvas tones, alternating between ## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | ` | `--color-midnight-ink` | surface | Primary dark section surface and the background tone used behind several broad page bands. |
| Canvas Black | ` | `--color-canvas-black` | surface | Main page canvas and alternating background for the core feature sections. |
| Panel Charcoal | ` | `--color-panel-charcoal` | surface | Subtle card, button, and media panel surface; also provides the page's measured border tone. |
| Cool Mist | ` | `--color-cool-mist` | neutral | Primary muted text tone, especially navigation and secondary UI labels. |
| Clean White | ` | `--color-clean-white` | neutral | Main heading and high-emphasis text on the dark canvas. |
| Soft Slate | ` | `--color-soft-slate` | neutral | Supporting paragraph and lower-emphasis copy against dark backgrounds. |
| Lavender Slate | ` | `--color-lavender-slate` | neutral | Link text and selected secondary labels; keep its use restrained. |
| Frosted Pearl | ` | `--color-frosted-pearl` | neutral | Light CTA fill and pale heading or control details. |
| Porcelain Glow | ` | `--color-porcelain-glow` | neutral | Bright text and white-tinted gradient details, including the light CTA treatment. |
| Muted Silver | ` | `--color-muted-silver` | neutral | Low-emphasis body copy appearing in measured text samples. |
| Cloud Gray | ` | `--color-cloud-gray` | neutral | Pale text and button details; similar to the light primary CTA fill. |
| Violet Charcoal | ` | `--color-violet-charcoal` | surface | Secondary dark detail detected in borders or other UI areas, not a dominant page surface. |
| Slate Indigo | ` | `--color-slate-indigo` | semantic | Subtle supporting border/detail colour; keep limited to fine UI treatment. |
| Graphite Detail | ` | `--color-graphite-detail` | surface | Dark button, link, and small UI details rather than broad section fills. |
| Pale Pewter | ` | `--color-pale-pewter` | neutral | Occasional low-emphasis heading text in measured samples. |
| Ash Gray | ` | `--color-ash-gray` | neutral | Low-priority supporting text, used sparingly. |
### Semantic aliases
`--color-canvas` → ` (Canvas Black) · `--color-surface` → ` (Midnight Ink) · `--color-surface-2` → ` (Panel Charcoal) · `--color-text` → ` (Clean White) · `--color-text-muted` → ` (Cool Mist) · `--color-text-subtle` → ` (Soft Slate) · `--color-border` → ` (Panel Charcoal)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 19.67:1 | AAA |
| ` | ` | 20.27:1 | AAA |
| ` | ` | 18.74:1 | AAA |
| ` | ` | 15.05:1 | AAA |
| ` | ` | 15.51:1 | AAA |
| ` | ` | 14.33:1 | AAA |
| ` | ` | 12.25:1 | AAA |
| ` | ` | 12.63:1 | AAA |
| ` | ` | 11.67:1 | AAA |
### Gradients
- `linear-gradient(to right bottom, rgb(255, 255, 255), rgba(248, 249, 252, 0.95))`
- `radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(5, 6, 8))`
- `linear-gradient(to top, rgba(0, 0, 0, 0), rgb(5, 6, 8))`
- `linear-gradient(rgba(0, 0, 0, 0), rgb(5, 6, 8))`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_d8ebd1 | `--font-body` | webfont | 400, 500, 600, 700 | All page typography, from navigation and body text to headings, buttons, and links. | Inter |
- **__Inter_d8ebd1:** Use medium-weight headlines with slightly tight tracking; body copy stays regular and compact, with uppercase eyebrow labels.
### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.25 | -0.02em | — | __Inter_d8ebd1 | Centered hero headline introducing the support and feedback platform. |
| h2 | 36px | 500 | 1.11 | -0.02em | — | __Inter_d8ebd1 | Major feature, trust, scale, and closing CTA section headings. |
| h3 | 24px | 500 | 1.63 | 0 | — | __Inter_d8ebd1 | Feature titles and smaller subsection headings. |
| h4 | 23px | 400 | 1.5 | 0 | — | __Inter_d8ebd1 | Supporting headings within testimonials and detail blocks. |
| body | 14px | 400 | 1.43 | 0 | — | __Inter_d8ebd1 | Feature descriptions, explanatory paragraphs, and footer copy. |
| caption | 13px | 500 | 1.5 | 0 | — | __Inter_d8ebd1 | Compact product labels and tertiary interface text. |
| button | 14px | 500 | 1.43 | 0 | — | __Inter_d8ebd1 | Primary and secondary CTA labels and small action controls. |
| link | 16px | 400 | 1.5 | 0 | — | __Inter_d8ebd1 | Navigation, feature exploration, and footer links. |
| eyebrow | 14px | 500 | 1.43 | 0.05em | uppercase | __Inter_d8ebd1 | Uppercase category labels above feature section titles. |
## Spacing & layout
- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 24, 32, 40, 48, 56, 64, 80 px.
- Section rhythm 64px · element gap 16px · card padding 40px · max content width 1152px.
Use a centered desktop container capped at the measured 1152px max width, with the hero centered and most later section headings aligned left. The homepage alternates full-width dark bands and inset feature panels, keeping a comfortable measured 64px section rhythm and 16px element gaps. Product showcases sit prominently beneath concise copy; feature summaries and integration marks form compact multi-column groups. The measured density is comfortable, with generous negative space around the long-form sections rather than tight dashboard packing.
## Shape & elevation
- Radius: button `12px` · card `16px` · media `50%` · link `12px` · xs `8px` · sm `12px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Shadow `sm` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `hairline` (link, other, button): `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`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(19, 19, 30) 0px -8px 10px 0px inset`
- Shadow `xl` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 1, 38, 0.4) 0px 25px 50px -12px`
- Shadow `xl-2` (media): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.
The visual system favors flat dark surfaces over pronounced card shadows. Thin charcoal borders and subtle inset or ambient shadows distinguish panels from the canvas; screenshot media can carry a more visible luminous edge. Keep layering restrained, reserving stronger depth for product UI previews and the floating support widget shown inside the hero capture.
## Imagery
Product screenshots are the defining imagery: large dark UI captures show inboxes, feedback tables, help centers, and changelogs. Present them as wide, carefully cropped media with visible interface detail, subtle dark blending, and occasional violet edge glow. The page also uses customer and integration logos as small supporting marks. Avoid stock photography or decorative illustration as the main visual; screenshots should make the software tangible.
## Components
### Primary CTA
Light-filled button with dark text, a measured 12px radius, and compact horizontal padding; used for free-start actions.
### Secondary CTA
Dark button with a fine charcoal border and white label, paired beside the light primary action.
### Feature showcase
Left-aligned category label and heading, short description, exploration link or button, then a wide product screenshot.
### Feature summary row
Three compact columns beneath a product preview, each with a small icon, concise title, and brief descriptive copy.
### Testimonial block
Customer quote set apart from feature content, with a customer logo and attribution aligned as supporting proof.
### Integration marks
A loose, dark-on-dark field of recognizable tool icons, shown as small colorful marks rather than large branded tiles.
### Measured component styles
- **Primary button** (“Get started - free”): background ## Do
- Use near-black section backgrounds and preserve clear band changes.
- Set hero copy centrally and align feature content to the left.
- Let product screenshots dominate each feature showcase.
- Use white for primary headings and muted gray for supporting copy.
- Keep purple or lavender mostly within product media and small icons.
- Use thin borders and restrained shadows to define panels.
- Maintain generous gaps between long-page sections.
## Don't
- Do not introduce a bright full-page background.
- Do not make purple a large primary CTA or section fill.
- Do not replace product screenshots with generic stock photos.
- Do not crowd feature sections with dense dashboard-like cards.
- Do not use heavy shadows as the default panel treatment.
- Do not center-align every section after the hero.
- Do not invent extra palette colours or measured spacing values.
## Agent prompt
Build a new SaaS page using Featurebase's dark, product-led visual language. Use Midnight Ink (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero above a full-width product interface preview. | primary free-start CTA, secondary demo CTA, hiring announcement link | dark canvas, centered headline, wide product screenshot |
| 2 | logo-cloud | Centered customer statement above two rows of logos. | customer credibility | compact logo grid, dark section band |
| 3 | other | Inset feature panel with left-aligned intro, wide inbox preview, and three-column details. | explore support link, feature discovery | product screenshot, feature summaries, testimonial |
| 4 | other | Feature intro above a wide feedback interface and compact detail columns. | explore feedback link, feature discovery | feedback dashboard, three-column summaries, testimonial |
| 5 | integrations | Left-aligned copy beside a loose field of integration icons. | explore integrations | scattered app marks, dark canvas |
| 6 | other | Inset section with intro, large help-center screenshot, and three detail columns. | explore help center, self-service support | AI answer preview, feature summaries, testimonial |
| 7 | other | Inset intro above a changelog screenshot and supporting feature details. | explore changelog, keep users informed | changelog preview, feature columns, testimonial |
| 8 | feature-grid | Left-aligned heading and description above three team-focused columns. | team-specific pathways, learn more links | three-column grid, small icons, testimonial |
| 9 | stats | Left-aligned scale statement above four horizontally arranged metrics. | proof through metrics | large figures, small metric labels |
| 10 | feature-split | Security statement and sales action on the left, three certification marks on the right. | talk to sales | certification icons, split layout |
| 11 | cta | Centered closing message with two CTAs over subtle dark media glow. | free-start CTA, demo CTA | centered copy, paired buttons, subtle violet glow |
| 12 | footer | Brand statement at left with grouped link columns across the footer. | multi-category navigation | small brand mark, dense link groups, dark surface |
## Source CSS custom properties (selected)
```css
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-ring-color: rgba(59,130,246,.5);
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-shadow-color: rgba(0,0,0,.3);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--font-base: '__Inter_d8ebd1', '__Inter_Fallback_d8ebd1';
```
---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/featurebase-app
