HGK BASEL 2025 [latest update: Nov 7 2025 14:01]

---

Download resources
Figma
Lineto
Fonts
Darkroom

---

---

1. Basics

---

1. Structure
2. Box model
3. Positioning
4. Main tags

---

• Grid [Flex]

---

1. Horizontal alignment
2. Vertical alignment
3. Dimensions
4. Wrap
5. Responsive
6. Preset + variables
7. Grid + variables

---

• Typography

---

1. Headings, paragraph, italic, bold
2. Alignments, kerning, letter spacing, word spacing, size, weights, columns
3. External fonts [variable]
4. External fonts + Flex [variable]

---

• Javascript

---

1. Face detection
2. Face + hand detection
3. Mic
4. Sliders
5. Resize window
6. Sliders + Grid + Charset
7. Mic and variable
8. Camera, face and variable
9. Camera, hand and variable
10. Type writing and variable

• Boilerplate

---

1. Charset + Slider + Grid
2. Charset + Slider + Grid + Camera + Mic

---

• Transform + Motion

---

1. Transform
2. Transform + Transition 1
3. Transform + Transition 2
4. Transform + Transition + Javascript
5. Transform + Transition + Javascript 2
6. Animation 1
7. Animation 2

• AprilTags and Color detection

---

1. AprilTags + Variable font
2. AprilTags + Variable font + Distance
3. AprilTags + Variable font + Change text
4. AprilTags + Variable font + Distance + Sound
5. AprilTags multiple detections
6. Color detection

---