Refto
Hex

Hex

Finally — anyone can explore data using natural language, with or without code, on trusted context, in one integrated platform.

InteractiveSaasWeb AppTypographicAiAnimationClean
4.0
21
Visits
Visit

Categories

SaasWeb AppAi

Available Pages

HomeEnterprisePricing

Design Analysis

Hex Home design analysis

Build this system as a calm paper field with strong editorial punctuation. The key move is contrast: oversized italic display language floats above dense, believable product windows. The page should feel exact and techni...

Overview

Build this system as a calm paper field with strong editorial punctuation. The key move is contrast: oversized italic display language floats above dense, believable product windows. The page should feel exact and technical, but never clinical. Every section needs room to breathe, and every major media object should feel framed rather than merely dropped into the page. Use dark inversion intentionally. When a section shifts into charcoal, keep the structure identical to the light mode and let blush wire lines, white copy, and a few mint or lilac accents carry the change. The inversion should feel like a deliberate editorial chapter break, not a different product.

Image Direction

Treat product media as composed interface still life. Use one dominant notebook or dashboard frame, then overlap one or two supporting windows with clear depth order. Charts, tables, and assistants should look plausible and legible at a glance. Keep shadows soft, crops precise, and surrounding negative space generous so the interface collage remains the hero.

Colors

The default background is warm ivory rather than stark white. Pair it with ink-dark headlines and muted plum body copy. Use blush for structural borders and fine rule work, lilac for analytical emphasis, and mint only for positive signals such as checks or success states. Keep the accent palette sparse. Large floods of lilac or mint break the system. Most of the page should read as paper, white frame, charcoal, and linework.

Typography

Reserve the display face for the biggest editorial phrases and let it sweep across the layout. It should feel high-contrast and elongated, often mixing italic rhythm with crisp sans or mono support nearby. Supporting headlines can move into a neutral sans when the page becomes denser. Body copy should stay technical and even. Use mono labels for tickers, announcement bars, and fine-grain support copy, not for main paragraphs. The page should feel like editorial language sitting on top of a product operating grid.

Design.md

System Overview

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

Precision Notebook Grid

A paper-toned product marketing system that mixes italic editorial display with precise notebook-and-dashboard media framing.

Warm, precise, and quietly theatrical.

Primary mode: lightAI analytics platformui-rich

Theme

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

Visual atmosphere
Summary
Warm, precise, and quietly theatrical.
Density
4
Variance
4
Motion
2
Signals
paper-toned page field · ink-dark editorial headlines · framed product-window collage · charcoal inversion sections with blush wire lines

Colors

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

Palette colors
Paper Canvas
#FFFCFC
Ink Midnight
#14141C
Dust Plum
#43394C
Blush Wire
#E5C3C6
Signal Lilac
#8F7AE6
Metric Mint
#27D7A1
Usage rules
Let the page stay mostly paper-toned or charcoal-toned; use lilac and mint as sparse signals.
Keep border color softer than body text so frames feel technical, not loud.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 8rem)
card_padding
1.5rem
frame_gap
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
0px
card
14px
window
16px

Typography Families

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

Display
PP Formula SemiExtended
high-contrast editorial display
Body
Cinetype
technical but soft-spoken UI body
Sans
IBM Plex Sans
neutral support sans for dense product copy
Mono
Cinetype Mono
utility label and ticker voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.75rem, 7vw, 5.5rem)/—
Display
H2
clamp(2.6rem, 4.8vw, 4rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use the display face for high-emphasis editorial phrases only; keep dense product UI in sans and mono. · Rely on size and line breaks before adding decorative weight shifts.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Center the first message, then support it with large overlapping product windows.
Use generous negative space and faint grid or rule overlays to keep the system technical instead of decorative.
Alternate airy paper sections with charcoal inversion stages rather than sprinkling dark cards everywhere.

Component Preview

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

Buttons primary
Base Attributes
Background
#FFFFFF
Text
#14141C
Border
1px solid #CDA0A5
Radius
{tokens.radii.control}->0px
Padding
0 1.25rem
Min height
50px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
transparent
Text
#43394C
Border
1px solid #DBD7DA
Radius
{tokens.radii.control}->0px
Padding
0 1.25rem
Min height
50px
Typography
label
Product windows light
Base Attributes
Background
#FFFFFF
Text
#14141C
Border
1px solid rgba(67, 57, 76, 0.10)
Radius
{tokens.radii.window}->16px
Padding
1rem
Shadow
0 18px 48px rgba(20, 20, 28, 0.12)
Product windows inverted
Base Attributes
Background
#14141C
Text
#FFFCFC
Border
1px solid rgba(229, 195, 198, 0.18)
Radius
{tokens.radii.window}->16px
Padding
1.5rem
Shadow
none
Pricing panels default
Base Attributes
Background
#14141C
Text
#FFFCFC
Border
1px solid rgba(229, 195, 198, 0.25)
Radius
{tokens.radii.control}->0px
Padding
2rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#43394C
Height
38px
Active text
#14141C
Item padding
0 0.75rem
Item radius
{tokens.radii.control}->0px
Tickers default
Base Attributes
Background
transparent
Text
#43394C
Border
none
Radius
2px
Padding
0 0.5rem
Typography
mono

Hero stage

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

Summary
A centered headline sits above overlapping notebook and dashboard windows on a lightly gridded field.

Image direction

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

Role
supportive
Media types
  • -
    product UI composite
  • -
    data visualization mockup
Subject patterns
  • -
    one dominant application window with one or two supporting overlaps
  • -
    charts and tables shown as legible interface content, not generic placeholders
Composition logic
  • -
    Anchor the main product window in the center, then let support windows flank it with clear depth order.
  • -
    Preserve wide paper-toned margins so the media reads as a composed object, not a full-bleed screenshot.
Treatment rules
  • -
    Keep shadows soft and structural.
  • -
    Use lilac, blue, and mint chart accents against neutral frames.
Generation cues
  • -
    Describe the interface type, chart family, overlap order, and page field before styling micro details.
  • -
    Favor real-looking table, chart, and notebook density over empty demo chrome.
Avoid
  • -
    No amorphous 3D blobs.
  • -
    No cropped product mockups that hide the framing logic.

Iconography

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

Summary
Small technical glyphs and check marks with restrained line weight.

Responsive guidance

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

  • -
    Collapse product-window overlaps into a single dominant frame on small screens.
  • -
    Keep editorial headlines short enough to preserve the display face's sweep.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No pill-shaped consumer SaaS controls.
  • -
    No generic glassmorphism or neon gradients.
  • -
    Do not replace product media with abstract blobs.

Additional Tokens

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

Status
Success
Text
#27D7A1
Background
rgba(39, 215, 161, 0.08)
Border
1px solid rgba(39, 215, 161, 0.24)