---
name: Dyotanya
description: "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."
version: alpha

colors:
  background: "#f5f5f3"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#81aed9"
  neutral: "#4f4f4f"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 80px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 46px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 1.5px
  md: 20px
  lg: 30px
  pill: 999px

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

---

## Overview

A personal portfolio for an empathic web designer that uses expressive serif typography and fluid layouts to communicate creativity.

*An expressive creative portfolio that blends refined typography with artistic flourishes.*

## Colors

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

- **Background (`#f5f5f3`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#81aed9`)** — uses `accent` token
- **Muted (`#4f4f4f`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* A relaxed 4px base grid provides generous spacing, supporting the breathable, editorial layout.

## Elevation & Depth

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

## Shapes

- `sm`: 1.5px
- `md`: 20px
- `lg`: 30px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with solid blue offset shadows for a tactile feel.
- **card:** Asymmetric containers with large imagery and generous whitespace.
- **chip:** Simple uppercase labels or tags with minimal styling.
- **input:** Minimal text inputs with subtle bottom borders.
- **hero:** A massive, expressive typography-driven introduction with a fluid line motif and integrated portrait.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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