Refto
Beside

Beside

AI-powered phone assistant for US and Canadian businesses. Provides a dedicated business number, 24/7 AI receptionist that answers calls and texts, automatic transcription and summaries, appointment booking, and lead capture—replacing traditional receptionists.

Scrolling AnimationSaasWeb AppMobile AppBlack WhiteLightCleanTransitions
4.0
12
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Beside Home design analysis

Keep the interface almost austere. Use white space and quiet confidence as the premium signal. Let the black CTA and subtle warm accents carry the few moments of emphasis. White should dominate. Black should be used for...

Key Takeaways

  • Keep the interface almost austere.
  • Use white space and quiet confidence as the premium signal.
  • Let the black CTA and subtle warm accents carry the few moments of emphasis.
  • White should dominate.
  • Black should be used for text and high-intent actions.
  • Warm beige accents should stay faint and localized.

Overview

  • Keep the interface almost austere.
  • Use white space and quiet confidence as the premium signal.
  • Let the black CTA and subtle warm accents carry the few moments of emphasis.

Colors

  • White should dominate.
  • Black should be used for text and high-intent actions.
  • Warm beige accents should stay faint and localized.

Typography

  • Use a clean modern sans with moderate size and generous spacing.
  • Avoid decorative type; the sophistication comes from restraint.

Layout

  • Keep product proof centered and modular.
  • Use very light framing around cards and FAQ rows.
  • Do not add unnecessary ornamental sections.

Design.md

System Overview

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

Quiet Monochrome B2B SaaS

A sparse B2B system built from white space, black pill actions, faint warmth in supporting backgrounds, and almost invisible utility framing.

Quiet, operational, and self-assured.

Primary mode: lightAI business phone softwareui-rich

Theme

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

Visual atmosphere
Summary
Quiet, operational, and self-assured.
Density
2
Variance
2
Motion
1
Signals
white shell · black pill CTA · faint warm accent field · minimal borders

Colors

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

Palette colors
Pure White
#FFFFFF
Almost Black
#1E1D1C
Warm Butter
#F7E6B8
Soft Sand
#F5F2EC
Quiet Border
#ECE8E1
Usage rules
Keep the whole system low-noise.
Warm accents should whisper, not announce themselves.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
999px
card
16px
panel
24px
full
999px

Typography Families

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

Display
Inter
quiet modern sans
Body
Inter
calm SaaS utility sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.7rem, 5vw, 4.4rem)/—
Display
H2
clamp(1.8rem, 3.6vw, 2.6rem)/—
H2
Body
1rem/—
Body
Label
0.88rem/—
Label

Typography Rules

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

Rules
Let white space create the premium feel. · Use small but legible utility text and do not inflate the chrome.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-200ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-200ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Keep most sections open and centered.
Use one product mockup and a few quiet proof cards instead of large colorful scenes.

Component Preview

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

Buttons primary
Base Attributes
Background
#1E1D1C
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.75rem 1rem
Min height
40px
Shadow
none
Buttons secondary
Base Attributes
Background
transparent
Text
#1E1D1C
Border
1px solid #1E1D1C
Radius
999px
Padding
0.75rem 1rem
Min height
40px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1E1D1C
Border
1px solid #ECE8E1
Radius
16px
Padding
1.25rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#1E1D1C
Height
33px
Active text
#1E1D1C
Item padding
0.35rem 0.65rem
Item radius
999px
Inputs default
Base Attributes
Background
#FFFFFF
Text
#1E1D1C
Border
1px solid #ECE8E1
Radius
12px
Padding
0.8rem 1rem
Min height
44px
Placeholder
rgba(30,29,28,0.45)

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No loud gradient hero.
  • -
    No saturated category colors.
  • -
    No unnecessarily large shadows or glossy glass effects.