Refto
Wist

Wist

Wist is the best and most affordable way to embed an AI live chat experience on your website. Endlessly customizable, with AI models from all providers (OpenAI, Google, Anthropic, etc) and agentic reporting capabilities that will transform your business.

SaasAiBig Background ImageSingle PageLightClean
3.0
11
Visits
Visit

Categories

SaasAi

Available Pages

Home

Version History

Design Analysis

Wist Home design analysis

Build the experience as a product explainer that toggles between warm clarity and technical depth. Alternate clean white storytelling bands with deep navy blueprint interludes. Make the chat object feel central: the prod...

Key Takeaways

  • Build the experience as a product explainer that toggles between warm clarity and technical depth.
  • Alternate clean white storytelling bands with deep navy blueprint interludes.
  • Make the chat object feel central: the product should always seem ready to answer, guide, or act.
  • Use support widgets, chat launchers, dashboard cards, and technical illustrations as the recurring visual language.
  • Present product objects on visible grids or subtly lined surfaces.
  • Keep electric blue as the main action signal and let darker blueprint zones create the contrast.

Overview

  • Build the experience as a product explainer that toggles between warm clarity and technical depth.
  • Alternate clean white storytelling bands with deep navy blueprint interludes.
  • Make the chat object feel central: the product should always seem ready to answer, guide, or act.

Image Direction

  • Use support widgets, chat launchers, dashboard cards, and technical illustrations as the recurring visual language.
  • Present product objects on visible grids or subtly lined surfaces.
  • Keep electric blue as the main action signal and let darker blueprint zones create the contrast.

Colors

  • 2E63FF is the action color. Use it for the clearest CTA and active conversational cues.
  • 0B1324 should define technical sections, dark proof points, and blueprint bands.
  • FFFFFF and F7F8FB should keep the main storytelling mode open and readable.

Typography

  • Use a single modern sans family with strong weight contrast.
  • Hero lines should feel decisive and product-led, not editorial.
  • Keep body copy conversational and concise.

Design.md

System Overview

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

Blueprint Conversational Grid

A conversational product marketing system that alternates calm white explanation bands with deep navy grid interludes and sharp blue actions.

Technical, reassuring, clean, and slightly futuristic.

Primary mode: lightAI support productcontent-rich

Theme

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

Visual atmosphere
Summary
Technical, reassuring, clean, and slightly futuristic.
Density
5
Variance
6
Motion
2
Signals
navy blueprint bands · electric blue CTA punctuation · rounded support widgets and soft cards

Colors

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

Palette colors
Signal Blue
#2E63FF
Blueprint Navy
#0B1324
Canvas White
#FFFFFF
Fog Surface
#F7F8FB
Pale Grid
#DDE3F2
Cloud Blue
#EAF0FF
Usage rules
Alternate white explanation fields with controlled navy blueprint breaks.
Use bright blue for the clearest action only.
Keep the interface surfaces soft even when the backdrop turns dark.

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, 7rem)
panel_padding
clamp(1.25rem, 3vw, 2rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
14px
md
20px
lg
28px
xl
36px
full
999px

Typography Families

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

Display
Geist
tight modern sans for decisive product claims
Body
Geist
compact readable sans for explanatory support copy
Accent
Geist
button labels and product metadata
Mono
IBM Plex Mono
rare utility or technical captions

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 5vw, 4.6rem)/—
Display
H2
clamp(2rem, 3vw, 3rem)/—
H2
H3
clamp(1.3rem, 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
Stay within one modern sans family for most of the hierarchy. · Use strong weights for hero claims and regular weights for explanatory support. · Keep copy widths moderate so the chat-oriented story stays conversational.

Borders

Border tokens with resolved values.

Fine
1px solid #DDE3F2
Strong
1px solid rgba(255,255,255,0.16)

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Borders

Resolved border token values.

PropertyValue
fine1px solid #DDE3F2
strong1px solid rgba(255,255,255,0.16)

Motion

Resolved motion token values.

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

Layout Principles

Alternate white product explanation bands with dark blueprint chapters.
Keep the left-to-right information flow simple even when the visuals turn technical.
Use the chat object as a recurring anchor inside the broader grid system.
Let pricing and feature sections feel like softened cards rather than hard enterprise tables.

Component Preview

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

Blueprint band
Base Attributes
Background
#0B1324
Text
#FFFFFF
Border
none
Radius
0px
Padding
clamp(2rem, 4vw, 3rem)
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#0B1324
Border
none
Radius
0px
Item padding
0.25rem 0.5rem
Typography
small sans
Buttons primary pill
Base Attributes
Background
#2E63FF
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Buttons secondary pill
Base Attributes
Background
#FFFFFF
Text
#0B1324
Border
1px solid #DDE3F2
Radius
999px
Padding
0.8rem 1.15rem
Cards support card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#0B1324
Border
1px solid #DDE3F2
Radius
20px
Padding
1.25rem
Shadow
0 12px 30px rgba(11, 19, 36, 0.07)
Cards dark quote card
Feature Card
Component preview content
Base Attributes
Background
#0B1324
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.14)
Radius
20px
Padding
1.5rem
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    chat widget mockup
  • -
    support dashboard screenshot
  • -
    technical illustration
Subject patterns
  • -
    conversation panels sitting on a visible technical grid
  • -
    floating launcher or widget objects
  • -
    blue environment illustrations that imply monitoring or guidance
Composition logic
  • -
    Use one chat object as the hero focus.
  • -
    Alternate bright white explainer zones with darker technical chapters.
  • -
    Keep cards rounded and approachable inside both modes.
Treatment rules
  • -
    Favor white cards, fine borders, and electric blue accents.
  • -
    Let the navy grid read clearly without swallowing the content.
  • -
    Keep product imagery legible and direct.
Generation cues
  • -
    Describe whether the card lives in a white band or in a navy blueprint field.
  • -
    Call out the grid density, blue accent strength, and the size of the chat object.
  • -
    Keep illustrations purposeful and operational rather than whimsical.
Avoid
  • -
    No cyberpunk neon overload.
  • -
    No undifferentiated dark mode across the entire site.
  • -
    No abstract blobs with no product meaning.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not flatten the system into all-white generic SaaS.
  • -
    Do not overcomplicate the grid until the support story becomes cold.
  • -
    Do not use purple or teal gradients that dilute the blue technical signal.
  • -
    Do not swap the rounded support widgets for sharp enterprise tables everywhere.