# Swiss Design: Advanced Techniques
## Inspired by Jacqueline Casey, Josef Müller-Brockmann, and Swiss Poster Tradition

**Version:** 1.0
**Date:** November 2025
**Based on:** Classic Swiss posters from 1950s-1970s

---

## Table of Contents

1. [Gradient Backgrounds](#gradient-backgrounds)
2. [Asymmetric Grid Systems](#asymmetric-grid-systems)
3. [Typography as Graphic Element](#typography-as-graphic-element)
4. [Geometric Borders & Rules](#geometric-borders--rules)
5. [Character-Level Styling](#character-level-styling)
6. [Extreme Type Scale](#extreme-type-scale)
7. [SVG Integration](#svg-integration)
8. [Animation Principles](#animation-principles)
9. [Implementation Examples](#implementation-examples)

---

## Gradient Backgrounds

### Radial Gradients (Jacqueline Casey Style)

Swiss posters often used subtle gradients to create depth while maintaining minimalism.

```css
/* Dark Background with Radial Gradient */
.poster-dark {
  background: hsl(206, 18%, 7%);
  background-image: radial-gradient(
    circle at top center,
    hsl(248, 9%, 18%),
    hsl(206, 18%, 8%)
  );
}

/* Light Background with Radial Gradient */
.poster-light {
  background: #E3C205;
  background-image: radial-gradient(
    ellipse at center,
    lighten(#E3C205, 5%) 0%,
    #E3C205 100%
  );
}

/* Subtle Texture Overlay (Optional) */
.poster-textured {
  background-color: #ffcc00;
  background-image:
    radial-gradient(ellipse at center, #ffd633 0%, #ffcc00 100%),
    url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
```

### Color Palette Expansion

Beyond black/white/blue, classic Swiss posters used:

```css
:root {
  /* Original Swiss Palette */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-blue: #0D6EFD;

  /* Extended Swiss Poster Colors */
  --color-red: #E63946;           /* Bold red (The Jam poster) */
  --color-yellow: #E3C205;        /* Swiss gold (Konstruktive Grafik) */
  --color-dark-navy: #0A0E27;     /* Deep navy (Casey posters) */
  --color-mid-gray: #B9BABC;      /* Mid-tone gray */
  --color-light-gray: #DDE1D4;    /* Light gray-green */

  /* Gradient Stop Colors */
  --gradient-start: hsl(248, 9%, 18%);
  --gradient-end: hsl(206, 18%, 8%);
}
```

---

## Asymmetric Grid Systems

### 75/25 Split Layout (Konstruktive Grafik Style)

```css
.poster-layout {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-template-rows: auto;
  gap: 0;
  width: 500px;
  height: 700px;
  padding: 1em;
}

.poster-layout__header {
  grid-column: 1 / 2;
  margin-top: 40%; /* Push content down */
}

.poster-layout__body {
  grid-column: 2 / 3;
  margin-top: 40%;
  font-size: 14px;
  line-height: 1;
}
```

### 20-Column Grid (Casey MIT Poster Style)

```css
.poster-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-auto-rows: minmax(50px, auto);
  gap: 0;
}

/* Spanning specific columns */
.title-line-1 {
  grid-column: 12 / span 8;  /* Start at col 12, span 8 columns */
  grid-row: 1;
}

.title-line-2 {
  grid-column: 9 / span 9;
  grid-row: 2;
}

.content-left {
  grid-column: 9 / span 3;   /* Narrow column for metadata */
}

.content-right {
  grid-column: 12 / span 3;
}
```

### Two-Column with Gap (Die Neue Grafik Style)

```css
.poster-two-col {
  display: grid;
  grid-template-columns: 50% 2% 50%;  /* Column / Gap / Column */
  grid-template-rows: auto;
  width: 80%;
  margin: 50px auto;
}

.title-area {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.metadata-area {
  grid-column: 3 / 4;  /* Skip the 2% gap */
  grid-row: 1 / 2;
}
```

---

## Typography as Graphic Element

### Massive Display Typography

```css
/* Ultra-Large Titles (8rem+) */
.poster-title {
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.08em;  /* Tight tracking */
  text-transform: uppercase;
}

/* Stacked Typography Pattern */
.stacked-title {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(20, 1fr);
}

.stacked-title__line {
  display: block;
  font-size: 8rem;
  letter-spacing: -0.08em;
}

/* Example Usage */
.stacked-title__line:nth-of-type(1) {
  grid-column: 12 / span 8;
  grid-row: 1;
}

.stacked-title__line:nth-of-type(2) {
  grid-column: 9 / span 9;
  grid-row: 2;
}
```

### Typography with Presentational Duplicates

```html
<!-- Casey MIT Poster Technique: Layered Text -->
<header class="poster-header">
  <p class="title" role="presentation" aria-hidden="true">Mediums</p>
  <p class="title" role="presentation" aria-hidden="true">Mediums</p>
  <p class="title" role="presentation" aria-hidden="true">Mediums</p>
  <p class="title">Mediums</p> <!-- Only this one read by screen readers -->
  <p class="title">Of</p>
  <p class="title">Language</p>
</header>
```

```css
/* Different colors for layered text */
.title[role="presentation"] {
  color: var(--color-mid-gray);  /* Lighter/darker duplicates */
}

.title:not([role="presentation"]) {
  color: var(--color-white);     /* Primary readable text */
}
```

---

## Geometric Borders & Rules

### Heavy Horizontal Rules

```css
/* Traditional Swiss Border Treatment */
.border-top-heavy {
  border-top: 3px solid var(--color-black);
  padding-top: 20px;
}

.border-bottom-heavy {
  border-bottom: 3px solid var(--color-black);
  padding-bottom: 20px;
}

/* Full Section Divider */
.section-rule {
  border-top: 3px solid var(--color-black);
  padding: 20px 0;
  margin: 0;
}
```

### SVG Geometric Borders (Animated)

```html
<!-- Animated Square Borders -->
<div class="poster-borders">
  <div class="border-square border-square--1">
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
      <rect
        width="500"
        height="500"
        stroke="black"
        fill="transparent"
        stroke-width="55"
      />
    </svg>
  </div>
</div>
```

```css
/* Animated Stroke Dash */
.border-square rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 3000;
  }
}

/* Positioning Borders */
.border-square--1 {
  position: absolute;
  top: -50%;
  left: 27.5%;
  z-index: 2;
}

.border-square--2 {
  position: absolute;
  bottom: -22%;
  left: 27.5%;
  z-index: 2;
}
```

---

## Character-Level Styling

### Splitting.js Pattern (Casey MIT Posters)

```javascript
// Split text into individual characters
Splitting({ target: '.poster-title', by: "chars" });

// Style specific characters differently
const characters = document.querySelectorAll('.char');
const darkCharacters = [1, 3, 6, 9, 11, 12, 14, 15, 17, 20, 23, 25];

characters.forEach(character => {
  const index = parseInt(
    getComputedStyle(character).getPropertyValue('--char-index')
  ) + 1;

  if (darkCharacters.includes(index)) {
    character.classList.add('char--dark');
  }
});
```

```css
/* Character-Level Styling */
.char {
  color: var(--color-light);  /* Default light color */
}

.char--dark {
  color: var(--color-dark);   /* Specific chars darker */
}

/* Example: Alternating Character Colors */
.poster-title .char:nth-child(odd) {
  color: var(--color-white);
}

.poster-title .char:nth-child(even) {
  color: var(--color-mid-gray);
}
```

---

## Extreme Type Scale

### Contrast Between Huge and Tiny

```css
/* Ultra-Small Metadata (Konstruktive Grafik) */
.metadata-tiny {
  font-size: 6px;   /* Extremely small */
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0;
}

.credit-micro {
  font-size: 3px;   /* Unreadable on purpose */
  line-height: 1.2;
}

/* Contrast with Massive Titles */
.title-massive {
  font-size: 8rem;  /* 128px */
  line-height: 0.9;
  letter-spacing: -0.08em;
}

/* Type Scale with Extremes */
:root {
  --font-micro: 0.1875rem;     /* 3px */
  --font-tiny: 0.375rem;       /* 6px */
  --font-xs: 0.75rem;          /* 12px */
  --font-sm: 0.875rem;         /* 14px */
  --font-base: 1rem;           /* 16px */
  --font-lg: 1.125rem;         /* 18px */
  --font-xl: 1.25rem;          /* 20px */
  --font-2xl: 1.75rem;         /* 28px */
  --font-3xl: 2.5rem;          /* 40px */
  --font-4xl: 3.5rem;          /* 56px */
  --font-5xl: 5rem;            /* 80px */
  --font-massive: 8rem;        /* 128px */
}
```

### Usage Example

```html
<article class="poster">
  <h1 class="title-massive">Die Neue Grafik</h1>

  <div class="metadata-tiny">
    <p>8. März bis 6. April 1958</p>
  </div>

  <footer class="credit-micro">
    <p>Credit copy that is too small to read unfortunately.</p>
  </footer>
</article>
```

---

## SVG Integration

### SVG as Typographic Mask (The Jam Poster)

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 716 1008">
  <defs>
    <mask id="text-mask">
      <rect width="100%" height="100%" fill="#fff" />
      <!-- Letterforms as mask -->
      <path class="letter-j" fill="#000" d="M58.032,583.856..."/>
      <path class="letter-m" fill="#000" d="M333.148,442..."/>
    </mask>
  </defs>

  <!-- Apply mask to colored background -->
  <rect class="stage" width="716" height="1020" fill="red" mask="url(#text-mask)"/>
</svg>
```

```css
/* Animate SVG Letterforms */
.letter-j,
.letter-m {
  transform-origin: center;
  animation: slide 6s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100px); }
  100% { transform: translateX(0); }
}
```

### SVG Grid Overlay

```html
<!-- Geometric Grid Overlay -->
<svg class="grid-overlay" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
      <path d="M 50 0 L 0 0 0 50" fill="none" stroke="black" stroke-width="0.5" opacity="0.1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#grid)" />
</svg>
```

---

## Animation Principles

### Swiss Design Animation Rules

**1. Purposeful Motion Only**
- Animations serve function (reveal hierarchy, guide eye)
- Never animate for decoration

**2. Easing Functions**
```css
/* Swiss Poster Easing */
--timing-swiss: cubic-bezier(0.455, 0.030, 0.515, 0.955);   /* Standard Swiss curve */
--timing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);             /* Material smooth */
--timing-organic: cubic-bezier(0.785, 0.135, 0.150, 0.860);  /* Juni-Festwochen variant */

/* Apply to animations */
.animated-element {
  animation-timing-function: var(--timing-swiss);
  transition-timing-function: var(--timing-swiss);
}

/* For more organic, flowing animations (vertical bars, pulse) */
.animated-element--organic {
  animation-timing-function: var(--timing-organic);
}
```

**3. Duration Guidelines**
```css
/* Slow, Deliberate Movement */
--duration-slow: 6s;      /* Title reveals */
--duration-medium: 2s;    /* Section transitions */
--duration-fast: 0.8s;    /* Hover states */
```

**4. Example: Staggered Text Reveal**

```javascript
// GSAP Animation (The Jam Poster Style)
gsap.from('span', {
  x: -100,
  opacity: 0,
  stagger: 0.1,
  duration: 4,
  ease: "power4"
});
```

```css
/* CSS Alternative: Staggered Animation */
.reveal span {
  display: block;
  opacity: 0;
  transform: translateX(-100px);
  animation: reveal 4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.reveal span:nth-child(1) { animation-delay: 0s; }
.reveal span:nth-child(2) { animation-delay: 0.1s; }
.reveal span:nth-child(3) { animation-delay: 0.2s; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
```

---

## Implementation Examples

### Example 1: Casey MIT Poster Layout

```html
<article class="poster poster--casey">
  <section class="poster__content poster__content--upper">
    <div class="metadata-block">
      <p class="metadata-tiny">Installations by</p>
      <ul class="metadata-list">
        <li>Vernon Fisher</li>
        <li>Myrel Chernick</li>
      </ul>
    </div>
  </section>

  <header class="poster__header">
    <p class="poster__title">Mediums</p>
    <p class="poster__title">Of</p>
    <p class="poster__title">Language</p>
  </header>

  <section class="poster__content poster__content--lower">
    <div class="metadata-block">
      <p>Gallery Hours: Weekdays 10-4</p>
    </div>
  </section>
</article>
```

```css
.poster--casey {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  width: calc(95vmin * (415 / 512));
  height: 95vmin;
  padding: 9rem;
  background-image: radial-gradient(
    circle at top center,
    hsl(248, 9%, 18%),
    hsl(206, 18%, 8%)
  );
  color: hsl(300, 7%, 95%);
}

.poster__content--upper {
  grid-column: 9 / span 3;
  font-size: 0.8rem;
  font-weight: 200;
}

.poster__content--lower {
  grid-column: 12 / span 3;
}

.poster__header {
  grid-column: 1 / span 20;
  font-size: 8rem;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}
```

### Example 2: The Jam Poster Layout

```html
<article class="poster poster--jam">
  <svg class="poster__svg-bg">
    <!-- SVG letterforms with mask -->
  </svg>

  <div class="poster__content">
    <h1 class="poster__band">
      <span>47 promotions presents</span>
      <span>the jam</span>
    </h1>

    <p class="poster__date">
      <span>friday / july 15, 1977</span>
      <span>from 9:00 pm to 1:00am</span>
    </p>
  </div>
</article>
```

```css
.poster--jam {
  position: relative;
  width: 716px;
  height: 1008px;
  background: red;
  color: black;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 600;
}

.poster__content {
  position: relative;
  z-index: 2;
  text-align: right;
  padding: 82px 40px;
}

.poster__band {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 51px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.poster__band span {
  display: block;
}
```

### Example 3: Konstruktive Grafik Layout

```html
<article class="poster poster--konstruktive">
  <div class="poster__content">
    <header class="poster__header">
      <h1>Konstruktive Grafik</h1>
      <h2>Kunstgewerbe museum<br/>Zürich</h2>
      <ul class="poster__meta">
        <li>Offen: Montag 14-18</li>
        <li>8. März bis 6. April 1958</li>
      </ul>
    </header>

    <ul class="poster__body">
      <li>Arbeiten von</li>
      <li>Richard P. Lohse</li>
      <li>Hans Neuburg</li>
    </ul>

    <!-- Animated SVG borders -->
    <div class="poster__rules">
      <div class="rule rule--1">
        <svg width="500" height="500">
          <rect width="500" height="500" stroke="black" fill="transparent" stroke-width="55"/>
        </svg>
      </div>
    </div>
  </div>
</article>
```

```css
.poster--konstruktive {
  position: relative;
  width: 500px;
  height: 700px;
  padding: 1em;
  background: #E3C205;
  background-image: radial-gradient(
    ellipse at center,
    lighten(#E3C205, 5%) 0%,
    #E3C205 100%
  );
  color: black;
}

.poster__header {
  width: 75%;
  float: left;
  margin-top: 40%;
}

.poster__header h1 {
  font-size: 30px;
  margin-bottom: 0.3em;
}

.poster__header h2 {
  width: 35%;
  float: left;
  font-size: 14px;
  line-height: 1;
}

.poster__meta {
  width: 65%;
  float: right;
  font-size: 6px;
  line-height: 1.5;
  font-weight: bold;
}

.poster__body {
  width: 25%;
  float: right;
  margin-top: 40%;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.poster__rules {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.rule--1 {
  position: absolute;
  top: -50%;
  left: 27.5%;
  z-index: 2;
}

.rule rect {
  stroke-dasharray: 1000;
  animation: dash 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate;
}
```

---

## Responsive Considerations

### Scaling Posters for Different Viewports

```css
/* Poster Scaling Pattern */
.poster-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.poster {
  --poster-width: 500px;
  --poster-height: 700px;
  --scale: 1;

  width: var(--poster-width);
  height: var(--poster-height);
  transform: scale(var(--scale));
  transform-origin: center center;
}

/* JavaScript scaling */
@media (max-width: 768px) {
  .poster {
    --scale: 0.7;
  }
}

@media (max-width: 480px) {
  .poster {
    --scale: 0.5;
  }
}
```

### Responsive Grid Adaptation

```css
/* Two-Column to Single Column */
@media (max-width: 850px) {
  .poster-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .title-area {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .metadata-area {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
}
```

---

## Accessibility Considerations

### Presentational Duplicates

```html
<!-- Use role="presentation" and aria-hidden for decorative text -->
<p class="title" role="presentation" aria-hidden="true">Mediums</p>
<p class="title" role="presentation" aria-hidden="true">Mediums</p>
<p class="title">Mediums</p> <!-- Only this is read -->
```

### Readable Text Sizes

Even with extreme scales, ensure base content is readable:

```css
/* Metadata can be small but must meet WCAG minimum */
.metadata-tiny {
  font-size: 6px;  /* Only for visual hierarchy */
}

/* Provide accessible alternative */
.metadata-accessible {
  font-size: 14px;  /* WCAG compliant */
}

/* Or use sr-only pattern */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
```

---

## Key Takeaways

**1. Gradients Create Depth**
- Radial gradients add subtle dimension
- Dark-to-darker or light-to-lighter (never high contrast)

**2. Asymmetry Creates Interest**
- 75/25 splits, 20-column grids
- Content doesn't need to be centered

**3. Typography IS the Design**
- Massive titles (8rem+) contrast with tiny metadata (6px)
- Letter-spacing and line-height are precision tools

**4. Geometric Shapes Define Space**
- Heavy borders (3px-55px stroke-width)
- SVG shapes create visual structure

**5. Animation Serves Purpose**
- Slow, deliberate easing (cubic-bezier)
- Never animate without reason

**6. Color Discipline Remains**
- Even with gradients, limit palette to 2-3 colors
- Red, yellow, navy are classic Swiss poster colors

---

## Animated Geometric Patterns

### Pattern 1: Floating Circles (Müller-Brockmann Style)

```html
<div class="poster__body-row poster__body-row--1">
  <div class="circle circle--teal"></div>
</div>

<div class="poster__body-row poster__body-row--2">
  <div class="circle circle--brown"></div>
  <div class="circle circle--teal"></div>
  <div class="circle circle--brown"></div>
  <div class="circle circle--teal"></div>
  <div class="circle circle--brown"></div>
  <div class="circle circle--teal"></div>
</div>
```

```css
/* Floating Circle Animation */
.circle {
  position: absolute;
  width: 100%;
  height: 28.625%;
  border-radius: 50%;
}

.circle--teal {
  background-color: rgba(120, 142, 140, 0.8);
  z-index: 2;
}

.circle--brown {
  background-color: #9F7F6A;
  z-index: 1;
}

/* Hover Animation */
@keyframes hover {
  0% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(30%);
  }
}

/* Slide Animation */
@keyframes slide {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Apply Animations with Staggered Timing */
.poster__body-row--1 .circle {
  top: 15%;
  animation: hover 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
}

.poster__body-row--2 .circle:nth-child(1) {
  top: -15%;
  animation: slide 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
}

.poster__body-row--2 .circle:nth-child(2) {
  top: 15%;
  animation: slide 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
}

.poster__body-row--2 .circle:nth-child(3) {
  top: 30%;
  animation: slide 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
}

/* Continue pattern for remaining circles */
```

### Pattern 2: Animated Grid Stripes (Eidgenössisches Style)

```html
<section class="poster__body">
  <div></div> <!-- Repeat 16 times for 4x4 grid -->
  <div></div>
  <!-- ... -->
</section>
```

```css
/* Grid Container */
.poster__body {
  position: absolute;
  top: 30%;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Grid Cells */
.poster__body div {
  position: relative;
  overflow: hidden;
  width: 25%;
  height: 25%;
  float: left;
}

/* Diagonal Stripe Pseudo-Element */
.poster__body div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  background-color: #FC4A2C; /* Secondary color */
}

/* Mutating Height Animation */
@keyframes mutate {
  0% {
    height: 0%;
  }
  100% {
    height: 150%;
  }
}

/* Staggered Animation Delays */
.poster__body div:nth-child(1)::before {
  animation: mutate 2s infinite alternate;
}

.poster__body div:nth-child(2)::before {
  animation: mutate 2s 0.125s infinite alternate;
}

.poster__body div:nth-child(3)::before {
  animation: mutate 2s 0.25s infinite alternate;
}

/* Continue pattern with 0.125s increments up to nth-child(16) */
```

### Pattern 3: Sliding Diagonal Lines (Strawinsky Poster)

```html
<div class="poster__graphic poster__graphic--x">
  <div class="x-1"></div>
  <div class="x-2"></div>
  <!-- 12 lines total -->
</div>

<div class="poster__graphic poster__graphic--y">
  <div class="y-1"></div>
  <div class="y-2"></div>
  <!-- 12 lines total -->
</div>
```

```css
/* Diagonal Line Animations */
@keyframes x-diagonal-slide-slow {
  0% { transform: translateX(-800px); }
  100% { transform: translateX(800px); }
}

@keyframes x-diagonal-slide-med {
  0% { transform: translateX(-800px); }
  100% { transform: translateX(800px); }
}

@keyframes x-diagonal-slide-fast {
  0% { transform: translateX(-800px); }
  100% { transform: translateX(800px); }
}

/* Container Rotations */
.poster__graphic--x {
  transform: rotate(-60deg);
  z-index: 1;
  margin-left: 35px;
  margin-top: 10px;
}

.poster__graphic--y {
  transform: rotate(30deg);
  z-index: 1;
  margin-top: -12px;
}

/* Individual Lines */
.poster__graphic div {
  position: absolute;
  background: #fff;
  transform: translateZ(0); /* Hardware acceleration */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Example: Three speeds of diagonal lines */
.x-1 {
  left: 245px;
  bottom: -60px;
  width: 60px;
  height: 2px;
  animation: x-diagonal-slide-fast 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}

.x-2 {
  left: 208px;
  bottom: -150px;
  width: 100px;
  height: 8px;
  animation: x-diagonal-slide-med 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}

.x-3 {
  left: 155px;
  bottom: -115px;
  width: 155px;
  height: 30px;
  animation: x-diagonal-slide-slow 6s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}
```

### Pattern 4: Vertical Bars (Juni-Festwochen Style)

**Key Features:**
- 45-degree rotated container with vertical bar pattern
- Three animation types: slideDown, slideUp, pulse
- Different easing curve: cubic-bezier(0.785, 0.135, 0.150, 0.860)
- Color palette: beige, black, red, green
- Vertical stacking with margin offsets

```html
<section class="poster__body">
  <div class="bar bar--black"></div>
  <div class="bar bar--red"></div>
  <div class="bar bar--middle bar--green"></div>
  <div class="bar bar--black"></div>
  <div class="bar bar--middle bar--red"></div>
  <div class="bar bar--bottom bar--green"></div>
  <div class="bar bar--black"></div>
  <div class="bar bar--red"></div>
  <div class="bar bar--middle bar--green"></div>
  <div class="bar bar--black"></div>
</section>
```

```css
/* Container - Rotated 45 Degrees */
.poster__body {
  transform: rotate(45deg);
  position: absolute;
  top: 8%;
  left: 3%;
  width: 94%;
  height: 67%;
  overflow: hidden;
}

.poster__body div {
  float: left;
}

/* Bar Base Styles */
.bar--black {
  width: 14.2857142857%;  /* 1/7 of container */
  height: 100%;
  background-color: #060807;
  animation: pulse 3s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite;
}

.bar--red,
.bar--green {
  width: 7.14285714286%;  /* 1/14 of container */
  height: 50%;
}

.bar--red {
  background-color: #C82A1E;
  animation: slideDown 3s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite alternate;
}

.bar--green {
  background-color: #67AC6D;
  animation: slideUp 3s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite alternate;
}

/* Vertical Offset Classes */
.bar--middle {
  margin-top: 25%;
}

.bar--bottom {
  margin-top: 50%;
}

/* Animations */
@keyframes slideDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(50%); }
}

@keyframes slideUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.5); }
  100% { transform: scale(1); }
}
```

---

## Responsive Poster Scaling System

### requestAnimationFrame Pattern

```javascript
(function(window, document, undefined) {
  'use strict';

  // Selectors
  var gallery = document.getElementById('js-gallery'),
      poster = document.getElementById('js-poster'),
      posterPadding = 50;

  var galleryWidth = gallery.offsetWidth,
      galleryHeight = gallery.offsetHeight,
      posterWidth = poster.offsetWidth,
      posterHeight = poster.offsetHeight;

  // Prefixed requestAnimationFrame
  var requestAnimationFrame = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(callback) {
        return setTimeout(callback, 1000 / 60);
      };

  // Throttle function
  var throttle = function(callback, limit) {
    var wait = false;
    return function() {
      if (!wait) {
        callback.call();
        wait = true;
        setTimeout(function() {
          wait = false;
        }, limit);
      }
    };
  };

  // Resize poster to fit viewport
  var resizePoster = function() {
    var scale = Math.min(
      galleryWidth / posterWidth,
      galleryHeight / posterHeight
    );

    // Apply scale transform
    poster.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';

    // Sync with browser
    requestAnimationFrame(resizePoster);
  };

  // Throttled resize handler
  var onResize = throttle(function() {
    galleryWidth = gallery.offsetWidth - posterPadding;
    galleryHeight = gallery.offsetHeight - posterPadding;
    requestAnimationFrame(resizePoster);
  }, 100);

  // Initialize
  galleryWidth = gallery.offsetWidth - posterPadding;
  galleryHeight = gallery.offsetHeight - posterPadding;
  requestAnimationFrame(resizePoster);

  // Listen for resize
  window.addEventListener('resize', onResize, false);

})(window, document);
```

### CSS for Responsive Scaling

```css
/* Gallery Container */
.gallery {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #BCBCB0 0%, #B0B0A4 100%);
}

.gallery__body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

/* Poster */
.poster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  display: inline-block;
  vertical-align: middle;
}

/* Paper Shadow Effect */
.poster::before,
.poster::after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 8px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
}

.poster::after {
  transform: rotate(3deg);
  right: 8px;
  left: auto;
}

/* Poster Content */
.poster__content {
  position: relative;
  width: 500px;
  height: 700px;
  overflow: hidden;
  box-shadow: 0 1px 4px 2px rgba(0, 0, 0, 0.2);
}
```

---

## Rotated Text Elements

### Angled Typography Pattern

```html
<div class="poster__title poster__title-strawinsky">
  <h2>strawinsky</h2>
</div>

<div class="poster__title poster__title-berg">
  <h2>berg</h2>
</div>

<div class="poster__meta">
  <ul>
    <li>tonhalle grosser saal</li>
    <li>donnerstag, den 6.januar 1955</li>
  </ul>
</div>

<footer class="poster__footer">
  <p>J. Müller-Brockmann</p>
</footer>
```

```css
/* Rotated Titles */
.poster__title {
  position: absolute;
}

.poster__title h2 {
  transform: rotate(30deg);
  font-size: 1.75em;
  font-weight: 700;
}

.poster__title-strawinsky {
  left: 5px;
  top: 40px;
}

.poster__title-berg {
  top: 298px;
  right: 80px;
}

/* Rotated Metadata */
.poster__meta {
  position: absolute;
  bottom: 2%;
  right: 22%;
  transform: rotate(30deg);
  font-size: 6px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* Rotated Footer (Ultra-Small) */
.poster__footer {
  position: absolute;
  bottom: 12%;
  right: 45%;
  transform: rotate(-60deg);
  font-size: 3px;
  font-size-adjust: 0.15; /* Firefox minimum font override */
}
```

---

## Ultra-Small Typography Techniques

### Font-Size-Adjust for Tiny Text

```css
/* Problem: Browsers enforce minimum font sizes (usually 9px) */
/* Solution: font-size-adjust property for Firefox */

.metadata-ultra-small {
  font-size: 6px;
  font-size-adjust: 0.35; /* Maintains proportions below minimum */
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.credit-micro {
  font-size: 3px;
  font-size-adjust: 0.15; /* Even smaller for credits */
  line-height: 1.2;
}

/* Alternative: Use transform scale */
.metadata-scaled {
  font-size: 12px; /* Start above minimum */
  transform: scale(0.5); /* Scale down to 6px equivalent */
  transform-origin: top left;
}
```

### Percentage-Based Layout System

```css
/* Base Unit System (8.3333% = 1/12 grid) */
:root {
  --base-unit: 8.3333333333%;
  --circle-height: 24%;
}

/* Percentage-Based Positioning */
.poster__header {
  position: absolute;
  bottom: 24%;
  left: 2%;
}

.poster__meta {
  position: absolute;
  bottom: 3%;
  left: 2%;
}

/* Column-Based Layout */
.poster__body-row {
  position: absolute;
  width: 40%;
  height: 100%;
}

.poster__body-row--1 {
  left: 2%;
}

.poster__body-row--2 {
  left: 44%;
}

.poster__body-row--3 {
  left: 86%;
}
```

---

## Staggered Animation Patterns

### Delay Increment Pattern

```css
/* Pattern: 0.125s increment delays for 16 elements */

.animated-grid div:nth-child(1) {
  animation-delay: 0s;
}

.animated-grid div:nth-child(2) {
  animation-delay: 0.125s;
}

.animated-grid div:nth-child(3) {
  animation-delay: 0.25s;
}

/* Continue pattern... */

.animated-grid div:nth-child(16) {
  animation-delay: 1.875s;
}

/* SCSS Loop for Automation */
@for $i from 1 through 16 {
  .animated-grid div:nth-child(#{$i}) {
    animation-delay: #{($i - 1) * 0.125}s;
  }
}
```

### Multiple Speed Animation System

```css
/* Three-Speed System */
:root {
  --duration-slow: 6s;
  --duration-med: 3s;
  --duration-fast: 1s;
}

/* Apply different speeds to create rhythm */
.line-slow {
  animation: slide var(--duration-slow) cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}

.line-medium {
  animation: slide var(--duration-med) cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}

.line-fast {
  animation: slide var(--duration-fast) cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
}
```

---

## SCSS Mixins for Swiss Posters

### Position Mixin

```scss
@mixin pos($position, $top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// Usage
.poster__header {
  @include pos(absolute, auto, auto, 24%, 2%);
}
```

### Center Mixin

```scss
@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width / 2) 0 0 -($height / 2);
  } @else if not $height {
    margin-left: -($width / 2);
    transform: translateY(-50%);
    width: $width;
  } @else {
    margin-top: -($height / 2);
    transform: translateX(-50%);
    height: $height;
  }
}

// Usage
.gallery__body {
  @include center(); // Perfect center with transform
}

.poster__element {
  @include center(300px, 200px); // Center with fixed dimensions
}
```

---

## Color Palette Extensions

### Müller-Brockmann Poster Colors

```css
:root {
  /* Tonhalle Poster */
  --color-beige: #BCBCB0;
  --color-teal: #788E8C;
  --color-brown: #9F7F6A;

  /* Eidgenössisches Poster */
  --color-red-primary: #FB1610;
  --color-red-secondary: #FC4A2C;
  --color-off-white: #EEEEEE;

  /* Strawinsky Poster */
  --color-deep-blue: #00449d;

  /* Juni-Festwochen Poster */
  --color-beige-warm: #C7BAA9;
  --color-black-deep: #060807;
  --color-red-warm: #C82A1E;
  --color-green-fresh: #67AC6D;

  /* Gradient Variations */
  --gradient-beige: radial-gradient(
    ellipse at center,
    #C2C2B6 0%,
    #BCBCB0 100%
  );

  --gradient-beige-warm: radial-gradient(
    ellipse at center,
    #CFBFAE 0%,
    #C7BAA9 100%
  );

  --gradient-red: radial-gradient(
    ellipse at center,
    #FC251F 0%,
    #FB1610 100%
  );

  --gradient-blue: radial-gradient(
    ellipse at center,
    #0055B3 0%,
    #00449d 100%
  );
}
```

---

## Performance Optimization

### Hardware Acceleration

```css
/* Enable GPU acceleration for smooth animations */
.animated-element {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* But remove will-change after animation completes */
.animated-element.animation-complete {
  will-change: auto;
}
```

### Animation Best Practices

```css
/* Use transform and opacity only (cheapest to animate) */

/* Good: GPU-accelerated */
@keyframes slide-good {
  from { transform: translateX(-100px); }
  to { transform: translateX(100px); }
}

/* Avoid: Triggers layout recalculation */
@keyframes slide-bad {
  from { left: -100px; }
  to { left: 100px; }
}
```

---

## Complete Poster Examples

### Example 4: Tonhalle Circles Poster

```html
<div class="poster poster--tonhalle">
  <div class="poster__content">
    <header class="poster__header">
      <h1>tonhalle-quartett</h1>
      <ul>
        <li>zürcher bläser-quintett</li>
        <li>strawinsky</li>
      </ul>
    </header>

    <section class="poster__meta">
      <h2>musica viva</h2>
      <ul>
        <li>donnerstag, 24. april, 10.15 uhr</li>
      </ul>
    </section>

    <section class="poster__body">
      <div class="poster__body-row poster__body-row--1">
        <div class="circle circle--teal"></div>
      </div>
      <div class="poster__body-row poster__body-row--2">
        <div class="circle circle--brown"></div>
        <div class="circle circle--teal"></div>
        <div class="circle circle--brown"></div>
      </div>
    </section>
  </div>
</div>
```

### Example 5: Red Grid Poster

```html
<div class="poster poster--red-grid">
  <div class="poster__content">
    <header class="poster__header">
      <h1>Ausstellung Eidgenössisches Kunststipendium 1970</h1>
    </header>

    <section class="poster__meta">
      <ul>
        <li>Malerei</li>
        <li>Grafik</li>
      </ul>
    </section>

    <section class="poster__body">
      <!-- 16 divs for 4x4 grid -->
      <div></div>
      <div></div>
      <!-- ... repeat 14 more times -->
    </section>
  </div>
</div>
```

### Example 6: Diagonal Lines Poster

```html
<div class="poster poster--diagonal">
  <div class="poster__content">
    <div class="poster__title poster__title-strawinsky">
      <h2>strawinsky</h2>
    </div>

    <div class="poster__graphic poster__graphic--x">
      <div class="x-1"></div>
      <div class="x-2"></div>
      <!-- 12 lines total -->
    </div>

    <div class="poster__graphic poster__graphic--y">
      <div class="y-1"></div>
      <div class="y-2"></div>
      <!-- 12 lines total -->
    </div>

    <div class="poster__meta">
      <ul>
        <li>tonhalle grosser saal</li>
      </ul>
    </div>
  </div>
</div>
```

### Example 7: Juni-Festwochen Vertical Bars Poster

```html
<div class="poster poster--juni-festwochen">
  <div class="poster__content">
    <header class="poster__header">
      <div class="poster__header-col">
        <h1 class="poster__header-title">juni-festwochen zürich</h1>
        <h2 class="poster__header-date">1959</h2>
        <ul class="poster__header-spacer">
          <li>tonhalle grosser saal</li>
          <li>dienslag, 30.juni und</li>
          <li>mittwoch, 1.juli 20.15 uhr</li>
        </ul>
      </div>

      <div class="poster__header-col">
        <ul>
          <li>abschiedskonzerte</li>
          <li>von</li>
          <li>dr.volkmar andreae</li>
        </ul>
        <ul class="poster__header-spacer">
          <li>i.v. beethoven</li>
          <li>neunte sinfonie in d-moll</li>
        </ul>
      </div>

      <div class="poster__header-col">
        <ul>
          <li>soiisten</li>
          <li>eva maria rogner</li>
          <li>elsa cavelli</li>
        </ul>
      </div>

      <div class="poster__header-col">
        <ul>
          <li>karten fr. 5.50 bis 16.50</li>
          <li>vorverkauf</li>
          <li>tonhalle. jecklin, kuoni</li>
        </ul>
      </div>
    </header>

    <section class="poster__body">
      <div class="bar bar--black"></div>
      <div class="bar bar--red"></div>
      <div class="bar bar--middle bar--green"></div>
      <div class="bar bar--black"></div>
      <div class="bar bar--middle bar--red"></div>
      <div class="bar bar--bottom bar--green"></div>
      <div class="bar bar--black"></div>
      <div class="bar bar--red"></div>
      <div class="bar bar--middle bar--green"></div>
      <div class="bar bar--black"></div>
    </section>
  </div>
</div>
```

```css
/* Poster Content */
.poster--juni-festwochen .poster__content {
  width: 500px;
  height: 700px;
  padding: 2%;
  background-color: #C7BAA9;
  background: radial-gradient(
    ellipse at center,
    #CFBFAE 0%,
    #C7BAA9 100%
  );
  color: #060807;
  line-height: 1.3;
}

/* Four-Column Footer Layout */
.poster__header {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 15px;
  overflow: hidden;
}

.poster__header-col {
  float: left;
  width: 25%;
}

.poster__header-spacer {
  margin-top: 10px;
}

.poster__header-title,
.poster__header-date,
.poster__header ul li {
  margin: 0;
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
}
```

---

## References

- **Jacqueline Casey**: MIT Poster Series (1960s-1970s)
- **Josef Müller-Brockmann**: Zurich Tonhalle Posters (1950s-1960s)
  - Tonhalle-Quartett (floating circles)
  - Strawinsky/Berg/Fortner (diagonal lines)
  - Juni-Festwochen Zürich 1959 (vertical bars with pulse/slide)
- **Armin Hofmann**: Basel School of Design
- **Richard Paul Lohse**: Konstruktive Grafik
- **Eidgenössisches Kunststipendium**: 1970 Exhibition Poster (grid animation)
- **The Jam Poster**: 1977 Edinburgh Concert Poster
- **Splitting.js**: https://splitting.js.org/
- **GSAP Animation**: https://greensock.com/
- **requestAnimationFrame**: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

---

**End of Advanced Techniques Guide**

This document supplements `SWISS_STYLE_GUIDE.md` with advanced poster techniques.
For basic implementation, start with the main style guide.