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

# Dash Digital Studio · Design System

> Research-led design in a quiet editorial frame

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

Dash Digital Studio uses oversized typography, restrained neutrals, and image-led project cards to present its work and expertise. A long, spacious homepage moves from featured projects through clients, awards, news, and contact details.

## North star

Let oversized, tightly tracked typography and a calm neutral canvas frame the project imagery, keeping every interface detail flat and deliberate.

## Overview

The visual system is built around a pale #f0f0f0 canvas, with #2a2a2a text providing firm contrast without the severity of pure black. Large uppercase headlines in Founders Grotesk establish an editorial, studio-led voice; compact uppercase labels and light body copy keep supporting information quiet. Featured work is arranged in a two-column image grid, with thin pale gutters and plain text captions rather than elevated cards. Later sections stay on the same light ground, using alignment changes and generous gaps to distinguish client stories, brand lists, awards, and news. A muted #bcbcb4 surface and a near-black #161616 section provide occasional tonal breaks; #ffffff appears as a clean surface, especially in the closing contact area. Photography and video bring natural, varied colour, but remain project content rather than a competing brand palette. Hairline #d6d6d6 and #cccccc dividers organize dense lists without shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#2a2a2a` | `--color-studio-ink` | brand | Primary text, headlines, navigation, captions, and understated text links. |
| Soft Canvas | `#f0f0f0` | `--color-soft-canvas` | surface | Main page background across the hero and most content sections. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Clean surface used in selected sections and light media surroundings. |
| Divider Grey | `#d6d6d6` | `--color-divider-grey` | semantic | Thin borders and subtle rules that separate cards and content rows. |
| Footer Rule | `#cccccc` | `--color-footer-rule` | semantic | Pale footer dividers; a supporting hairline colour rather than a focal surface. |
| Stone Wash | `#bcbcb4` | `--color-stone-wash` | surface | Muted grey-beige surface measured in the opening section; a quiet tonal variation. |
| Near Black | `#161616` | `--color-near-black` | neutral | Inverse dark section surface, and occasional dark regions within project media. |

### Semantic aliases

`--color-canvas` → `#f0f0f0` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#bcbcb4` (Stone Wash) · `--color-surface-3` → `#161616` (Near Black) · `--color-surface-4` → `#d6d6d6` (Divider Grey) · `--color-text` → `#2a2a2a` (Studio Ink) · `--color-border` → `#d6d6d6` (Divider Grey)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2a2a2a` | `#f0f0f0` | 12.6:1 | AAA |
| `#2a2a2a` | `#ffffff` | 14.35:1 | AAA |
| `#2a2a2a` | `#bcbcb4` | 7.51:1 | AAA |
| `#2a2a2a` | `#161616` | 1.26:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-body` | webfont | 300, 400 | All measured roles, from oversized display and navigation text to body copy, captions, and buttons. | Barlow |

- **Founders Grotesk:** Use light 300 for body copy and regular 400 for other roles. Display text is uppercase with tight negative tracking; labels are compact and often uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.446, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 101px | 400 | 0.8 | -0.03em | uppercase | Founders Grotesk | Oversized uppercase hero statement and major display moments. |
| h1 | 70px | 400 | 0.8 | -0.03em | uppercase | Founders Grotesk | Primary hero headline and prominent section-level titles. |
| h2 | 40.5px | 400 | 1 | -0.03em | uppercase | Founders Grotesk | Section headings such as Featured Work, About, and Latest News. |
| h3 | 22px | 400 | 1 | -0.018em | — | Founders Grotesk | Project names and supporting content headings. |
| h4 | 21.5px | 400 | 0.9 | -0.03em | uppercase | Founders Grotesk | Compact uppercase subheads and secondary section labels. |
| body | 16px | 300 | 1.2 | 0 | — | Founders Grotesk | Light-weight explanatory paragraphs and studio descriptions. |
| caption | 14px | 400 | 1 | -0.02em | uppercase | Founders Grotesk | Small uppercase metadata and project-category labels. |
| button | 14px | 400 | 1 | -0.02em | uppercase | Founders Grotesk | Compact uppercase CTA and view-action labels. |
| nav | 101px | 400 | 0.8 | -0.03em | uppercase | Founders Grotesk | Large uppercase display-style navigation or menu text. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 7, 12, 14, 20, 24, 29, 32, 37, 58, 115 px.
- Section rhythm 58px · element gap 29px · card padding — · max content width 1382px.

The page uses a broad canvas measured at a 1382px maximum width, with content aligned to a consistent outer edge. The hero statement spans much of the width, then project media forms a two-column grid with a narrow gutter. Subsequent modules alternate between two-column copy layouts, full-width lists, and image strips. Vertical spacing is generous but not uniform: tighter within captions and rows, more open between major sections. Dense client and award information is kept orderly with horizontal rules rather than cards.

## Shape & elevation

- Radius: pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `1.5s cubic-bezier(0.075, 0.82, 0.165, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows or decorative gradients. Project images sit directly on the canvas, and cards have square corners rather than rounded containers. Thin grey rules provide separation in brand, award, and footer lists; dark and muted section backgrounds create depth through tonal contrast instead of layering.

## Imagery

Real project photography and video dominate the visual storytelling: campaign scenes, websites shown on devices, studio imagery, and editorial news photographs. Media is cropped into rectangular frames, often in paired columns or horizontal strips, with little decoration around it. Image colour is allowed to remain natural and sometimes warm or dark; it belongs to the featured work rather than the site’s interface palette.

## Components

### Top navigation

Small wordmark at the left and a compact row of text links aligned along the top edge; use #2a2a2a without filled button treatments.

### Hero statement

Oversized uppercase Founders Grotesk text with tight tracking and compressed line-height, followed by a small two-line uppercase strapline.

### Featured project cards

Square-corner project photography in a two-column grid, followed by small uppercase service metadata and a simple project title.

### Client stories

A row of client names with concise copy and small dark pill-shaped view links; preserve the otherwise flat layout.

### Brand experience list

Full-width client rows with brand name, service category, and a compact more action, divided by thin grey hairlines.

### Awards list

Two-column section with introductory copy on one side and award organizations plus recognition details on the other.

### Footer contact block

Light closing section with a large work invitation, contact links, grouped business details, and a simple bottom navigation row.

### Measured component styles

- **Primary button** (“MENU +”): transparent background · text #2a2a2a · radius 0px · padding 0px · 400 16px Founders Grotesk
- **Link** (“GET TO KNOW US ABOUT US”): transparent background · text #2a2a2a · radius 0px · padding 0px · 400 16px Founders Grotesk
- **Card**: background #d6d6d6 · text #2a2a2a · radius 0px · padding 0px · 400 16px Founders Grotesk
- **Navigation item** (“DashDigital® — HOME WORK CASE STUDIES SE”): transparent background · text #2a2a2a · radius 0px · padding 0px · 400 16px Founders Grotesk

## Do

- Use the measured neutral colours as the interface foundation.
- Set prominent headlines in uppercase with tight tracking.
- Give project images large, clean rectangular frames.
- Use thin rules to organize dense lists.
- Keep links and controls visually understated.
- Vary section layouts while preserving clear alignment.

## Don't

- Do not add gradients or drop shadows.
- Do not introduce bright interface accent colours.
- Do not round project media into cards.
- Do not use heavy body text where light copy is measured.
- Do not crowd the hero statement with extra controls.
- Do not let image colours redefine the brand palette.

## Agent prompt

Build a new digital-studio page in Dash Digital Studio’s restrained editorial style. Use Soft Canvas (#f0f0f0) as the main ground and Studio Ink (#2a2a2a) for typography and navigation; reserve Gallery White (#ffffff), Stone Wash (#bcbcb4), and Near Black (#161616) for occasional surface shifts. Set Founders Grotesk or a close free substitute in oversized uppercase display headlines with tight negative tracking, balanced by light, quiet body copy and compact uppercase captions. Arrange project photography in simple rectangular grids, with plain metadata and titles beneath. Alternate broad two-column sections, full-width lists, and image strips, preserving generous section breathing room. Use Divider Grey (#d6d6d6) or Footer Rule (#cccccc) for hairlines. Keep the interface flat: no shadows, gradients, decorative cards, or unnecessary colour.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large uppercase studio statement above a two-column project grid. | top-level navigation, brand positioning | oversized typography, text-only navigation |
| 2 | feature-grid | Two-column project grid with image, category metadata, and title. | project discovery, case-study entry points | rectangular media, small uppercase captions |
| 3 | feature-split | Two-column introduction with a headline on one side and studio copy on the other. | studio introduction, about link | asymmetric text columns, plain text CTA |
| 4 | video | Centered video framed within the wide page canvas. | visual storytelling | embedded project video, large media frame |
| 5 | logo-cloud | Four-column row of client marks, short descriptions, and small actions. | client credibility, case-study links | logo-led columns, small dark pill links |
| 6 | comparison | Stacked full-width rows with client, service category, and more action. | expandable project discovery | horizontal hairlines, aligned text columns |
| 7 | gallery | Horizontal strip of multiple studio photographs. | team and studio context | cropped image strip, natural photography |
| 8 | stats | Two-column section with introduction and award organizations with details. | studio credibility, recognition overview | editorial text column, ruled award rows |
| 9 | content-feed | Two-column article feed with thumbnail, metadata, and headline. | article discovery, view-all link | image-and-text cards, compact metadata |
| 10 | contact | Light closing area with work CTA, contact details, and bottom link row. | contact conversion, business enquiries | large closing message, grouped footer links |

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