----
DE
EP
--
ME
MO
RY
----
dark

Andreas Gysin (ertdfgcvb.xyz) Design System

Overview Andreas Gysin's design aesthetic is rooted in terminal/console culture, ASCII art, and generative design. The website embodies a minimalist, text-based interface that celebrates monospace typography and character-based layouts.

---

Core Philosophy

1. Terminal Aesthetic - The design mimics classic computer terminals and text-based interfaces - Every element feels like it belongs in a command-line environment - ASCII art and characters are primary design elements, not decorations

2. Restraint & Minimalism - Extreme economy of visual elements - No unnecessary ornamentation - Content is king; design serves the content

3. Grid-Based Precision - Everything aligns to a character grid - Layout uses `ch` (character width) units extensively - 32×32 grids are featured prominently in artwork

---

Typography

Font Family ```css font-family: 'Simple Console'; ``` - Custom monospace font with three weights: - **Light (300)**: Body text, default - **Regular (400)**: Medium emphasis - **Bold (700)**: Strong emphasis

Characteristics - Fixed-width characters (monospace) - Clean, readable letterforms - Works perfectly for ASCII art rendering - Excellent at small sizes - No fallback fonts specified (intentional design choice)

Text Styling ```css body { font-family: "Simple Console"; font-weight: 300; margin: 0; } ```

---

Color Palette

Primary Colors ```css /* Background tones - grayscale layers */ body: #808080 /* gray */ main: #CCC /* light gray - content area */ nav: #BBB /* slightly darker - navigation */ background: #DDD /* lightest - body background */

/ Overlays / overlay: rgba(0,0,0,0.05) / subtle darkening / ```

Accent Colors ```css /* Interactive states */ hover-gold: gold /* #FFD700 - primary hover */ hover-tomato: tomato /* #FF6347 - navigation hover */ link-color: #666 /* dark gray - links */ link-hover: darkgray /* #A9A9A9 - link hover */

/ Utility / black: #000 / preview backgrounds, text / ```

Color Philosophy - **Grayscale dominance**: 95% of the design uses grays - **Minimal accents**: Only two colors (gold, tomato) for interaction - **High contrast**: Black text on light backgrounds - **Layering through tone**: Different gray tones create depth - **No gradients**: (except in artwork content)

---

Layout System

Grid Structure ```css .container { display: grid; grid-template-columns: max-content max-content auto; width: 100vw; height: 100vh; } ```

Layout Principles 1. **Three-column grid**: - Left: Navigation (max-content width) - Middle: Main content (max-content, typically ~28ch) - Right: Flexible space / gallery

2. Character-based widths: ```css max-width: 28ch; / main content / padding: 0 1ch; / consistent spacing / margin-right: 1ch; / separator alignment / ```

3. Full viewport: `100vw × 100vh` container

4. Flexbox for centering: ```css .center-flex { display: flex; justify-content: center; align-items: center; } ```

---

Spacing System

Padding & Margins ```css /* Horizontal spacing */ padding: 0 1ch 0 1ch; /* navigation, main */

/ Figure spacing / figure { margin: 2ch; } figure:first-child { margin-left: 5ch; } figure:last-child { margin-right: 5ch; }

/ List spacing / ol li { margin-bottom: 1em; } ```

Spacing Philosophy - **Character units (`ch`)**: All horizontal spacing - **Em units (`em`)**: Vertical spacing (scales with font size) - **Consistent rhythm**: 1ch, 2ch, 5ch intervals - **Generous whitespace**: More space than typical websites - **Edge breathing room**: Extra margin on first/last elements

---

UI Components

Navigation ```css nav { padding: 0 1ch 0 1ch; } nav a { color: inherit; } nav a:hover { background-color: tomato; } ```

#### Features: - Inherits text color (not blue) - Hover state: Tomato background (strong visual feedback) - Vertical list format - ASCII separators (`---`) - Compact spacing

Links ```css a { color: darkgray; text-decoration: none; } a:hover { background-color: gold; } ```

#### Characteristics: - No underlines - Subtle color (darkgray) - Bold hover state (gold background) - Background color change, not text color change

Separators (Horizontal Rules) ```css hr { margin: 0; color: inherit; border: none; display: block; } hr:before { display: block; content: '----------------------------'; margin-right: 1ch; white-space: nowrap; } ```

#### Philosophy: - ASCII art as UI element - Generated via CSS pseudo-element - Consistent character length - Zero margin (tight integration) - Respects text color

Lists ```css ol { margin: 0; padding: 0; } ol li { counter-increment: list; list-style-type: none; margin-bottom: 1em; } ol li:before { display: block; content: counter(list) "."; } ```

#### Features: - Custom counter styling - Number followed by period - Numbers on separate line (block display) - Clean, terminal-like appearance

Images & Figures ```css img { width: 100%; cursor: zoom-in; } figure { margin: 2ch; } ```

#### Behavior: - Full-width within container - Zoom cursor indicates interactivity - Generous margin for breathing room - Clean figure captions

Preview/Lightbox ```css .preview { position: fixed; z-index: 10; background-color: black; left: 0; right: 0; top: 0; bottom: 0; transition: opacity 500ms; opacity: 0; pointer-events: none; } .show { opacity: 1; pointer-events: all; cursor: zoom-out; } ```

Features: - Full-screen overlay - Black background - Smooth fade transition (500ms) - Zoom-out cursor when active - Disabled pointer events when hidden

---

Interactions

Hover States 1. **Navigation links**: `background-color: tomato` 2. **Content links**: `background-color: gold` 3. **Images**: `cursor: zoom-in`

Transitions ```css transition: opacity 500ms; ``` - Smooth, medium-speed transitions - Applied to modal/overlay states - No transition on hover (instant feedback)

Cursors - `cursor: zoom-in` - Images - `cursor: zoom-out` - Preview mode - `cursor: pointer` - Links (default)

---

Responsive Design

Mobile Breakpoint ```css @media only screen and (max-width: 600px) { body { font-size: 0.8em; } .container { grid-template-columns: max-content auto; } .center-flex { display: block; grid-column: span 2; } figure { margin: 4ch; } main { max-width: initial; width: auto; } } ```

Mobile Strategy - **Smaller font**: 0.8em (20% reduction) - **Two-column layout**: Removes third column - **Stacked content**: Center-flex becomes block - **Larger figure margins**: 4ch (more breathing room) - **Flexible main width**: Removes max-width constraint - **Grid spanning**: Content spans both columns

---

Animation

Fade Animation ```css @keyframes fade { from { opacity: 1; } to { opacity: 0; } } ```

---

Content Patterns

Series Pages 1. **Header section**: - Series title - Year - Description paragraph - Technical details

2. Gallery grid: - Numbered items (1., 2., 3.) - Artwork title - Metadata list: - Geometry - Colors - Aspect ratio - Grid size - FPS - Price - Status indicators (• symbols)

3. Image presentation: - Thumbnail grid - Full-screen preview on click - HD version links

Navigation Structure ``` --- idx --- ert dfg cvb . xyz ```

---

Technical Implementation

CSS Reset Approach ```css body { margin: 0; } ol { margin: 0; padding: 0; } hr { margin: 0; border: none; } ```

No JavaScript Dependencies - Pure HTML/CSS implementation - CSS-only interactions - No framework overhead - Fast, lightweight

Utility Classes ```css .no-select { user-select: none; -webkit-user-select: none; } .show { opacity: 1; pointer-events: all; } ```

---

ASCII Art Integration

As Design Element - Separators built from characters - Consistent character width enables alignment - Text as visual structure

As Content - 32×32 character compositions - Monospace grid critical for rendering - Characters have visual weight

Typography's Role - Font enables ASCII art to work - Character spacing must be perfect - No anti-aliasing issues

---

Accessibility Considerations

Current Implementation - High contrast text - Large, clear typography - Simple, predictable navigation - No complex interactions - Semantic HTML structure

Areas for Enhancement - Alt text on images - ARIA labels for interactive elements - Focus states for keyboard navigation - Skip links for screen readers

---

Performance

Optimization Strategy - Minimal CSS (~5KB gzipped estimate) - Web fonts embedded as base64 data URIs - No external dependencies - Fast initial render - Graceful degradation

Loading Strategy ```html ```