CURATED · OPEN · FREE

Rog Ie

A refined personal portfolio for a Product Designer at Figma, showcasing expressive visual tools.

PortfolioCalmTypographyCleanProductivity

↓ Download design system (4 MB)Open in OpenDesign

Visit: https://rog.ie

📦 Browse pack contents →

Identity DNA

PortfolioPersonalDesignerFigmaExpressive

A digital sketchbook that blends professional craft with personal quirks

Color

#ED2720Accent

#101010Ink

#666666Ink soft

#EDEDEDBG

#999999Muted

rgba(102,102,102,0.25)Line

Neutral canvas with deliberate, high-chroma emotional accents

Typography

transitional-serif · humanist-sans

display24px · 500
body14px · 400
caption11px · 400

Use uppercase for specific emphasis keywords like 'HORROR' · Maintain a highly readable 14px baseline for body copy · Use a serif typeface strictly for primary section headings

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

Generous vertical padding (64px) defines distinct content sections

Surfaces

sm · 2px

md · 8px

lg · 40px

pill · 100px

Thin, 1px solid borders primarily used for project list separators

0px 3px 3px -2px rgba(0,0,0,0.2) for floating elements · Inset 0px 0px 0px 1px rgba(0,0,0,0.05) for subtle boundaries

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column layout for the main content area

Motion & Interaction

200msmicro

240mssmall

800msmedium

cubic-bezier(0.22, 0.61, 0.36, 1)easing

Smooth transition on hover for project list items · Cubic-bezier easing for interactive element transforms

Cursor changes to pointer, subtle text color shift or transform · Immediate navigation to project details

Components

button Minimal, typography-driven links without heavy button containers
card Image-heavy stacked elements like the movie posters
chip Simple, inline tags for categories
input No visible input fields in the provided view
hero Left-aligned intro with avatar, name, and brief bio

Voice & Don'ts

Tone Casual, personal, and highly professional
Headlines Direct, serif-driven headings that anchor sections
CTAs Subtle inline links with specific color highlighting

Don't use a pure white background — screenshot shows a soft neutral #EDEDED.
Don't use heavy gradients for backgrounds — screenshot shows flat, solid surfaces.
Don't use sans-serif for all headings — screenshot uses a transitional serif for section titles.
Don't use multiple competing accent colors — screenshot only uses one high-chroma red for emphasis.
Don't use thick borders or heavy card containers — screenshot uses thin 1px lines and subtle shadows.
Don't use wide, justified text layouts — screenshot shows a tight, centered single-column layout.
Avoid: Aggressive marketing language
Avoid: Dense multi-column text blocks
Avoid: Overly formal corporate jargon

Inside the pack — real screenshots

Rog Ie — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

A personal portfolio for a Product Designer at Figma, emphasizing expressive visual tools and illustration. The aesthetic is refined, calm, and grounded in a soft #EDEDED neutral background with crisp #101010 ink. Typography utilizes a humanist sans for body text and a transitional serif for section headings, with a single high-chroma #ED2720 accent for occasional emphasis. Critical design rules include: maintain generous vertical spacing to separate content sections, avoid heavy UI containers in favor of subtle 1px borders, and always use the specific serif typeface for primary navigation anchors. The layout is strictly centered and single-column, ensuring a focused, editorial reading experience.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko