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

# Elvina Prasad · Design System

> Human-centred ideas in bold, quiet contrast.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.elvinaprasad.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 monochrome designer portfolio that pairs oversized, staggered typography with generous negative space. Project imagery and concise navigation punctuate broad, sharply contrasting sections.

## North star

Let oversized, asymmetrically placed typography and expansive black, white, and pale-grey fields do the work; keep everything else quiet.

## Overview

The visual identity is built on a restrained monochrome palette: pure white carries the opening project gallery, black anchors the introductory statement and footer, and pale grey distinguishes the selected-projects section. Neue Montreal supplies the page’s oversized, confident display lettering and light, conversational supporting copy; headings often shift position across the canvas rather than sit in conventional centered blocks. The opening uses a black field with widely separated lines of large white type, while the project gallery presents colorful portfolio work as the exception to the neutral interface. In the selected-projects band, a two-column composition pairs a large title and short note with a simple ruled project list. Spacing is deliberately generous, and section transitions are defined by full-width color changes rather than decorative containers. Keep UI chrome minimal: thin dividers, small arrow cues, and no visible shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Opening project-gallery canvas and text color on black sections. |
| Ink Black | `#000000` | `--color-ink-black` | brand | Hero, biography, and footer bands; also the primary text on pale surfaces. |
| Soft Paper | `#f7f7f7` | `--color-soft-paper` | surface | Selected-projects section background, contrasting softly with white and black bands. |
| Quiet Graphite | `#505050` | `--color-quiet-graphite` | neutral | Muted text tone; secondary copy and fine details, not a dominant section color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink Black) · `--color-surface-2` → `#f7f7f7` (Soft Paper) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f7f7f7` (Soft Paper) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#f7f7f7` | `#ffffff` | 1.07:1 | fail |
| `#f7f7f7` | `#000000` | 19.6:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 400, 300, 500 | Primary display, large headings, body copy, and captions. | Inter |
| Neue Montreal Variable | `--font-display` | webfont | 400 | Uppercase section headings and eyebrow labels. | Inter |

- **Neue Montreal:** Use light weights for supporting copy and medium for display; large headlines are tightly tracked, while body and captions use open tracking.
- **Neue Montreal Variable:** Regular weight, uppercase treatment, and notably open letter spacing for section labels and headings.

### Type scale — Golden Ratio (ratio ≈ 1.589, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 177.5px | 500 | 1.1 | 0 | — | Neue Montreal | Oversized hero statement and expressive headline lettering. |
| h1 | 80px | 500 | 1 | -0.05em | — | Neue Montreal | Primary large title treatment across prominent content. |
| h2 | 40px | 400 | 1 | 0.05em | uppercase | Neue Montreal Variable | Uppercase section headings, including project and intro labels. |
| h3 | 38.5px | 400 | 1 | 0.05em | uppercase | Neue Montreal Variable | Secondary uppercase headings within content sections. |
| h4 | 32px | 400 | 1 | 0.05em | uppercase | Neue Montreal Variable | Smaller uppercase subheadings and project labels. |
| body | 17.5px | 300 | 1 | 0.05em | — | Neue Montreal | Light-weight supporting paragraphs and project descriptions. |
| caption | 11px | 400 | 1.3 | 0.05em | — | Neue Montreal | Compact navigation details, footer notes, and small labels. |
| eyebrow | 32px | 400 | 1 | 0.05em | uppercase | Neue Montreal Variable | Uppercase introductory or section-label text. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 7, 14, 16, 21, 28, 29, 42, 50, 72, 89, 180 px.
- Section rhythm 180px · element gap 16px · card padding — · max content width 1296px.

The page alternates full-width monochrome bands with a pale-grey project section. Content sits within a measured 1296px maximum width, but the hero deliberately uses staggered alignment and broad open areas rather than a conventional centered text block. The selected projects area switches to a two-column layout, with heading and intro on one side and a ruled project list on the other. The image gallery uses scattered, varied-size placements on a white field. Section rhythm is spacious, with measured section gaps of 180px and an overall low-density feel.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is fundamentally flat: no measured shadows or gradients. Use full-bleed color fields, whitespace, and thin horizontal rules to establish hierarchy instead of cards or raised surfaces. Small circular arrow controls are outlined rather than filled, and project rows are separated by hairlines.

## Imagery

Portfolio imagery is presented as colorful design work rather than as a separate brand palette: app mockups, packaging, print, and identity examples appear at varied sizes on the white gallery canvas. Keep each piece sharply framed and let its native color and artwork remain visible. The rest of the site stays image-light, allowing typography and section color to lead.

## Components

### Hero navigation

Place the small white “ep” mark at the upper left and MENU at the upper right over the black hero field.

### Scroll cue

Pair a compact “KEEP SCROLLING” caption with a thin outlined circular down-arrow at the lower right of the hero.

### Intro statement

Set large staggered lines on black; pair the human-centred statement with a short, light-weight explanatory paragraph.

### Project gallery

Scatter varied-size portfolio images across a clean white canvas, with generous empty space between pieces.

### Selected projects list

Use a pale-grey band with a two-column heading/list composition; separate project links with fine horizontal rules and arrow cues.

### Footer CTA

Keep the footer black, with a prominent “Have an idea?” prompt, an outlined circular arrow link, compact navigation, and a thin divider.

### Measured component styles

- **Link** (“MENU”): transparent background · text #333333 · radius 0px · padding 0px · 400 14px Arial

## Do

- Use black, white, and pale grey as broad section fields.
- Set oversized headlines with deliberate, staggered alignment.
- Preserve generous negative space around type and images.
- Let portfolio artwork supply the page’s vivid color.
- Use fine rules and small arrow cues for navigation.
- Keep supporting text light and visually subordinate.

## Don't

- Do not add unmeasured brand colors to the interface.
- Do not center every headline or align every section identically.
- Do not place every project inside a raised card.
- Do not introduce gradients or decorative shadows.
- Do not crowd the gallery or compress section transitions.
- Do not make small navigation copy compete with display type.

## Agent prompt

Build a new designer-portfolio page in this style. Use Ink Black (#000000), Gallery White (#ffffff), and Soft Paper (#f7f7f7) as the core interface palette; reserve artwork colors for portfolio imagery. Set Neue Montreal, or a close sans-serif substitute, with oversized, medium-weight display lines and light supporting copy. Create full-width alternating sections, an asymmetrically aligned hero, generous open space, and a scattered gallery of project work. A pale-grey projects section should use a two-column arrangement and thin ruled links. Keep controls quiet: small captions, simple arrows, outlined circular cues, and hairline dividers. Avoid shadows, gradients, rounded cards, and added decorative color. Follow the page’s spacious rhythm and use concise navigation and footer details.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero with top-corner navigation, oversized staggered headline, and a lower-right scroll cue. | minimal top navigation, scroll prompt | white display typography, outlined circular arrow, high-contrast black field |
| 2 | gallery | White canvas with scattered, varied-size portfolio images and broad empty areas. | visual portfolio browsing, image-led discovery | loose image placement, native artwork color, no visible cards |
| 3 | feature-split | Black section with expressive headline and concise supporting paragraph in an asymmetric composition. | brand introduction, human-centred positioning | white oversized type, light body copy, black field |
| 4 | feature-split | Continuation of the black statement section with large type and a small profile link. | profile invitation, continuation of brand story | staggered headline, small link label, circular arrow cue |
| 5 | product-grid | Pale-grey two-column section with heading and intro opposite a ruled list of project links. | project selection, see-all navigation | large black typography, thin row dividers, right-facing arrows |
| 6 | footer | Black footer with contact CTA at left, compact navigation at right, and a bottom divider with small-print notes. | contact invitation, site navigation | white typography, outlined arrow link, thin horizontal divider |

## Source CSS custom properties (selected)

```css
--main-light-color: #e8e2da;
--main-dark-color: #2e2a27;
```

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