Refto
That Thing

That Thing

We build clear and memorable brands for industry shifting ideas. Writing and design for visual identities, verbal identities and brand-building campaigns.

Scrolling AnimationLarge TypeCustom CursorParallaxDesignAgencyMonochromaticMarketingCleanTransitions
4.0
4
Visits
Visit

Available Pages

Home

Version History

Design Analysis

That Thing Home design analysis

Signal Coral Story Studio should feel like a brand studio that thinks in chapters, not in modules. The page alternates between off-white emptiness and bold coral fields, while one blunt grotesk family delivers everything...

Key Takeaways

  • Use coral as a true structural color for chapters, active pills, and emphasis.
  • Keep the default shell close to off-white paper.
  • Use black as a dense content tone, not as a luxury gloss move.
  • Keep the system on one blunt grotesk family.
  • Use very large lines and generous spacing to create drama.
  • Avoid decorative type mixing; the strength comes from scale, not from typographic variety.

Overview

Signal Coral Story Studio should feel like a brand studio that thinks in chapters, not in modules. The page alternates between off-white emptiness and bold coral fields, while one blunt grotesk family delivers everything from giant claims to tiny navigation. The overall effect should be warm, direct, and editorial rather than polished into corporate smoothness.

Image Direction

Use candid, real-feeling photography and environmental brand artifacts rather than perfect studio polish. Good supporting imagery includes documentary portraits, devices in use, posters in space, or mixed crop case materials. Keep the image field sparse enough that the coral or paper background still reads as part of the composition.

Colors

  • Use coral as a true structural color for chapters, active pills, and emphasis.
  • Keep the default shell close to off-white paper.
  • Use black as a dense content tone, not as a luxury gloss move.

Typography

  • Keep the system on one blunt grotesk family.
  • Use very large lines and generous spacing to create drama.
  • Avoid decorative type mixing; the strength comes from scale, not from typographic variety.

Design.md

System Overview

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

Signal Coral Story Studio

A coral-forward narrative portfolio system with blunt grotesk type, off-white breathing fields, sticky image-text pairing, and curiosity-led hover zones.

Direct, warm, playful, and editorial with an undercurrent of motion.

Primary mode: lightbrand studio / narrative portfoliocontent-rich

Theme

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

Visual atmosphere
Summary
Direct, warm, playful, and editorial with an undercurrent of motion.
Density
2
Variance
4
Motion
4
Signals
signal coral stage · off-white empty field · single-font blunt typography · sticky story pairing

Colors

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

Palette colors
Signal Coral
#FF5538
Paper Rose
#F4EEED
Ink Black
#151515
Pure White
#FFFFFF
Soft Coral Border
#FFB5A8
Charcoal Field
#242424
Usage rules
Use coral as a real structural chapter color, not a tiny brand accent.
Protect large empty white or paper fields so the system can breathe.
Keep black dense and quiet, never glossy or luxury-polished.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 9vw, 9rem)
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
media
20px

Typography Families

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

Display
Desktop
blunt single-family grotesk
Body
Desktop
plainspoken editorial UI voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 8vw, 6.8rem)/—
Display
H2
clamp(2.4rem, 5vw, 4rem)/—
H2
Body
1rem/—
Body
Caption
0.9rem/—
Caption

Typography Rules

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

Rules
Keep the system on one blunt family unless there is a very strong reason to diverge. · Use oversized copy and line breaks to create force instead of ornament.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Let one chapter color or one blank field dominate at a time.
Use sticky pairings so one visual zone can hold focus while text advances.
Keep lists and case narratives editorial, with obvious room between ideas.

Component Preview

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

Buttons primary
Base Attributes
Background
#FF5538
Text
#151515
Border
0px none transparent
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.4rem
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#151515
Border
1px solid rgba(255,85,56,0.35)
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.4rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#151515
Border
0px none transparent
Radius
{tokens.radii.media}->20px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#151515
Border
1px solid rgba(255,85,56,0.18)
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1rem
Min height
44px
Placeholder
rgba(21,21,21,0.48)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#FF5538
Height
44px
Active text
#FFFFFF
Item padding
0.5rem 0.9rem
Item radius
{tokens.radii.control}->999px

Scroll motion

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

Role
load-bearing
Scroll driver
native
Cadence
editorial
Patterns
  • -
    sticky split-stage storytelling
  • -
    pinned work-image progression
  • -
    chapter-scale color changes
Page logic
  • -
    Let a visual zone stay anchored while adjacent text or list items progress.
  • -
    Use long chapters so each narrative beat gets a clean field.
Constraints
  • -
    Keep the same reading order understandable without pinning.
  • -
    Use motion to clarify story focus, not to create confusion.
Reduced motion
  • -
    Remove pinning and preserve a readable stacked narrative.

Custom cursor

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

Role
supportive
Scope
hover-zones
Behavior modes
  • -
    eye follower
  • -
    inspection cue
Zone logic
  • -
    The cursor should signal looking more closely at work imagery without replacing obvious click states.
Constraints
  • -
    Never hide native affordance or text selection.
  • -
    Do not use cursor styling as the only interaction clue.
Fallback
  • -
    Keep the system fully understandable with the native pointer alone.

Image direction

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

Role
supportive
Media types
  • -
    documentary photo
  • -
    device-in-context shot
  • -
    environmental poster mockup
Subject patterns
  • -
    casual human moment
  • -
    brand artifact in space
  • -
    mixed crop scale across one chapter
Composition logic
  • -
    Use very few artifacts per chapter so the field stays legible.
  • -
    Let some images float with rounded corners while larger case visuals can run flatter and wider.
Treatment rules
  • -
    Keep photography real, candid, and contrasty rather than luxury-polished.
  • -
    Use coral or off-white fields as compositional anchors around the image, not over it.
Generation cues
  • -
    Describe chapter color, crop scale, and artifact type before adding scene detail.
  • -
    Generate new editorial or environmental images that match the same candid energy.
Avoid
  • -
    No generic stock-team-photo drift.
  • -
    No glossy 3D render takeover.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No cold SaaS dashboard tone.
  • -
    No tiny polite typography.
  • -
    No motion that feels ornamental but says nothing about the story.