Overview
This design language is a polished dark SaaS stage for support, feedback, and product communication. It relies on large centered Inter headlines, black-purple atmosphere, clear CTA contrast, and real product panels directly below the hero.
Featurebase
Streamline feedback collection, support your customers, and announce product updates — all with one tool
Light ShadowScrolling AnimationSaasLarge TypeCommunicationGradientAiGlassAnimationBig Background ImageDark
5.0
8
Visits
Categories
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Featurebase Home design analysis
This design language is a polished dark SaaS stage for support, feedback, and product communication. It relies on large centered Inter headlines, black-purple atmosphere, clear CTA contrast, and real product panels direc...
Colors
Use 050608 as the page canvas and 101219 for cards and product panels. Use F8F9FC for primary text and the main CTA surface. Use 5A46E8 for secondary actions, active tabs, chat controls, and selected states. Use B2B8CD for muted copy and 242837 for borders. Green should only signal resolved, shipped, or successful states.
Typography
Use Inter throughout. Headlines should be large, centered, and confident, around 72px / 80px for the hero and 40px / 48px for sections. Body copy remains 16px / 24px and muted. Controls use medium weight so nav, tabs, and pricing switches feel crisp on dark backgrounds.
Layout
Lead with a dark centered hero, a short CTA row, then a broad product screenshot. Product-mode pages should use tab rails or segmented controls to switch contexts without changing the overall stage. Pricing layouts should keep cards aligned and comparable. Avoid mixing many unrelated card sizes in one row.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Dark Feedback Console
A dark support-and-feedback SaaS language with black-purple stages, large Inter headlines, frosted product panels, white primary actions, purple secondary accents, tab rails, and pricing cards.
Confident, polished, product-heavy, and conversion-focused with a dark stage and luminous interface evidence.
Primary mode: darkcustomer support and feedback platformui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Confident, polished, product-heavy, and conversion-focused with a dark stage and luminous interface evidence.
Density
5
Variance
3
Motion
3
Signals
near-black page canvas · purple gradient glows and vertical light streaks · large centered sans-serif headlines · frosted product UI screenshots · segmented tab rails and pricing switches
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Console Black
#050608
Panel Night
#101219
Panel Line
#242837
Cloud Text
#F8F9FC
Muted Slate
#B2B8CD
Action Purple
#5A46E8
Soft Purple
#A99DFF
Positive Green
#43D17A
Usage rules
Keep the base dark and let white CTAs be the primary action.
Use purple for product mode and active states, not every surface.
Use green only for resolved, shipped, or success states.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(20px, 5vw, 88px)
content_max_width
1180px
hero_gap
24px
section_gap
96px
card_gap
20px
card_padding
28px
control_padding
10px 18px
tab_padding
8px 14px
Token Radii
Corner radii tokens with a live surface sample.
small
10px
card
20px
panel
28px
screenshot
24px
pill
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
clean, modern, dense, and conversion-ready
Body
Inter
neutral, product-native, and readable on dark surfaces
Mono
System mono
only for integration keys, IDs, or telemetry metadata
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
72px/80px
Hero
Page title
56px/64px
Page title
Section title
40px/48px
Section title
Card title
22px/—
Card title
Body
16px/24px
Body
Control
14px/20px
Control
Caption
13px/—
Caption
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 80px |
page_title | 64px |
section_title | 48px |
body | 24px |
control | 20px |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 700 |
title | 700 |
section | 650 |
control | 600 |
body | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use large centered Inter headlines with tight but readable line height. · Keep body copy muted and short in hero sections. · Use medium-weight controls for tabs, suite switches, and navigation.
Borders
Border tokens with resolved values.
Panel
1px solid #242837
Soft
1px solid rgba(248, 249, 252, 0.10)
Purple
1px solid rgba(90, 70, 232, 0.55)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Purple glow
0 0 80px rgba(90, 70, 232, 0.30)
Panel float
0 28px 100px rgba(0, 0, 0, 0.45)
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration fast
140ms
Duration base
220ms
Easing
cubic-bezier(.2, 0, 0, 1)
Borders
Resolved border token values.
| Property | Value |
|---|---|
panel | 1px solid #242837 |
soft | 1px solid rgba(248, 249, 252, 0.10) |
purple | 1px solid rgba(90, 70, 232, 0.55) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
purple_glow | 0 0 80px rgba(90, 70, 232, 0.30) |
panel_float | 0 28px 100px rgba(0, 0, 0, 0.45) |
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 140ms |
duration_base | 220ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Layout Principles
Use a dark centered hero with one direct product promise.
Place the product screenshot immediately below the CTA row.
Use tab rails to organize related product modes.
Keep pricing cards bottom-aligned and visually comparable.
Use glow as stage lighting, not as loose decoration.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#F8F9FC
Text
#050608
Border
1px solid #F8F9FC
Radius
{tokens.radii.pill}->999px
Padding
{tokens.spacing.control_padding}->10px 18px
Min height
44px
Shadow
none
Typography
control
Buttons secondary
Base Attributes
Background
#5A46E8
Text
#FFFFFF
Border
{tokens.borders.purple}->1px solid rgba(90, 70, 232, 0.55)
Radius
{tokens.radii.pill}->999px
Padding
{tokens.spacing.control_padding}->10px 18px
Min height
44px
Typography
control
Navigation top bar
OverviewFeaturesDocs
Base Attributes
Background
rgba(5, 6, 8, 0.72)
Text
#F8F9FC
Border
0
Height
72px
Navigation tab rail
OverviewFeaturesDocs
Base Attributes
Background
rgba(16, 18, 25, 0.72)
Text
#B2B8CD
Border
{tokens.borders.panel}->1px solid #242837
Radius
{tokens.radii.pill}->999px
Padding
4px
Cards product panel
Feature Card
Component preview content
Base Attributes
Background
#101219
Text
#F8F9FC
Border
{tokens.borders.panel}->1px solid #242837
Radius
{tokens.radii.screenshot}->24px
Padding
16px
Shadow
{tokens.shadows.panel_float}->0 28px 100px rgba(0, 0, 0, 0.45)
Cards pricing
Feature Card
Component preview content
Base Attributes
Background
#101219
Text
#F8F9FC
Border
{tokens.borders.panel}->1px solid #242837
Radius
{tokens.radii.card}->20px
Padding
{tokens.spacing.card_padding}->28px
Shadow
none
Iconography
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use rounded outline product icons, integration logos, chat symbols, and checkmarks; keep UI icons monochrome unless tied to purple active states.
Responsive guidance
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
- -Below 820px, stack pricing cards and keep the suite switch horizontally scrollable.
- -Crop product screenshots carefully so the main panel remains legible.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use purple gradients as full-page decoration without product content.
- -Do not make every CTA purple; the white primary button is part of the contrast system.
- -Do not use low-contrast gray text below readable thresholds.
- -Do not break pricing comparison with unequal card widths.