# Dyotanya · Design system migration spec

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

> This site is an excellent example of a personal portfolio that uses typography as a primary design element, blending classic serif elegance with a modern, fluid layout.

## 1. Identity DNA

The system is built on a core tension: the warmth of a personal narrative structured with the precision of editorial design. Its identity is defined by a dialogue between expressive, high-contrast serifs and a fluid, asymmetric layout that feels both deliberate and organic.

**One-liner:** A personal portfolio for an empathic web designer that uses expressive serif typography and fluid layouts to communicate creativity.
**Keywords:** Creative · Empathic · Unique · Personal · Artistic
**Analogy:** An expressive creative portfolio that blends refined typography with artistic flourishes.

## 2. Color

The color system is fundamentally restrained, operating as a quiet stage for typographic performance. A near-neutral off-white field and deep ink tones establish a classic canvas, while a single soft blue accent provides a precise point of interaction and emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f5f5f3` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#4f4f4f` | placeholder |
| `--accent` | `#81aed9` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** A restrained palette of off-white and black creates a sophisticated canvas, allowing the blue accent and expressive typography to take center stage.

The principle is one of deliberate scarcity, using color sparingly to preserve the primacy of form and content.

## 3. Typography

Typography carries the primary emotional weight, pairing an elegant, high-contrast didone-serif for display use with a clean humanist sans-serif for body text. This creates a clear hierarchy where headlines function as expressive, almost poetic objects.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.05 | 400 | -1px | Hero headlines |
| heading | 46px | 1.1 | 400 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0 | Body text and UI |

## 4. Spacing

Spacing follows a relaxed 4px base grid, generating generous white space that supports the breathable, editorial rhythm of the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A relaxed 4px base grid provides generous spacing, supporting the breathable, editorial layout.

## 5. Surfaces

Surfaces are defined by crisp, offset box-shadows rather than heavy drop shadows, creating a tactile, raised effect. Thin, subtle borders and these distinct shadow offsets give interactive elements like buttons a sense of physical presence.

- **Radius:** sm 1.5px · md 20px · lg 30px · pill 999px
- **Shadows:**
  - 5px -5px 0px 0px #333333
  - 4px -4px 0px 0px #333333
- **Borders:** Thin, subtle borders or crisp solid box-shadows are used to elevate elements like buttons.

## 6. Layout

The layout skeleton rejects rigid symmetry in favor of an asymmetric, free-flowing composition. Large type blocks and intentionally uneven grids guide the eye through a personal narrative sequence.

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

**Skeleton:** An asymmetric, free-flowing layout that uses large type blocks and asymmetric grids to guide the eye.

## 7. Motion & Interaction

Motion is minimal and purposeful, reserved for immediate, tactile feedback on interactive elements. Subtle background-color transitions and smooth letter-spacing animations provide a sense of polish without narrative interruption.

- **Durations:** micro 100ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transitions on interactive elements like background-color and box-shadow.
  - Smooth letter-spacing animations for focused text elements.

- **Hover:** Subtle background-color and box-shadow transitions on interactive elements.
- **Click:** A slight tactile reduction or color shift on press.
- **Transition:** Fast 0.1s to 0.2s transitions for immediate visual feedback.
- **Keyboard:** Standard focus states are likely present but not explicitly visible in the static capture.

## 8. Voice & Don'ts

The editorial voice is warm, personal, and confident, with headlines that lean slightly poetic to foster connection. Calls to action are direct and encouraging, often presented in uppercase sans-serif within a prominent component.

- **Tone:** Warm, personal, and confident.
- **Headline style:** Expressive and slightly poetic, using large serif fonts to create an emotional connection.
- **CTA style:** Direct and encouraging, often presented in uppercase sans-serif within a prominent pill-shaped button.
- **Avoid:** Overly corporate jargon / Cold, robotic language / Dense blocks of text without breathing room

### Don'ts
- ❌ Don't use a grid-locked, symmetrical layout — screenshot shows an expressive, fluid, and asymmetric layout.
- ❌ Don't rely on bright, high-chroma primary colors everywhere — screenshot shows a predominantly neutral palette with a single blue accent.
- ❌ Don't use strictly geometric or grotesque fonts for headings — screenshot shows elegant, high-contrast serif typography.
- ❌ Don't hide navigation in complex mega-menus — screenshot shows a simple, discreet hamburger icon.
- ❌ Don't use harsh, solid black backgrounds — screenshot shows a light off-white background (#f5f5f3) as the primary surface.
- ❌ Don't use standard, flat rectangular buttons — screenshot shows pill-shaped buttons with distinct offset shadows.

The system deliberately avoids corporate jargon, cold robotic language, and any sense of a rigid, locked grid.

## System Prompt (paste into AI tool)

```
This is a personal portfolio for an empathic web designer, positioned as artistic, refined, and warm. Key hex colors include an off-white background (#f5f5f3), near-black ink (#000000, #333333), and a light blue accent (#81aed9). The typography pairs an elegant didone-serif for display text with a clean humanist-sans for body copy, creating a strong contrast between expressive headlines and readable details. The layout is asymmetric and fluid, using large typography blocks and generous whitespace. Critical donts: Do not use a rigid grid layout, do not overuse bright colors, do not use geometric sans-serifs for headings, do not use standard flat buttons, do not use solid black backgrounds, and do not clutter the interface with unnecessary elements.
```