Refto
LobeHub

LobeHub

LobeHub brings you the best ChatGPT, OLLaMA, Gemini, Claude WebUI experience

Saas3dLarge TypeWeb AppDesktop AppFunAiAnimationBig Background ImageDark
4.0
6
Visits
Visit

Available Pages

Home

Version History

Design Analysis

LobeHub Home design analysis

Soft Agent Workspace is a light-first system that makes advanced software feel collaborative and approachable. The first impression should be one giant italic statement over a near-white canvas, followed by a polished wh...

Key Takeaways

  • Primary ( 222222): High-intent button fill and dark utility emphasis.
  • Secondary ( FFFFFF): Card, button, and workspace window surface.
  • Tertiary ( 0072F5): Small interactive signal, link, and icon accent.
  • Display: Oversized, italic, tightly tracked, and highly confident.
  • Body: Calm, friendly, and evenly spaced.
  • Labels: Slightly weightier than body copy to preserve clarity on very light surfaces.

Overview

Soft Agent Workspace is a light-first system that makes advanced software feel collaborative and approachable. The first impression should be one giant italic statement over a near-white canvas, followed by a polished white workspace window that proves the interface can hold real complexity without visual stress.

Image Direction

Use crisp software-window imagery, clean cards, and UI close-ups rather than lifestyle photography. Background tinting can drift softly across the shell, but the main proof object should always be a legible interface frame.

Colors

The palette stays inside white, off-white, ink, and one sparse utility accent.

  • Primary ( 222222): High-intent button fill and dark utility emphasis.
  • Secondary ( FFFFFF): Card, button, and workspace window surface.
  • Tertiary ( 0072F5): Small interactive signal, link, and icon accent.

Typography

Use one modern grotesk for nearly everything and let italic display posture create the personality.

  • Display: Oversized, italic, tightly tracked, and highly confident.
  • Body: Calm, friendly, and evenly spaced.
  • Labels: Slightly weightier than body copy to preserve clarity on very light surfaces.

Design.md

System Overview

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

Soft Agent Workspace

A clean workspace marketing system defined by off-white surfaces, overscaled italic grotesk headlines, soft aurora tinting, and polished white product windows.

Airy, optimistic, precise, and quietly advanced.

Primary mode: lightworkspace software marketingui-rich

Theme

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

Visual atmosphere
Summary
Airy, optimistic, precise, and quietly advanced.
Density
3
Variance
3
Motion
2
Signals
off-white shell · giant italic headline · black pill navigation action · white workspace framing

Colors

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

Palette colors
Soft Canvas
#F8F8F8
Pure Surface
#FFFFFF
Ink
#080808
Smoke
#6F6F73
Whisper Border
#E6E6E8
System Blue
#0072F5
Usage rules
Keep the shell in the white family rather than introducing heavy tinted panels.
Use black fill for the main CTA before introducing a color accent.
Let blue act as a utility signal, not as the dominant brand fill.
Keep borders faint and almost invisible at a distance.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

nav_pill
999px
control
12px
window
24px

Typography Families

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

Display
HarmonyOS Sans
broad grotesk with enough smoothness for giant italic display
Body
HarmonyOS Sans
clean product UI voice with a slightly modern softness
Mono
JetBrains Mono
compact support utility

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 10vw, 6.4rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption

Typography Rules

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

Rules
Use italic display selectively for the main statement rather than everywhere. · Keep body copy friendly and wide enough to feel collaborative, not severe. · Use modest weight shifts and let whitespace do the calming work.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.2, .8, .2, 1)
Spring
gentle and low-amplitude

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.2, .8, .2, 1)
springgentle and low-amplitude

Layout Principles

Center the hero and build trust with one large product window below it.
Use softly bounded widths and generous air around the headline.
Treat docs and marketplace pages as variations of the same windowed system.
Keep interface content structured, but do not let the page feel dense.
Collapse multi-rail patterns cleanly on mobile.

Component Preview

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

Buttons primary
Base Attributes
Background
#222222
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->12px
Padding
0.875rem 1.25rem
Min height
48px
Shadow
0 1px 0 rgba(0, 0, 0, 0.06)
Typography
body
Buttons secondary
Base Attributes
Background
rgba(255, 255, 255, 0.85)
Text
#080808
Border
1px solid rgba(0, 0, 0, 0.04)
Radius
{tokens.radii.control}->12px
Padding
0.875rem 1.25rem
Min height
48px
Typography
body
Cards workspace window
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#080808
Border
1px solid #E6E6E8
Radius
{tokens.radii.window}->24px
Padding
0px
Shadow
0 20px 50px rgba(0, 0, 0, 0.05)
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#080808
Border
1px solid #E6E6E8
Radius
16px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
0 10px 24px rgba(0, 0, 0, 0.03)
Inputs default
Base Attributes
Background
#FFFFFF
Text
#080808
Border
1px solid #E6E6E8
Radius
14px
Padding
0.875rem 1rem
Min height
48px
Placeholder
rgba(8, 8, 8, 0.42)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#080808
Height
52px
Active text
#080808
Item padding
0.5rem 0.875rem
Item radius
{tokens.radii.nav_pill}->999px

Hero stage

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

Summary
A centered statement with a soft atmospheric wash and one large workspace window below.
Guidance
  • -
    Keep the aurora tint faint enough that it reads as atmosphere, not branding graffiti.
  • -
    Make the product window feel real and legible before decorative.

Responsive guidance

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

  • -
    Stack the hero CTAs vertically when width gets tight rather than shrinking them too aggressively.
  • -
    Preserve the headline scale relationship even when line breaks change.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dark-shell inversion as the default expression.
  • -
    No high-gloss gradients or neon glass cards.
  • -
    No heavy border grids that make the workspace feel enterprise-stiff.
  • -
    No blocky all-caps typography in the hero.
  • -
    No rainbow accent palette.