Refto
Endless

Endless

Design partner for startups and founders.

DesignAgencySingle PageCleanTransitions
2.0
6
Visits
Visit

Categories

DesignAgency

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Endless Home design analysis

Build the experience like a quiet exhibition catalog. Use a narrow left rail for metadata, navigation, and lightweight framing. Let the main work live in a long vertical gallery strip with minimal interruption. Use produ...

Key Takeaways

  • Build the experience like a quiet exhibition catalog.
  • Use a narrow left rail for metadata, navigation, and lightweight framing.
  • Let the main work live in a long vertical gallery strip with minimal interruption.
  • Use product samples as catalogued plates rather than as cinematic hero moments.
  • Favor clean mockups, isolated web captures, and softly sunwashed visual plates.
  • Keep imagery aligned and orderly inside the broader gallery strip.

Overview

  • Build the experience like a quiet exhibition catalog.
  • Use a narrow left rail for metadata, navigation, and lightweight framing.
  • Let the main work live in a long vertical gallery strip with minimal interruption.

Image Direction

  • Use product samples as catalogued plates rather than as cinematic hero moments.
  • Favor clean mockups, isolated web captures, and softly sunwashed visual plates.
  • Keep imagery aligned and orderly inside the broader gallery strip.

Colors

  • FFFFFF should dominate the page and keep the studio shell nearly invisible.
  • 151515 anchors the system through text, marks, and the rare firm detail.
  • E4E4E0 should create barely-there rules and structural separation.

Typography

  • Use one neutral grotesk family for the main hierarchy and body.
  • Use mono for tiny labels, navigation detail, and rail metadata.
  • Keep typographic contrast subtle. The structure should feel cataloged, not advertised.

Design.md

System Overview

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

Gallery Strip Minimalism

A studio portfolio system built from a narrow information rail, a long image strip, and almost no decorative chrome.

Quiet, catalog-like, precise, and sunlit.

Primary mode: lightdesign studio portfoliocontent-rich

Theme

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

Visual atmosphere
Summary
Quiet, catalog-like, precise, and sunlit.
Density
2
Variance
4
Motion
1
Signals
tiny navigation and labels · broad white fields · vertical gallery strip of product work

Colors

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

Palette colors
Studio Black
#151515
Gallery White
#FFFFFF
Paper Calm
#FAFAF8
Rule Dust
#E4E4E0
Mute Gray
#A5AAAF
Warm Haze
#E8D9C6
Usage rules
Keep the shell nearly monochrome.
Use warmth through the imagery, not through interface chrome.
Let labels and rules stay faint.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.4rem
sm
0.7rem
md
1rem
lg
1.75rem
xl
3rem
section_gap
clamp(4rem, 10vw, 8rem)
panel_padding
clamp(0.75rem, 1.8vw, 1.25rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
0px
md
8px
lg
12px
xl
16px
full
999px

Typography Families

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

Display
Neue Haas Grotesk
neutral studio grotesk with understated authority
Body
Neue Haas Grotesk
plain readable body for quiet explanation
Accent
IBM Plex Mono
tiny technical label voice
Mono
IBM Plex Mono
utility metadata

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.4rem, 4vw, 3.4rem)/—
Display
H2
clamp(1.5rem, 2.2vw, 2rem)/—
H2
H3
clamp(1rem, 1.4vw, 1.2rem)/—
H3
Body
0.98rem/—
Body
Label
0.75rem/—
Label

Typography Rules

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

Rules
Keep typography low-drama and studio-neutral. · Use tiny mono labels for index and rail detail. · Rely on spacing and column placement more than on typographic contrast.

Borders

Border tokens with resolved values.

Fine
1px solid #E4E4E0
Soft
1px solid rgba(21, 21, 21, 0.06)

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
120ms-180ms
Easing
linear

Borders

Resolved border token values.

PropertyValue
fine1px solid #E4E4E0
soft1px solid rgba(21, 21, 21, 0.06)

Motion

Resolved motion token values.

PropertyValue
duration120ms-180ms
easinglinear

Layout Principles

Split the page into a narrow rail and a wide visual strip.
Keep supporting pages plain and consistent with the rail logic.
Use vertical stacking rather than wide storytelling sections.
Let the work read like a catalog or slide tray.

Component Preview

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

Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#151515
Border
none
Radius
0px
Item padding
0.1rem 0.2rem
Typography
mono-small
Rail info stack
Base Attributes
Background
transparent
Text
#151515
Border
none
Radius
0px
Padding
0px
Shadow
none
Rail tiny label
Base Attributes
Background
transparent
Text
#A5AAAF
Border
none
Radius
0px
Padding
0px
Shadow
none
Gallery visual panel
Base Attributes
Background
#FFFFFF
Text
#151515
Border
1px solid rgba(21,21,21,0.04)
Radius
8px
Padding
0px
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    device mockup
  • -
    website still
  • -
    soft gradient visual
Subject patterns
  • -
    catalogued project plates in a tall strip
  • -
    clean phone sets and isolated website crops
  • -
    warm or pastel image mood inside an otherwise monochrome shell
Composition logic
  • -
    Keep images aligned to the broad gallery column.
  • -
    Leave the rail visually separate and lightly informational.
  • -
    Use vertical rhythm instead of collage.
Treatment rules
  • -
    Favor clean white framing and light borders.
  • -
    Keep image spacing generous.
  • -
    Avoid overdramatizing work samples.
Generation cues
  • -
    Describe the rail width, the image strip width, and how much white space sits between them.
  • -
    Call out whether the sample is a phone stack, a web capture, or a soft visual plate.
  • -
    Keep the overall mood as a quiet studio archive.
Avoid
  • -
    No loud masonry grids.
  • -
    No heavy drop shadows.
  • -
    No animated marketing spectacle.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not introduce bold colored CTA bands.
  • -
    Do not thicken the typography or oversize every label.
  • -
    Do not convert the gallery strip into a busy grid.
  • -
    Do not decorate the shell with gradients or cards that compete with the work.