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

# Haley Park · Design System

> Ornate editorial design on a deep green canvas

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

Haley Park’s portfolio pairs delicate editorial typography with a deep evergreen canvas and finely drawn ornamental graphics. Work is presented as an airy, text-led catalogue, with restrained rules and playful details guiding the page from introduction to footer.

## North star

Keep the page feeling like a single dark-green editorial canvas, with ivory serif type and delicate ornament doing the structural work.

## Overview

The page is built around a nearly continuous evergreen canvas, #143930, so the portfolio reads as one composed editorial field rather than a stack of contrasting panels. Warm ivory #f8f2de carries the name, project titles, navigation, and other high-priority text; muted sand #bead89 quiets dates and secondary labels. Thin #456859 rules and outlines define the navigation and section dividers without introducing card-heavy UI, while the darker #12332b is reserved for subtle surface variation. High-contrast, slender serif lettering gives the interface a literary, slightly antique character. A wispy display face brings a more expressive flourish to the oversized name and curved contact message. Project titles sit in a loose multi-column catalogue over understated architectural line art, with generous breathing room between groups. Small plus marks, keyboard hints, fine borders, and ornamental motifs add structure without competing with the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Evergreen Canvas | `#143930` | `--color-evergreen-canvas` | brand | Dominant page canvas behind the introduction, project catalogue, contact prompt, and footer. |
| Warm Parchment | `#f8f2de` | `--color-warm-parchment` | neutral | Primary text for the name, project titles, navigation, and prominent links. |
| Moss Line | `#456859` | `--color-moss-line` | semantic | Fine navigation outlines, section dividers, and low-contrast decorative rules. |
| Muted Sand | `#bead89` | `--color-muted-sand` | accent | Secondary text such as project dates and supporting captions. |
| Deep Canopy | `#12332b` | `--color-deep-canopy` | surface | Subtle darker surface variation and understated navigation or ornamental details. |

### Semantic aliases

`--color-canvas` → `#143930` (Evergreen Canvas) · `--color-surface` → `#12332b` (Deep Canopy) · `--color-text` → `#f8f2de` (Warm Parchment) · `--color-text-muted` → `#bead89` (Muted Sand) · `--color-border` → `#456859` (Moss Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f8f2de` | `#143930` | 11.31:1 | AAA |
| `#f8f2de` | `#12332b` | 12.22:1 | AAA |
| `#bead89` | `#143930` | 5.75:1 | AA |
| `#bead89` | `#12332b` | 6.21:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| EditorialOld | `--font-display` | webfont | 200 | Headings, project titles, and navigation | Cormorant Garamond |
| Old Standard TT | `--font-body` | webfont | 200 | Body copy, captions, and small labels | Old Standard TT |
| altesse-std-24pt | `--font-altesse-std-24pt` | webfont | 300 | Decorative display flourishes | Italianno |
| Wispy | `--font-wispy` | webfont | 100 | Oversized display name and expressive contact lettering | Bodoni Moda |

- **EditorialOld:** Very light serif; retain the delicate, tall editorial feel and subtle positive tracking.
- **Old Standard TT:** Light serif with comfortable leading; captions use capitalization styling.
- **altesse-std-24pt:** Restrained cursive accent, used sparingly for expressive ornamental lettering.
- **Wispy:** Extremely light, high-character display serif; reserve for brief, prominent flourishes.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 100 | 1 | -0.01em | — | Wispy | Expressive oversized name and curved contact message. |
| h1 | 32px | 200 | 1.2 | 0.005em | — | EditorialOld | Primary section or page headings. |
| h2 | 27px | 200 | 1.3 | 0.005em | — | EditorialOld | Secondary editorial headings and project group labels. |
| h3 | 21.5px | 200 | 1.3 | 0.005em | — | EditorialOld | Project titles and smaller prominent headings. |
| h4 | 21px | 200 | 1.2 | 0.005em | — | EditorialOld | Compact subsection headings. |
| body | 16px | 200 | 1.5 | 0 | — | Old Standard TT | Introductory copy and general explanatory text. |
| caption | 13px | 200 | 1.5 | 0 | capitalize | Old Standard TT | Project dates, classifications, and small metadata. |
| nav | 19px | 200 | 1.5 | 0.004em | — | EditorialOld | Top navigation and prominent footer links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 3, 4, 11, 12, 13, 15, 18, 22, 26, 28, 32, 51, 64 px.
- Section rhythm 51px · element gap 11px · card padding — · max content width 1389px.

A centered editorial composition sits within a measured maximum width of 1389px. The opening places a slim outlined navigation above a centered name, with short descriptors flanking it. Project work uses a loose multi-column arrangement rather than boxed cards; ornamental line art anchors the larger featured pieces. Fine horizontal rules and plus marks divide groups. Section rhythm is spacious, with a measured 51px section gap and 11px element gap, while small captions stay close to their titles. The overall density is comfortable, not sparse.

## Shape & elevation

- Radius: nav `5px` · xs `5px`
- Shadow `hairline` (nav, other): `rgb(18, 51, 43) 0px 2.4px 0px 0px`
- Motion: standard transition `0.3s ease-out` on interactive elements.

The interface is mostly flat, with no prominent card shadows or raised panels. Hairline borders and muted rules create separation, including a subtle measured shadow treatment around navigation details. Layering comes from line illustrations sitting behind text, not from stacked surfaces; preserve low contrast so decoration never overwhelms labels.

## Imagery

The visible portfolio relies on delicate, low-contrast architectural and geometric line illustrations rather than photography. Large symmetrical motifs sit behind or beneath project titles, serving as texture and framing rather than literal thumbnails. Keep graphics monochromatic and subdued against the green canvas; the image treatment should feel etched, ornamental, and secondary to readable ivory typography.

## Components

### Outlined navigation

A long, slender rounded outline contains evenly distributed serif links, small keyboard-hint boxes, and plus-sign end details.

### Intro masthead

Center the expressive portfolio name between short left and right descriptors on the uninterrupted evergreen canvas.

### Section divider

Use a fine muted rule with a centered italic serif label and small plus marks at its ends.

### Featured project catalogue

Arrange project titles in a loose multi-column grid, with dates in muted sand and etched ornamental graphics behind the entries.

### Compact project index

Present numerous small projects as text-led entries with concise category and year metadata, leaving room for a central decorative motif.

### Contact flourish

Set a short invitation in expressive curved display lettering, paired with a small understated supporting line.

### Social footer

Group social and archive links in compact rows, with muted separators and a small playful sign-off.

### Measured component styles

- **Primary button** (“iOS Flashchords 2024”): transparent background · text #f8f2de · radius 0px · padding 0px · 200 16px EditorialOld
- **Link** (“Alexa Plus 2024 - 2025”): transparent background · text #f8f2de · radius 0px · padding 0px · 200 16px EditorialOld
- **Navigation item** (“Work W”): transparent background · text #f8f2de · radius 0px · padding 0px · 200 16px EditorialOld

## Do

- Keep the evergreen canvas continuous across major sections.
- Use warm ivory for primary titles and navigation.
- Set dates and secondary metadata in muted sand.
- Prefer delicate serif typography over heavy sans-serif treatments.
- Use hairline rules and ornamental line art as structural cues.
- Leave generous breathing room around project groups.

## Don't

- Do not introduce bright, high-saturation accents.
- Do not turn every project into a raised card.
- Do not let illustrations compete with project names.
- Do not use heavy, bold display typography.
- Do not replace the editorial catalogue with dense dashboards.
- Do not add large photographic treatments absent from the visual language.

## Agent prompt

Build a new page in Haley Park’s editorial portfolio style. Use Evergreen Canvas (#143930) as the continuous backdrop, Warm Parchment (#f8f2de) for primary headings and links, Muted Sand (#bead89) for secondary metadata, and Moss Line (#456859) for hairline dividers and outlines; reserve Deep Canopy (#12332b) for subtle surface contrast. Choose slender serif typography, with an expressive display face only for a brief focal flourish. Organize content as an airy text-led catalogue with loose columns, fine section rules, small ornamental marks, and restrained etched line art behind—not over—the content. Keep surfaces flat, borders delicate, and hierarchy clear through spacing and type rather than strong fills. Preserve a literary, slightly antique mood without adding loud colors, heavy shadows, or dense card UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered masthead below a slim full-width navigation; brief descriptors flank the display name. | Top-level navigation, Keyboard hints | Outlined pill navigation, Expressive serif name, Plus-sign ornaments |
| 2 | feature-grid | Loose multi-column featured work followed by a compact project index with a central ornamental motif. | Project links, Year and category metadata | Text-led project grid, Fine section dividers, Etched line-art backdrop |
| 3 | cta | A small centered contact invitation separated from the project list by ample open space. | Contact invitation | Curved display lettering, Small supporting caption |
| 4 | footer | Compact rows of social links, secondary destinations, and a final sign-off. | Social navigation, Archive access | Small serif link rows, Muted ornamental details |

## Source CSS custom properties (selected)

```css
--font-family-wispy: "Wispy",serif;
--font-family-altesse: "altesse-std-24pt",cursive;
--font-family-gta: "GTA",sans-serif;
--font-family-gta-mono: "GTA Mono",monospace;
--font-family-editorial-old: "EditorialOld",serif;
--font-family-old-standard: "Old Standard TT",serif;
--grid-spacing: clamp(1.5rem,2vw,1.6rem);
```

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