Refto
Analogue Agency

Analogue Agency

A premier destination for award-winning branding and digital design solutions. partner with our seasoned experts to elevate your brand's presence and achieve lasting impact. explore our work.

Large TypeCustom CursorDesignPortfolioProductBig Background VideoLight
3.0
5
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Analogue Agency Home design analysis

This system should feel like a design portfolio that trusts scale more than interface decoration. Build it from giant grotesk statements, deliberate emptiness, and a sharp alternation between pale gallery surfaces and bl...

Overview

This system should feel like a design portfolio that trusts scale more than interface decoration. Build it from giant grotesk statements, deliberate emptiness, and a sharp alternation between pale gallery surfaces and black manifesto chapters. The page should never feel crowded, even when the text is large. The shell needs a floating center-weighted navigation pill that feels detached from the content grid. Everything beneath it should read as slow-moving chapters rather than stacked widgets. A project introduction can be almost entirely subject, field color, and one word or phrase.

Image Direction

Use imagery like editorial staging. One oversized subject should dominate a chapter, often against a cold or pale field with minimal framing. Crop aggressively, preserve lots of emptiness, and avoid busy multi-image collage unless a section explicitly needs contrast. The image system should feel gallery-like and self-possessed.

Colors

The main field is soft gallery gray, not pure white. Pair it with dense black text, then switch decisively into near-black chapters with white text when the tone needs to become manifesto-like. Keep cold pale cyan or similar tones as environmental accents for select case-study surfaces, not as a universal brand fill. This palette works because it stays restrained. Do not add extra saturated accent colors to compensate for the minimalism.

Typography

Use a large contemporary grotesk for nearly everything important. Statements should be wide, heavy enough to feel decisive, and close-tracked. Let the text block itself become a compositional object. Use the dotted mono-like accent face only for labels, tiny captions, or technical punctuation. It should behave as contrast seasoning, not as a second body type.

Design.md

System Overview

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

Editorial Contrast Stage

A portfolio system that alternates pale gallery fields with black manifesto chapters, using giant grotesk typography and a global cursor follower.

Cool, spacious, fashion-adjacent, and self-assured.

Primary mode: lightdesign studio portfolioui-rich

Theme

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

Visual atmosphere
Summary
Cool, spacious, fashion-adjacent, and self-assured.
Density
3
Variance
5
Motion
4
Signals
floating translucent nav pill · oversized grotesk headlines · black editorial manifesto stages · icy case-study fields

Colors

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

Palette colors
Gallery Gray
#EDEDED
Night Stage
#050505
Ink Black
#1C1C1C
Soft White
#F7F7F7
Ice Mist
#DFF2F6
Pill Fog
#CFCFCF
Usage rules
Let large monochrome fields carry the mood; color appears as environment, not as button candy.
Keep the pale and black chapters sharply separated instead of blending them with mid-gray transitions.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(6rem, 10vw, 10rem)
media_gap
1.5rem
card_padding
1.75rem

Token Radii

Corner radii tokens with a live surface sample.

pill
28px
media
10px
panel
16px

Typography Families

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

Display
Graphik Medium
large contemporary grotesk
Body
Graphik Medium
assertive editorial body
Accent
LCDDot TR Regular
digital caption and utility contrast

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.75rem, 7vw, 6rem)/—
Display
H2
clamp(2rem, 4vw, 3.2rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption

Typography Rules

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

Rules
Use giant display blocks for statements, not dense paragraph columns. · Use the dotted accent face sparingly for technical or atmospheric punctuation.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
220ms-360ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration220ms-360ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Give each chapter one dominant statement or subject rather than many equal modules.
Use long vertical pacing and obvious chapter breaks.
Keep navigation floating, centered, and detached from the content grid.

Component Preview

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

Navigation floating pill
OverviewFeaturesDocs
Base Attributes
Background
rgba(255, 255, 255, 0.72)
Text
#1C1C1C
Border
0px none transparent
Radius
{tokens.radii.pill}->28px
Padding
0 1.25rem
Min height
52px
Shadow
none
Typography
caption
Links primary
Base Attributes
Background
transparent
Text
#1C1C1C
Border
none
Radius
0px
Padding
0
Typography
body
Links inverted
Base Attributes
Background
transparent
Text
#F7F7F7
Border
none
Radius
0px
Padding
0
Typography
body
Media frames editorial
Base Attributes
Background
#EDEDED
Text
#1C1C1C
Border
0px none transparent
Radius
{tokens.radii.media}->10px
Padding
0
Shadow
none
Media frames dark stage
Base Attributes
Background
#050505
Text
#F7F7F7
Border
0px none transparent
Radius
{tokens.radii.media}->10px
Padding
0
Shadow
none
Manifesto blocks default
Base Attributes
Background
#050505
Text
#F7F7F7
Border
0px none transparent
Radius
0px
Padding
0
Shadow
none

Scroll motion

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

Role
supportive
Scroll driver
smooth
Cadence
slow
Patterns
  • -
    sticky chapter
  • -
    section reveal
  • -
    long-form portfolio pacing
Page logic
  • -
    Use smooth motion to stretch the transition between hero, statement, and case-study chapters.
  • -
    Let one large chapter hold attention before the next subject arrives.
Constraints
  • -
    Motion should reinforce pace, not create puzzle-like navigation.
  • -
    Every chapter must remain legible as a static composition.
Reduced motion
  • -
    Disable smoothing and reveal effects while keeping the same chapter order.

Custom cursor

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

Role
supportive
Scope
global
Behavior modes
  • -
    default follower
Zone logic
  • -
    A small translucent dot trails the pointer across the entire shell.
Constraints
  • -
    Keep interactive affordances obvious without the cursor layer.
  • -
    Do not enlarge the follower into a novelty object.
Fallback
  • -
    Restore native cursor semantics when the custom layer is unavailable.

Image direction

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

Role
supportive
Media types
  • -
    editorial photography
  • -
    graphic render
Subject patterns
  • -
    one oversized subject per chapter
  • -
    cold, expansive project field with minimal framing
Composition logic
  • -
    Scale the subject large enough to feel architectural.
  • -
    Let negative space do most of the pacing work.
Treatment rules
  • -
    Favor cool light, pale fields, and clean crop boundaries.
  • -
    Keep the image system sparse enough that the typography can remain dominant.
Generation cues
  • -
    Describe subject scale, field color, and crop discipline before styling details.
  • -
    Prefer editorial stillness over loud motion blur or glossy advertising polish.
Avoid
  • -
    No busy collage stacks.
  • -
    No generic startup illustration.

Responsive guidance

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

  • -
    Keep the floating navigation centered but reduce its density on small screens.
  • -
    Collapse giant statement blocks into fewer lines rather than shrinking them into ordinary paragraph texture.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No small card grids as the primary storytelling mode.
  • -
    No saturated UI accents competing with the imagery.
  • -
    Do not rely on the cursor follower alone to explain interaction.