Refto
Jackie Zhang

Jackie Zhang

Hey there, I'm Jackie, a product designer based in beautiful Cape Town, South Africa. ☀️. I design tools that help people do their best work.

InteractiveScrolling AnimationIllustrativeFunParallaxDesignBlack WhitePortfolioDarkSingle Page
4.0
73
Visits
Visit

Categories

DesignPortfolio

Sections

Single Page

Available Pages

HomeWork

Design Analysis

Jackie Zhang Home design analysis

Build the experience as a dark stage with one dominant warm paper object carrying the main story. Let the interface feel handmade, but not sloppy: every doodle, sticker, and offset layer should still support clear readin...

Key Takeaways

  • Build the experience as a dark stage with one dominant warm paper object carrying the main story.
  • Let the interface feel handmade, but not sloppy: every doodle, sticker, and offset layer should still support clear reading order.
  • Treat the page like a curated notebook spread rather than a polished product dashboard.
  • Use a recurring scrapbook image language: graph paper, clipped screenshots, pinned inserts, cutout portraits, and hand-drawn perimeter objects.
  • Keep one major content surface in focus and let supporting graphics orbit the edge rather than compete for attention.
  • Favor cream paper, charcoal voids, coral marker lines, and sparse yellow highlights over broad multicolor illustration.

Overview

  • Build the experience as a dark stage with one dominant warm paper object carrying the main story.
  • Let the interface feel handmade, but not sloppy: every doodle, sticker, and offset layer should still support clear reading order.
  • Treat the page like a curated notebook spread rather than a polished product dashboard.

Image Direction

  • Use a recurring scrapbook image language: graph paper, clipped screenshots, pinned inserts, cutout portraits, and hand-drawn perimeter objects.
  • Keep one major content surface in focus and let supporting graphics orbit the edge rather than compete for attention.
  • Favor cream paper, charcoal voids, coral marker lines, and sparse yellow highlights over broad multicolor illustration.

Colors

  • 212121 is the anchor color. Use it for the outer stage, deep negative space, and moments where warm paper needs room to breathe.
  • F2E3CF and F5E1CE are the main content surfaces. They should read as warm paper, not flat beige UI.
  • E35342 is the primary signal color. Use it for outlines, dividers, line art, handwritten emphasis, and selected navigation treatment.

Typography

  • Use a soft editorial serif for major statements and section headlines. The display voice should feel human and slightly nostalgic, not luxury-magazine polished.
  • Use a simple geometric sans for paragraph copy and explanatory text. The body system should be readable enough to carry case-study writing without visual fatigue.
  • Use a handwritten accent face sparingly for labels, notes, and route emphasis. It should behave like annotation, not like body copy.

Design.md

System Overview

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

Notebook Collage Noir

A charcoal portfolio system that frames content as warm graph-paper sheets, coral annotation marks, and clipped project artifacts.

Warm, handmade, slightly mischievous, and carefully composed.

Primary mode: darkpersonal product design portfoliocontent-rich

Theme

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

Visual atmosphere
Summary
Warm, handmade, slightly mischievous, and carefully composed.
Density
5
Variance
7
Motion
2
Signals
charcoal void around a single focal paper surface · coral marker accents and doodle borders · scrapbook layering instead of polished SaaS chrome

Colors

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

Palette colors
Charcoal Stage
#212121
Graph Paper
#F2E3CF
Soft Cream
#F5E1CE
Marker Coral
#E35342
Butter Flash
#EDBE24
Paper Line
#D4C8BC
Usage rules
Keep the page shell dark and let warm paper surfaces carry most content.
Use coral as the default expressive accent for outlines, dividers, and handwritten emphasis.
Reserve yellow for rare celebratory shapes rather than routine UI actions.
Do not introduce cool blues or neutral corporate grays into the base system.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 7rem)
panel_padding
clamp(1.5rem, 3vw, 2.5rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
12px
md
20px
lg
24px
xl
60px
full
999px

Typography Families

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

Display
Averia Serif Libre
storybook editorial serif with soft flare
Body
DM Sans
calm geometric sans for readable long-form content
Accent
Delicious Handrawn
playful handwritten note voice
Mono
JetBrains Mono
utility caption and maker-label voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 7vw, 6rem)/—
Display
H2
clamp(2.6rem, 4vw, 3.6rem)/—
H2
H3
clamp(1.7rem, 2.5vw, 2.3rem)/—
H3
Body
1.125rem/—
Body
Label
0.95rem/—
Label

Typography Rules

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

Rules
Use serif display for emotional headlines and DM Sans for explanatory copy. · Use the handwritten accent family sparingly for labels, project notes, and route emphasis. · Use mono or pixel-like utility text only for small status labels and timestamp-like metadata. · Keep line spacing airy enough that paper layouts never feel cramped.

Borders

Border tokens with resolved values.

Fine
1px solid #D4C8BC
Accent
2px solid #E35342

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Borders

Resolved border token values.

PropertyValue
fine1px solid #D4C8BC
accent2px solid #E35342

Motion

Resolved motion token values.

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

Layout Principles

Lead with one dominant notebook or tag-like surface inside a wide charcoal field.
Let content read as stacked paper planes, inserts, and pinned artifacts rather than as app shells.
Keep generous negative space around the main paper object so the composition feels staged, not crowded.
Push doodles, mascots, and ornamental marks toward the perimeter while keeping core copy centered on the paper.
Treat case studies as editorial boards: framed screenshots, note cards, and typed captions should feel placed by hand.

Component Preview

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

Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F2E3CF
Border
none
Radius
0px
Item padding
0.25rem 0.5rem
Typography
accent-label
Paper panels hero notebook
Base Attributes
Background
#F2E3CF
Text
#212121
Border
2px solid #E35342
Radius
60px 60px 4px 4px
Padding
clamp(1.5rem, 3vw, 2.5rem)
Shadow
none
Paper panels note card
Feature Card
Component preview content
Base Attributes
Background
#F5E1CE
Text
#212121
Border
1px solid rgba(228, 83, 66, 0.28)
Radius
20px
Padding
1.25rem
Shadow
0 10px 24px rgba(0, 0, 0, 0.12)
Project cards hanging tag
Feature Card
Component preview content
Base Attributes
Background
#F2E3CF
Text
#212121
Border
2px solid #E35342
Radius
24px
Padding
1.5rem
Shadow
none
Accent
top punch hole, string, or offset backing layer
Project cards framed media
Feature Card
Component preview content
Base Attributes
Background
#F5E1CE
Text
#212121
Border
6px solid #F5E1CE
Radius
12px
Padding
0px
Shadow
0 8px 20px rgba(0, 0, 0, 0.16)
Annotations handwritten label
Base Attributes
Background
transparent
Text
#E35342
Border
none
Radius
0px
Padding
0px
Typography
handwritten
Annotations utility caption
Base Attributes
Background
transparent
Text
#212121
Border
none
Radius
0px
Padding
0px
Typography
mono

Hero stage

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

Summary
A single oversized notebook or paper object should anchor the first impression and act as the primary content container.

Image direction

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

Role
supportive
Media types
  • -
    illustration
  • -
    collage
  • -
    ui screenshot
  • -
    cutout portrait
Subject patterns
  • -
    one large paper surface with small perimeter doodles
  • -
    screenshots or portraits treated like pinned inserts
  • -
    whimsical hand-drawn objects with human warmth
Composition logic
  • -
    Keep the main content object centered and large in frame, with doodles orbiting the outer edge.
  • -
    Use screenshots as artifacts inside the paper world rather than as raw full-bleed panels.
  • -
    Mix one precise product artifact with one looser hand-drawn layer to avoid sterile polish.
Treatment rules
  • -
    Favor cream paper, charcoal voids, coral line work, and sparse yellow pops.
  • -
    Preserve visible framing, clipping, or pinning so media feels collected rather than uploaded.
  • -
    Let textures feel lightly tactile, never grungy.
Generation cues
  • -
    Describe paper type, graph lines, marker color, border trim, and whether the asset is taped, pinned, or framed.
  • -
    Generate fresh doodles and collage objects that match the handmade warmth without copying the source mascots.
  • -
    Keep screenshots or interface inserts legible and slightly staged, not photorealistically composited.
Avoid
  • -
    No generic stock photography.
  • -
    No empty retro nostalgia props without a content purpose.
  • -
    No hyper-clean corporate mockup walls.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not replace the dark stage with a flat white canvas.
  • -
    Do not smooth every irregular edge into generic SaaS cards.
  • -
    Do not use coral as a full-surface fill for major content blocks.
  • -
    Do not swap the mixed serif, sans, handwritten rhythm for one uniform type stack.
  • -
    Do not use glassmorphism, neon glow, or slick futuristic chrome.