D/A Design Audit

Figma D/A Website updates 2026_handover → daylightandarchitecture.vercel.app · 26 findings · generated 2026-09-10 · responsive gallery →

Every check here compares design-system vocabularies — the type scale, spacing tokens and grid definitions each side is built from — rather than the dimensions of any particular element. Comparing rendered geometry would conflate a wrong token with content that is simply different; comparing the set of values a system is allowed to use does not. Findings marked triage are not auto-filed: they need visual confirmation first.

high DA-014 grid mobile

Grid gutter at mobile is 12px, design specifies 8px

"Main (M)" defines a 8px gutter and a 8px outer margin at mobile. 25 multi-column containers render a 12px gutter instead, and only 1 use the specified 8px.

Design

grid	Main (M)
pattern	COLUMNS
count	6
gutterSize	8
offset	8
sectionSize	57.67
alignment	STRETCH

Build

breakpoint	mobile
dominant	12
dominantUses	25

high DA-005 spacing-offscale desktopmobiletablet

Build uses a 72px spacing step that is not a design token

150 gap/padding declarations resolve to 72px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	72
uses	150
pages	23

high DA-002 type-detail mobile

mobile: "Sans/12px Bold Uppercase" is the right size but wrong weight

At mobile, 12px matches, but: weight 700 → 400. The design uses this style on 227 layers at this breakpoint.

Design

style	Sans/12px Bold Uppercase
family	VeluxGothic
fontSize	12
fontWeight	700
lineHeight	16
lineHeightRatio	1.33
letterSpacing	-0.24
case	UPPER
uses	227

Build

family	sans
fontSize	12
fontWeight	400
lineHeight	16
lineHeightRatio	1.33
letterSpacing	-0.24
case	uppercase
uses	13
pages	4

high DA-003 type-prominence mobile

mobile: "Sans/12px Uppercase" carries 43% of the design's text but 1% of the build's

At mobile the design applies Sans/12px Uppercase to 673 of 1561 text layers. The build renders that style on only 12 of 1101 elements. The dominant sans uppercase style at mobile is 16px (395 elements) — the responsive step to 12px looks unimplemented.

Design

style	Sans/12px Uppercase
family	VeluxGothic
fontSize	12
fontWeight	400
lineHeight	16
lineHeightRatio	1.33
letterSpacing	-0.24
case	UPPER
uses	677
usesAtBreakpoint	673
share	0.43

Build

family	sans
fontSize	16
fontWeight	400
lineHeight	20
lineHeightRatio	1.25
letterSpacing	-0.32
case	uppercase
uses	1404
pages	57

medium DA-015 grid mobile

No 6-column grid renders at mobile, but "Main (M)" defines one

The design's Main (M) grid is 6 columns, 8px gutter, 8px margin. The build renders 1, 12, 2-column grids at this breakpoint.

Design

grid	Main (M)
pattern	COLUMNS
count	6
gutterSize	8
offset	8
sectionSize	57.67
alignment	STRETCH

medium DA-001 type-detail tablet

tablet: "Serif/56px" is the right size but wrong line-height

At tablet, 56px matches, but: line-height 64px (1.14) → 48px (0.86). The design uses this style on 43 layers at this breakpoint.

Design

style	Serif/56px
family	Chronicle Deck
fontSize	56
fontWeight	400
lineHeight	64
lineHeightRatio	1.14
letterSpacing	-2.8
case	UPPER
uses	43

Build

family	serif
fontSize	56
fontWeight	400
lineHeight	48
lineHeightRatio	0.86
letterSpacing	-2.8
case	uppercase
uses	36
pages	10

medium DA-004 type-prominence mobile

mobile: "Sans/12px Bold Uppercase" carries 15% of the design's text but 1% of the build's

At mobile the design applies Sans/12px Bold Uppercase to 227 of 1561 text layers. The build renders that style on only 12 of 1101 elements. The dominant sans uppercase style at mobile is 16px (395 elements) — the responsive step to 12px looks unimplemented.

Design

style	Sans/12px Bold Uppercase
family	VeluxGothic
fontSize	12
fontWeight	700
lineHeight	16
lineHeightRatio	1.33
letterSpacing	-0.24
case	UPPER
uses	227
usesAtBreakpoint	227
share	0.15

Build

family	sans
fontSize	16
fontWeight	400
lineHeight	20
lineHeightRatio	1.25
letterSpacing	-0.32
case	uppercase
uses	1404
pages	57

low DA-019 design-debt desktoptablet

Design uses 19px VeluxGothic with no named text style

108 layers (e.g. "The Daylight Talks is a series of free, ") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	VeluxGothic
fontSize	19
fontWeight	400
lineHeight	23
lineHeightRatio	1.21
letterSpacing	-0.38
case	ORIGINAL
sample	The Daylight Talks is a series of free,
uses	108

low DA-020 design-debt desktop

Design uses 15px VeluxGothic with no named text style

106 layers (e.g. "search") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	VeluxGothic
fontSize	15
fontWeight	400
lineHeight	19
lineHeightRatio	1.27
letterSpacing	-0.3
case	UPPER
sample	search
uses	106

low DA-021 design-debt tablet

Design uses 56px Chronicle Deck with no named text style

5 layers (e.g. "DAYLIGHT AS TEMPORAL ELEMENT ") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	Chronicle Deck
fontSize	56
fontWeight	400
lineHeight	54
lineHeightRatio	0.96
letterSpacing	-2.24
case	UPPER
sample	DAYLIGHT AS TEMPORAL ELEMENT
uses	5

low DA-022 design-debt tablet

Design uses 16px VeluxGothic with no named text style

4 layers (e.g. "This package presents details of dayligh") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	VeluxGothic
fontSize	16
fontWeight	400
lineHeight	20
lineHeightRatio	1.25
letterSpacing	-0.32
case	ORIGINAL
sample	This package presents details of dayligh
uses	4

low DA-023 design-debt mobile

Design uses 28px Chronicle Deck with no named text style

3 layers (e.g. "“I LIKE TO THINK ABOUT A HOUSE AS A BIG ") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	Chronicle Deck
fontSize	28
fontWeight	400
lineHeight	24
lineHeightRatio	0.86
letterSpacing	-1.12
case	UPPER
sample	“I LIKE TO THINK ABOUT A HOUSE AS A BIG
uses	3

low DA-024 design-debt desktop

Design uses 45px Chronicle Deck with no named text style

1 layers (e.g. "Daylight investigations") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	Chronicle Deck
fontSize	45
fontWeight	400
lineHeight	39
lineHeightRatio	0.87
letterSpacing	-1.8
case	UPPER
sample	Daylight investigations
uses	1

low DA-025 design-debt tablet

Design uses 38px Chronicle Deck with no named text style

1 layers (e.g. "Daylight investigations") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	Chronicle Deck
fontSize	38
fontWeight	400
lineHeight	32
lineHeightRatio	0.84
letterSpacing	-1.52
case	UPPER
sample	Daylight investigations
uses	1

low DA-026 design-debt desktop

Design uses 35px Chronicle Deck with no named text style

1 layers (e.g. "celebrating daylight") sit outside the type scale. This is a gap in the design system, not a build defect.

Design

family	Chronicle Deck
fontSize	35
fontWeight	400
lineHeight	30
lineHeightRatio	0.86
letterSpacing	-1.4
case	UPPER
sample	celebrating daylight
uses	1

low DA-016 radius

Design corner radius 24px never renders in the build

Applied to 4 design layers. The build only renders fully-rounded (pill) corners.

Design

radius	24
uses	4

No evidence image — this finding has no single element to frame.

low DA-006 spacing-offscale mobile

Build uses a 14px spacing step that is not a design token

52 gap/padding declarations resolve to 14px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	14
uses	52
pages	3

low DA-007 spacing-offscale mobile

Build uses a 56px spacing step that is not a design token

38 gap/padding declarations resolve to 56px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	56
uses	38
pages	19

low DA-008 spacing-offscale desktoptablet

Build uses a 250px spacing step that is not a design token

38 gap/padding declarations resolve to 250px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	250
uses	38
pages	38

low DA-009 spacing-offscale desktop

Build uses a 17.83px spacing step that is not a design token

36 gap/padding declarations resolve to 17.83px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	17.83
uses	36
pages	11

low DA-010 spacing-offscale desktopmobiletablet

Build uses a 32px spacing step that is not a design token

19 gap/padding declarations resolve to 32px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	32
uses	19
pages	16

low DA-011 spacing-offscale mobile

Build uses a 158px spacing step that is not a design token

19 gap/padding declarations resolve to 158px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	158
uses	19
pages	19

low DA-012 spacing-offscale tablet

Build uses a 196px spacing step that is not a design token

19 gap/padding declarations resolve to 196px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	196
uses	19
pages	19

low DA-013 spacing-offscale desktoptablet

Build uses a 50px spacing step that is not a design token

10 gap/padding declarations resolve to 50px. The design's spacing scale is 4, 8, 12, 16, 20, 24, 28, 34, 40, 44, 60, 80, 120, 148, 150px.

Build

value	50
uses	10
pages	2

triage DA-017 aspect-ratio desktoptabletmobile

Media renders at 1.5:1, which is not a design ratio

21 media elements across 9 template/breakpoint combinations render at 1.5:1; the design uses 1, 1.78, 0.75, 1.33, 0.8. NOT auto-filed — the harvest cannot distinguish a design media slot from a logo or icon's intrinsic ratio, so this needs visual confirmation.

Design

Build

ratio	1.5
uses	21
pages	9

triage DA-018 aspect-ratio desktoptabletmobile

Media renders at 0.63:1, which is not a design ratio

8 media elements across 3 template/breakpoint combinations render at 0.63:1; the design uses 1, 1.78, 0.75, 1.33, 0.8. NOT auto-filed — the harvest cannot distinguish a design media slot from a logo or icon's intrinsic ratio, so this needs visual confirmation.

Design

Build

ratio	0.63
uses	8
pages	3

Design section	Representative URL	Status
Homepage	/	audited
search results page	/search	audited
Daylight Studies MAIN PAGE	/daylight-studies	audited
Daylight Studies detail PAGE	/daylight-studies/daylight-as-temporal-element	audited
academic forum main page	/academic-forum	audited
Editorial LISTING main page	/editorials	audited
Editorial DETAIL	/editorials/inside-the-light-phillips-exeter-academy-library	audited
symposium main page	/daylight-symposium	audited
symposium Presentation detail	/daylight-symposium/celebrating-daylight-darron-haylock	audited
light of tomorrow	/light-of-tomorrow	audited
jury listing page	/light-of-tomorrow/jury	audited
news detail page	/news/unesco-international-day-of-light-2025	audited
About	/about	audited
Daylight Talks main page	/daylight-talks	audited
Daylight Talks DETAIL PAGE	/daylight-talks/16-anupama-kundoo	audited
my account	/login	audited
winners LISTING PAGE	/light-of-tomorrow/2026-global-winners	audited
non-winners LISTING PAGE	/light-of-tomorrow/2026-honourable-mentions	audited
FAQ / text page	/light-of-tomorrow/q-and-a	audited
navigation	—	overlay state — no URL, needs interaction capture
search Modal	—	overlay state — no URL, needs interaction capture
academic forum detail page	—	designed, not built — no /academic-forum/* URL crawled
academic forum research portal	—	designed, not built — no /academic-forum/* URL crawled
jury detail page	—	designed, not built — no jury detail URL crawled
news main page	—	designed, not built — only /news/<slug> exists, no /news index
winners detail page	—	designed, not built — no winner detail URL crawled
newsletter Subscription	—	overlay state — no URL, needs interaction capture
daylight talks email reminder	—	overlay state — no URL, needs interaction capture
— no design section —	/contributors	built, never designed
— no design section —	/magazines	built, never designed
— no design section —	/privacy	built, never designed
— no design section —	/terms	built, never designed
— no design section —	/light-of-tomorrow/award-brief	built, never designed
— no design section —	/light-of-tomorrow/contributors	built, never designed
— no design section —	/light-of-tomorrow/previous-winners	built, never designed
— no design section —	/light-of-tomorrow/2024-all-projects	built, never designed
— no design section —	/light-of-tomorrow/regional-winners-2026	built, never designed

Design style	Size	Weight	Line height	Tracking	desktop	tablet	mobile
Serif/76px	76px	400	64px (0.84)	-3.8px	132	1	·
Serif/64px	64px	400	56px (0.88)	-3.2px	·	45	·
Serif/56px	56px	400	64px (1.14)	-2.8px	·	43	·
Serif/48px	48px	400	40px (0.83)	-2.4px	64	8	·
Serif/44px	44px	400	36px (0.82)	-1.76px	15	13	1
Serif/36px	36px	400	32px (0.89)	-1.44px	28	16	86
Serif/28px	28px	400	24px (0.86)	-1.12px	17	25	39
Serif/24px	24px	400	24px (1)	-0.96px	29	47	23
Sans/24px	24px	400	28px (1.17)	-0.48px	41	·	·
Sans/20px	20px	400	24px (1.2)	-0.4px	376	267	24
Serif/20px	20px	400	20px (1)	-0.8px	122	101	124
Sans/20px Bold	20px	700	24px (1.2)	-0.4px	27	29	·
Sans/20px Uppercase	20px	400	24px (1.2)	-0.4px	28	4	·
Serif/20px	20px	400	20px (1)	-0.8px	·	·	16
Sans/20px	20px	400	24px (1.2)	-0.4px	2	·	·
Sans/20px Headline	20px	700	24px (1.2)	-0.4px	·	1	·
Sans/16px Uppercase	16px	400	20px (1.25)	-0.32px	1265	679	5
Sans/16px Bold Uppercase	16px	700	20px (1.25)	-0.32px	305	230	·
Sans/16px	16px	400	20px (1.25)	-0.32px	129	86	227
Sans/16px Bold	16px	700	20px (1.25)	-0.32px	·	·	19
Sans/16px Headline	16px	700	20px (1.25)	-0.32px	·	·	3
Sans/16px Uppercase Underlined	16px	400	20px (1.25)	-0.32px	2	·	·
Sans/12px Uppercase	12px	400	16px (1.33)	-0.24px	·	4	673
Sans/12px Bold Uppercase	12px	700	16px (1.33)	-0.24px	·	·	227
Sans/12px	12px	400	16px (1.33)	-0.24px	8	9	94

D/A Design Audit

Grid gutter at mobile is 12px, design specifies 8px

Design

Build

Build uses a 72px spacing step that is not a design token

Build

mobile: "Sans/12px Bold Uppercase" is the right size but wrong weight

Design

Build

mobile: "Sans/12px Uppercase" carries 43% of the design's text but 1% of the build's

Design

Build

No 6-column grid renders at mobile, but "Main (M)" defines one

Design

tablet: "Serif/56px" is the right size but wrong line-height

Design

Build

mobile: "Sans/12px Bold Uppercase" carries 15% of the design's text but 1% of the build's

Design

Build

Design uses 19px VeluxGothic with no named text style

Design

Design uses 15px VeluxGothic with no named text style

Design

Design uses 56px Chronicle Deck with no named text style

Design

Design uses 16px VeluxGothic with no named text style

Design

Design uses 28px Chronicle Deck with no named text style

Design

Design uses 45px Chronicle Deck with no named text style

Design

Design uses 38px Chronicle Deck with no named text style

Design

Design uses 35px Chronicle Deck with no named text style

Design

Design corner radius 24px never renders in the build

Design

Build uses a 14px spacing step that is not a design token

Build

Build uses a 56px spacing step that is not a design token

Build

Build uses a 250px spacing step that is not a design token

Build

Build uses a 17.83px spacing step that is not a design token

Build

Build uses a 32px spacing step that is not a design token

Build

Build uses a 158px spacing step that is not a design token

Build

Build uses a 196px spacing step that is not a design token

Build

Build uses a 50px spacing step that is not a design token

Build

Media renders at 1.5:1, which is not a design ratio

Design

Build

Media renders at 0.63:1, which is not a design ratio

Design

Build

Template coverage

Type scale by breakpoint

Scales, side by side

Method and limits