# Swiss Design Visual Examples: Before & After

**Project:** Bluesky Portfolio Redesign
**Date:** 2025-11-15

This document provides concrete visual examples of how current design elements transform under Swiss/Bauhaus principles.

---

## Color Palette Transformation

### Before (Current Design)
```
Background:     #0f172a (dark blue-gray)
Cards:          #1e293b (lighter blue-gray)
Text Primary:   #f1f5f9 (off-white)
Text Secondary: #94a3b8 (medium gray)
Borders:        #334155 (blue-gray)
Accent:         #1185fe (bright blue)
Accent Hover:   #0ea5e9 (lighter blue)
```

### After (Swiss Design)
```
Background:     #ffffff (pure white)
Cards:          #ffffff (pure white)
Text Primary:   #000000 (pure black)
Text Secondary: #000000 (pure black, no gray)
Borders:        #000000 (pure black)
Accent:         #1185fe (bright blue - interactive states ONLY)
Accent Hover:   #0d6ecc (darker blue)
```

**Key Change:** Eliminate all shades of gray. Use black/white/blue only.

---

## Typography Hierarchy

### Before (Current - Color-Coded)
```
Site Title:       32px Inter 700, #f1f5f9 (white)
Section Kicker:   12px Inter 600, #1185fe (blue)
Section Title:    24px Inter 700, #f1f5f9 (white)
Project Title:    18px Inter 700, #f1f5f9 (white)
Description:      14px Inter 400, #94a3b8 (gray)
```

### After (Swiss - Typography + Weight)
```
Site Title:       40px Inter 700, #000000 (black)
Section Kicker:   11px Inter 600, #000000 (black), ALL CAPS, 0.15em spacing
Section Title:    28px Inter 700, #000000 (black)
Project Title:    20px Inter 700, #000000 (black)
Description:      16px Inter 400, #000000 (black)
```

**Key Change:** All text is black. Hierarchy achieved through size and weight only.

---

## Project Card Transformation

### Before (Current Design)

**Visual:**
```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓  ← 2px border, #334155 (gray)
┃                          ┃    8px border-radius (rounded)
┃  🌈  Project Title       ┃    Background: #1e293b (dark)
┃      Description text in ┃    Text: white/gray
┃      gray color here     ┃
┃                          ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Hover: Border → #1185fe, Background slightly lighter
```

**CSS:**
```css
.project-card {
  padding: 24px;
  background-color: #1e293b;
  border: 2px solid #334155;
  border-radius: 8px;
  color: #f1f5f9;
}

.project-card:hover {
  border-color: #1185fe;
  background-color: #1e3a52; /* slightly lighter */
}

.project-description {
  color: #94a3b8; /* gray */
}
```

### After (Swiss Design)

**Visual:**
```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓  ← 3px border, #000000 (black)
┃                          ┃    0px border-radius (sharp)
┃  🌈  Project Title       ┃    Background: #ffffff (white)
┃      Description text in ┃    Text: black (all)
┃      black color         ┃
┃                          ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Hover: Border → #1185fe (3px solid blue)
Focus: 3px blue outline, 0px offset
```

**CSS:**
```css
.project-card {
  padding: 24px;
  background-color: #ffffff;
  border: 3px solid #000000;
  border-radius: 0px; /* sharp corners */
  color: #000000;
}

.project-card:hover {
  border-color: #1185fe;
  /* NO background color change */
}

.project-card:focus-visible {
  outline: 3px solid #1185fe;
  outline-offset: 0px;
}

.project-description {
  color: #000000; /* no gray */
}
```

**Key Changes:**
1. Sharp corners (0px radius) vs. rounded (8px)
2. Thicker borders (3px vs. 2px)
3. Black on white vs. white on dark
4. All text black (no gray for descriptions)
5. Hover changes border only (not background)

---

## Toggle Button Transformation

### Before (Current Design)

**Visual (Collapsed):**
```
VISUALIZATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                         ┏━━━┓
                         ┃ + ┃  ← Button with rounded border
                         ┗━━━┛
```

**Visual (Expanded):**
```
VISUALIZATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                         ┏━━━┓
                         ┃ − ┃  ← Button with minus icon
                         ┗━━━┘
[project grid visible]
```

**CSS:**
```css
.toggle-button {
  background: #1e293b;
  border: 2px solid #334155;
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.5rem;
}

.toggle-button:hover {
  border-color: #1185fe;
  background-color: #1e3a52;
}
```

### After (Swiss Design - Typography Pattern)

**Visual (Collapsed):**
```
▸ VISUALIZATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← 3px horizontal rule
(entire heading is clickable, no button chrome)
```

**Visual (Expanded):**
```
▾ VISUALIZATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[project grid visible]
```

**CSS:**
```css
.section-toggle-heading {
  font-size: 28px;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-toggle-heading:hover {
  text-decoration: underline;
}

.section-toggle-heading:focus-visible {
  outline: 3px solid #1185fe;
  outline-offset: 0px;
}

.section-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s; /* subtle rotation */
}

.section-horizontal-rule {
  border: none;
  border-top: 3px solid #000000;
  margin: 0;
}
```

**HTML:**
```html
<!-- Collapsed -->
<h2 class="section-toggle-heading"
    role="button"
    tabindex="0"
    aria-expanded="false"
    aria-controls="visualizations-content">
  <span class="section-toggle-arrow">▸</span>
  VISUALIZATIONS
</h2>
<hr class="section-horizontal-rule">

<!-- Expanded -->
<h2 class="section-toggle-heading"
    role="button"
    tabindex="0"
    aria-expanded="true"
    aria-controls="visualizations-content">
  <span class="section-toggle-arrow">▾</span>
  VISUALIZATIONS
</h2>
<hr class="section-horizontal-rule">
<div id="visualizations-content" class="project-grid">
  <!-- cards -->
</div>
```

**Key Changes:**
1. No button element—heading itself is clickable
2. Unicode arrows (▸/▾) instead of +/− symbols
3. 3px horizontal rule for section division
4. Remove button border-radius and background
5. Hover: subtle underline on text
6. Focus: 3px blue outline (WCAG compliant)

---

## Badge Link Transformation

### Before (Current Design)

**Visual:**
```
┏━━━━━━━━━━━━━┓  ← 1px border, rounded
┃ [icon] Text ┃    Background: dark
┗━━━━━━━━━━━━━┛
```

**CSS:**
```css
.badge-link {
  padding: 6px 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #f1f5f9;
  font-size: 12px;
}

.badge-link:hover {
  background-color: #1185fe;
  color: white;
}
```

### After (Swiss Design)

**Visual:**
```
┏━━━━━━━━━━━━━┓  ← 2px border, sharp corners
┃ [icon] Text ┃    Background: white
┗━━━━━━━━━━━━━┛

Hover:
┏━━━━━━━━━━━━━┓  ← 3px blue border
┃ [icon] Text ┃    Text color → blue
┗━━━━━━━━━━━━━┛
```

**CSS:**
```css
.badge-link {
  padding: 6px 12px;
  background-color: #ffffff;
  border: 2px solid #000000;
  border-radius: 0px; /* sharp corners */
  color: #000000;
  font-size: 12px;
  font-weight: 600;
}

.badge-link:hover {
  border: 3px solid #1185fe;
  color: #1185fe;
  /* NO background color change */
  padding: 5px 11px; /* Adjust padding to compensate for thicker border */
}

.badge-link:focus-visible {
  outline: 3px solid #1185fe;
  outline-offset: 0px;
}
```

**Key Changes:**
1. Sharp corners (0px vs. 4px radius)
2. Thicker border on hover (2px → 3px)
3. White background maintained (not blue on hover)
4. Text color changes to blue on hover
5. Padding adjustment to prevent layout shift from border thickness

---

## Section Divider Transformation

### Before (Current Design)

**Visual:**
```
[Section content]

(48px empty space)

[Next section content]
```

**CSS:**
```css
.content-section {
  margin-bottom: 48px;
}
```

No visual divider—just whitespace.

### After (Swiss Design)

**Visual:**
```
[Section content]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← 3px horizontal rule

[Next section content]
```

**CSS:**
```css
.content-section {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 3px solid #000000; /* Or use <hr> element */
}

/* OR */

.section-divider {
  border: none;
  border-top: 3px solid #000000;
  margin: 48px 0;
}
```

**HTML:**
```html
<section class="content-section">
  <!-- content -->
</section>

<hr class="section-divider"> <!-- 3px horizontal rule -->

<section class="content-section">
  <!-- content -->
</section>
```

**Key Change:** Add strong geometric dividers (3px horizontal rules) to separate major sections.

---

## Grid Spacing Transformation

### Before (Current Design)

**Mobile (1 column):**
```
┏━━━━━━━━━━┓
┃  Card 1  ┃
┗━━━━━━━━━━┛
    ↕ 16px gap
┏━━━━━━━━━━┓
┃  Card 2  ┃
┗━━━━━━━━━━┛
```

**Desktop (3 columns):**
```
┏━━━━┓  ↔ 24px  ┏━━━━┓  ↔ 24px  ┏━━━━┓
┃ C1 ┃          ┃ C2 ┃          ┃ C3 ┃
┗━━━━┛          ┗━━━━┛          ┗━━━━┛
```

### After (Swiss Design)

**Mobile (1 column):**
```
┏━━━━━━━━━━┓  ← 2px border (reduced for mobile)
┃  Card 1  ┃
┗━━━━━━━━━━┛
    ↕ 24px gap (increased from 16px)
┏━━━━━━━━━━┓
┃  Card 2  ┃
┗━━━━━━━━━━┛
```

**Desktop (3 columns):**
```
┏━━━━┓  ↔ 48px  ┏━━━━┓  ↔ 48px  ┏━━━━┓  ← 3px borders
┃ C1 ┃          ┃ C2 ┃          ┃ C3 ┃
┗━━━━┛          ┗━━━━┛          ┗━━━━┛
```

**CSS:**
```css
.project-grid {
  display: grid;
  gap: 24px; /* Mobile: increased from 16px */
  grid-template-columns: 1fr;
}

.project-card {
  border: 2px solid #000000; /* Mobile: reduced from 3px */
}

@media (min-width: 640px) {
  .project-grid {
    gap: 48px; /* Tablet/Desktop: doubled from 24px */
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card {
    border: 3px solid #000000; /* Desktop: full weight */
  }
}

@media (min-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
```

**Key Changes:**
1. Mobile gaps increase from 16px → 24px
2. Desktop gaps increase from 24px → 48px
3. Mobile borders reduce from 3px → 2px (to prevent clutter)
4. Desktop borders increase to 3px (strong geometric definition)

---

## Focus Indicator Transformation

### Before (Current Design)

**Visual:**
```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  Card content            ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  ┊┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┊  ← 3px outline, 2px offset, blue
  (focus state)
```

**CSS:**
```css
.project-card:focus-visible {
  outline: 3px solid #1185fe;
  outline-offset: 2px;
}
```

### After (Swiss Design)

**Visual:**
```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃━━━━━━━━━━━━━━━━━━━━━━━━━━┃  ← 3px outline, 0px offset (tighter geometry)
┃  Card content            ┃
┃━━━━━━━━━━━━━━━━━━━━━━━━━━┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛
(focus state)
```

**CSS:**
```css
.project-card:focus-visible {
  outline: 3px solid #1185fe;
  outline-offset: 0px; /* Tighter geometry */
}
```

**Key Change:** Reduce outline offset from 2px → 0px for sharper, more geometric focus indicator.

---

## Header Transformation

### Before (Current Design)

**Visual:**
```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← 2px border, dark background
  🌍 BLUESKY PROJECTS

  Luke's Bullshit

  [LinkedIn] [Resume] [Website]  ← Rounded badges

  Tools, resources, and software I built for Bluesky.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

### After (Swiss Design)

**Visual:**
```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← 3px border, white background
  🌍

  LUKE'S BULLSHIT

  [LinkedIn] [Resume] [Website]  ← Sharp corner badges

  Tools, resources, and software I built for Bluesky.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

**Key Changes:**
1. White background instead of dark
2. Thicker border (3px vs 2px)
3. ALL CAPS for title (stronger geometric presence)
4. Remove "BLUESKY PROJECTS" kicker (simplification)
5. Sharp corner badges
6. All text black

---

## Responsive Breakpoint Examples

### Mobile (375px width)

**Current:**
- 1 column grid
- 16px gaps
- 2px borders
- 8px border-radius

**Swiss:**
- 1 column grid
- 24px gaps (more breathing room)
- 2px borders (reduced to prevent clutter)
- 0px border-radius (sharp)

### Tablet (768px width)

**Current:**
- 2 column grid
- 24px gaps
- 2px borders
- 8px border-radius

**Swiss:**
- 2 column grid
- 48px gaps (doubled for emphasis)
- 3px borders (full weight)
- 0px border-radius (sharp)

### Desktop (1440px width)

**Current:**
- 3 column grid
- 24px gaps
- 2px borders
- 8px border-radius

**Swiss:**
- 3 column grid
- 48px gaps (maintain generous whitespace)
- 3px borders (strong definition)
- 0px border-radius (sharp)

---

## Interaction State Comparison

### Current Design States

**Default → Hover → Focus → Active**
```
Card:
  Border: 2px gray → 2px blue → 3px blue outline → same
  Background: dark → slightly lighter → same → same

Badge:
  Border: 1px gray → none → 3px blue outline → same
  Background: darker → blue fill → blue fill → same
  Text: white → white → white → white
```

### Swiss Design States

**Default → Hover → Focus → Active**
```
Card:
  Border: 3px black → 3px blue → 3px blue outline (0px offset) → 3px blue + shift
  Background: white → white → white → white
  Position: static → static → static → translateY(1px)

Badge:
  Border: 2px black → 3px blue → 3px blue outline → 3px blue
  Background: white → white → white → white
  Text: black → blue → blue → blue
```

**Key Principle:** Geometric changes (border weight, outline, position) instead of color fills.

---

## CSS Variable Comparison

### Before (Current)
```css
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: #334155;
  --accent-color: #1185fe;
  --accent-hover: #0ea5e9;

  --spacing-xs: 0.5rem;  /* 8px */
  --spacing-sm: 1rem;    /* 16px */
  --spacing-md: 1.5rem;  /* 24px */
  --spacing-lg: 2rem;    /* 32px */
  --spacing-xl: 3rem;    /* 48px */

  --font-base: 0.875rem; /* 14px */
  --font-3xl: 2rem;      /* 32px */
}
```

### After (Swiss)
```css
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #000000;
  --text-secondary: #000000;  /* No gray */
  --border-color: #000000;
  --accent-color: #1185fe;     /* Interactive states only */
  --accent-hover: #0d6ecc;

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;   /* Doubled from 32px */
  --spacing-xl: 64px;   /* Increased from 48px */

  --font-base: 16px;    /* Increased from 14px */
  --font-3xl: 40px;     /* Increased from 32px */

  --border-weight-default: 3px;
  --border-weight-mobile: 2px;
  --border-radius: 0px;
}
```

**Key Changes:**
1. All backgrounds white
2. All text black (no gray)
3. Larger spacing scale (more breathing room)
4. Larger base font (16px vs 14px for accessibility)
5. Added border-weight variables
6. Added border-radius: 0px for sharp corners

---

## Accessibility Comparison

### Before (Current - WCAG 2.1 AA Compliant)
```
✅ Color contrast: 4.5:1+ (white text on dark backgrounds)
✅ Focus indicators: 3px solid blue, 2px offset
✅ Touch targets: 44px minimum
✅ ARIA attributes: aria-expanded, aria-controls, aria-label
✅ Keyboard navigation: Tab, Space, Enter
✅ Skip link: functional
✅ Screen reader: headings, landmarks, link announcements
```

### After (Swiss - WCAG 2.1 AA Compliant)
```
✅ Color contrast: 21:1 (black text on white background - maximum contrast)
✅ Focus indicators: 3px solid blue, 0px offset (tighter but still visible)
✅ Touch targets: 44px minimum (maintained)
✅ ARIA attributes: aria-expanded, aria-controls, aria-label (maintained)
✅ Keyboard navigation: Tab, Space, Enter (maintained)
✅ Skip link: functional (maintained)
✅ Screen reader: headings, landmarks, link announcements (maintained)
```

**Key Change:** Accessibility features FULLY MAINTAINED. Swiss design does not compromise WCAG compliance.

---

## Summary of Visual Transformations

| Element | Current | Swiss | Key Change |
|---------|---------|-------|------------|
| **Background** | Dark (#0f172a) | White (#ffffff) | Inversion |
| **Text** | White + gray | All black | No gray hierarchy |
| **Borders** | 2px, gray | 3px, black (2px mobile) | Thicker, higher contrast |
| **Corners** | 8px radius | 0px radius | Sharp geometry |
| **Spacing** | 16/24px gaps | 24/48px gaps | Increased whitespace |
| **Font size** | 14px base | 16px base | Accessibility improvement |
| **Hover** | Border + bg change | Border only | Geometric consistency |
| **Dividers** | Whitespace | 3px horizontal rules | Strong structure |
| **Toggle** | Button chrome | Typography-based | Simplification |
| **Hierarchy** | Color-coded | Typography + spacing | Functional minimalism |

---

**All visual examples prepared by:** Luke Steuber
**Date:** 2025-11-15
**Project:** https://dr.eamer.dev/bluesky