Refto
COLLINS

COLLINS

Rewrite your worth.

InteractiveScrolling AnimationParallaxDesignAgencyAnimationBig Background VideoCleanTransitions
5.0
44
Visits
Visit

Categories

DesignAgency

Available Pages

HomeCaseStudioPrograms

Design Analysis

COLLINS Home design analysis

Build the experience like a gallery brochure with unusually large breathing room. Let serif headlines carry the emotional weight while the interface chrome stays almost invisible. Use the dark stage sparingly, as punctua...

Key Takeaways

  • Build the experience like a gallery brochure with unusually large breathing room.
  • Let serif headlines carry the emotional weight while the interface chrome stays almost invisible.
  • Use the dark stage sparingly, as punctuation for key transitions or the final act.
  • Favor cinematic stills, saturated art direction, and one decisive image cluster per section.
  • Present media in rounded gallery windows surrounded by generous ivory margins.
  • Let imagery bring the heat while the surrounding layout stays nearly silent.

Overview

  • Build the experience like a gallery brochure with unusually large breathing room.
  • Let serif headlines carry the emotional weight while the interface chrome stays almost invisible.
  • Use the dark stage sparingly, as punctuation for key transitions or the final act.

Image Direction

  • Favor cinematic stills, saturated art direction, and one decisive image cluster per section.
  • Present media in rounded gallery windows surrounded by generous ivory margins.
  • Let imagery bring the heat while the surrounding layout stays nearly silent.

Colors

  • F7F4EF should dominate the page shell and keep the mood warm rather than stark.
  • 1B0B05 is the anchor tone for typography, strong buttons, and the dark closing stage.
  • FBF8F3 should soften inner panels and media frames without reading as a separate theme.

Typography

  • Use a literary serif for primary statements, section titles, and emotionally weighted lines.
  • Use a clean sans for compact supporting text, metadata, and navigation.
  • Keep the hierarchy elegant and restrained. Big serif headlines should feel confident, not theatrical.

Design.md

System Overview

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

Prestige Editorial Stage

An editorially paced marketing system built from ivory space, literary serif headlines, rounded campaign media, and espresso-weight punctuation.

Quiet, expensive, literary, and image-led.

Primary mode: lightbrand strategy studiocontent-rich

Theme

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

Visual atmosphere
Summary
Quiet, expensive, literary, and image-led.
Density
3
Variance
6
Motion
2
Signals
wide ivory breathing room · serif headlines with restrained grotesk support · dark ending stage used as punctuation rather than default mode

Colors

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

Palette colors
Espresso
#1B0B05
Ivory Field
#F7F4EF
Soft Linen
#FBF8F3
Taupe Line
#D8D0C7
Warm Ash
#8F827A
Paper White
#FFFFFF
Usage rules
Keep the base canvas near-white and let the dark stage appear only where emphasis is needed.
Use warm grays instead of cold UI grays.
Let imagery supply saturation; the chrome should stay restrained.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3.5rem
section_gap
clamp(5rem, 10vw, 9rem)
panel_padding
clamp(1.5rem, 3vw, 2.5rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
16px
md
24px
lg
32px
xl
40px
full
999px

Typography Families

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

Display
Instrument Serif
literary serif with measured authority
Body
Manrope
quiet modern sans for short explanatory copy
Accent
Manrope
small interface labels and pill copy
Mono
IBM Plex Mono
utility metadata only

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.5rem, 6vw, 5.5rem)/—
Display
H2
clamp(2.2rem, 3.6vw, 3.4rem)/—
H2
H3
clamp(1.4rem, 2.4vw, 2rem)/—
H3
Body
1.05rem/—
Body
Label
0.92rem/—
Label

Typography Rules

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

Rules
Use the serif family for the main point of view, not for every paragraph. · Keep supporting copy small, sparse, and secondary. · Avoid loud tracking or compressed all-caps in the primary hierarchy.

Borders

Border tokens with resolved values.

Fine
1px solid #D8D0C7
Dark
1px solid #1B0B05

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-240ms
Easing
cubic-bezier(.22, 1, .36, 1)

Borders

Resolved border token values.

PropertyValue
fine1px solid #D8D0C7
dark1px solid #1B0B05

Motion

Resolved motion token values.

PropertyValue
duration180ms-240ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Build around large editorial voids rather than dense feature grids.
Use one dominant statement and one dominant image cluster per section.
Let the dark stage appear sparingly as a final act or a strong break.
Keep section transitions calm and widely spaced.

Component Preview

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

Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#1B0B05
Border
none
Radius
0px
Item padding
0.25rem 0.35rem
Typography
small sans
Buttons primary pill
Base Attributes
Background
#1B0B05
Text
#FFFFFF
Border
1px solid #1B0B05
Radius
999px
Padding
0.7rem 1rem
Buttons outline pill
Base Attributes
Background
#FFFFFF
Text
#1B0B05
Border
1px solid #1B0B05
Radius
999px
Padding
0.7rem 1rem
Media cards gallery frame
Feature Card
Component preview content
Base Attributes
Background
#FBF8F3
Text
#1B0B05
Border
none
Radius
24px
Padding
0px
Shadow
0 8px 20px rgba(27, 11, 5, 0.08)
Dark stage footer panel
Base Attributes
Background
#1B0B05
Text
#FFFFFF
Border
none
Radius
24px 24px 0 0
Padding
clamp(2rem, 4vw, 3rem)
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    campaign photography
  • -
    editorial illustration
  • -
    brand still
Subject patterns
  • -
    one bold image or image pair centered in a large field
  • -
    cinematic crops with strong light contrast
  • -
    art-led category banners that feel like gallery prints
Composition logic
  • -
    Let media sit inside generous margins.
  • -
    Use rounded corners to civilize otherwise intense imagery.
  • -
    Keep text quiet around expressive images.
Treatment rules
  • -
    Favor premium stills over busy mosaics.
  • -
    Use image saturation sparingly and against calm paper tones.
  • -
    Preserve a sense of luxury through restraint.
Generation cues
  • -
    Describe lighting temperature, crop severity, and how much negative space surrounds the media.
  • -
    Ask for one emotionally decisive frame instead of many minor frames.
  • -
    Prefer rounded gallery presentation over edge-to-edge chaos.
Avoid
  • -
    No loud collage grids.
  • -
    No gradient-heavy SaaS illustration.
  • -
    No decorative textures that distract from the image.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not turn the system into dense corporate marketing rows.
  • -
    Do not replace the serif-led voice with a fully neutral sans stack.
  • -
    Do not overuse the dark stage until the site feels permanently heavy.
  • -
    Do not use colorful UI accents that compete with the imagery.