Refto
VibeFlow

VibeFlow

Get world-class design at a flat monthly rate. We create websites, apps, and platforms.

InteractiveWeb AppDesignAgencyAnimationLightClean
4.0
9
Visits
Visit

Available Pages

Home

Version History

Design Analysis

VibeFlow Home design analysis

Build for a studio site that is intentionally sparse, textual, and a little raw. Let mono typography and white space do most of the aesthetic work. Keep the page feeling deliberate, not unfinished. The low-fi quality sho...

Key Takeaways

  • Build for a studio site that is intentionally sparse, textual, and a little raw.
  • Let mono typography and white space do most of the aesthetic work.
  • Keep the page feeling deliberate, not unfinished. The low-fi quality should read as taste, not as omission.
  • Use one framed browser or portfolio window as the main proof object.
  • Keep supporting imagery minimal and mostly structural.
  • Treat logos, testimonials, and service text as editorial content rather than as decorative marketing modules.

Overview

  • Build for a studio site that is intentionally sparse, textual, and a little raw.
  • Let mono typography and white space do most of the aesthetic work.
  • Keep the page feeling deliberate, not unfinished. The low-fi quality should read as taste, not as omission.

Image Direction

  • Use one framed browser or portfolio window as the main proof object.
  • Keep supporting imagery minimal and mostly structural.
  • Treat logos, testimonials, and service text as editorial content rather than as decorative marketing modules.

Colors

  • Use a warm off-white field as the base.
  • Keep text and line work dark and dry.
  • Use one restrained red for emphasis, never as a broad wash.

Typography

  • Use mono or mono-adjacent typography throughout.
  • Let the display voice feel slightly pixelated or terminal-like.
  • Keep the body copy spacious enough that mono type never feels cramped.

Design.md

System Overview

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

Vibeflow Design Language

A low-fi editorial studio system that leans on mono type, sparse red emphasis, and deliberate page emptiness.

Raw, spacious, and tastefully under-designed.

Primary mode: lightcreative studio portfoliocontent-rich

Theme

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

Visual atmosphere
Summary
Raw, spacious, and tastefully under-designed.
Density
2
Variance
2
Motion
1
Signals
mono typography · thin outline controls · tiny red accents · large empty field

Colors

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

Palette colors
Paper Warmth
#F7F4EF
Studio Ink
#161616
Signal Red
#F25B5B
Tinted White
#FFF8F8
Quiet Stroke
rgba(0,0,0,0.22)
Usage rules
Leave most of the page neutral and under-filled.
Use red sparingly and with precision.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

control
0px
component
4px
shell
4px

Typography Families

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

Display
"Departure Mono Regular"
pixel-like mono display
Body
"Courier New"
editorial mono
Mono
"Departure Mono Regular"
shared mono family

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.4rem, 5vw, 4rem)/—
Display
H2
clamp(1.5rem, 2vw, 2rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Keep all text mono or mono-adjacent. · Use spacing and emptiness before adding visual decoration.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
120ms-180ms
Easing
linear

Motion

Resolved motion token values.

PropertyValue
duration120ms-180ms
easinglinear

Layout Principles

Center the hero but avoid overbuilding it.
Use one framed showcase window as the main proof object.
Keep client grids, testimonials, and services separated by large negative space.

Component Preview

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

Buttons primary
Base Attributes
Background
#FFF2F2
Text
#F25B5B
Border
1px solid rgba(242,91,91,0.35)
Radius
{tokens.radii.control}->0px
Padding
0.9rem 1.25rem
Min height
46px
Shadow
inset 0 -2px 16px rgba(229, 26, 47, 0.20)
Typography
label
Buttons secondary
Base Attributes
Background
transparent
Text
#4A4A4A
Border
1px solid rgba(0,0,0,0.22)
Radius
{tokens.radii.control}->0px
Padding
0.9rem 1.25rem
Min height
46px
Shadow
inset 0 -2px 16px rgba(255,255,255,0.10)
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFF8F8
Text
#161616
Border
1px solid rgba(0,0,0,0.10)
Radius
{tokens.radii.component}->4px
Padding
{tokens.spacing.card_padding}->1.25rem
Shadow
0 8px 24px rgba(0,0,0,0.06)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#161616
Height
40px
Active text
#F25B5B
Item padding
0.4rem 0.75rem
Item radius
{tokens.radii.control}->0px

Image direction

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

Role
supportive
Media types
  • -
    browser showcase
  • -
    monochrome logo grid
Subject patterns
  • -
    one framed portfolio sample
  • -
    supporting logo or testimonial fields
Composition logic
  • -
    Use a single framed work sample rather than many competing hero visuals.
  • -
    Treat logos and testimonials as typed editorial blocks, not as decorative cards.
Treatment rules
  • -
    Keep the field calm and mostly unadorned.
  • -
    Use tiny guide marks or plus symbols only as low-volume structure.
Generation cues
  • -
    Prompt for a sparse studio page with mono typography, a thin-framed browser mockup, and restrained red emphasis.
  • -
    Describe the tone as raw and deliberate rather than unfinished.
Avoid
  • -
    No 3D renders.
  • -
    No big gradient orbs or polished SaaS dashboards.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No glossy marketing gradients.
  • -
    No soft rounded app-store polish.
  • -
    No multi-accent palette.