Refto
Apollo

Apollo

Accelerate B2B sales with Apollo.io—an AI sales platform for prospecting, lead gen, and deal automation. Close more deals, faster, with smart data.

Large TypeAiLightClean
3.0
4
Visits
Visit

Categories

Ai

Available Pages

Home

Version History

Design Analysis

Apollo Home design analysis

Lime Signal Revenue Suite should feel like a serious platform that still knows how to convert. The system pairs oversized black display type with a strict, useful grotesk UI, then uses one bright lime action as the comme...

Key Takeaways

  • Keep the shell near-white and highly legible.
  • Use lime for the clearest conversion action.
  • Use black for headlines, borders, and serious utility moments.
  • Use an editorial serif for the biggest platform promises.
  • Switch to a blunt grotesk display style when a section needs to feel more technical or data-heavy.
  • Keep body copy sober, commercial, and easy to scan.

Overview

Lime Signal Revenue Suite should feel like a serious platform that still knows how to convert. The system pairs oversized black display type with a strict, useful grotesk UI, then uses one bright lime action as the commercial trigger. Product proof should sit inside clean white canvases framed by soft blue or warm oat atmospheres rather than by noisy chrome.

Image Direction

Use clean interface stills, assistant panes, or product-window compositions on top of calm support gradients or chartline fields. Small highlight strips can help direct attention, but the image direction should stay credible and product-first rather than drifting into speculative concept art.

Colors

  • Keep the shell near-white and highly legible.
  • Use lime for the clearest conversion action.
  • Use black for headlines, borders, and serious utility moments.

Typography

  • Use an editorial serif for the biggest platform promises.
  • Switch to a blunt grotesk display style when a section needs to feel more technical or data-heavy.
  • Keep body copy sober, commercial, and easy to scan.

Design.md

System Overview

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

Lime Signal Revenue Suite

A conversion-minded platform marketing system with editorial black display type, sober grotesk UI, lime signal actions, and white product canvases against pastel support atmospheres.

Confident, clean, technical, and commercially sharp.

Primary mode: lightrevenue software / sales platformui-rich

Theme

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

Visual atmosphere
Summary
Confident, clean, technical, and commercially sharp.
Density
4
Variance
3
Motion
2
Signals
editorial black headline · lime conversion CTA · white product canvas · pastel chartline backdrop

Colors

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

Palette colors
Paper White
#FBFAF7
Ink Black
#121212
Signal Lime
#F4F109
Powder Blue
#DCE7FB
Warm Oat
#E5C98F
Deep Navy
#0D274A
Quiet Border
#D8D1C8
Usage rules
Keep the shell clean and near-white by default.
Use lime for conversion emphasis, not as a blanket theme color.
Let cool blue and warm oat fields frame the product rather than replace it.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4.5rem, 8vw, 7.5rem)
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
10px
panel
12px

Typography Families

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

Display
Season Mix
editorial platform serif
Display alt
Grotesk 500
blunt technical display for product-heavy pages
Body
Soehne
sober commercial UI grotesk

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 8vw, 6.8rem)/—
Display
H2
clamp(2.6rem, 5vw, 4rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Use the serif for platform-level promises and the grotesk display for technical or data-heavy branches. · Let the body stay practical and unadorned.

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

Lead with one oversized promise and one clear conversion path.
Frame product canvases inside larger gradient or chartline atmospheres rather than cluttering the shell.
Use darker technical support sections to reset pacing after bright hero chapters.

Component Preview

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

Buttons primary
Base Attributes
Background
#F4F109
Text
#121212
Border
0px none transparent
Radius
{tokens.radii.control}->10px
Padding
0.9rem 1.35rem
Min height
46px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#121212
Border
1px solid #121212
Radius
{tokens.radii.control}->10px
Padding
0.9rem 1.35rem
Min height
46px
Typography
body
Buttons tertiary
Base Attributes
Background
#121212
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->10px
Padding
0.9rem 1.35rem
Min height
46px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#121212
Border
1px solid rgba(18,18,18,0.08)
Radius
{tokens.radii.panel}->12px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
0 12px 32px rgba(18,18,18,0.08)
Inputs default
Base Attributes
Background
#FFFFFF
Text
#121212
Border
1px solid rgba(18,18,18,0.24)
Radius
{tokens.radii.control}->10px
Padding
0.9rem 1rem
Min height
46px
Placeholder
rgba(18,18,18,0.48)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#121212
Height
56px
Active text
#121212
Item padding
0.5rem 0.75rem
Item radius
{tokens.radii.control}->10px

Image direction

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

Role
supportive
Media types
  • -
    product-window UI still
  • -
    pastel support gradient
  • -
    highlight annotation strip
Subject patterns
  • -
    one clean interface canvas
  • -
    one supporting diagram or data hint
  • -
    small bright highlight guiding action
Composition logic
  • -
    Let a large clear product pane sit inside a wider atmosphere.
  • -
    Use pastel support fields to frame the story rather than to overwhelm it.
Treatment rules
  • -
    Keep screenshots clean, well-lit, and lightly elevated.
  • -
    Use annotation highlights sparingly so the system retains credibility.
Generation cues
  • -
    Describe the support atmosphere, product canvas, and CTA emphasis separately.
  • -
    Create original interface imagery that follows the same clean commercial logic.
Avoid
  • -
    No messy dashboard noise.
  • -
    No neon cyber treatment.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No vague brand gradients replacing the product canvas.
  • -
    No soft indecisive CTA hierarchy.
  • -
    No playful consumer-roundness overriding the platform tone.