Refto
Amplemarket

Amplemarket

Boost opportunity rates 3x with intent signals, AI-driven research, and personalization. Drive more pipeline with Amplemarket's AI Sales Copilot.

InteractiveSaasIllustrativeWeb AppGradientAiMarketingBig Background VideoLight
4.0
9
Visits
Visit

Available Pages

HomeDuoPricing

Design Analysis

Amplemarket Home design analysis

Build the first fold as a clean conversion stage, then let the aura and illustration introduce energy below it. Keep the tone sales-forward and legible rather than dreamy. Use the line illustration to avoid a generic das...

Key Takeaways

  • Build the first fold as a clean conversion stage, then let the aura and illustration introduce energy below it.
  • Keep the tone sales-forward and legible rather than dreamy.
  • Use the line illustration to avoid a generic dashboard-only SaaS mood.
  • Use grainy lilac and coral aura bands, one clean dashboard crop, and black line illustration accents.
  • Keep the main shell oatmeal and calm around them.
  • Use oatmeal and black as the structural base.

Overview

  • Build the first fold as a clean conversion stage, then let the aura and illustration introduce energy below it.
  • Keep the tone sales-forward and legible rather than dreamy.
  • Use the line illustration to avoid a generic dashboard-only SaaS mood.

Image Direction

  • Use grainy lilac and coral aura bands, one clean dashboard crop, and black line illustration accents.
  • Keep the main shell oatmeal and calm around them.

Colors

  • Use oatmeal and black as the structural base.
  • Keep lilac and coral inside the grain field only.
  • Let white conversion surfaces remain crisp and high trust.

Typography

  • Use one smooth grotesk for every tier of the hierarchy.
  • Keep display type large but not overly heavy.

Design.md

System Overview

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

Speckled Sales Orbit

A sales AI marketing language built from oatmeal neutrals, giant black grotesk headlines, grainy lilac-and-coral aura bands, white input rails, and hand-drawn line illustrations.

Energetic, tactile, sales-oriented, and still legible.

Primary mode: lightAI sales platform marketingui-rich

Theme

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

Visual atmosphere
Summary
Energetic, tactile, sales-oriented, and still legible.
Density
5
Variance
6
Motion
3
Signals
grain aura bands · white conversion rail · black line illustration

Colors

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

Palette colors
Oat Canvas
#F6F5F3
Pitch Black
#111111
Lilac Grain
#D9C8FF
Coral Grain
#F2A28A
Conversion White
#FFFFFF
Mist Gray
#9D9A95
Usage rules
Keep the shell oatmeal and readable.
Use grainy lilac and coral only in contained aura bands or support moments.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 6rem)
panel_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

sm
10px
md
16px
lg
20px
xl
28px
full
999px

Typography Families

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

Display
Labil Grotesk
large soft-grotesk sales headline voice
Body
Labil Grotesk
clear product-marketing body voice
Accent
Labil Grotesk
conversion and nav voice
Mono
IBM Plex Mono
rare utility support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.4rem, 7vw, 5.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.25rem, 2vw, 1.7rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Keep the biggest promise smooth and generous rather than harsh. · Use the same grotesk family throughout to keep the sales story unified.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

PropertyValue
duration220ms-320ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Keep the first fold clean and conversion-focused.
Let the aura field live lower in the stage and behind product proof instead of behind every section.
Use dark inversion for pricing or platform-depth chapters only.

Component Preview

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

Rails conversion rail
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17,17,17,0.08)
Radius
16px
Padding
0.25rem
Shadow
0 8px 24px rgba(0,0,0,0.06)
Actions black pill
Base Attributes
Background
#111111
Text
#FFFFFF
Border
none
Radius
12px
Padding
0.85rem 1.2rem
Actions quiet button
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17,17,17,0.12)
Radius
12px
Padding
0.85rem 1.2rem
Bands aura field
Base Attributes
Background
#D9C8FF
Text
#111111
Border
none
Radius
0px
Padding
0px
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    grain aura band
  • -
    dashboard crop
  • -
    line illustration
Subject patterns
  • -
    soft lilac and coral noise
  • -
    hand-drawn black outline forms
  • -
    clean white conversion elements
Composition logic
  • -
    Keep the aura low and broad behind one proof object.
  • -
    Let a line illustration float on one side to avoid a generic dashboard hero.
Treatment rules
  • -
    Keep the aura grainy and airy, not glossy.
  • -
    Use black line art rather than filled mascot illustration.
Generation cues
  • -
    Ask for an oatmeal page with a grainy lilac-coral aura band, one clean dashboard crop, and a black line illustration.
  • -
    Mention a white email rail and black CTA.
Avoid
  • -
    No generic purple SaaS blobs.
  • -
    No saturated gradient flooding the whole page.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not spread the grain aura across the whole shell.
  • -
    Do not replace the hand-drawn illustration with generic stock 3D SaaS art.
  • -
    Do not overcomplicate the conversion rail with multiple competing controls.