Refto
Hey

Hey

Senior designer building websites that look great, launch quickly and drive sales for your business.

Light ShadowDesignDrag DropPortfolioDarkSingle Page
3.0
7
Visits
Visit

Categories

DesignPortfolio

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Hey Home design analysis

Grainy Conversion Studio is a dark portfolio system that leads with directness instead of flourish. The page should feel like a sharp studio pitch: grainy charcoal shell, large white statement, one coral conversion actio...

Key Takeaways

  • Primary ( FF6A45): Main call-to-action and urgency signal.
  • Secondary ( 171717): Support panel and card fill.
  • Tertiary ( 8A8A8A): Muted labels and metadata.
  • Display: Large, direct, and slightly severe.
  • Body: Quiet and conversion-focused.
  • Labels: Small utility text with enough tracking to stay readable over dark fields.

Overview

Grainy Conversion Studio is a dark portfolio system that leads with directness instead of flourish. The page should feel like a sharp studio pitch: grainy charcoal shell, large white statement, one coral conversion action, and a fast handoff into logo trust and monochrome proof.

Image Direction

Use mostly monochrome showcase imagery, blurred proof stills, and dark editorial frames. Images should feel serious and high-contrast so the coral action color stays scarce and valuable.

Colors

The palette is minimal and conversion-led.

  • Primary ( FF6A45): Main call-to-action and urgency signal.
  • Secondary ( 171717): Support panel and card fill.
  • Tertiary ( 8A8A8A): Muted labels and metadata.

Typography

Use one neutral sans and let layout plus proof imagery create the character.

  • Display: Large, direct, and slightly severe.
  • Body: Quiet and conversion-focused.
  • Labels: Small utility text with enough tracking to stay readable over dark fields.

Design.md

System Overview

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

Grainy Conversion Studio

A dark studio-portfolio system combining grainy charcoal fields, coral conversion accents, monochrome proof imagery, and sharp rectangular action geometry.

Sharp, grainy, conversion-minded, and editorially restrained.

Primary mode: darkstudio portfoliomarketing-rich

Theme

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

Visual atmosphere
Summary
Sharp, grainy, conversion-minded, and editorially restrained.
Density
3
Variance
3
Motion
2
Signals
grainy charcoal shell · coral CTA · monochrome showcase proof · dark logo wall

Colors

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

Palette colors
Charcoal Grain
#0A0A0A
Graphite Panel
#171717
Proof Gray
#8A8A8A
Paper White
#F2F2F2
Coral Signal
#FF6A45
Quiet Border
#232323
Usage rules
Keep the shell dark, dry, and slightly grainy rather than glossy.
Use coral for the highest-intent actions only.
Let proof imagery stay mostly grayscale so coral retains urgency.
Keep muted labels and metadata inside the gray family.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
group_gap
1rem
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
4px
panel
12px
frame
0px

Typography Families

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

Display
Inter
clear, weighty sans with enough neutrality for portfolio proof
Body
Inter
quiet support voice for studio messaging
Mono
JetBrains Mono
rare utility annotation

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.6rem, 7vw, 5.4rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption

Typography Rules

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

Rules
Keep the hero statement large but not flamboyant. · Use uppercase utility labels sparingly and with space. · Let monochrome proof and layout carry much of the atmosphere.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)
Spring
minimal

Motion

Resolved motion token values.

PropertyValue
duration140ms-220ms
easingcubic-bezier(.22, 1, .36, 1)
springminimal

Layout Principles

Lead with a direct conversion statement and immediate action.
Use a logo wall and showcase reel as proof of trust.
Let the page shift from grainy shell into large monochrome proof modules.
Keep the layout editorial and horizontally disciplined.
Avoid soft consumer-app rhythms.

Component Preview

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

Buttons primary
Base Attributes
Background
#FF6A45
Text
#111111
Border
0px none transparent
Radius
{tokens.radii.control}->4px
Padding
0.875rem 1.25rem
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#171717
Text
#F2F2F2
Border
1px solid #232323
Radius
{tokens.radii.control}->4px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Cards showcase
Feature Card
Component preview content
Base Attributes
Background
#171717
Text
#F2F2F2
Border
1px solid #232323
Radius
{tokens.radii.panel}->12px
Padding
0px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#171717
Text
#F2F2F2
Border
1px solid #232323
Radius
12px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#171717
Text
#F2F2F2
Border
1px solid #232323
Radius
8px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(242, 242, 242, 0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(242, 242, 242, 0.72)
Height
44px
Active text
#F2F2F2
Item padding
0px
Item radius
0px

Hero stage

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

Summary
A direct conversion message over a grainy charcoal field, immediately followed by proof.
Guidance
  • -
    Treat grain as atmosphere, not dirt.
  • -
    Let the proof imagery feel heavy and editorial.

Image direction

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

Summary
Mostly monochrome showcase imagery, blurred proof stills, and dark portfolio frames.

Responsive guidance

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

  • -
    Keep the coral CTA visually dominant even when the layout stacks.
  • -
    Allow the proof wall to simplify before shrinking showcase imagery too far.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No pastel or soft-white inversion of the shell.
  • -
    No full-pill primary CTA.
  • -
    No colorful proof imagery fighting the coral accent.
  • -
    No glossy glass surfaces or neon blur.
  • -
    No soft playful illustration language.