Figure 1. West Texas Landscape, January 2026.

DESIGN

Interface Guidance

This page details font-sizes, color choices, the overall hierarchy and design language of the site. It's probably too much detail, but it remains helpful for me to see in building out the site.

Palette

global.css @theme + the two dark blocks · src/data/palette.ts · right half of a tile = its tints, strongest first · hex shown for the mode you're in (◑ to flip); the Pantone names belong to the light values

  • ink #1a1a1a#f1eaf7

    headings, strong, figure numbers

    wash neutral ground — chips, cite box, slide frames

  • ink-soft #4a4a4a#dcd6e2

    body text

  • ink-faint #767676#958f9c

    meta, captions, section labels

    line = line — rules, dividers, pills, underlines

  • bg #ffffff#120a1a

    page ground

  • deep-blue #0f4e67#4f93b8 · Moroccan Blue

    talk button, P. figures

    line hero nav active, the 404

  • blue #2a4b7c#94c1f8 · Galaxy Blue

    links

    line Published button border

    wash active chip, card disc, button hover (incl. PDF)

  • teal #0a6f69#4aa39b · Tidepool

    eyebrows, Slides / Recording, inbox counter, W. figures

    line Slides button border

    wash card disc, button hover

  • green #008658#75d696 · Jelly Bean

    my name in author lists, ACM DL button

    line ACM DL border

    wash ACM DL hover

  • lime #a6be47#a6be47 · White Grape

    accent, not used yet

  • amber #bb5c14#fea571 · Hawaiian Sunset

    Forthcoming, awards, card accent

    line Forthcoming border

    wash Forthcoming fill, card disc

  • tangerine #ff8812#ff8812 · Autumn Glory

    T. figures

  • berry #b91428#e04a58 · Goji Berry

    arXiv button, Q. figures

    line arXiv border

    wash arXiv hover

  • pink #fa018b#fa018b · Pink Glo

    Subscribe button, S. figures

  • violet #784384#a672b8 · Bright Violet

    H. figures

Tints — two strengths, no others: -wash 10% any quiet fill (pills, hover, card discs, chips; neutral = ink-wash) · -line 40% any quiet edge (outlined borders, underlines; neutral = ink-faint-line). Greys: ink · ink-soft · ink-faint, plus ink-wash and line (= ink-faint-line) — five, no more.

Everything above is a --color-* token and follows dark mode. Still fixed by design: the white text and black gradient over the hero photo (HeroHeader.astro), and the white label on the Subscribe button.

Type

Wordmark · Barlow Condensed 700 · --font-display · self-hosted

PGK

Page titles · Hanken Grotesk 500 · --font-title · main h1 at 3xl

Privacy Nutrition Labels

Body · Hanken Grotesk variable 100–900, upright + italic · --font-body · self-hosted · Tailwind's own ladder on a 17px root, untouched, no arbitrary sizes · two faces: Barlow Condensed (wordmark) · Hanken Grotesk (everything else)

PGK

5xl · wordmark, Barlow Condensed 700 · 4xl on phones, 2xl in the compact header

Page title

3xl · Hanken 500 · main h1

Section heading — h2

2xl bold

Subheading — h3, paper titles

xl semibold

Lift-out — a project's opening paragraph

xl · .project-body > p:first-of-type

Prose — running text on detail pages

lg · .prose-lg

Nav

base semibold, tracking-wide

Base — index-page text, intros

base

Small — paper rows, news, lists, meta

sm

Eyebrow

sm bold, tracking-widest

Section label

sm bold, tracking-widest

Extra small — dates, captions, footnotes

xs

Label — buttons, pills, chips, tags

xs uppercase, tracking-wider

Eyebrow · uppercase tracking-widest text-sm font-bold text-teal mb-3

Speaking

Section label · homepage · text-sm font-bold uppercase tracking-widest text-ink-faint

Featured Projects

All-caps words · <caps> · 0.92em + tracking, so acronyms don't shout

USENIX ENIGMA · SOUPS · CV · RSS · ORCID — versus bare USENIX ENIGMA

Prose

.prose.prose-lg · a real project body (projects/privacy-nutrition-labels.md) · links · on off-site links · numbered <figure> · hover-# heading anchors

My dissertation focused on designing better privacy displays for people.

Privacy policies (the corporate-and-lawyer-developed solution to stave off the threat of regulation in the mid-1990s) are long, text documents, often written with legal jargon and require a high reading level for comprehension, don’t work, and have never worked for people online.

Two initial studies on re-designing privacy policies inspired by formal labeling efforts (nutrition, energy, etc.) showed that nearly any re-design can improve privacy policies for consumers. The prior effort here was the work I won the SIGCHI Student Research Competition with, and later the ACM SRC Grand Finals (best research, graduate level).

Privacy Labels: Design Inspiration & Evolution
The design journey we took from 2007-2010, including nutrition, energy, and financial privacy labels that we took inspiration from.

But it was clear that adoption here would be a giant mess. Every website would need to decide to use this standard label format, or regulation would need to be created to require its use. Neither seemed likely.

At this moment though, the early app stores (Apple App Store, Android Store) were launching. These two centralized providers did have the ability to require every app on their marketplaces to use a standard privacy display, and both had already developed sets of permissions to put security controls in place. Why not privacy labels too?

We wrote two studies to understand how privacy and permissions were understood, what role they play in consumer decision making, and developed a prototype label for Android to run simulated tests on. We found these privacy labels did directly influence user decision making, though with substantial limits.

We published the work (2012 & 2013), I defended my dissertation, and the team moved on to other research ideas.

~ ~ time passes ~ ~

Then, in 2020, we (Lorrie) received a call that said within hours Apple would be launching a version of these labels. They announced them at WWDC on June 22, 2020. At the time, I was working at Google, though not on Android, and they quickly (shockingly!) figured out I was at the company, and found me to ask if I had done this work and if I had any ideas for improving upon the Apple labels. I suggested a few ideas, which as I expected were not taken up. And within months Google had announced they too would have Data Safety Labels (not privacy!) that also bore a strong resemblance to the label designs I had made in the summer of 2012. (I tell this story in the Test of Time talk that USEC awarded us for the first of the two app papers)

Our Privacy Label, Apple’s Privacy Label, and Google’s Data Safety Label
A side-by-side comparison of three data privacy and safety labels: our research-tested design from 2012, and Apple's and Google's labels at announcement, in 2020 and 2021.

While this is one of my greatest stories of research impact – Lorrie, I, and our team didn’t (to our knowledge) ever directly pitch these labels to any of the right people that made this happen. We published good work, and it landed in the right places, eventually, somehow, likely with a fair bit of luck!

… and it’s a story for another time how helpful these labels are now that they have been in use for several years…

Buttons & pills

Talk index · primary (deep-blue) + secondary (outlined) · talks/index.astro

Paper links · PaperLinks.astro · size="lg" (detail page) then "sm" (list row) · Forthcoming pill

Keyword filter pill · /papers/ · .kw-pill

privacyusable securityhcip3p

Blog tag · blog/[...slug].astro

poetryfilmtartan

Lists & cards

Paper row · PaperEntry.astro · keyword chips are .kw-tag, filled, unlike the pills

  • 2009

    1.Patrick Gage Kelley, Joanna Bresee, Robert W. Reeder, Lorrie Faith Cranor. Design of a Privacy Label. Proceedings of the 5th Symposium on Usable Privacy and Security (SOUPS '09), 2009.

    1st Place, ACM SIGCHI Student Research Competition, 2009.

News row · homepage · divide-y divide-line border-y

  • Sep 2026

    A long, long overdue v2.0 of pgk.io, finally launched. As a person who loves to document and archive, it’s just been irresponsible of me to not.

  • Aug 2026

    Co-wrote one of CRA’s new AI-education recommendation reports Read the press release

Figures

Body figure · <figure class="md-figure"> · "Figure N." is a CSS counter · caption = image title

Our Privacy Label, Apple's Privacy Label, and Google's Data Safety Label
A side-by-side comparison of three data privacy and safety labels: our research-tested design from 2012, and Apple's and Google's labels at announcement, in 2020 and 2021.

Hero caption · top-right of every hero · heroCaption → "Figure 1." and body figures start at 2

Figure 1. West Texas Landscape, January 2026.

/figures/ prefixes · position in figures.json is the number, forever

H.4 HeroP.4 ProjectQ.4 QuarterlyW.4 WritingT.4 TalkS.4 See Attached Figure

Talk essay wayfinding

Scroll-progress line (3px, top of viewport, --color-blue) · "N / M" counter (bottom-right) · ←/→ keys · #sN slide anchors

24 / 39

Components

Cite box · CiteBox.astro · BibTeX from frontmatter

Cite this paper
@inproceedings{kelley2009design,
  title     = {Design of a Privacy Label},
  author    = {Kelley, Patrick Gage and Bresee, Joanna and Reeder, Robert W. and Cranor, Lorrie Faith},
  year      = {2009},
  doi       = {10.1145/1572532.1572538},
  url       = {https://doi.org/10.1145/1572532.1572538},
  booktitle = {Proceedings of the 5th Symposium on Usable Privacy and Security (SOUPS '09), 2009},
  publisher = {Association for Computing Machinery},
  address   = {New York, NY, USA},
}

Inbox counter · InboxCounter.astro · hourly IMAP sample + 14-day sparkline

2.7k emails in the inbox on the evening of September 19th

Newsletter signup · NewsletterSignup.astro · our own form against Ghost's members API · button = pink

Occasionally, I'd love to send you a short update via electronic mail.

If you'd like that too, you can put your email in the little box below, where I promise to do my best to take good care of it (I'm not going to sell it. It's just for my little letters.)

Theme toggle · ThemeToggle.astro · the ◑ in the hero corner · system → dark → light

Layout

max-w-4xlindex pages, lists, keywords, this page
max-w-3xldetail pages — project, paper, blog post
max-w-2xlledes and single-column text blocks inside a wider page
px-6 py-12page gutter and top/bottom padding
≥ 64remblog footnotes lift into the right margin as sidenotes
@media printchrome hidden, light palette forced — /cv/ and /papers/ print as documents
heroevery page, photographic, Barlow Condensed wordmark + Hanken nav on one baseline, ◑ toggle; writing pages opt out (noHero)