Skip to content

AGENTS.md

Latest commit

 

History

History
584 lines (483 loc) · 19 KB

AGENTS.md

File metadata and controls

584 lines (483 loc) · 19 KB
Raw

SemioticStandard.org

Project Overview

An elegant, minimalist website showcasing Ron Cobb's iconic "Semiotic Standard" symbols from the 1979 science fiction film Alien. The site presents all 34 standardized spacecraft symbols (30 base + 4 directional/type variants) in a pure-CSS responsive grid with hover/focus/touch labels and full keyboard support.

Live Site: https://semioticstandard.org

Purpose

Educational and historical preservation of Ron Cobb's visionary 1978 design work. The "Semiotic Standard For All Commercial Trans-Stellar Utility Lifter And Heavy Element Transport Spacecraft" represents a comprehensive visual language for spacecraft interiors, demonstrating pioneering principles in universal design and visual communication.

Key Features

  • Interactive Symbol Gallery — Browse all 34 symbols with hover/focus/touch labels
  • Pure CSS Responsive Grid — clamp() + auto-fit, zero layout JS
  • Accessible — Skip link, ARIA labels, Enter/Space/Escape keyboard, prefers-reduced-motion
  • SEO-Ready — JSON-LD structured data, canonical URL, sitemap.xml, robots.txt
  • High-Quality SVG Graphics — 34 SVGO-optimized vector symbols
  • Zero Dependencies — Pure HTML, CSS, and vanilla JavaScript
  • Minimal Design — Black background with monospace typography
  • Mobile-Optimized — Touch-friendly with responsive typography
  • Fast Loading — Deferred analytics (requestIdleCallback), lazy images, immutable asset caching

Design Philosophy

Minimalist, museum-like presentation:

  • Black background to emphasize symbols
  • Courier New monospace typography
  • Interactive hover states
  • Centered modal labels for clarity
  • Responsive grid adapts to viewport dimensions
  • No distractions from the symbols themselves

Tech Stack

  • Core: Pure HTML5, CSS3, Vanilla JavaScript
  • Graphics: 34 SVG vector symbols + 1 PNG OG preview (SVGO-optimized)
  • Typography: Courier New, Monaco, Roboto Mono (monospace stack)
  • Analytics: Google Analytics 4 (G-5C5ET6DMNM)
  • Hosting: Static hosting (any CDN/web server)

No Dependencies Philosophy

Intentionally built without frameworks or libraries:

  • No React, Vue, or Angular
  • No jQuery or utility libraries
  • No CSS frameworks (custom CSS only)
  • No build tools or bundlers
  • Pure vanilla JavaScript
  • Zero npm packages

Project Structure

SemioticStandard.org/
├── index.html                      # Main HTML file (107 lines)
├── assets/
│   ├── css/
│   │   └── style.css               # All styles (31 lines, minified)
│   ├── js/
│   │   └── script.js               # Interactive functionality (59 lines)
│   └── images/
│       ├── SemioticStandard.png    # OpenGraph/social preview image
│       ├── 001.PRESSURISED.AREA.svg
│       ├── 002.PRESSURISED.WITH.ARTIFICIAL.GRAVITY.svg
│       ├── 003.ARTIFICIAL.GRAVITY.ABSENT.svg
│       ├── 004.CRYOGENIC.VAULT.svg
│       ├── 005.AIRLOCK.svg
│       ├── 006.BULKHEAD.DOOR.svg
│       ├── 007.NON-PRESSURISED.AREA.BEYOND.svg
│       ├── 008.PRESSURE.SUIT.LOCKER.svg
│       ├── 009.PHOTONIC.SYSTEM.(FIBRE.OPTICS).svg
│       ├── 010.LASER.svg
│       ├── 011.ASTRONIC.SYSTEM.(ELECTRONICS).svg
│       ├── 012.HAZARD.WARNING.svg
│       ├── 013.ARTIFICIAL.GRAVITY.AREA.NON-PRESSURISED.SUIT.REQUIRED.svg
│       ├── 014.NO.PRESSURE.GRAVITY.SUIT.REQUIRED.svg
│       ├── 015.EXHAUST.svg
│       ├── 016.AREA.SHIELDED.FROM.RADIATION.svg
│       ├── 017.RADIATION.HAZARD.svg
│       ├── 018.HIGH.RADIOACTIVITY.svg
│       ├── 019.REFRIGERATION.svg
│       ├── 020.DIRECTION.svg
│       ├── 020A.DIRECTION.DOWN.svg
│       ├── 020B.DIRECTION.RIGHT.svg
│       ├── 020C.DIRECTION.LEFT.svg
│       ├── 021.LIFE.SUPPORT.SYSTEM.svg
│       ├── 022.GALLEY.svg
│       ├── 023.COFFEE.svg
│       ├── 024.BRIDGE.svg
│       ├── 025.AUTODOC.svg
│       ├── 026.MAINTENANCE.svg
│       ├── 027.LADDERWAY.svg
│       ├── 028.INTERCOM.svg
│       ├── 029.STORAGE.NON-ORGANIC.svg
│       ├── 029A.STORAGE.ORGANIC.(FOODSTUFFS).svg
│       └── 030.COMPUTER.TERMINAL.svg
├── README.md                       # Documentation
└── .gitignore                      # Git ignore rules

Symbol Categories

Environmental Systems (7 symbols)

  • 001 - Pressurised Area
  • 002 - Pressurised with Artificial Gravity
  • 003 - Artificial Gravity Absent
  • 005 - Airlock
  • 006 - Bulkhead Door
  • 007 - Non-Pressurised Area Beyond
  • 013 - Artificial Gravity Area Non-Pressurised Suit Required

Safety & Hazards (5 symbols)

  • 008 - Pressure Suit Locker
  • 012 - Hazard Warning
  • 014 - No Pressure Gravity Suit Required
  • 017 - Radiation Hazard
  • 018 - High Radioactivity

Technical Systems (5 symbols)

  • 009 - Photonic System (Fibre Optics)
  • 010 - Laser
  • 011 - Astronic System (Electronics)
  • 015 - Exhaust
  • 016 - Area Shielded from Radiation

Life Support & Facilities (6 symbols)

  • 004 - Cryogenic Vault
  • 019 - Refrigeration
  • 021 - Life Support System
  • 022 - Galley
  • 023 - Coffee
  • 025 - Autodoc (Medical)

Navigation & Communication (7 symbols)

  • 020 - Direction (Up)
  • 020A - Direction Down
  • 020B - Direction Right
  • 020C - Direction Left
  • 024 - Bridge
  • 028 - Intercom
  • 030 - Computer Terminal

Storage & Maintenance (3 symbols)

  • 026 - Maintenance
  • 027 - Ladderway
  • 029 - Storage Non-Organic
  • 029A - Storage Organic (Foodstuffs)

Key Files

HTML (index.html)

Single-page application (107 lines):

  • Comprehensive meta tags (OpenGraph, Twitter Cards)
  • Google Analytics integration
  • Grid container with 33 symbol items (30 symbols + 3 directional variants)
  • Credit card with Ron Cobb attribution and date (April 16, 2078)
  • Symbol label overlay for hover interaction
  • ASCII art header comment with "SEMIOTIC STANDARD" branding

CSS (style.css)

Minimalist styling (31 lines, highly compressed):

  • Black background (#000) with white text (#fff)
  • Monospace font stack: Courier New, Monaco, Roboto Mono
  • Dynamic grid layout with auto-fit and minmax
  • Hover effects: scale transform, opacity changes, border highlight
  • Fixed position modal label for symbol names
  • 5 responsive breakpoints:
    • Mobile portrait: < 480px
    • Mobile landscape: < 768px
    • Tablet: < 768px
    • Large screens: > 1920px
    • Landscape low height: < 600px height

JavaScript (script.js)

Interactive functionality (59 lines):

Core Features

  1. Symbol Name Formatting

    • Strips numbering prefix (e.g., "001.")
    • Replaces dots with spaces
    • Preserves parentheses content
    • Converts to readable format

  2. Hover Interaction

    • mouseenter shows symbol label
    • mouseleave hides symbol label
    • Smooth fade transition
    • Centered modal overlay

  3. Dynamic Grid Layout

    • Calculates optimal columns/rows based on viewport aspect ratio
    • Adjusts for landscape (aspectRatio > 1.5): more columns
    • Adjusts for portrait (aspectRatio < 0.8): more rows
    • Ensures minimum 60px, maximum 200px symbol size
    • Responds to window resize events

Grid Algorithm

if (aspectRatio > 1.5) {
  cols = Math.ceil(Math.sqrt(itemCount * aspectRatio));
  rows = Math.ceil(itemCount / cols);
} else if (aspectRatio < 0.8) {
  rows = Math.ceil(Math.sqrt(itemCount / aspectRatio));
  cols = Math.ceil(itemCount / rows);
} else {
  cols = Math.ceil(Math.sqrt(itemCount));
  rows = Math.ceil(itemCount / cols);
}

Design System

Color Palette

  • Background: #000 (pure black)
  • Symbol backgrounds: #222 (dark gray)
  • Hover backgrounds: #111 (darker gray), #333 (credit card hover)
  • Borders: #444 (default), #666 (hover)
  • Text: #fff (white), #ccc (author), #999 (date)
  • Label background: rgba(0, 0, 0, 0.9) (semi-transparent black)

Typography

  • Font Family: 'Courier New', Monaco, 'Roboto Mono', monospace
  • Symbol Label: 2.5rem, bold, uppercase, 2px letter-spacing
  • Credit Title: 0.9rem, bold, uppercase, 1px letter-spacing
  • Credit Author: 1.1rem, bold
  • Credit Date: 0.9rem, italic

Responsive Breakpoints

  1. Desktop (> 1920px):

    • Grid min: 150px
    • Gap: 3px
    • Label: 3rem font, 25px/50px padding

  2. Default (768px - 1920px):

    • Grid min: 120px
    • Gap: 2px
    • Label: 2.5rem font, 20px/40px padding

  3. Tablet (481px - 768px):

    • Grid min: 80px
    • Gap: 1px
    • Label: 1.8rem font, 15px/30px padding

  4. Mobile (< 480px):

    • Grid min: 60px
    • Label: 1.4rem font, 10px/20px padding, 1px letter-spacing

  5. Landscape Low Height (< 600px height):

    • Label: 2rem font, 15px/30px padding

Animations

  • Hover transitions: 0.3s ease on all properties
  • Symbol scale: 1.02 (subtle enlarge on hover)
  • Opacity: 0.7 for symbol image on hover
  • Label fade: opacity 0 → 1 on active state

Interactive Features

Hover System

  1. User hovers over symbol
  2. JavaScript detects mouseenter event
  3. Reads data-symbol attribute (e.g., "001.PRESSURISED.AREA")
  4. Formats symbol name (removes prefix, replaces dots)
  5. Displays formatted name in centered modal label
  6. Label fades in with 0.3s transition
  7. On mouseleave, label fades out
  8. After transition completes, text content cleared

Responsive Grid

  • Grid automatically recalculates on:
    • Page load (DOMContentLoaded)
    • Window resize
  • Aspect ratio-aware column/row calculation
  • Maintains optimal symbol size (60px - 200px)
  • Prevents symbols from being too small or too large
  • Works on all devices: phones, tablets, laptops, ultra-wide monitors

SEO Implementation

Meta Tags

Comprehensive SEO in <head>:

  • Title: Full "Semiotic Standard For All Commercial Trans-Stellar Utility Lifter And Heavy Element Transport Spacecraft"
  • Description: "A comprehensive set of 30 standardized symbols designed by Ron Cobb in 1978..."
  • Keywords: "semiotic standard, spacecraft, symbols, Ron Cobb, space design"
  • Author: Ron Cobb

Open Graph Tags

Facebook, LinkedIn optimization:

Twitter Cards

Enhanced Twitter sharing:

  • twitter:card: summary_large_image
  • twitter:title: Full title
  • twitter:description: Comprehensive description
  • twitter:image: Preview image

Google Analytics

Configuration

  • Property ID: G-5C5ET6DMNM
  • Implementation: gtag.js (async loading)
  • Tracking: Page views, user behavior

Potential Events to Track

Could implement tracking for:

  • Symbol hover events
  • Time spent viewing each symbol
  • Most viewed symbols
  • Viewport dimensions (to optimize grid)
  • Browser/device statistics

Historical Context

About Ron Cobb (1937-2020)

Visionary artist and designer who created the Semiotic Standard in 1978, predating the 1979 film Alien. His systematic approach to visual communication influenced:

  • Science fiction film design
  • User interface design principles
  • Universal iconography standards
  • Technical environment visualization

Design Date

April 16, 2078 - The future date Cobb assigned to the standard, creating historical authenticity and forward-thinking design philosophy.

Cultural Impact

The Semiotic Standard has influenced:

  • Science Fiction Design: Countless films, games, and literature
  • UI/UX Design: Pioneering principles later adopted in real-world interface design
  • Visual Communication: Standards for iconography in technical environments
  • Popular Culture: Instantly recognizable symbols of space exploration

The Alien Connection

Featured prominently in Ridley Scott's 1979 Alien, the symbols appeared throughout the Nostromo spacecraft, adding realism and depth to the film's world-building.

Development Workflow

Local Development

# Clone repository
git clone https://github.com/banastas/SemioticStandard.org.git
cd SemioticStandard.org

# Open in browser (no build required)
open index.html

# Or serve with Python
python3 -m http.server 8000
# Visit http://localhost:8000

# Or serve with Node.js
npx http-server -p 8000

Making Changes

  1. Edit index.html for content
  2. Edit assets/css/style.css for styling
  3. Edit assets/js/script.js for functionality
  4. Refresh browser to see changes (no build step)

Adding New Symbols

If new symbols were discovered or created:

  1. Add SVG file to assets/images/
  2. Add <div class="symbol-item"> to index.html
  3. Set data-symbol attribute with naming convention
  4. Update README.md documentation

Deployment

Build Process

No build process required:

  • All files are production-ready as-is
  • No compilation or bundling
  • No dependency installation
  • Upload files directly to hosting

Hosting Options

Works with any static hosting:

  • GitHub Pages - Free hosting from repository
  • Netlify - Drag and drop deployment
  • Vercel - Connect GitHub repository
  • Cloudflare Pages - Edge deployment
  • AWS S3 + CloudFront - Scalable CDN
  • Any web server (Apache, Nginx)

Deployment Steps

  1. Upload all files to web root
  2. Ensure index.html is in root directory
  3. Verify assets/ directory structure preserved
  4. Configure custom domain (optional)
  5. Enable HTTPS (recommended)

No Environment Variables

Completely static - no configuration needed.

Performance

Asset Optimization

  • HTML: 107 lines, minimal size
  • CSS: 31 lines, highly compressed
  • JavaScript: 59 lines, no dependencies
  • Images: SVG format, scalable without quality loss
  • Total Page Weight: < 500KB (35 SVGs + HTML/CSS/JS)
  • Requests: 38 total (1 HTML, 1 CSS, 1 JS, 35 images, 1 analytics)

Loading Performance

  • First Contentful Paint (FCP): < 1s
  • Time to Interactive (TTI): < 1.5s
  • Total Blocking Time (TBT): Minimal (vanilla JS)
  • Cumulative Layout Shift (CLS): 0 (static grid)

Runtime Performance

  • Smooth Animations: CSS transitions, hardware-accelerated
  • Efficient Event Handling: Event delegation pattern
  • No Memory Leaks: Proper event cleanup
  • Responsive Resize: Debounced grid recalculation

Browser Compatibility

Desktop Browsers

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Opera (latest)

Mobile Browsers

  • iOS Safari (14+)
  • Chrome Mobile (latest)
  • Samsung Internet (latest)
  • Firefox Mobile (latest)

Required Features

  • CSS Grid (all modern browsers)
  • CSS Flexbox (all modern browsers)
  • SVG support (all modern browsers)
  • ES6 JavaScript (arrow functions, const/let, template literals)

Accessibility

Current Implementation

  • Semantic HTML: Proper structure
  • Alt Attributes: All images have alt text
  • Keyboard Navigation: Tab through symbols
  • High Contrast: White on black for readability
  • Responsive: Works on all screen sizes

Potential Improvements

  • ARIA labels for symbol grid
  • Keyboard shortcuts (arrow keys to navigate)
  • Screen reader announcements
  • Focus indicators for keyboard users
  • Tooltip alternative for screen readers

Educational Use

Perfect For

  • Design Students: Study systematic iconography
  • UX/UI Designers: Learn universal design principles
  • Sci-Fi Enthusiasts: Explore iconic design history
  • Film Production: Reference for authentic sci-fi set design
  • Graphic Designers: Inspiration for symbol systems

Resources

  • Full set of 30 symbols in high-quality SVG
  • Historical context and design philosophy
  • Cultural impact documentation
  • Interactive exploration

Common Tasks

Updating Symbol Images

Replace SVG files in assets/images/:

cp new-symbol.svg assets/images/001.PRESSURISED.AREA.svg

Changing Color Scheme

Edit assets/css/style.css:

body { background-color: #000; color: #fff; }
.symbol-item { background-color: #222; border: 1px solid #444; }

Adjusting Grid Size

Edit assets/css/style.css:

.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

Modifying Hover Behavior

Edit assets/js/script.js:

item.addEventListener('mouseenter', function() {
  // Custom hover logic
});

Known Limitations

Current Implementation

  • No individual symbol pages (single-page only)
  • No symbol categorization/filtering
  • No search functionality
  • No download links for individual symbols
  • No print stylesheet
  • Mobile hover (tap) could be improved

Static Site Constraints

  • No backend or database
  • No user accounts or personalization
  • No analytics dashboard
  • No A/B testing capability

Future Enhancements

Near Term

  • Individual symbol detail pages
  • Category filtering (environmental, safety, technical, etc.)
  • Search functionality
  • Download buttons for SVG files
  • Print-optimized stylesheet
  • Touch/tap interaction improvements for mobile

Long Term

  • Symbol usage examples from Alien film
  • Historical timeline of Cobb's design process
  • Comparison with real-world spacecraft symbols
  • Interactive symbol builder/editor
  • Educational curriculum materials
  • API for symbol data

Credits and Attribution

Primary Credits

  • Ron Cobb (1937-2020) - Creator of the Semiotic Standard
  • Ridley Scott - Director of Alien (1979)
  • 20th Century Fox - Support of innovative design

Vector Symbols

Historical Collaborators

  • H.R. Giger - Swiss artist, Alien visual design
  • Dan O'Bannon - Screenwriter, technical aspects
  • The Alien Production Team - Integration into film universe

Educational Resources

License

Project License

MIT License - see LICENSE file for details

Symbol Rights

The Semiotic Standard symbols themselves are the intellectual property of Ron Cobb and are used here for educational and historical preservation purposes.

Fair Use

This project serves an educational purpose, preserving and documenting important design history for students, designers, and enthusiasts.

Support & Contact

Last Updated: November 2024 Symbol Count: 30 standardized symbols (33 total with directional variants) Live Site: https://semioticstandard.org Project Type: Static educational site (Pure HTML/CSS/JS) Dependencies: None (Zero dependencies!) File Size: ~500KB total (HTML + CSS + JS + 35 SVGs) Tribute to: Ron Cobb (1937-2020)

"The future is already here - it's just not evenly distributed." - William Gibson