# Nevflynn · Design system migration spec

> Source: https://nevflynn.com  ·  Curated by OpenDesign  ·  en

> A great example of a modern, personality-driven developer portfolio that balances professionalism with a playful, accessible design language.

## 1. Identity DNA

Nevflynn is a personal portfolio that operates like a well-crafted toolset—playful and direct, yet rigorously structured. Its identity is a deliberate blend of a developer's precision and a designer's warmth, built on a system of soft forms and clear communication.

**One-liner:** A playful, card-based personal portfolio with a warm pastel palette and bold, rounded typography.
**Keywords:** personal · playful · modern · developer · portfolio
**Analogy:** A playful yet professional developer portfolio.

## 2. Color

The color system establishes a warm, inviting atmosphere through a soft off-white canvas, grounded by high-contrast dark text for legibility. Accents in muted teal, blue, and pink provide personality without competing for primary focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F2F2` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#0D1117` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#8A949E` | placeholder |
| `--accent` | `#6ED2B7` | single accent |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** Warm, neutral background with soft pastel accents and high-contrast dark text.

The principle is restraint: color supports content, never overwhelming the clean, personal presentation.

## 3. Typography

Typography creates a distinct voice through a two-font hierarchy. **Moranga Bold** provides a rounded, geometric display character for titles, while **Silka** offers a clean, neutral counterpart for body text and interface elements.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 700 | -1px | Hero and section titles |
| h1 | 24px | 1.2 | 500 | 0px | Card headings |
| body | 16px | 1.5 | 400 | 0px | Main text and descriptions |

**Type rules:**
- Use Moranga Bold for display elements.
- Use Silka for body and UI text.

## 4. Spacing

All spatial relationships adhere to a consistent 4px unit grid, creating a predictable and harmonious rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Based on a 4px unit grid.

## 5. Surfaces

Depth is achieved not through heavy elevation, but through subtle layering. Components use soft, light shadows and purposeful borders, often only appearing on active states to maintain a generally flat, clean surface.

- **Radius:** sm 8px · md 18px · lg 32px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0) 0px 0px 0px 2px inset
  - rgb(240, 242, 248) 0px 0px 0px 2px
- **Borders:** Visible on active states or specific cards, often 2px solid.

## 6. Layout

The primary layout is a masonry-style card grid, where varying card sizes create a dynamic, staggered arrangement. This structure prioritizes visual interest and organic flow over rigid uniformity.

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

**Skeleton:** Masonry-style card grid with varying card sizes.

## 7. Motion & Interaction

Interaction motion is understated and functional, designed to provide gentle feedback rather than spectacle. Smooth, 0.3-second transitions on hover states and subtle opacity fades create a polished, fluid feel.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions for hover states (0.3s)
  - Subtle opacity fades on interaction.

- **Hover:** Subtle box-shadow or background color change.
- **Click:** Minimal visual feedback, relies on pointer cursor.
- **Transition:** 0.3s ease-out for most interactive elements.
- **Keyboard:** Standard tab navigation, focus states not prominently styled in screenshot.

## 8. Voice & Don'ts

The written voice is friendly, casual, and direct—conversational questions replace formal calls to action, and headlines are short, bold statements. This approach mirrors the design's blend of professionalism and accessible playfulness.

- **Tone:** Friendly, casual, and approachable.
- **Headline style:** Short, bold, and direct.
- **CTA style:** Conversational questions or simple statements.
- **Avoid:** Stiff corporate jargon / Overly complex sentence structures / Aggressive sales language

### Don'ts
- ❌ Don't use dark mode — screenshot shows a light, warm background instead.
- ❌ Don't use sharp corners — screenshot shows large 18px and 32px border-radius instead.
- ❌ Don't use thin, elegant serifs — screenshot shows bold geometric sans-serif fonts instead.
- ❌ Don't use a rigid, strict grid — screenshot shows a playful, staggered card layout instead.
- ❌ Don't use aggressive, high-saturation neon colors — screenshot shows soft, muted pastels instead.
- ❌ Don't use complex, heavy drop shadows — screenshot shows very subtle, light shadows or flat design instead.

The system deliberately rejects dark modes, sharp corners, thin serifs, rigid grids, aggressive neon colors, and heavy shadows in favor of its established warm, rounded, and soft-palette language.

## System Prompt (paste into AI tool)

```
This is a personal portfolio for a developer and product designer, characterized by a warm, playful aesthetic. The palette is grounded in a soft off-white background with bold black text and is punctuated by pastel accents like teal, blue, and pink. Typography is a mix of a bold geometric sans for headlines and a clean, legible sans-serif for body text. Key interaction patterns include smooth transitions on hover. Critical design constraints include: DO NOT use dark mode, DO NOT use sharp corners, DO NOT use thin serifs, DO NOT use a rigid grid layout, and DO NOT use high-saturation neon colors.
```