---
name: Rog Ie
description: "An excellent example of how restrained, high-quality typography and spacing can create a premium personal brand without visual noise."
version: alpha

colors:
  background: "#EDEDED"
  primary: "#101010"
  secondary: "#666666"
  tertiary: "#ED2720"
  neutral: "#999999"
  line: "rgba(102,102,102,0.25)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 24px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.88px"

rounded:
  sm: 2px
  md: 8px
  lg: 40px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A digital sketchbook that blends professional craft with personal quirks*

## Colors

Neutral canvas with deliberate, high-chroma emotional accents

- **Background (`#EDEDED`)** — uses `bg` token
- **Primary text (`#101010`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#ED2720`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(102,102,102,0.25)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** humanist-sans

- 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

## Layout

Centered single-column layout for the main content area

*Rhythm:* Generous vertical padding (64px) defines distinct content sections

## Elevation & Depth

- 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
- Borders: Thin, 1px solid borders primarily used for project list separators

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 40px
- `pill`: 100px

## 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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```