Case Study · Personal Brand Portfolio
A personal brand,
designed like a magazine.
Roze Cook is a single-page personal portfolio for a writer, entrepreneur and influencer — six editorial zones in one continuous scroll, mirrored in a light and a dark stage. Mustard is the only colour the brand owns.
Client
Roze Cook
Industry
Personal Brand · Creator
Service
UX/UI · Portfolio Design
Platform
Responsive Web
Team
1 Product Designer · Creator
Timeline
3 weeks
The brief
One scroll for three identities.
Roze is an entrepreneur, a writer, and an influencer — three audiences, three press kits, one human. The ask was a single page that told the whole story without forcing a choice.
The challenge
Editorial, not template.
Most creator portfolios read like Squarespace. We had to design something that felt closer to a print spread — generous whitespace, off-grid portraits, magazine-grade type.
The outcome
Same skeleton, two stages.
A mirrored light and dark system. The dark version became the editorial cover used in press and social; the light version became the working portfolio for clients and collaborators.
1
Single-page scroll, six narrative zones
3
Identities surfaced — Entrepreneur, Writer, Influencer
2
Mirrored themes — light editorial & dark stage
9
Press / social tiles in a single magazine grid
Project Timeline
Three weeks from voice workshop to mirrored handoff.
01 · Week 1
Voice workshop, content audit, brand-tone map
02 · Week 2
Wireframes, scroll order, six-zone layout
03 · Week 3
Dark + light visual systems, hi-fi composition
04 · Handoff
Responsive states, motion direction, dev pack
The cover, in full
The dark stage — one scroll, end to end.
The editorial cover. Auto-scrolling on idle, pausable on hover. Used as the press image and the social avatar's deep-link target. Every section earns its place; nothing decorative.
Section 1 · Anatomy
Eight narrative zones, mapped one for one.
Every band on the page does exactly one job. Decoded below — what each zone says and why it sits where it does.
01
Welcome hero
Hero portrait, single greeting word, one warm paragraph. Sets the editorial tone in two seconds.
02
About me
Three circular portraits — Entrepreneur, Writer, Influencer — each with a one-line role label.
03
Photo strip
Full-bleed triptych. The visitor sees Roze in three moods before reading another sentence.
04
Vision & goal
A standalone manifesto card — quiet copy on the right, a single portrait on the left, one mustard CTA.
05
My work
Three project tiles in equal cards. Same skeleton, different worlds — app, book, brand.
06
Roze Cook band
Wide hero band with the wordmark over a soft portrait. The page's emotional reset.
07
Social interaction
A collage of three portraits anchored next to the social columns. Instagram, Facebook, LinkedIn — one click each.
08
My story
A long-form quote panel introduced by a single portrait. The closing argument before contact.
Section 2 · Hero
The whole brand fits in one word: Welcome.
A full-bleed portrait, one greeting, one warm paragraph. No headline competing with the photograph. Mustard appears only on the underline of the wordmark in the navigation.
Hero · Top of page
- Portrait carries the first fold — text gets out of the way
- Single greeting word in a display weight, sentence-cased
- Mustard reserved for nav underline, CTAs and quote rules
- Background portrait haloed so type stays legible at small widths
Section 3 · About
Three identities. One voice. No tabs.
Entrepreneur, Writer, Influencer — surfaced as three equal cards rather than a tabbed switcher. Visitors see the whole person from the first fold without making a choice.
I'm a Entrepreneur
Building product, hiring, raising — the side of Roze that ships.
I'm a Writer
A book, a Substack, and a Sunday letter — the voice the brand was built around.
I'm a Influencer
Lifestyle and craft, never sponsored content first. Photography that earns the follow.
Section 4 · Work
Three projects. Same skeleton, different worlds.
Each work tile follows one anatomy — chip, title, two-line description, mustard CTA. The visitor can scan all three in under five seconds.
App
Yoga Classes — class booking app
Mobile-first booking flow with calendar-led navigation. Designed for the Roze studio.
Book
The Book You Never Knew You Needed
A first-edition non-fiction title — cover, type system, launch microsite.
Brand
Tulima — capsule clothing line
Tags, packaging and a single landing page for the spring drop.
Work band · Mid-page
Social interaction · Lower mid
Section 5 · Social
A collage that earns the follow.
Three portraits in an off-grid stack — one large, two overlapping — sit beside a quiet two-column block of social handles. No follower counts, no badges. The photography does the persuasion.
- Instagram@rozecook
- Facebook/rozecook
- LinkedIn/in/rozecook
Iteration · Round two
Three findings that shaped the final scroll.
Five-second tests on the v1 draft surfaced three specific failures. The 'Welcome' hero swap, the identity-card flatten, and the story-panel promotion all came from this round.
01
Hero greeting felt corporate in v1
Replaced the headline with a single 'Welcome' over a soft portrait halo — first-fold dwell time rose 38% in five-second tests.
02
Three identity badges read as nav tabs
Switched circular portraits to flat cards with a thin underline, killing the tab metaphor. Bounce off the About section dropped from 24% to 9%.
03
Story block felt like a footer
Promoted the closing quote to a full panel with a portrait inset and removed the card frame. Time on closing fold doubled.
Section 6 · Mirrored systems
Same skeleton. Two stages.
The dark stage is the press cover; the light stage is the working portfolio. Same eight zones, same mustard accent — only the canvas swaps.
Dark · Editorial cover
PressLight · Working portfolio
Working
Principles
Four rules that ran every decision.
Principle 01
Editorial, not template
Roze is a writer first. The page reads like a magazine spread — generous whitespace, off-grid portraits, captions that earn their column.
Principle 02
One accent, used sparingly
Mustard appears only on CTAs and the wordmark underline. Every other surface is greyscale so the photography does the heavy lifting.
Principle 03
Three identities, one voice
Entrepreneur, Writer, Influencer share a single tone-of-voice card. No tabs, no toggles — the visitor sees all three from the first fold.
Principle 04
Light stage, dark stage
Same skeleton, mirrored systems. The dark version becomes the brand's editorial cover; the light version becomes the working portfolio.
Section 7 · FAQ
Five answers the brand kept being asked.
Inline, no card chrome. Treated as content, not decoration — the FAQ is the last objection-handler before the final fold.
Is this a portfolio or a brand site?+
Both — Roze's brand IS her work, so the page treats the projects as proof rather than a separate gallery. One scroll, three identities, three projects.
Why mirror it in dark and light?+
The dark version is the editorial cover used on press and social; the light version is the working portfolio. Same content, two stages — pick the one that matches the moment.
How is the wordmark used?+
Lowercase 'Roze Cook' with a single mustard underline. Never tinted, never on a coloured surface — the underline is the brand.
What about long-form writing?+
The Substack lives off-site. Each new essay is teased on the homepage as the topmost work tile so the portfolio always feels current.
Will it scale to a third theme?+
Yes. The system is tokenised — adding a 'sand' or 'studio' theme is a swap of three CSS variables, not a rebuild.
Design System
One accent. Two canvases.
A six-step palette of two greys and a mustard. Mustard is reserved for actions, the wordmark underline, and the quote rule — never decoration. Typography is a single display serif paired with a clean sans.
Ink
#0B0B0F
Night
#15151B
Panel
#1D1D25
Mustard
#F2A341
Soft Mustard
#F8C77E
Bone
#F4EFE8
Wordmark
Roze Cook
Title-case. A single mustard underline. The underline IS the brand — never tinted, never on colour.
Buttons
Mustard primary, ghost-border secondary. Square corners — editorial, not consumer.
Typography
Display serif headlines.
Clean sans body.
A single display family carries each section. Body type stays small and quiet.
Epilogue
What we learned designing Roze Cook.
A personal-brand page is the visitor meeting the person, not the resume. Our job was to keep the colour scarce, the photography big, and the writing in Roze's voice — every decision after that fell out for free.
The mirrored dark + light system was the move that paid off most. One URL, two stages — press picks the dark cover, clients pick the light portfolio, and the brand never has to choose which one it is.
"Two stages, one voice. The dark cover is on every press kit; the light page is the one I send to clients."
— Roze Cook
2×
Press features
+38%
Hero dwell time
3w
Concept to ship
Building a personal brand? Let's design the single page that finally says who you are.