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

# Akash Tyagi · Design System

> A quiet dark canvas for expressive digital work

**Theme:** dark · **Industry:** portfolio · **Source:** https://akashtyagi.com/ · **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._

A dark, spacious portfolio pairs concise designer credentials with a long, image-led selection of product work. Pixel-style headings, muted copy, and a single pink call-to-action give the page a restrained but distinctive identity.

## North star

Keep the surrounding interface nearly black and understated so the work itself, not the portfolio chrome, commands attention.

## Overview

The page uses near-total black as an uninterrupted canvas, giving the long portfolio a quiet, gallery-like feel. Muted gray-beige text carries the biography, links, and small labels, while vivid pink is reserved for the pill-shaped booking button and occasional expressive pixel details. Geist provides compact, readable interface and body text; Geist Pixel Triangle makes the portfolio heading and section labels feel deliberately digital, and Geist Mono adds a technical accent to contact information. The layout is asymmetrical and spacious: a narrow text-led introduction sits beside a large empty field, while project imagery occupies a separate column and unfolds vertically with substantial gaps. Project artwork keeps its own colors and backgrounds, so it reads as content rather than as the site palette. Hairline dividers and flat surfaces maintain the minimal structure without competing with the imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Black | `#000000` | `--color-gallery-black` | surface | Dominant page canvas and framing around the introduction, project gallery, and footer. |
| Quiet Taupe | `#726e67` | `--color-quiet-taupe` | neutral | Low-emphasis biography copy and subdued secondary links. |
| Pixel Pink | `#ffa1f7` | `--color-pixel-pink` | accent | Primary booking CTA and occasional pixel-style emphasis; the clearest interface accent. |
| Soft Putty | `#aca69c` | `--color-soft-putty` | neutral | Muted body text, secondary headings, and link treatments against the black canvas. |
| Faded Umber | `#605c56` | `--color-faded-umber` | neutral | Very subdued text and heading detail; a minor low-contrast tone rather than a defining brand color. |
| Warm Porcelain | `#efe6d8` | `--color-warm-porcelain` | neutral | Light contact and social-link text; used sparingly for readable foreground details. |

### Semantic aliases

`--color-canvas` → `#000000` (Gallery Black) · `--color-text` → `#ffa1f7` (Pixel Pink) · `--color-text-muted` → `#726e67` (Quiet Taupe) · `--color-text-subtle` → `#aca69c` (Soft Putty) · `--color-accent` → `#ffa1f7` (Pixel Pink) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffa1f7` | `#000000` | 11.69:1 | AAA |
| `#726e67` | `#000000` | 4.14:1 | AA-large |
| `#aca69c` | `#000000` | 8.69:1 | AAA |
| `#ffa1f7` | `#000000` | 11.69:1 | AAA |

### Gradients

- `linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0) 40%)`
- `linear-gradient(rgb(0, 0, 0) 8.35973%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 500, 600 | Compact biography copy, links, and general interface text. | Inter |
| Geist Pixel Triangle | `--font-display` | webfont | 400 | Pixelated display headings, including the portfolio and selected-work labels. | Silkscreen |
| Geist Mono | `--font-mono` | webfont | 400, 500 | Monospaced contact details and technical-style text. | IBM Plex Mono |

- **Geist:** Measured weights 500 and 600; tight tracking and compact line spacing keep small text restrained.
- **Geist Pixel Triangle:** Measured regular weight; distinctive pixel construction contrasts with the otherwise clean sans-serif.
- **Geist Mono:** Measured weights 400 and 500; use as a limited accent rather than for long-form copy.

### Type scale — Custom (ratio ≈ 2.308, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 1.33 | -0.033em | — | Geist Pixel Triangle | Pixel-display identity and prominent portfolio headings. |
| body | 13px | 500 | 1.23 | -0.031em | — | Geist | Compact introductory biography and supporting descriptions. |
| link | 13px | 500 | 1.23 | -0.031em | — | Geist | Social links, contact links, and navigation-like text. |
| code | 13px | 500 | 1.23 | -0.031em | — | Geist Mono | Monospaced contact details and technical-looking labels. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 10, 12, 16, 18, 20, 24, 104, 200 px.
- Section rhythm 200px · element gap 8px · card padding — · max content width —.

The page is a tall, single-section portfolio with a strongly asymmetrical two-column composition. A narrow text area introduces the designer on the left, while a large open black field and right-side project column create deliberate imbalance. Social links sit low on the left; the selected-work label spans the gallery column above a vertically ordered stream of project images. The measured data gives no maximum width, so preserve the screenshot’s broad canvas rather than inventing a fixed container. Generous section rhythm and sparse text keep the page airy despite its long gallery.

## Shape & elevation

- Radius: button `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system and no card-heavy framing. Fine dark dividers separate portions of the composition, while black negative space provides the main sense of layering. Rounded treatment is clearest on the pink booking button; project image framing belongs to the media and should not be applied indiscriminately to interface elements.

## Imagery

Project imagery is the main visual content: product interfaces, mobile screens, campaign graphics, and device mockups appear as a vertical portfolio sequence. Keep each image in its original color and presentation rather than recoloring it to match the site palette. Frames are generally clean and rectangular, with some rounded media corners visible in the work itself. Sparse pixel-like decorative details reinforce the digital character without replacing the product-focused visuals.

## Components

### Identity and introduction

Small designer name beside compact, muted biography copy in the upper-left portion of the page.

### Contact details

Top-aligned time and email details use subdued text, with monospaced styling for the email treatment.

### Availability and booking

A slim availability row pairs a small green status dot and muted copy with a pink pill CTA labeled “Book an Intro call.”

### Social links

Low-key X.com, LinkedIn, and Dribbble links sit near the lower-left edge of the introductory area.

### Selected-work heading

Pixel-style section label and date range sit above the project column, bounded by subtle horizontal rules.

### Project gallery

A long vertical sequence of product and campaign images, spaced widely against the black canvas.

### Measured component styles

- **Primary button** (“Book an intro call”): background #ffa1f7 · text #0000ee · radius 40px · padding 4px 12px · 400 12px sans-serif
- **Link** (“X.com”): transparent background · text #eee6d7 · radius 0px · padding 0px · 500 13px Geist

## Do

- Use black as the dominant uninterrupted page canvas.
- Keep supporting copy compact and visually subdued.
- Reserve Pixel Pink for a small number of high-priority accents.
- Use pixel-display typography for standout portfolio headings.
- Give project media generous surrounding negative space.
- Let project artwork retain its own color palette.

## Don't

- Do not add colorful section backgrounds to the site chrome.
- Do not turn the portfolio into a dense card grid.
- Do not use the accent pink for large decorative surfaces.
- Do not add heavy shadows or prominent borders.
- Do not apply pixel typography to all body copy.
- Do not force project images into a uniform branded treatment.

## Agent prompt

Build a new portfolio page in the same restrained, gallery-like style. Use Gallery Black (#000000) as the dominant canvas, with Quiet Taupe (#726e67), Soft Putty (#aca69c), Faded Umber (#605c56), and Warm Porcelain (#efe6d8) for restrained text hierarchy. Reserve Pixel Pink (#ffa1f7) for one prominent pill-shaped CTA and small expressive details. Use a clean Geist-like sans for compact copy, pixel-display typography for key headings, and monospaced text sparingly for contact details. Compose the page asymmetrically, pairing a narrow introduction with a separate, vertically paced project-media column. Keep surfaces flat, dividers subtle, and negative space generous. Preserve the original colors of portfolio artwork; avoid adding a generic card system, elaborate shadows, or decorative color bands.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Asymmetrical two-column composition: compact profile content on the left and a tall, spaced project gallery on the right. | Portfolio browsing, Email contact, Project booking CTA | Black canvas, Pixel display headings, Muted text, Vertical image gallery, Pill CTA |

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