Refto
Dovetail

Dovetail

Dovetail is the leading customer intelligence platform. Assemble. Analyze. Act. Turn feedback into real-time insights that drive innovation and growth.

Web AppAiBlack WhiteBig Background ImageDarkClean
3.0
3
Visits
Visit

Categories

Web AppAi

Available Pages

Home

Version History

Design Analysis

Dovetail Home design analysis

Feedback Grid Intelligence is a dark analytical system that makes customer insight feel immediate and operational. The shell should stay black and structured, while product proof brings in the only meaningful color throu...

Key Takeaways

  • Primary is light and action-ready, used for the clearest CTA.
  • Secondary is a graphite control surface for frames, rails, and secondary actions.
  • Tertiary is a chart blue accent used inside product proof.
  • Use one dense modern sans throughout.
  • Keep headlines large, direct, and uncluttered.
  • Let smaller labels feel compact and utility-oriented rather than brand-expressive.

Overview

Feedback Grid Intelligence is a dark analytical system that makes customer insight feel immediate and operational. The shell should stay black and structured, while product proof brings in the only meaningful color through charts, feedback cards, and small data signals.

Colors

Orange and green can appear as supporting chart colors, but they should stay inside data storytelling.

  • Primary is light and action-ready, used for the clearest CTA.
  • Secondary is a graphite control surface for frames, rails, and secondary actions.
  • Tertiary is a chart blue accent used inside product proof.

Typography

  • Use one dense modern sans throughout.
  • Keep headlines large, direct, and uncluttered.
  • Let smaller labels feel compact and utility-oriented rather than brand-expressive.

Layout

Use a black grid shell with product proof visible early. The page should move quickly from claim to evidence, usually by placing charts, tables, or dark intelligence panels adjacent to the opening copy.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Feedback Grid Intelligence

A dark product-marketing system with black grid shells, crisp white type, compact control geometry, and chart-led proof.

Focused, analytical, and quietly high-stakes.

Primary mode: darkcustomer intelligenceui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Focused, analytical, and quietly high-stakes.
Density
3
Variance
3
Motion
3
Signals
black grid shell · white utility typography · chart-color proof · dark product framing

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Night Grid
#0A0A0A
Panel Graphite
#1E1E1E
Signal White
#F5F5F5
Chart Blue
#3C7DFF
Chart Orange
#FF6B1A
Chart Lime
#44C33B
Quiet Border
#2A2A2A
Usage rules
Keep the shell close to black and let chart colors do the talking.
Use white for the clearest action and main reading surface.
Keep colorful accents inside data or feature proof.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
8px
panel
20px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Inter
dense modern sans with low drama and high clarity
Body
Inter
compact UI voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.8rem, 8vw, 5.6rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8rem/—
Caption

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use one sans family throughout. · Keep the headline dense and direct.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Use a left-to-right product-proof rhythm with charts or dark windows visible early.
Let grid lines quietly reinforce structure.
Keep sticky progression supportive rather than theatrical.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#F5F5F5
Text
#0A0A0A
Border
0px none transparent
Radius
{tokens.radii.control}->8px
Padding
0.875rem 1.125rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#1E1E1E
Text
#F5F5F5
Border
1px solid rgba(255,255,255,0.20)
Radius
{tokens.radii.control}->8px
Padding
0.875rem 1.125rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#1E1E1E
Text
#F5F5F5
Border
1px solid #2A2A2A
Radius
{tokens.radii.panel}->20px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#1E1E1E
Text
#F5F5F5
Border
1px solid #2A2A2A
Radius
10px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(245,245,245,0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#1E1E1E
Text
#F5F5F5
Height
40px
Active text
#F5F5F5
Item padding
0.5rem 1rem
Item radius
{tokens.radii.control}->8px

Scroll motion

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Scroll driver
native
Cadence
measured
Patterns
  • -
    sticky feature progression
  • -
    guided proof reveal
Page logic
  • -
    Scroll advances through product intelligence modules one focal panel at a time.
Constraints
  • -
    The page must remain legible without stickiness.
  • -
    Do not turn the flow into a cinematic storyboard.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No soft consumer pastels across the shell.
  • -
    No large pill geometry.
  • -
    No colorful accents outside data or product proof.