# Swiss/Bauhaus Design System
## Comprehensive Style Guide for Bluesky Portfolio

**Version:** 1.0
**Last Updated:** 2025-11-15
**Author:** Luke Steuber
**Design Philosophy:** International Typographic Style (Swiss Design) + Bauhaus Functionalism

---

## Table of Contents

1. [Core Design Principles](#core-design-principles)
2. [Color System](#color-system)
3. [Typography System](#typography-system)
4. [Grid System](#grid-system)
5. [Spacing & Rhythm](#spacing--rhythm)
6. [Component Specifications](#component-specifications)
7. [Interaction Patterns](#interaction-patterns)
8. [Accessibility Requirements](#accessibility-requirements)
9. [Implementation Guidelines](#implementation-guidelines)

---

## Core Design Principles

### 1. Extreme Color Discipline
- **Maximum 3 colors:** Black (#000000), White (#FFFFFF), Bluesky Blue (#1185FE)
- No gradients, no shadows, no transparency effects
- Color serves information hierarchy only
- Blue used exclusively for interactive elements and accent

### 2. Mathematical Precision
- All measurements derived from 8px base unit
- Consistent mathematical ratios (1:1.5, 1:2, 1:3)
- Grid-based alignment with no exceptions
- Helvetica Neue as exclusive typeface

### 3. Form Follows Function
- Zero ornamentation
- Every element serves a purpose
- Geometric purity (rectangles only, no rounded corners)
- Stark delineation through borders, not shadows

### 4. Asymmetric Balance
- Dynamic compositions within strict grid
- Flush-left alignment throughout
- Horizontal lines divide information zones
- White space as active design element

### 5. Accessibility Through Constraint
- WCAG 2.1 AA compliance mandatory
- High contrast ratios (21:1 for black/white)
- No motion, no animations, no parallax
- Touch targets ≥ 44px minimum

---

## Color System

### Primary Palette

```css
:root {
  /* Core Colors - Swiss Minimalism */
  --color-black: #000000;           /* Primary background, text, borders */
  --color-white: #FFFFFF;           /* Backgrounds, text on black */
  --color-bluesky: #1185FE;         /* Interactive elements, accents only */

  /* Functional Applications */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-black);
  --bg-accent: var(--color-bluesky);

  --text-primary: var(--color-black);
  --text-inverse: var(--color-white);
  --text-accent: var(--color-bluesky);

  --border-primary: var(--color-black);
  --border-accent: var(--color-bluesky);
  --border-width: 2px;              /* Standard border weight */
  --border-width-heavy: 3px;        /* Emphasis borders */
}
```

### Color Usage Rules

1. **Black Backgrounds:**
   - Section headers
   - Navigation elements
   - Emphasis zones
   - Always paired with white text

2. **White Backgrounds:**
   - Main content areas
   - Project cards
   - Reading zones
   - Always paired with black text

3. **Bluesky Blue:**
   - Hover states only
   - Active/focus indicators
   - Call-to-action elements
   - Never for passive/static elements

### Contrast Requirements

- Black on White: 21:1 (AAA)
- White on Black: 21:1 (AAA)
- Blue on White: 4.52:1 (AA - large text only)
- Blue on Black: 4.65:1 (AA - large text only)

**Important:** Blue text used only for interactive elements ≥ 18px (or 14px bold)

---

## Typography System

### Font Stack

```css
:root {
  /* Single typeface - Helvetica Neue */
  --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Fallback for systems without Helvetica Neue */
  --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, sans-serif;
}

body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

### Type Scale (8px Base Unit)

```css
:root {
  /* Mathematical progression based on 8px grid */
  --font-size-xs: 12px;      /* 1.5 × 8 - Labels, captions */
  --font-size-sm: 14px;      /* 1.75 × 8 - Body small */
  --font-size-base: 16px;    /* 2 × 8 - Body text */
  --font-size-md: 18px;      /* 2.25 × 8 - Large body */
  --font-size-lg: 24px;      /* 3 × 8 - Subheadings */
  --font-size-xl: 32px;      /* 4 × 8 - Headings */
  --font-size-2xl: 48px;     /* 6 × 8 - Page titles */
  --font-size-3xl: 64px;     /* 8 × 8 - Hero text */

  /* Line Heights - Mathematical ratios */
  --line-height-tight: 1.2;   /* Headlines */
  --line-height-normal: 1.5;  /* Body text */
  --line-height-loose: 1.75;  /* Spacious reading */

  /* Font Weights - Minimal variation */
  --font-weight-normal: 400;  /* Regular text */
  --font-weight-medium: 500;  /* Subtle emphasis */
  --font-weight-bold: 700;    /* Strong emphasis */
}
```

### Typography Usage

| Element | Size | Weight | Line Height | Letter Spacing |
|---------|------|--------|-------------|----------------|
| Hero Title | 64px | 700 | 1.2 | -0.02em |
| Page Title | 48px | 700 | 1.2 | -0.01em |
| Section Title | 32px | 700 | 1.2 | 0 |
| Subsection | 24px | 700 | 1.5 | 0 |
| Body Large | 18px | 400 | 1.5 | 0 |
| Body Text | 16px | 400 | 1.5 | 0 |
| Body Small | 14px | 400 | 1.5 | 0 |
| Labels/Caps | 12px | 700 | 1.5 | 0.1em |

### Typographic Rules

1. **Flush Left Only** - No centered or justified text
2. **All Caps for Labels** - Uppercase + letter-spacing for kickers
3. **Single Column Measure** - 65-75 characters per line maximum
4. **No Italic** - Use weight or size for emphasis
5. **Hyphenation Off** - Preserve word integrity

---

## Grid System

### 12-Column Grid Foundation

```css
:root {
  /* Grid System - 12 columns */
  --grid-columns: 12;
  --grid-gutter: 24px;          /* 3 × 8px base unit */
  --grid-margin: 24px;          /* Match gutter */
  --grid-max-width: 1200px;     /* Container width */

  /* Column width calculation: (1200px - 11×24px) / 12 = 78px */
  --grid-column-width: 78px;
}

.grid-container {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
```

### Responsive Breakpoints

```css
:root {
  /* Breakpoints aligned to grid */
  --breakpoint-mobile: 320px;   /* 40 × 8 */
  --breakpoint-tablet: 768px;   /* 96 × 8 */
  --breakpoint-desktop: 1024px; /* 128 × 8 */
  --breakpoint-wide: 1440px;    /* 180 × 8 */
}
```

### Grid Layouts by Breakpoint

**Mobile (320-767px):**
- Single column (full 12)
- Vertical stacking
- Gutter: 16px (2 × 8)

**Tablet (768-1023px):**
- 2 columns (6+6)
- Side-by-side cards
- Gutter: 24px (3 × 8)

**Desktop (1024px+):**
- 3 columns (4+4+4)
- Asymmetric options (3+6+3, 8+4, etc.)
- Gutter: 24px (3 × 8)

### Layout Patterns

```css
/* Single column content */
.layout-single { grid-column: 1 / -1; }

/* Two thirds + one third */
.layout-content { grid-column: 1 / 9; }  /* 8 columns */
.layout-sidebar { grid-column: 9 / 13; } /* 4 columns */

/* Centered narrow content */
.layout-narrow { grid-column: 3 / 11; }  /* 8 columns centered */

/* Three equal columns */
.layout-thirds { grid-column: span 4; }
```

---

## Spacing & Rhythm

### Spacing Scale (8px Base Unit)

```css
:root {
  /* Vertical rhythm - 8px increments */
  --space-1: 8px;    /* 1 unit */
  --space-2: 16px;   /* 2 units */
  --space-3: 24px;   /* 3 units */
  --space-4: 32px;   /* 4 units */
  --space-5: 40px;   /* 5 units */
  --space-6: 48px;   /* 6 units */
  --space-8: 64px;   /* 8 units */
  --space-10: 80px;  /* 10 units */
  --space-12: 96px;  /* 12 units */
  --space-16: 128px; /* 16 units */
}
```

### Spacing Application

| Element | Padding | Margin | Gap |
|---------|---------|--------|-----|
| Page Sections | - | 0 0 96px | - |
| Section Header | 48px 0 32px | - | - |
| Project Cards | 24px | - | 24px |
| Card Internal | 16px | - | 8px |
| Buttons | 12px 24px | - | - |
| Form Elements | 16px | 0 0 16px | - |

### Horizontal Dividers

```css
.divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 2px solid var(--color-black);
  margin: var(--space-6) 0;
}

.divider-heavy {
  border-top-width: 3px;
  margin: var(--space-8) 0;
}
```

---

## Component Specifications

### Header Component

```css
.site-header {
  background-color: var(--color-black);
  color: var(--color-white);
  border-bottom: 3px solid var(--color-black);
  padding: var(--space-6) 0;
}

.site-kicker {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-bluesky);
  margin-bottom: var(--space-2);
}

.site-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

.site-description {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  max-width: 65ch;
}
```

**Responsive Behavior:**
- Mobile: Title 32px, padding 32px
- Tablet: Title 48px, padding 48px
- Desktop: Title 64px, padding 64px

### Section Header Component

```css
.section-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-black);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.section-kicker {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-bluesky);
  margin-bottom: var(--space-1);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
```

### Project Card Component

```css
.project-card {
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  padding: var(--space-3);
  display: block;
  text-decoration: none;
  color: var(--color-black);
  transition: none; /* No transitions - instant state changes */
  min-height: 176px; /* 22 × 8px - ensures consistent card heights */
}

.project-card:hover,
.project-card:focus {
  border-color: var(--color-bluesky);
  border-width: 3px;
  padding: 23px; /* Compensate for 1px border increase */
}

.project-card:focus-visible {
  outline: 3px solid var(--color-bluesky);
  outline-offset: 2px;
}

.project-header {
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-black);
  padding-bottom: var(--space-2);
}

.project-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-1);
}

.project-description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
```

**Icon Treatment:**
- Remove emojis entirely
- Replace with solid geometric shapes (squares, circles, triangles)
- SVG icons only, black fill, 24×24px
- Icons serve as visual anchors, not decoration

### Toggle Button Component

```css
.toggle-button {
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  color: var(--color-black);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.toggle-button:hover,
.toggle-button:focus {
  background-color: var(--color-bluesky);
  border-color: var(--color-bluesky);
  color: var(--color-white);
}

.toggle-button:focus-visible {
  outline: 3px solid var(--color-bluesky);
  outline-offset: 2px;
}

.toggle-button[aria-expanded="true"] {
  background-color: var(--color-black);
  color: var(--color-white);
}
```

**States:**
- Default: White BG, black border, black "+"
- Hover: Blue BG, blue border, white "+"
- Expanded: Black BG, black border, white "−"

### Badge Link Component

```css
.badge-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  color: var(--color-black);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  min-height: 44px;
}

.badge-link:hover,
.badge-link:focus {
  background-color: var(--color-bluesky);
  border-color: var(--color-bluesky);
  color: var(--color-white);
}

.badge-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
```

---

## Interaction Patterns

### Hover States

**Rule:** Instant state changes, no transitions or animations

```css
/* All hover effects follow this pattern */
.interactive-element {
  transition: none; /* Explicitly disable all transitions */
}

.interactive-element:hover {
  /* Instant change to blue */
  border-color: var(--color-bluesky);
  background-color: var(--color-bluesky);
  color: var(--color-white);
}
```

**Hover Hierarchy:**
1. Border changes to blue (maintains 2-3px weight)
2. Background fills with blue (if applicable)
3. Text inverts to white
4. No shadows, no scale, no movement

### Focus Indicators

```css
*:focus-visible {
  outline: 3px solid var(--color-bluesky);
  outline-offset: 2px;
  /* No outline-style: dashed or dotted - solid only */
}

/* For elements with borders, use box-shadow instead */
.bordered-element:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bluesky);
}
```

**Focus Requirements:**
- 3px solid blue outline
- 2px offset from element
- Never use browser default focus styles
- Always visible, never hidden

### Active States

```css
.button:active,
.link:active {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
```

**Active = Pressed:** Inverts to black background

### Disabled States

```css
.button:disabled,
.link[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
}
```

**Disabled = Reduced opacity only**, no color changes

---

## Accessibility Requirements

### WCAG 2.1 AA Compliance Checklist

#### Color Contrast

- [ ] Black on white text: 21:1 (AAA)
- [ ] White on black text: 21:1 (AAA)
- [ ] Blue used only for large text (≥18px or ≥14px bold)
- [ ] Blue links on white: 4.52:1 (AA for large text)
- [ ] No color-only information conveyance

#### Keyboard Navigation

- [ ] All interactive elements keyboard accessible
- [ ] Logical tab order (top to bottom, left to right)
- [ ] Skip link to main content (hidden until focused)
- [ ] Focus indicators 3px solid blue, 2px offset
- [ ] No keyboard traps
- [ ] Enter/Space activate buttons

#### Screen Reader Support

- [ ] Semantic HTML (header, main, section, article)
- [ ] Proper heading hierarchy (h1 → h2 → h3, no skips)
- [ ] ARIA labels for icon-only elements
- [ ] ARIA expanded/collapsed states for toggles
- [ ] Alt text for all images (or aria-hidden if decorative)
- [ ] Form labels associated with inputs

#### Touch Targets

- [ ] Minimum 44×44px for all interactive elements
- [ ] Sufficient spacing between targets (8px minimum)
- [ ] No overlapping hit areas

#### Motion & Animation

- [ ] Zero animations (respects prefers-reduced-motion)
- [ ] No parallax effects
- [ ] No auto-playing content
- [ ] Instant state changes only

#### Responsive Design

- [ ] Viewport meta tag configured
- [ ] Text readable without zoom at 100%
- [ ] Horizontal scrolling avoided
- [ ] Touch-friendly at all breakpoints

---

## Implementation Guidelines

### CSS Architecture

```css
/* File structure recommendation */

/* 1. CSS Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p { margin: 0; padding: 0; }

/* 2. CSS Variables */
:root { /* All design tokens here */ }

/* 3. Base Styles */
html { font-size: 16px; }
body { font-family: var(--font-primary); }

/* 4. Layout Components */
.grid-container { /* Grid system */ }

/* 5. UI Components */
.button { /* Component styles */ }

/* 6. Utilities */
.sr-only { /* Screen reader only */ }

/* 7. Responsive */
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }

/* 8. Print */
@media print { /* Print styles */ }
```

### HTML Structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- No external fonts - system Helvetica only -->
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header class="site-header">
    <!-- Header content -->
  </header>

  <main id="main-content" class="main-content">
    <section class="content-section" aria-labelledby="section-1">
      <div class="section-header">
        <h2 id="section-1" class="section-title">Section Title</h2>
      </div>
      <!-- Section content -->
    </section>
  </main>

  <footer class="site-footer">
    <!-- Footer content -->
  </footer>
</body>
</html>
```

### Design Checklist for New Components

1. **Does it use only black, white, and blue?** ✓
2. **Are all measurements divisible by 8?** ✓
3. **Does it align to the 12-column grid?** ✓
4. **Are corners perfectly square (no border-radius)?** ✓
5. **Does it use Helvetica Neue exclusively?** ✓
6. **Are all borders 2-3px solid?** ✓
7. **Is text flush-left aligned?** ✓
8. **Are there zero transitions or animations?** ✓
9. **Does it meet WCAG 2.1 AA standards?** ✓
10. **Is every element functional, not decorative?** ✓

---

## Reusability Across Projects

### Design System as CSS Variables

This entire system is portable via CSS variables. To apply to any project:

```css
/* Copy the :root variables block */
/* Copy the component styles */
/* Adapt the HTML structure */
```

### Component Library

Extract these as reusable components:
- `.site-header` - Page header with black background
- `.section-header` - Section divider with border
- `.project-card` - Content card with hover state
- `.toggle-button` - Expand/collapse control
- `.badge-link` - Icon + text link button
- `.grid-container` - 12-column responsive grid

### Utilities to Extract

```css
/* Text utilities */
.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.text-bold { font-weight: 700; }

/* Spacing utilities */
.mt-4 { margin-top: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-3 { padding: var(--space-3); }

/* Layout utilities */
.flex { display: flex; }
.flex-between { justify-content: space-between; }
.grid { display: grid; }
```

---

## Visual Reference

### Color Swatches

```
████████  Black (#000000) - Primary
░░░░░░░░  White (#FFFFFF) - Background
████████  Blue (#1185FE) - Accent
```

### Border Styles

```
──────────  2px solid (standard)
══════════  3px solid (heavy emphasis)
```

### Typography Hierarchy

```
HERO TITLE (64px, Bold, -0.02em)
Page Title (48px, Bold, -0.01em)
Section Title (32px, Bold)
Subsection (24px, Bold)
Body Large (18px, Regular)
Body Text (16px, Regular)
LABELS (12px, Bold, 0.1em, Uppercase)
```

---

## Version History

**v1.0** (2025-11-15)
- Initial comprehensive design system
- Complete component specifications
- Accessibility standards documented
- Implementation guidelines established

---

## Credits

**Design System:** Luke Steuber
**Influences:** Josef Müller-Brockmann, Jan Tschichold, Massimo Vignelli
**Philosophy:** "The grid is the underwear of the designer." —Massimo Vignelli