CURATED · OPEN · FREE

Haleys

A scholarly portfolio blending gothic typography with muted, mossy tones.

PortfolioCurationTypographyEditorialCalm

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://haleys.design

📦 Browse pack contents →

Identity DNA

artisanalscholarlygothiccuratedtimeless

A handbound thesis on a dark oak desk

Color

#f8f2deInk

#bead89Ink soft

#12332bBG

#5a7c6bMuted

rgba(248, 242, 222, 0.2)Line

High-contrast parchment on deep forest green

Typography

blackletter · transitional-serif

display72px · 400
h132px · 400
body20px · 300
caption16px · 200

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing between sections and grid items

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Delicate 1px lines in faded parchment or semi-transparent green

0px 2.4px 0px 0px #12332b

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Symmetrical grid with central alignment and wide margins

Motion & Interaction

240msmicro

300mssmall

800msmedium

ease-outeasing

Smooth background-color and border-color transitions on hover · Fill and stroke transitions for decorative SVG elements

Subtle color shifts and underlines for navigation and project links · Immediate visual response via cursor pointer state

Components

button Text-based navigation with subtle borders and lowercase/italic styling
card Text-based project listings without solid backgrounds
chip Small outlined badges (e.g., 'w', 'T', 'A') in the navigation bar
hero Large blackletter name centered with serif taglines flanking it

Voice & Don'ts

Tone Artisanal, scholarly, slightly whimsical
Headlines Elaborate blackletter and transitional serif, often centered
CTAs Subtle and integrated, avoiding aggressive buttons

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.
Avoid: Neon colors
Avoid: Aggressive sans-serif typography
Avoid: Dense text blocks without breathing room
Avoid: Highly saturated or warm-toned backgrounds
Avoid: Loud calls to action

Inside the pack — real screenshots

Haleys — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko