Refto
Show Them

Show Them

Improve conversions by bringing your landing page visitors closer to their desired result. Launch special now live →

DevelopmentGradientEducationDarkPersonalSingle PageClean
3.0
3
Visits
Visit

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Show Them Home design analysis

Neon Mentor Studio is a dark editorial system for selling expertise through intimacy and conviction. It should feel like a warm studio at night: documentary portraiture, smoky panels, blunt display typography, and one ha...

Key Takeaways

  • Primary ( EC51A2): Purchase path and handwritten neon energy.
  • Secondary ( 342D31): Proof panels and grouped dark surfaces.
  • Tertiary ( CDC0C6): Body text and warm-muted foreground.
  • Display: Blunt modern grotesk for the main informational statement.
  • Body: Same family with relaxed spacing for persuasive reading.
  • Accent: One handwritten script layer used selectively to create emotional heat.

Overview

Neon Mentor Studio is a dark editorial system for selling expertise through intimacy and conviction. It should feel like a warm studio at night: documentary portraiture, smoky panels, blunt display typography, and one handwritten pink flourish that turns the page from merely functional into something memorable.

Image Direction

Use portrait-led stills, desk-studio environments, and dark proof surfaces. The imagery should feel warm, real, and close enough to suggest direct access rather than corporate distance.

Colors

The palette is dark, warm, and centered around one hot purchase accent.

  • Primary ( EC51A2): Purchase path and handwritten neon energy.
  • Secondary ( 342D31): Proof panels and grouped dark surfaces.
  • Tertiary ( CDC0C6): Body text and warm-muted foreground.

Typography

The system works by layering two voices.

  • Display: Blunt modern grotesk for the main informational statement.
  • Body: Same family with relaxed spacing for persuasive reading.
  • Accent: One handwritten script layer used selectively to create emotional heat.

Design.md

System Overview

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

Neon Mentor Studio

A dark editorial course-marketing system that mixes documentary portrait imagery, hot pink script accenting, sharp block CTAs, and smoky outline pills on a mauve-black shell.

Intimate, persuasive, warm, and slightly theatrical.

Primary mode: darkeditorial marketingmarketing-rich

Theme

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

Visual atmosphere
Summary
Intimate, persuasive, warm, and slightly theatrical.
Density
4
Variance
4
Motion
2
Signals
mauve-black shell · hot pink script accent · documentary studio imagery · mixed CTA geometry

Colors

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

Palette colors
Mauve Black
#2A2427
Panel Plum
#342D31
Warm Bone
#CDC0C6
Hot Neon Pink
#EC51A2
Smoky Border
#989195
Ink Brown
#1B1719
Usage rules
Keep the page inside mauve-black and warm pink rather than pure cyber black.
Use pink for the purchase path and handwritten emphasis.
Keep body text warm and slightly softened, never stark white by default.
Treat borders as smoky and cinematic rather than crisp.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

block
0px
soft
16px
pill
999px

Typography Families

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

Display
Inter
blunt modern grotesk for strong block statements
Body
Inter
practical, readable, and slightly editorial in spacing
Accent
Caveat
gestural handwritten neon flourish used as a selective overlay

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.5rem, 8vw, 5.2rem)/—
Display
H2
clamp(2rem, 4vw, 2.8rem)/—
H2
Body
1rem/—
Body
Caption
0.8rem/—
Caption

Typography Rules

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

Rules
Use the handwritten accent only as a selective emphasis layer. · Keep the core informational copy in the blunt grotesk. · Let uppercase utility labels breathe with extra tracking.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.2, .8, .2, 1)
Spring
avoid playful bounce

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.2, .8, .2, 1)
springavoid playful bounce

Layout Principles

Pair the message block with portrait-led media on the first fold.
Use dark proof panels to carry testimonials and chapter logic.
Allow text and imagery to feel more editorial than dashboard-like.
Preserve breathing room around the hero script accent so it can glow.
Keep the purchase path visually obvious.

Component Preview

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

Buttons primary
Base Attributes
Background
#EC51A2
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.block}->0px
Padding
0.875rem 1.25rem
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
rgba(48, 43, 46, 0.4)
Text
#CDC0C6
Border
1px solid #989195
Radius
{tokens.radii.pill}->999px
Padding
0.875rem 1rem
Min height
52px
Typography
body
Cards testimonial
Feature Card
Component preview content
Base Attributes
Background
#342D31
Text
#CDC0C6
Border
0px none transparent
Radius
{tokens.radii.soft}->16px
Padding
{tokens.spacing.card_padding}->2rem
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#342D31
Text
#CDC0C6
Border
0px none transparent
Radius
16px
Padding
1.5rem
Shadow
none
Inputs default
Base Attributes
Background
rgba(48, 43, 46, 0.6)
Text
#CDC0C6
Border
1px solid #989195
Radius
16px
Padding
0.875rem 1rem
Min height
48px
Placeholder
rgba(205, 192, 198, 0.55)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(205, 192, 198, 0.8)
Height
44px
Active text
#FFFFFF
Item padding
0px
Item radius
0px

Hero stage

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

Summary
A message-and-portrait stage with one handwritten neon accent hovering across the block display.
Guidance
  • -
    Make the script accent look like a living flourish, not a default cursive font pasted over text.
  • -
    Keep the portrait environment warm and believable.

Image direction

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

Summary
Documentary creator stills, desk-studio interiors, and dark proof panels.

Responsive guidance

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

  • -
    Preserve the distinction between the sharp purchase CTA and the pill preview CTA on mobile.
  • -
    Let the portrait stack under the message if needed, but keep the handwritten accent legible.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No cold blue neon replacing the hot pink script energy.
  • -
    No uniformly rounded button system.
  • -
    No sterile SaaS screenshots replacing documentary human proof.
  • -
    No bright white shell.
  • -
    No overly clean corporate typography everywhere.