# Rog Ie · Design system migration spec

> Source: https://rog.ie  ·  Curated by OpenDesign  ·  en

> An excellent example of how restrained, high-quality typography and spacing can create a premium personal brand without visual noise.

## 1. Identity DNA

Rog.ie operates as a digital sketchbook where professional craft meets personal expression, like a well-made journal that contains both precise technical drawings and spontaneous, expressive doodles. The system establishes a calm, editorial atmosphere through deliberate restraint, using a neutral canvas to let the work itself carry the emotional weight.

**One-liner:** A refined personal portfolio for a Product Designer at Figma, showcasing expressive visual tools.
**Keywords:** Portfolio · Personal · Designer · Figma · Expressive
**Analogy:** A digital sketchbook that blends professional craft with personal quirks

## 2. Color

The palette grounds itself in a soft, warm neutral background of #EDEDED and crisp #101010 ink, creating a paper-like foundation for content. A single high-chroma red accent is reserved exclusively for emotional emphasis and specific interactive highlights, ensuring visual focus without chromatic competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EDEDED` | main background |
| `--ink` | `#101010` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#ED2720` | single accent |
| `--line` | `rgba(102,102,102,0.25)` | divider |

**Color principle:** Neutral canvas with deliberate, high-chroma emotional accents

The principle is clarity through restraint: one accent color carries all the emotional weight, while the neutral field ensures the work speaks first.

## 3. Typography

The typographic voice is bifurcated by purpose: a humanist sans-serif handles the readable body copy at a solid 14px baseline, while a transitional serif typeface is reserved strictly for primary section headings, providing a distinct, editorial anchor to the page's structure.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.1 | 500 | -0.6px | Main section headings like 'Projects' and 'Recent flicks' |
| body | 14px | 1.6 | 400 | 0px | Primary paragraph and introductory text |
| caption | 11px | 1.6 | 400 | 0.88px | Project years and fine metadata |

**Type rules:**
- 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

## 4. Spacing

Rhythm is established through generous vertical padding, with a 64px separation between distinct content sections creating a measured, readable pace down the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Generous vertical padding (64px) defines distinct content sections

## 5. Surfaces

Surface depth is communicated sparingly, using a specific floating shadow for elevated elements and a 1px inset border for subtle boundary definition. The visual language rejects heavy containers, favoring thin, 1px solid lines as separators within lists.

- **Radius:** sm 2px · md 8px · lg 40px · pill 100px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton is a centered, single-column column that focuses all content into a tight, readable spine. This structure eliminates competing visual paths, creating a linear, editorial reading experience that prioritizes clarity over density.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout for the main content area

## 7. Motion & Interaction

Motion serves functional feedback rather than decoration, with smooth hover transitions and cubic-bezier easing applied to interactive transforms. All animations operate on a quick 0.24s curve, designed to enhance usability without disrupting the site's calm, focused atmosphere.

- **Durations:** micro 200ms · small 240ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 0.61, 0.36, 1)`
- **Patterns:**
  - Smooth transition on hover for project list items
  - Cubic-bezier easing for interactive element transforms

- **Hover:** Cursor changes to pointer, subtle text color shift or transform
- **Click:** Immediate navigation to project details
- **Transition:** 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) for standard transforms
- **Keyboard:** Standard focus ring styling using 1px inset borders

## 8. Voice & Don'ts

The editorial voice is casual yet precise, using direct, serif-driven headings to anchor sections and subtle inline links for calls to action. It deliberately avoids aggressive marketing language and overly formal corporate jargon.

- **Tone:** Casual, personal, and highly professional
- **Headline style:** Direct, serif-driven headings that anchor sections
- **CTA style:** Subtle inline links with specific color highlighting
- **Avoid:** Aggressive marketing language / Dense multi-column text blocks / Overly formal corporate jargon

### Don'ts
- ❌ 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.

What they deliberately don't do is create visual noise—there are no competing accent colors, no heavy gradients, and no dense multi-column blocks to fracture the focused, single-column reading path.

## System Prompt (paste into AI tool)

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