design-system-tuesdays/index.html at main · swisspost/design-system-tuesdays · GitHub

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Design System Tuesdays - A design system meetup</title>
    <meta
      name="description"
      content="Event page for the Design System Tuesdays meet up for Design System Engineers, Frontend Engineers, Design System Designers, User Experience Designers, Figma Designers or people interested in Design Tokens, Web Components, Design Systems or related topics happening in Bern, Switzerland."
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lemon&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="madness.css" />
    <!-- Facebook Meta Tags -->
    <meta
      property="og:url"
      content="https://design-system-tuesdays.netlify.app"
    />
    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      content="Design System Tuesdays - A design system meetup"
    />
    <meta
      property="og:description"
      content="Meet up with people interested in Design Systems around Bern."
    />
    <meta
      property="og:image"
      content="https://design-system-tuesdays.netlify.app/favicon.png"
    />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      property="twitter:domain"
      content="design-system-tuesdays.netlify.app"
    />
    <meta
      property="twitter:url"
      content="https://design-system-tuesdays.netlify.app"
    />
    <meta
      name="twitter:title"
      content="Design System Tuesdays - A design system meetup"
    />
    <meta
      name="twitter:description"
      content="Meet up with people interested in Design Systems around Bern."
    />
    <meta
      name="twitter:image"
      content="https://design-system-tuesdays.netlify.app/favicon.png"
    />
    <script src="/script.js" defer></script>
  </head>
  <body>
    <aside>
      <img
        class="monkey-img"
        src="/assets/monkey.png"
        alt="A funky monkey with sunglasses drawn in vibrant colors surrounded by the headline 'Design System Tuesdays'"
      />
    </aside>

    <main>
      <header class="cloud page-header">
        <h1>Design System Meet Up</h1>
        <p class="subtitle">Looking for speakers.</p>
        <p>
          We're lookgin for speakers or topics to plan another Design System
          Tuesday in 2026. If you have something to share about Design Systems,
          Web Components, Design Tokens, Figma, UX or related topics, please get
          in touch!
        </p>
        <p>
          <a class="button" href="mailto:philipp.gfeller@post.ch"
            >Submit a topic</a
          >
        </p>
      </header>

      <section class="cloud">
        <details>
          <summary class="agenda-summary" id="january-2026">
            <h2>Design System Tuesday January 2026</h2>
          </summary>

          <div class="details-content">
            <h3>Agenda</h3>
            <ul class="agenda">
              <li data-marker="🎙️">
                <h4>
                  Web Component Testing with Playwright and auto-VRTs in the
                  Pipeline
                </h4>
                <p>
                  In this session, we will explain how we implemented a
                  Playwright component testing runtime for web components, how
                  we automatically perform VRT, and how we integrate VRT tooling
                  and baseline image management for our component and end-to-end
                  tests into our pipeline as well as the review process.
                </p>
                <p class="speaker small">by Teo Eterovic</p>
              </li>
              <li data-marker="🎤">
                <h4>Design Tokens</h4>
                <p>
                  A deep dive into the architecture of the Swiss Post Design
                  Token System.
                </p>
                <p class="speaker small">by Philipp Gfeller</p>
              </li>
              <li data-marker="🍻">
                <h4>Food, drinks and chat</h4>
                <p>
                  Stay for a while after the talks and nerd out about Design
                  Systems over a drink and a bite.
                </p>
              </li>
            </ul>

            <h3>Impressions</h3>
            <div class="pictures">
              <figure>
                <a
                  href="/assets/2026-january/visual-regression-testing.jpg"
                  aria-label="Full size image of Teo explaining visual regression testing"
                >
                  <img
                    src="/assets/2026-january/visual-regression-testing-small.jpg"
                    alt="A man stands at a podium giving a presentation to a seated audience in a room decorated with string lights."
                  />
                </a>
                <figcaption>
                  Teo explaining visual regression testing.
                </figcaption>
              </figure>
              <figure>
                <a
                  href="/assets/2026-january/design-tokens.jpg"
                  aria-label="Full size image of Philipp speaking about design tokens"
                >
                  <img
                    src="/assets/2026-january/design-tokens-small.jpg"
                    alt="Man stands near a screen displaying a presentation titled 'Design Tokens, Swiss Post Design System' in a modern conference room."
                  />
                </a>
                <figcaption>Philipp speaking about Design Tokens.</figcaption>
              </figure>
              <figure>
                <a
                  href="/assets/2026-january/taking-notes.jpg"
                  aria-label="Full size image of an attendee taking notes"
                >
                  <img
                    src="/assets/2026-january/taking-notes-small.jpg"
                    alt="Two people sit on low seats indoors; one person wears a plaid shirt and is taking notes on a tablet, while another sits nearby in a pink sweater. The presenter stands in the background."
                  />
                </a>
                <figcaption>An attendee taking notes.</figcaption>
              </figure>
            </div>
          </div>

          <footer class="small" style="margin-block-start: 3rem">
            <hr />
            <p class="centered gap-1">
              <svg
                width="32"
                height="32"
                viewBox="0 0 107 107"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-labelledby="logo-title"
              >
                <title id="logo-title">Logo of the Swiss Post</title>
                <g clip-path="url(#clip0_2_62)">
                  <path d="M107 0H0V107H107V0Z" fill="#FFCC00" />
                  <path
                    d="M50.5278 48.0014V28.2361H29.2764V43.2458H14.8611V63.7542H29.2764V78.7639H50.5278V58.9986H45.475V74.0083H34.3291V58.9986H19.9139V48.0014H34.3291V32.9917H45.475V48.0014H50.5278Z"
                    fill="#FF0000"
                  />
                  <path
                    d="M79.5996 46.2259C79.5996 49.8114 76.6399 52.6084 72.8865 52.6084H67.1722V40.2736H72.8865C76.7844 40.2736 79.5996 42.7835 79.5996 46.2259ZM75.3409 28.2361H53.5V78.7639H67.1722V63.7542H75.3409C85.3741 63.7542 93.1699 56.0987 93.1699 46.2096C93.1699 36.2483 85.2299 28.2361 75.3409 28.2361Z"
                    fill="black"
                  />
                </g>
                <defs>
                  <clipPath id="clip0_2_62">
                    <rect width="107" height="107" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <b>Hosted by the Swiss Post</b>
            </p>
          </footer>
        </details>
      </section>

      <section class="cloud">
        <details>
          <summary class="agenda-summary" id="first-agenda">
            <h2 id="agenda-title-2024">
              Design System Tuesday
              <time datetime="2024-03-26">March 2024</time>
            </h2>
          </summary>

          <div class="details-content">
            <ul class="agenda" aria-labelledby="agenda-title-2024">
              <li data-marker="🎙️">
                <h3>Automatic Migrating from Stencil to Lit</h3>
                <p class="speaker small">by Lukas Spirig</p>
              </li>
              <li data-marker="🎤">
                <h3>Why is this not a standard?</h3>
                <p>
                  About the (hard) first steps in standardising new HTML
                  features with Open UI.
                </p>
                <p class="speaker small">by Philipp Gfeller</p>
              </li>
              <li data-marker="🍻">
                <h3>Drinks and chat</h3>
              </li>
            </ul>
            <h3>Impressions</h3>
            <div class="pictures">
              <figure>
                <a href="/assets/2024-march/screen.jpg">
                  <img
                    src="/assets/2024-march/screen_small.jpg"
                    alt="A large screen showing the Design System Tuesdays logo"
                  />
                </a>
                <figcaption>Ready for some Design System madness</figcaption>
              </figure>
              <figure>
                <a href="/assets/2024-march/presentation-migration.jpg">
                  <img
                    src="/assets/2024-march/presentation-migration_small.jpg"
                    alt="Man in casual attire leans on a round table with a laptop, presenting to a small audience off to the side."
                  />
                </a>
                <figcaption>Lukas, speaking about migrations</figcaption>
              </figure>
              <figure>
                <a
                  href="/assets/2024-march/presentation-standards.jpg"
                  aria-label="Full size image of Philipp speaking about web standards"
                >
                  <img
                    src="/assets/2024-march/presentation-standards_small.jpg"
                    alt="A man in a red sweater presents in an office"
                  />
                </a>
                <figcaption>Philipp, speaking about Web Standards</figcaption>
              </figure>
            </div>
            <footer class="small" style="margin-block-start: 3rem">
              <hr />
              <p class="centered gap-1">
                <svg
                  width="32"
                  height="32"
                  viewBox="0 0 107 107"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  role="img"
                  aria-labelledby="logo-title"
                >
                  <title id="logo-title">Logo of the Swiss Post</title>
                  <g clip-path="url(#clip0_2_62)">
                    <path d="M107 0H0V107H107V0Z" fill="#FFCC00" />
                    <path
                      d="M50.5278 48.0014V28.2361H29.2764V43.2458H14.8611V63.7542H29.2764V78.7639H50.5278V58.9986H45.475V74.0083H34.3291V58.9986H19.9139V48.0014H34.3291V32.9917H45.475V48.0014H50.5278Z"
                      fill="#FF0000"
                    />
                    <path
                      d="M79.5996 46.2259C79.5996 49.8114 76.6399 52.6084 72.8865 52.6084H67.1722V40.2736H72.8865C76.7844 40.2736 79.5996 42.7835 79.5996 46.2259ZM75.3409 28.2361H53.5V78.7639H67.1722V63.7542H75.3409C85.3741 63.7542 93.1699 56.0987 93.1699 46.2096C93.1699 36.2483 85.2299 28.2361 75.3409 28.2361Z"
                      fill="black"
                    />
                  </g>
                  <defs>
                    <clipPath id="clip0_2_62">
                      <rect width="107" height="107" fill="white" />
                    </clipPath>
                  </defs>
                </svg>
                <b>Hosted by the Swiss Post</b>
              </p>
            </footer>
          </div>
        </details>
      </section>
    </main>

    <footer class="footer">
      <p class="author cloud small bold">
        monkey patched by Philipp
        <a
          aria-label="see source code of this page on GitHub"
          href="https://github.com/swisspost/design-system-tuesdays"
          >GitHub</a
        >
        <a
          href="mailto:philipp.gfeller@post.ch"
          aria-label="Write an e-mail to Philipp (philipp.gfeller@post.ch)"
          >Mail</a
        >
        <a
          aria-label="Go to the LinkedIn profile of Philipp Gfeller"
          href="https://www.linkedin.com/in/philipp-gfeller-59a681138/"
          >LinkedIn</a
        >
      </p>
    </footer>
  </body>
</html>