1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
---
title: "Archive — capture app"
summary: >-
A capture/document mobile app. Card list, bottom capture dock, photo slots
with the diagonal-grain empty state. A generic demonstration of the system,
not a recreation of any real product's actual screens.
---
Archive is not a real product — it is the system's own reference layout for a
mobile capture flow: the shape a household inventory and document archive
app would take if it were rebuilt on this token set, at its 390×760 frame.
Three screens, abbreviated to what each one adds.
<figure class="example">
<figcaption>Home — recent captures</figcaption>
<div>
<div class="pattern-phone">
<header class="pattern-phone__header">
<span class="pattern-phone__brand">Archive</span>
</header>
<div class="pattern-phone__body pattern-phone__body--dock">
<div class="pattern-list-heading">
<span class="pattern-list-heading__title">Recent</span>
<span class="type-label">3 tracked</span>
</div>
<ul class="card">
<li>
<span class="avatar" data-square style="--gl-icon: var(--gl-icon-package)"></span>
<div class="pattern-row">
<div class="pattern-file-title pattern-file-title--truncate">Dishwasher manual</div>
<div class="type-label pattern-file-meta">PDF · 2.1MB</div>
</div>
<span class="type-mono pattern-row__meta">2h</span>
</li>
<li>
<span class="avatar" data-square style="--gl-icon: var(--gl-icon-package)"></span>
<div class="pattern-row">
<div class="pattern-file-title">Sofa receipt</div>
<div class="type-label pattern-file-meta">JPG · 640KB</div>
</div>
<span class="type-mono pattern-row__meta">1d</span>
</li>
<li>
<span class="avatar" data-square style="--gl-icon: var(--gl-icon-package)"></span>
<div class="pattern-row">
<div class="pattern-file-title">Passport scan</div>
<div class="type-label pattern-file-meta">PDF · 890KB</div>
</div>
<span class="type-mono pattern-row__meta">4d</span>
</li>
</ul>
</div>
<div class="pattern-dock">
<button data-variant="primary" data-size="lg" data-block style="--gl-icon: var(--gl-icon-camera)">
Take a photo
</button>
</div>
</div>
<div class="pattern-phone">
<header class="pattern-phone__header">
<button class="icon-button" data-size="sm" aria-label="Back" style="--gl-icon: var(--gl-icon-chevron-left)"></button>
<span class="pattern-phone__title">Save</span>
</header>
<div class="pattern-phone__body">
<div class="pattern-photo-slot" style="--gl-icon-start: var(--gl-icon-package)">
<span class="type-label">Photo preview</span>
</div>
<label class="field" style="margin-top: var(--gl-space-m);">
Name
<input placeholder="Dishwasher manual" />
</label>
</div>
<div class="pattern-phone__footer">
<button>Retake</button>
<button data-variant="primary">Save</button>
</div>
</div>
<div class="pattern-phone">
<header class="pattern-phone__header">
<button class="icon-button" data-size="sm" aria-label="Back" style="--gl-icon: var(--gl-icon-chevron-left)"></button>
<span class="type-label">Archive</span>
</header>
<div class="pattern-phone__body">
<h1 class="pattern-detail-title">Dishwasher manual</h1>
<div class="pattern-tag-row">
<span class="tag">location:kitchen</span>
<span class="tag" data-dashed>+ add tag</span>
</div>
<div class="type-label pattern-aside__label--tight">File</div>
<ul class="card">
<li>
<span class="avatar" data-square style="--gl-icon: var(--gl-icon-package)"></span>
<div class="pattern-row" style="font-size: var(--gl-step--1);">PDF · 2.1MB</div>
</li>
</ul>
<div class="type-label" style="margin: var(--gl-space-m) 0 var(--gl-space-2xs);">Notes</div>
<p style="font-size: var(--gl-step--1); color: var(--gl-color-text-secondary); line-height:1.55; margin:0;">No notes yet.</p>
</div>
</div>
</div>
</figure>
## What this screen is testing
- **The diagonal-grain empty state.** The only patterned background this
system permits, used only inside an empty photo slot.
- **CardRow as a file row, twice.** The same component holds a scannable
list on Home and a single, focused row on Detail — no special "detail row"
variant needed.
- **Tag alongside its own dashed "add" affordance.** The two live in one row,
reading as one continuous, extendable list.
- **`type-label` as the workhorse.** File size, tag count, and the back-button
screen name all reach for the same mono catalog-label convention as Badge.