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

# Daniel Sun · Design System

> Quiet editorial framing for expressive digital work

**Theme:** light · **Industry:** portfolio · **Source:** https://danielsun.space/ · **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 restrained white portfolio framework lets oversized serif messaging and colorful client work take focus. Fine grid lines, compact controls, and polished project tiles give the page a precise, tactile feel.

## North star

Keep the interface quiet and finely structured so editorial typography and client work provide the visual impact.

## Overview

The visual system is built on a white canvas, with black typography and delicate gray rules defining the page rather than broad colored bands. A soft yellow glow at the top adds a restrained note of warmth; stronger colors belong mainly to client project imagery, not the core interface palette. Large, left-aligned serif display copy gives the hero an editorial voice, while the surrounding interface uses compact sans-serif text. The centered page frame is organized as a fine-lined grid, with a narrow top navigation, expansive hero area, and a staggered gallery of rounded project previews. A brief italic experience line separates the introduction from the work. Spacing feels measured and compact around controls and labels, but generous around major statements and section breaks. Project thumbnails bring varied art direction into an otherwise quiet, consistently framed layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation background, and the open space surrounding the project gallery. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, body text, and the dark surfaces of compact CTA controls. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Muted supporting text, including secondary descriptions and subdued labels. |
| Mist Gray | `#f5f5f5` | `--color-mist-gray` | surface | Subtle edge tones in pale gradients; secondary to the white canvas. |
| Soft Graphite | `#808080` | `--color-soft-graphite` | neutral | Minor gradient transition tone, not a defining interface color. |
| Deep Charcoal | `#1a1a1a` | `--color-deep-charcoal` | neutral | Appears in subtle gradient transitions and dark project imagery; not a broad page surface. |
| Pencil Gray | `#b2b2b2` | `--color-pencil-gray` | neutral | Occasional subdued text detail and fine visual contrast rather than prominent interface text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#666666` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |

### Gradients

- `linear-gradient(120deg, rgb(245, 245, 245) -82%, rgb(255, 255, 255) -68%, rgb(255, 255, 255) -21.8055%, rgb(245, 245, 245) -4%)`
- `linear-gradient(120deg, rgb(247, 247, 247) -53%, rgb(255, 255, 255) -43%, rgb(255, 255, 255) -21%, rgb(247, 247, 247) -12%)`
- `linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Display | `--font-body` | webfont | 400 | Interface copy, navigation, labels, and supporting text | Inter |
| LT Superior Serif Regular | `--font-display` | webfont | 400 | Large editorial hero statement and principal section headings | Cormorant Garamond |
| EB Garamond | `--font-eb-garamond` | webfont | 400 | Italic supporting experience line and occasional serif accents | EB Garamond |

- **Inter Display:** Regular weight throughout; compact interface text and restrained tracking.
- **LT Superior Serif Regular:** Regular serif with tight negative tracking for prominent display copy.
- **EB Garamond:** Regular serif treatment; use italics for the short experience statement.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.13 | -0.047em | — | LT Superior Serif Regular | Large editorial hero statement. |
| h1 | 30px | 400 | 1.33 | -0.017em | — | LT Superior Serif Regular | Primary introduction and prominent headline treatment. |
| h2 | 21px | 400 | 0.95 | -0.024em | — | Inter Display | Compact sans-serif secondary headings. |
| h3 | 20px | 400 | 1.2 | 0.005em | — | EB Garamond | Serif supporting headings and editorial accents. |
| body | 16px | 400 | 1.63 | 0.006em | — | Inter Display | Paragraphs, project descriptions, and supporting copy. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter Display | Navigation labels, project tags, and compact metadata. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 4, 6, 7, 8, 9, 10, 12, 16, 24, 32 px.
- Section rhythm 32px · element gap 10px · card padding — · max content width 1200px.

A centered page frame uses the measured 1200px maximum width and a fine, column-based grid. The hero is left aligned, with generous open space around its large headline; the narrow top bar centers the designer name between compact controls. A slim italic statement creates a transition into a two-column, staggered project gallery, followed by a ruled client list and spacious content sections. The overall density is compact at the control and label level, but broad section breaks keep the page from feeling crowded.

## Shape & elevation

- Radius: button `10px` · card `12px` · media `12px` · link `9999px` · xs `6px` · sm `7px` · md `8px` · lg `10px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (card): `rgb(204, 204, 204) 1px 1px 0px 0px`
- Shadow `lg` (card): `rgb(255, 255, 255) 0px 0px 0px 7px, rgba(0, 0, 0, 0.2) 0px 6px 16px 0px, rgba(0, 0, 0, 0.15) 0px 1px 3px 6px, rgba(0, 0, 0, 0.25) 0px 0px 8px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 8px`
- Shadow `lg-2` (card): `rgb(255, 255, 255) 0px 0px 0px 6px, rgba(0, 0, 0, 0.2) 0px 6px 16px 0px, rgba(0, 0, 0, 0.15) 0px 1px 3px 6px, rgba(0, 0, 0, 0.25) 0px 0px 8px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 7px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.1) 0px -1px 1px 0px inset, rgba(255, 255, 255, 0.65) 0px 1.5px 1px 0px inset, rgba(0, 0, 0, 0.03) 0px 4px 2px 0px inset, rgba(255, 255, 255, 0.7) 0px -8px 8px 0px inset, rgba(0, 0, 0, `
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0.15) 1px 0px 0px 0px`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.65) 0px 1.5px 1px 0px inset, rgba(0, 0, 0, 0.03) 0px 4px 2px 0px inset, rgba(255, 255, 255, 0.7) 0px -8px 8px 0px inset, rgba(0, 0, 0, `

The page relies on thin gray rules and a visible grid more than heavy card shadows. Project previews have softly rounded corners and subtle, tactile edge treatment; compact black buttons use inset highlights and restrained shadowing. Keep layers clear but avoid floating, oversized panels.

## Imagery

A varied portfolio gallery combines website previews, brand identities, digital product screens, and illustrative artwork. Tiles are shown as substantial, rounded previews with their own color and art direction, rather than being forced into a uniform palette. Small dark project-category labels sit over or near the images. The hero itself is mostly typography and open space, with a soft yellow glow adding atmosphere behind it.

## Components

### Top navigation

A narrow white bar places a compact Works/Story switch at left, the designer name in the center, and a dark chat control at right.

### Hero statement

Large, left-aligned serif introduction sits over a mostly white field with a gentle warm yellow glow near the top.

### Primary project CTA

Compact black pill-shaped button with subtle inset shine, shadow, and a small directional icon.

### Project gallery

A staggered two-column sequence of rounded portfolio previews, mixing client websites, identity work, and product imagery.

### Project labels

Small, high-contrast category chips identify each work sample with client and discipline metadata.

### Client logo grid

A ruled, multi-column client list uses compact monochrome wordmarks against a white background.

### Measured component styles

- **Primary button** (“Start a project with me”): background #000000 · text #0000ee · radius 10px · padding 0px 10px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.4) 0px -1px 1px 0px inset, rgba(255, 255, 255, 0.3) 0px -4px 5px
- **Link** (“Clerk Web design Marketing”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“Web design I start from scratch, define ”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif · shadow rgb(204, 204, 204) 1px 1px 0px 0px

## Do

- Use white as the dominant page surface.
- Set the hero in a large, tightly tracked serif.
- Keep navigation and project metadata compact.
- Frame work samples with fine rules and soft corners.
- Let project imagery supply most of the color.
- Separate major content with generous white space.

## Don't

- Do not introduce broad saturated interface bands.
- Do not use heavy shadows on every card.
- Do not center the main hero statement.
- Do not make interface labels oversized.
- Do not flatten all portfolio imagery into one visual style.
- Do not substitute thick borders for the fine grid.

## Agent prompt

Build a new designer portfolio page in this visual language: an editorial, grid-framed layout on Gallery White (#ffffff), with Studio Ink (#000000) typography and Quiet Gray (#666666) for supporting copy. Use a high-contrast serif for the large, left-aligned introduction and a restrained sans-serif for navigation, captions, and labels. Add only a faint warm glow near the top; reserve stronger color for the work itself. Organize project previews in an asymmetric two-column gallery, separated by thin gray rules and generous section breaks. Use compact black pill controls with subtle inset highlights, softly rounded media, and small project-category chips. Keep the interface minimal and precise, and allow each portfolio item to retain its own visual identity.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Centered fine-lined page grid with left-aligned hero, staggered two-column project gallery, client logo rows, and spacious lower content. | Primary project inquiry CTA, Works and Story navigation, Project-category labels | Serif display headline, Soft yellow hero glow, Rounded project previews, Fine grid rules, Compact dark controls |

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