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

# Elva · Design System

> A quiet canvas with a restless digital core

**Theme:** light · **Industry:** design · **Source:** https://www.helloelva.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._

Elva’s homepage opens as an almost empty pale-gray canvas, with a small distorted graphic at its center. The restrained monochrome palette and compact uppercase typography make the page feel more like a minimalist design studio identity than a conventional agency landing page.

## North star

Keep the canvas nearly empty and let one small, experimental visual carry the attention.

## Overview

The page builds its identity through reduction: a nearly uninterrupted #ececec field holds the viewport, while #262523 supplies the site's legible text and defining dark marks. The measured #cecccc is a minor supporting tone rather than a competing brand accent; the screenshot's central graphic contains its own noisy tonal variation, which should not be mistaken for a broader palette. Basis is used throughout, with compact uppercase navigation and body labels contrasted against an oversized, tightly tracked display role in the measured system. In the visible opening, the composition is unusually spacious and centered: the small abstract graphic sits alone amid extensive negative space, and the navigation remains visually quiet. There are no prominent cards, colored CTA blocks, or photographic bands in the supplied view. Reproduce the impression with a flat canvas, restrained type, sparse content, and a carefully isolated piece of experimental media.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#ececec` | `--color-gallery-mist` | surface | Dominant page canvas and navigation backdrop; maintain the broad, uninterrupted light-gray field. |
| Studio Ink | `#262523` | `--color-studio-ink` | brand | Primary text, link text, and dark marks that define the central graphic. |
| Quiet Ash | `#cecccc` | `--color-quiet-ash` | neutral | Minor measured supporting tone; visible as incidental detail rather than a major interface surface. |

### Semantic aliases

`--color-canvas` → `#ececec` (Gallery Mist) · `--color-text` → `#262523` (Studio Ink) · `--color-text-muted` → `#ececec` (Gallery Mist) · `--color-border` → `#262523` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262523` | `#ececec` | 12.96:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basis | `--font-body` | webfont | 400, 500 | Site-wide face for display, body copy, navigation, and links. | Space Grotesk |

- **Basis:** Use uppercase for display, body, and links; navigation includes a measured uppercase variant. Display is heavy and tightly tracked; small labels stay regular.

### Type scale — Custom (ratio ≈ 13.333, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 500 | 0.82 | -0.04em | uppercase | Basis | Oversized uppercase studio or hero display when present. |
| body | 12px | 400 | 1.3 | 0 | uppercase | Basis | Compact uppercase supporting copy and labels. |
| nav | 12px | 400 | 2 | 0 | uppercase | Basis | Small uppercase primary navigation labels. |
| link | 12px | 400 | 1.3 | 0 | uppercase | Basis | Compact uppercase text links such as “SEE WHATS NEXT”. |

## Spacing & layout

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

The supplied opening uses a single-column, full-viewport canvas with the abstract graphic centered and substantial negative space around it. Navigation is present in the measured data but visually unobtrusive. The section measurement reports one column and no prominent content blocks. Keep alignment calm and deliberate, avoid crowding the central mark, and preserve a comfortable, low-density rhythm. The measured spacing scale includes 40 and 48, with a 48 section gap; use these only where the composition needs separation rather than filling the open field.

## Shape & elevation

- Radius: pill `9999px`
- Shadow `inset` (section): `rgb(236, 236, 236) 0px 0px 0px 1440px inset`
- Motion: standard transition `0.5s ease` on interactive elements.

The page reads as flat: there are no visible card stacks or pronounced shadows. The measured inset shadow is a large canvas-matching inset treatment, not a reason to introduce raised surfaces. Keep edges and layering quiet, using dark hairlines only when the interface needs a defined boundary.

## Imagery

The visible media is a small abstract, glitch-like graphic centered on the pale canvas, not conventional photography. Its black, gray, and muted fragments appear broken up and digitally distorted. Keep it isolated with generous surrounding space; treat its internal tonal noise as artwork, not as a signal to add new interface colors.

## Components

### Canvas

A continuous #ececec background dominates the measured viewport; avoid unnecessary surface changes.

### Navigation

Measured navigation is text-only, with compact Basis labels and no filled background or visible border.

### Central graphic

A small, centered glitch-like visual provides the opening's sole focal point; keep its tonal variation confined to the artwork.

### Text link

The measured “SEE WHATS NEXT” link uses regular 12px Basis, uppercase text, and #262523 with no visible fill.

### Display typography

The measured display role is 160px Basis, medium weight, uppercase, with tight negative tracking and a compact line height.

### Measured component styles

- **Link** (“SEE WHATS NEXT”): transparent background · text #262523 · radius 0px · padding 0px · 400 12px Basis · uppercase
- **Navigation item** (“WORK COMPANY CAPABILITIES CONTACT INFO@H”): transparent background · text #262523 · radius 0px · padding 0px · 400 10px Basis

## Do

- Preserve the broad #ececec canvas.
- Use #262523 for primary text and links.
- Keep the first view sparse and centered.
- Use Basis or a close geometric sans substitute.
- Keep small labels uppercase and restrained.
- Treat the distorted graphic as artwork.

## Don't

- Do not add bright accent colors.
- Do not fill the open canvas with cards.
- Do not enlarge the central graphic without evidence.
- Do not turn artwork tones into interface colors.
- Do not add decorative shadows or gradients.
- Do not use dense, sentence-case navigation.

## Agent prompt

Build a new page in Elva’s restrained studio style. Use Gallery Mist (#ececec) as the dominant, nearly uninterrupted canvas and Studio Ink (#262523) for text and links; Quiet Ash (#cecccc) should remain a minor supporting neutral, not an accent. Use Basis throughout, or a close geometric sans substitute, with compact uppercase navigation and labels. Compose the page with generous negative space, a quiet single-column feel, and one carefully isolated experimental visual if the content calls for it. Keep surfaces flat, borders understated, and controls text-led rather than boxed. Do not introduce gradients, colorful CTA panels, dense card grids, or extra palette colors. Preserve a deliberate, editorial sense of scale and let the content—not decoration—set the focal point.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column full-viewport canvas with a small abstract visual centered in extensive negative space. | quiet opening, centered focal visual | pale-gray canvas, monochrome glitch artwork, minimal text navigation |

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