---
title: "Dyo Tanya design system"
variant: extended
source: https://dyotanya.com/en
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/dyotanya-com-en)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dyo Tanya · Design System

> A calm canvas for expressive, human-centered design

**Theme:** light · **Industry:** portfolio · **Source:** https://dyotanya.com/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dyo Tanya’s portfolio pairs dramatic editorial typography with a warm off-white canvas and a distinctive blue frame. Curving hand-drawn lines, staggered project cards, and personal photography give the long-form page an informal, human rhythm.

## North star

Use a quiet warm canvas, expressive lightweight serif type, and blue-framed panels to make a personal portfolio feel both art-directed and approachable.

## Overview

The visual system balances a warm, near-white canvas (#f5f5f3) with a recurring blue frame and large blue section bands (#81aed9). Dark charcoal (#333333) anchors text, fine outlines, and drawn paths; pure white appears in selected section surfaces and media areas. Oversized, lightweight Simeiz serif headlines create an editorial voice, while compact Manrope body copy keeps project descriptions and supporting details readable. The opening statement is composed as an asymmetrical typographic arrangement rather than a conventional centered hero. Across the long page, large rounded panels, offset project cards, and continuous looping linework connect otherwise distinct sections. Portraits and client-work imagery add personality and visual contrast; they should feel integrated into the layout, not treated as generic stock decoration. Keep generous negative space and a comfortable rhythm, using blue borders and occasional blue backgrounds as structural accents rather than adding unrelated color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Graphite | `#333333` | `--color-soft-graphite` | neutral | Primary text, links, fine outlines, hand-drawn paths, and offset card shadows. |
| Gallery Ivory | `#f5f5f3` | `--color-gallery-ivory` | surface | Main canvas and the recurring light panel surface for framed cards and sections. |
| Portfolio Blue | `#81aed9` | `--color-portfolio-blue` | brand | Outer page framing, prominent section bands, card borders, and the hero portfolio outline. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Selected section backgrounds and image or media surfaces; secondary to the warm canvas. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Occasional muted text in measured elements; not a defining page-wide color. |
| Bright Link Blue | `#55a1ea` | `--color-bright-link-blue` | accent | Small measured link and text accent; use sparingly, not as a dominant section color. |

### Semantic aliases

`--color-canvas` → `#f5f5f3` (Gallery Ivory) · `--color-surface` → `#81aed9` (Portfolio Blue) · `--color-surface-2` → `#ffffff` (Clean White) · `--color-text` → `#333333` (Soft Graphite) · `--color-text-muted` → `#f5f5f3` (Gallery Ivory) · `--color-text-subtle` → `#000000` (Pure Black) · `--color-border` → `#81aed9` (Portfolio Blue) · `--color-accent` → `#81aed9` (Portfolio Blue) · `--color-accent-2` → `#55a1ea` (Bright Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#f5f5f3` | 11.57:1 | AAA |
| `#333333` | `#81aed9` | 5.41:1 | AA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#f5f5f3` | `#81aed9` | 2.14:1 | fail |
| `#f5f5f3` | `#ffffff` | 1.09:1 | fail |
| `#000000` | `#f5f5f3` | 19.24:1 | AAA |
| `#000000` | `#81aed9` | 8.99:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#81aed9` | `#f5f5f3` | 2.14:1 | fail |
| `#81aed9` | `#ffffff` | 2.34:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope | `--font-body` | webfont | 400, 500, 600 | Body copy, captions, compact labels, and small navigation or identity text. | Manrope |
| Simeiz | `--font-display` | webfont | 300 | Display statements, section headings, project titles, and oversized review links. | Bodoni Moda |
| Suisse Intl | `--font-suisse-intl` | system | 450 | Small supporting interface or copy where the system falls back to the measured system face. | Inter |
| Times New Roman | `--font-times-new-roman` | system | 400 | Fallback face detected in component styles; not a defining visual font in the screenshots. | Libre Baskerville |

- **Manrope:** Use mostly regular weight, with measured medium weight for a small brand link; keep body copy compact and understated.
- **Simeiz:** Light weight and generous scale create the page’s editorial voice; retain natural casing and avoid heavy bold styling.
- **Suisse Intl:** Measured as a minor system-font share; use only for restrained supporting text, not prominent display typography.
- **Times New Roman:** Keep as a fallback only; the page’s visible identity is led by Simeiz and Manrope.

### Type scale — Augmented Fourth (ratio ≈ 1.417, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1.55 | 0 | — | Simeiz | Large editorial statements and expressive hero typography. |
| h1 | 48px | 300 | 1 | 0 | — | Simeiz | Primary introductory headline and major page statement. |
| h2 | 46px | 300 | 1.54 | 0 | — | Simeiz | Section titles and prominent secondary statements. |
| h3 | 30px | 300 | 1 | 0 | — | Simeiz | Project names and card-level headings. |
| h4 | 18px | 300 | normal | -0.139em | — | Simeiz | Compact card or supporting headings. |
| body | 14px | 400 | 1.45 | -0.107em | — | Manrope | Project descriptions and explanatory copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Manrope | Small labels, image notes, and attribution. |
| link | 46px | 300 | 1.54 | 0 | — | Simeiz | Large editorial links such as the reviews prompt. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 10, 12, 22, 48 px.
- Section rhythm 48px · element gap — · card padding 48px · max content width 1392px.

The measured content max width is 1392px, with a comfortable density and a section rhythm built around a 48px section gap. The desktop composition is deliberately asymmetrical: the hero headline shifts across the canvas, project cards vary in size and position, and later sections alternate between broad panels and image-led blocks. Use the 8px base spacing unit and measured spacing scale for implementation; keep ample open canvas around titles and imagery. Blue outer framing makes the stacked sections feel like one continuous portfolio.

## Shape & elevation

- Radius: button `50%` · card `20px` · media `50%` · link `30px` · xs `20px` · sm `30px` · pill `9999px`
- Shadow `hairline` (card, other): `rgb(51, 51, 51) 5px -5px 0px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 20px 0px`
- Shadow `hairline-2` (other): `rgb(51, 51, 51) 4px -4px 0px 0px`
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

The page is mostly flat, with structure supplied by blue outlines, dashed charcoal card borders, rounded surfaces, and drawn paths. Where cards lift, use the measured charcoal offset shadow treatment rather than a soft generic drop shadow. Preserve clear layer separation through surface contrast and overlapping linework, not heavy elevation.

## Imagery

Use personal portraits and client-project images as meaningful accents within the page, including circular crops on project cards and larger portrait-led moments in blue sections. Mix still photography with the measured video presence in the personal section. Keep imagery naturally framed and integrated into rounded cards; avoid filters or illustrative treatments that compete with the fine linework and typography.

## Components

### Hero statement

An oversized lightweight serif message arranged asymmetrically across the warm canvas, paired with compact sans-serif supporting copy and a portrait.

### Portfolio CTA

A broad capsule-outline link with a blue edge accent and centered charcoal label; maintain a restrained interface feel.

### Project cards

Rounded warm-surface cards with charcoal dashed outlines, measured 20px radius, generous 48px padding, project imagery, and compact descriptions.

### Looping linework

Thin charcoal paths weave between panels and around content, giving the stacked sections a connected, hand-drawn quality.

### Principle cards

Small editorial panels introduce values through lightweight serif headings and concise sans-serif copy; one can use an image-led surface.

### Review links

Large Simeiz link text introduces testimonial content, accompanied by compact reviewer details and audio-style controls.

### Contact panel

A portrait-led closing section pairs a large serif invitation with social links and a concise project-contact prompt.

### Measured component styles

- **Primary button**: background #f5f5f3 · text #ff8562 · border 0.833333px solid #333333 · radius 3000px · padding 0px · 400 16px Times New Roman
- **Link** (“more reviews”): transparent background · text #333333 · radius 0px · padding 0px · 300 46px Simeiz
- **Card** (“Launch the website and stay in touch Aft”): background #f5f5f3 · text #333333 · border 1px dashed #333333 · radius 20px · padding 48px · 400 16px Times New Roman · shadow rgb(51, 51, 51) 5px -5px 0px 0px

## Do

- Keep the warm off-white canvas central to the page.
- Use Portfolio Blue (#81aed9) for structural frames and section accents.
- Set display statements in a lightweight editorial serif.
- Keep body copy compact, clear, and in Manrope.
- Vary card positions and sizes to preserve the portfolio’s organic flow.
- Use charcoal linework to connect panels and guide the eye.

## Don't

- Do not turn the layout into a uniform centered grid.
- Do not replace the warm canvas with stark white everywhere.
- Do not use heavy bold display typography.
- Do not add unmeasured colors to the defining brand palette.
- Do not apply large soft shadows to every card.
- Do not let decorative lines obscure text or project imagery.

## Agent prompt

Build a new page in Dyo Tanya’s expressive portfolio style. Use Gallery Ivory (#f5f5f3) as the main canvas, Soft Graphite (#333333) for text and fine hand-drawn lines, and Portfolio Blue (#81aed9) for section bands, frames, and key outlines. Reserve Bright Link Blue (#55a1ea) for very small accents. Pair lightweight Simeiz-style editorial serif headlines with compact Manrope body copy. Arrange content asymmetrically with generous open space, rounded panels, staggered image cards, and looping charcoal paths that connect sections. Let personal or project photography add warmth without overwhelming the typography. Keep surfaces mostly flat, using measured outline and offset-shadow treatments selectively. The result should feel personal, calm, and art-directed—not like a generic agency template.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large asymmetrical serif statement on a light canvas, with portrait, compact descriptor, and broad outlined CTA. | Portfolio entry link | Editorial headline, Portrait accent, Blue capsule outline, Looping linework |
| 2 | gallery | Tall canvas with project cards staggered in varied sizes and connected by a continuous drawn path. | Browse client projects, Social profile links | Rounded project cards, Circular imagery, Blue outlines, Charcoal path |
| 3 | feature-split | Blue image-led band followed by a light process panel with separated imagery and copy. | Process link | Blue section band, Portrait photography, Light information panel, Editorial type |
| 4 | feature-grid | Wide light panel with editorial heading and scattered principle cards, including one image-led card. | Explore principles | Rounded outlined cards, Offset placement, Serif card titles |
| 5 | team | Three-column composition pairing a broad text panel, compact helper marks, and a portrait or video card. | Visit blog, View tools | Partner marks, Personal media card, Rounded panel |
| 6 | testimonials | Open light panel with large staggered serif message and scattered reviewer details with audio-style controls. | Play testimonial audio, More reviews link | Reviewer portraits, Pill-shaped audio controls, Large editorial text |
| 7 | contact | Portrait-led closing panel with a large headline, social links, and a separate project-contact prompt. | Contact via social links, Start a project conversation | Large portrait, Editorial headline, Looping linework, Light rounded panel |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dyotanya-com-en