AffectiveDesign Lab 감성 디자인 연구실
KO中

Design

The rules this site sets itself by, and why they were settled that way.

A lab that argues for measurement should measure its own screen. The values and contrast figures on this page are read from the live stylesheet at build time, and the decisions below are a record of what was run into while building it.

Two grounds

Day and dark. The visitor's system setting decides, and an explicit choice wins over it. The accent is the same yellow in both — a colour that changes with the ground is not one colour. What changes is that yellow when it has to carry text.

Day

  • ground#f7f6f2
  • card#fff
  • soft#eae8df
  • hairline#b0b0a1
  • muted#4a4a41
  • ink#14140f
  • accent#ffc600
  • accent as text#7d5c00
  • on accent#0f0f0f
  • beat#1a5f58

body 17.08:1 / muted 8.27:1 / on accent 12.17:1

Dark

  • ground#0f0f0f
  • card#1a1918
  • soft#161615
  • hairline#333130
  • muted#9a9691
  • ink#f1eeea
  • accent#ffc600
  • accent as text#ffc600
  • on accent#0f0f0f
  • beat#6fb3a6

body 16.57:1 / muted 6.52:1 / on accent 12.17:1

Type

Affect

Cormorant Garamond + Gowun Batang / 300 / display

Body stays sans, legible even in a long list.

Pretendard / 400 / body

SCIE Q1 / 2026-08 / DOI

IBM Plex Mono / the machine-readable margins

Sizes

Five steps, no more. The figures are desktop then phone, and every step grows on a phone, where the same size reads smaller.

labelsMeasured, then given a shape12 / 12index tags and role names — marks rather than prose
marginaliaMeasured, then given a shape13.5 / 13.5dates, counts, short glosses
secondaryMeasured, then given a shape14.5 / 15captions and footnotes
bodyMeasured, then given a shape16 / 16.5paragraphs, lists, buttons
leadMeasured, then given a shape17 / 17.5page ledes and definitions

Space

The homepage and all site pages share the same content width. Side margins are at least 7% on desktop, 5% at widths up to 1,100px, and 24px at widths up to 760px. Long text has a separate reading width.

Steps

Twelve steps, and nothing in between. The small ones pad the inside of things; the large ones are the breath between sections. The figures are desktop then phone, and only the large steps shrink on a phone — what a narrow screen needs less of is air between sections, not padding inside a button.

sp-12 / 2a hair beside a rule
sp-24 / 4inside a chip
sp-38 / 8between chips, between lines
sp-412 / 12inside a card
sp-516 / 16between paragraphs
sp-620 / 20
sp-724 / 24between columns
sp-832 / 24between groups
sp-940 / 32
sp-1048 / 40before a heading
sp-1164 / 48
sp-1280 / 56between sections

Shape

pill — anything you can press 8px — anything that holds a 9px dot marks a section

The mark

The drawn circle is the state as measured; the filled one is the state a design aims for. Everything the lab does is the distance between them.

Decisions

Latin display sizes are not reused for Hangul

A 96px Latin headline, copied over, landed far heavier in Hangul, which fills its em where Latin leaves air. Titles came down from 124px to 82px.

No monospace on lines that mix scripts

No monospace face carries Hangul, so a participant list split its typography mid-line, with only the Latin names landing on the mono face.

Text on the accent comes from a token

The accent is dark by day and light on the dark ground, so a button with white text baked in measured 1.9:1 on one of them.

One accent-filled surface per screen

Colour means something only while it stays rare. Here it marks the present state, the state a design aims for, and the invitation to join.

Contrast is measured, not claimed

The figures here are computed at build time from the stylesheet itself, so the document cannot drift from the site.

Every step grows on a phone

The same size reads smaller at arm's length. Text under 15px fell from 77% to 14%, and what is left there is tags and dates.

The hours

What this site cost to build. The columns are hands-on hours: reading, deciding, typing. Time spent waiting is not in them. Posting news and correcting a member is running the site rather than building it, so it is counted separately: 4.0 hours of it.

0246 08/21 — 0.28 h — 14 messages2108/24 — 0.78 h — 15 messages2408/25 — 4.57 h — 71 messages2508/26 — 1.52 h — 24 messages2608/27 — 1.0 h — 18 messages2708/28 — 1.32 h — 26 messages2808/29 — 1.02 h — 22 messages2908/30 — 0.61 h — 8 messages3008/31 — 2.3 h — 33 messages3109/01 — 3.01 h — 45 messages0109/02 — 0.63 h — 18 messages0209/04 — 0.91 h — 17 messages0409/06 — 0.42 h — 8 messages0609/07 — 0.23 h — 2 messages0709/08 — 1.28 h — 23 messages0809/09 — 1.87 h — 41 messages0909/10 — 0.13 h — 4 messages1009/11 — 0.63 h — 18 messages1109/12 — 1.33 h — 44 messages1209/13 — 0.34 h — 11 messages1309/14 — 0.61 h — 14 messages1409/15 — 1.14 h — 36 messages1509/16 — 0.51 h — 11 messages1609/17 — 0.57 h — 61 messages1709/18 — 1.42 h — 78 messages1809/19 — 0.12 h — 4 messages1909/20 — 0.44 h — 9 messages204.57
August / September — hours
As a table
Date Building Content Wall-clock Messages
2026-08-210.28 0.00.2114
2026-08-240.78 0.20.9415
2026-08-254.57 1.226.4471
2026-08-261.52 0.081.9524
2026-08-271.0 0.461.3918
2026-08-281.32 0.151.5526
2026-08-291.02 0.11.4922
2026-08-300.61 0.00.978
2026-08-312.3 0.242.6833
2026-09-013.01 0.534.4145
2026-09-020.63 0.00.918
2026-09-040.91 0.01.2317
2026-09-060.42 0.080.798
2026-09-070.23 0.00.622
2026-09-081.28 0.31.9323
2026-09-091.87 0.092.1741
2026-09-100.13 0.00.414
2026-09-110.63 0.140.8418
2026-09-121.33 0.191.4344
2026-09-130.34 0.00.2111
2026-09-140.61 0.00.6514
2026-09-151.14 0.01.5736
2026-09-160.51 0.00.7211
2026-09-170.57 0.170.6961
2026-09-181.42 0.01.1978
2026-09-190.12 0.00.094
2026-09-200.44 0.00.389

2026-08-24 to 2026-10-15, over 675 messages. The commits and the span are read from git at build time like the other figures here. The hours are not: they are measured from working-session records that are not in the repository, so the build cannot recompute them; the date and method sit beside the numbers in data/buildlog.yml and scripts/measure_worklog.py takes the measurement again. A break longer than 15 minutes starts a new stretch of work, and a gap of more than 12 minutes between messages counts as stepping away. What separates building from content is the files the commits in a stretch touched. Content work never once formed a stretch of its own — it always rode along with building — so the content figure is apportioned by that commit mix rather than measured. As a check, all 470 commits fall inside a detected stretch.