# Haleys · Design system migration spec

> Source: https://haleys.design  ·  Curated by OpenDesign  ·  en

> This site is worth including as an excellent example of how to execute a highly specific, scholarly aesthetic using a limited but powerful combination of blackletter and transitional serif typography on a deep, muted background.

## 1. Identity DNA

The design system for Haleys is conceived as a handbound thesis on a dark oak desk: scholarly, deliberate, and richly tactile. It merges gothic gravitas with curated restraint, positioning itself not as a fleeting portfolio but as a considered artifact.

**One-liner:** A scholarly portfolio blending gothic typography with muted, mossy tones.
**Keywords:** artisanal · scholarly · gothic · curated · timeless
**Analogy:** A handbound thesis on a dark oak desk

## 2. Color

Color operates as a foundational atmosphere rather than mere decoration. The palette is built upon a high-contrast principle, pairing deep forest green with creamy parchment text and mossy green accents to evoke a calm, scholarly environment.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#12332b` | main background |
| `--ink` | `#f8f2de` | body text |
| `--ink-soft` | `#bead89` | secondary text |
| `--muted` | `#5a7c6b` | placeholder |
| `--line` | `rgba(248, 242, 222, 0.2)` | divider |

**Color principle:** High-contrast parchment on deep forest green

The core principle is high-contrast parchment on deep forest green, a combination that prioritizes legibility and mood in equal measure.

## 3. Typography

Typography is the system's most distinctive voice, carefully avoiding the modern sans-serif in favor of an artisanal, scholarly blend. The hierarchy is established through an elaborate blackletter for the main identity and elegant transitional serifs for project titles and navigation, each role clearly defined.

- **Display:** blackletter
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -1px | Main title |
| h1 | 32px | 1.2 | 400 | 0.1px | Project title |
| body | 20.8px | 1.5 | 300 | 0.1px | Subtitle and navigation |
| caption | 16px | 1.5 | 200 | 0.1px | Metadata and dates |

## 4. Spacing

Vertical rhythm is established through generous spacing between sections and grid items, creating a measured, unhurried pace for reading and browsing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections and grid items

## 5. Surfaces

Surfaces are defined by depth and delicate boundaries rather than solid containers. Shadows are subtle and minimal, while borders are rendered as fine, 1px lines in parchment or semi-transparent green.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 2.4px 0px 0px #12332b
- **Borders:** Delicate 1px lines in faded parchment or semi-transparent green

## 6. Layout

The layout skeleton is a symmetrical grid centered on the page with wide margins, creating a formal, balanced frame. Content is arranged with generous breathing room, favoring spaciousness and line work over dense, multi-column complexity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Symmetrical grid with central alignment and wide margins

## 7. Motion & Interaction

Motion is applied with restraint and purpose, serving as a subtle enhancement to interaction rather than a primary feature. The philosophy prioritizes smooth, elegant transitions—such as background-color shifts and SVG fill changes—over abrupt or decorative animation.

- **Durations:** micro 240ms · small 300ms · medium 800ms
- **Easing:** `ease-out`
- **Patterns:**
  - Smooth background-color and border-color transitions on hover
  - Fill and stroke transitions for decorative SVG elements

- **Hover:** Subtle color shifts and underlines for navigation and project links
- **Click:** Immediate visual response via cursor pointer state
- **Transition:** All properties transition smoothly at 240ms-400ms
- **Keyboard:** Standard tab navigation supported

## 8. Voice & Don'ts

The editorial voice is artisanal, scholarly, and slightly whimsical, reflected in headline styles that use elaborate blackletter and transitional serif. Calls to action are intentionally subtle and integrated, avoiding aggressive buttons or loud directives.

- **Tone:** Artisanal, scholarly, slightly whimsical
- **Headline style:** Elaborate blackletter and transitional serif, often centered
- **CTA style:** Subtle and integrated, avoiding aggressive buttons
- **Avoid:** Neon colors / Aggressive sans-serif typography / Dense text blocks without breathing room / Highly saturated or warm-toned backgrounds / Loud calls to action

### Don'ts
- ❌ Don't use a clean, modern sans-serif — screenshot shows a mix of blackletter and transitional serif.
- ❌ Don't use bright or saturated background colors — screenshot shows a deep, muted forest green (#12332b).
- ❌ Don't use high-contrast call-to-action buttons — screenshot shows subtle, text-based navigation links.
- ❌ Don't use a complex, multi-column grid with heavy borders — screenshot shows a spacious, symmetrical layout with delicate lines.
- ❌ Don't use a playful or whimsical color palette — screenshot uses a restrained palette of cream (#f8f2de) and mossy green (#5a7c6b).
- ❌ Don't use aggressive drop shadows or heavy visual weights — screenshot shows very subtle, minimal shadow effects.

The system deliberately avoids modern sans-serif typography, bright saturated colors, and dense text blocks, maintaining its curated, timeless character.

## System Prompt (paste into AI tool)

```
This site is a personal portfolio for a software designer named Haley Park. It positions itself as a scholarly, artisanal space for 'software design & assorted tomfoolery'. The primary background color is a deep forest green (#12332b), with text rendered in a creamy parchment (#f8f2de) and a secondary mossy tone (#5a7c6b) for metadata and decorative elements. The typography is highly distinctive, featuring a mix of elaborate blackletter for the main name and elegant transitional serifs for project titles and navigation. Critical design rules include avoiding modern sans-serif fonts, bright or saturated colors, aggressive call-to-action buttons, dense text blocks, and heavy drop shadows. The layout is spacious and symmetrical, prioritizing breathing room and delicate line work over heavy containers.
```