# Design Language for simidiot.com ## Aesthetics and Tone simidiot.com channels the exuberant spirit of a 1970s science magazine cover that somehow predicted the internet -- think Omni magazine crossed with Saul Bass title sequences, rendered through the lens of a Soviet space-program propaganda poster that accidentally became cheerful. The aesthetic is **retro** in the truest sense: not nostalgic pastiche, but a genuine excavation of the visual optimism that characterized mid-20th-century futurism, when tomorrow was something to sprint toward rather than dread. Every surface carries the conviction that technology is a force for absurd, delightful progress. The tone is **optimistic-bright** -- not the hollow positivity of corporate wellness branding, but the giddy, slightly unhinged enthusiasm of an inventor demonstrating a perpetual motion machine at a county fair. There is warmth here, but it is the warmth of cathode ray tubes and overheating transistor radios, not of handshakes and customer service smiles. The site should feel like discovering a time capsule from a future that never happened -- one where all the problems got solved by people who were too excited to be afraid. Color saturation is pushed to the edge of comfort. Geometric forms dominate. Flatness is embraced not as a design trend but as a philosophical position: depth is for cowards; the surface is where the action is. Everything is slightly too bold, slightly too vivid, slightly too confident -- and that excess is the point. ## Layout Motifs and Structure The layout follows an **editorial-flow** architecture inspired by the asymmetric column structures of 1960s Czechoslovak typographic magazines and the vertical rhythm of letterpress broadsheets. Content does not sit in a predictable grid -- it cascades down the page in a deliberate, editorial sequence where each section has a distinct compositional identity, like pages in a well-art-directed periodical. **Structural Framework:** - **Opening Spread (100vh):** A full-viewport typographic explosion. The domain name is shattered across the viewport in oversized Bebas Neue letterforms, each character positioned at a different Y-coordinate and rotation angle (never more than 8 degrees), creating a scattered-headline effect reminiscent of constructivist poster design. Between the letters, small vector illustrations (circuit diagrams, radar dishes, stylized atoms) float in fixed positions. No scrolling hint, no down arrow -- the density of the composition itself provokes curiosity. - **Editorial Columns:** Below the hero, content shifts into a two-column asymmetric layout. The left column is narrow (30%) and carries section labels, pull quotes, and small decorative vector vignettes. The right column is wide (62%) and carries body content. An 8% gutter separates them, filled occasionally by vertical rules in #E84855 (signal red). This ratio never reverses -- the asymmetry is a constant, a visual heartbeat. - **Interstitial Full-Bleed Panels:** Between editorial sections, full-width panels interrupt the column flow. These panels are saturated with a single background color from the palette (rotating through #2B2D42, #FFB400, #E84855, #00C9A7) and contain a single oversized vector illustration centered on the viewport. They function as chapter dividers, forcing the reader to pause and reset before the next editorial block. - **Counter Ticker Bar:** A persistent horizontal bar at the bottom of the viewport (48px height, background #2B2D42) contains three animated counters that increment continuously using **counter-animate** patterns. The counters display absurdist metrics -- "Ideas Generated," "Circuits Imagined," "Futures Predicted" -- with numbers rolling upward in Bebas Neue at 1.2rem. The bar is always visible, always counting, creating a subtle sense of forward momentum. - **Terminal Section:** The final section returns to full-viewport, presenting a single vector illustration of a retro television set displaying the text "END OF TRANSMISSION" in flickering monospace, surrounded by concentric signal rings animated outward. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- the condensed, all-uppercase sans-serif that defined an era of poster design. Used at 8vw-12vw for the hero scatter, 3rem-5rem for section headlines. Weight: 400 (Regular, the only weight needed -- Bebas Neue's singular boldness is its identity). Letter-spacing: +0.08em for hero scale, +0.04em for section heads. Line-height: 0.95 (tighter than natural, creating the compressed, urgent feel of a broadsheet headline). Color: primarily #2B2D42 (deep navy) on light backgrounds, #F5F0E1 (aged cream) on dark panels. Bebas Neue is never used below 1.5rem -- at small sizes it becomes illegible, so it exists only as display type. - **Body / Reading Text:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with geometric DNA and a hint of monospace character width that bridges the retro-futuristic gap. Weight: 300 (Light) for body paragraphs, 500 (Medium) for emphasis and pull quotes. Size: 1.05rem body, 1.3rem pull quotes. Line-height: 1.65 for comfortable editorial reading. Letter-spacing: +0.01em. Color: #2B2D42 on light, #EDE8D5 on dark. - **Accent / Labels:** "IBM Plex Mono" (Google Fonts) -- used exclusively for the counter ticker bar, section labels in the narrow left column, and any technical annotations. Weight: 400 (Regular). Size: 0.8rem-1rem. Text-transform: uppercase. Letter-spacing: +0.12em. Color: #E84855 (signal red) for labels, #00C9A7 (teal-mint) for counter numbers. **Palette:** The palette is **retro-futuristic** -- a collision of mid-century optimism and space-age chrome that avoids both the desaturation of genuine vintage and the synthetic glow of neon. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Navy | Midnight command center | #2B2D42 | Primary backgrounds, headline text on light | | Signal Red | Emergency broadcast warmth | #E84855 | Accents, vertical rules, section labels, hover states | | Solar Gold | Vacuum tube filament | #FFB400 | Counter numbers, highlight backgrounds, pull-quote marks | | Teal Mint | Oscilloscope trace | #00C9A7 | Secondary accents, link underlines, icon strokes | | Aged Cream | Yellowed technical manual | #F5F0E1 | Primary light background, body text on dark | | Warm White | Projection screen | #EDE8D5 | Alternate body text on dark panels | | Charcoal | Control panel surface | #1A1B2E | Darkest backgrounds, footer | | Coral Soft | Sunset radar | #FF6B6B | Tertiary accent, illustration fill | Gradients are forbidden. Every color is flat and opaque. Shadows do not exist. The only depth cue is overlapping elements with z-index -- like paper cutouts layered on a lightbox. ## Imagery and Motifs **Vector Art as Primary Visual Language:** All imagery is **vector-art** -- no photography, no raster textures, no gradients. Every illustration is constructed from flat geometric shapes with hard edges and solid fills, in the style of mid-century technical illustrations crossed with Alexander Girard's folk-art geometrics. The vector vocabulary includes: 1. **Retro Tech Devices:** Stylized illustrations of vintage technology rendered in the palette colors -- cathode ray monitors with rounded corners and antenna ears, reel-to-reel tape machines with spinning reels (animated via CSS rotation), radar dishes with concentric signal rings, vacuum tubes with glowing filaments (#FFB400 inner glow simulated by layered circles of decreasing opacity). Each device is built from no more than 15-20 SVG primitives (circles, rectangles, paths) to maintain the clean, constructed aesthetic. 2. **Circuit Motifs (abstract-tech):** Abstract circuit board patterns serve as decorative borders and section dividers. These are not realistic PCB traces but stylized interpretations -- straight horizontal and vertical lines in #00C9A7 connecting circular nodes in #E84855, with occasional right-angle turns. The patterns tile horizontally and are 24px tall, used as top/bottom borders on editorial sections. Some nodes pulse using a CSS animation (opacity cycling between 0.4 and 1.0 over 2 seconds, staggered). 3. **Atomic and Orbital Graphics:** Bohr model atom diagrams with elliptical orbits and circular electron dots, used as decorative elements in the left editorial column. The orbits are animated with a slow CSS rotation (20-second full revolution) at different speeds per orbit ring, creating a mesmerizing layered motion. Electrons (#E84855 circles, 6px diameter) trace the orbital paths. 4. **Geometric Badges:** Hexagonal, circular, and diamond-shaped badge frames containing single-icon illustrations (a rocket, a lightbulb, a gear, a satellite). These badges are scattered through the interstitial full-bleed panels and use the panel's complementary color for their stroke (e.g., #F5F0E1 stroke on a #2B2D42 panel). 5. **Signal Wave Patterns:** Sine wave and sawtooth wave forms rendered as SVG paths, used as horizontal dividers between paragraphs. The waves are static but their stroke is animated using `stroke-dasharray` and `stroke-dashoffset` to create a drawing-on effect when they enter the viewport. **No photography. No raster images. No external image files.** Every visual element is inline SVG or CSS-drawn, ensuring the entire site loads as pure code -- a fitting tribute to the vector-art philosophy. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a 1-second black screen (#1A1B2E) that evokes the moment before a vintage television warms up. Then, the aged cream background (#F5F0E1) floods in from the center outward using a CSS clip-path circle animation (from `circle(0% at 50% 50%)` to `circle(100% at 50% 50%)` over 0.8 seconds with ease-out). As the background expands, the scattered Bebas Neue letterforms of "SIMIDIOT" appear one by one with 120ms stagger delays, each letter dropping in from above with a spring-physics cubic-bezier (0.175, 0.885, 0.32, 1.275) over 0.5 seconds. Between the letters, vector illustrations materialize with a scale-up from 0 to 1 using the same spring easing, staggered 50ms after their neighboring letter. **Counter-Animate Implementation:** The persistent bottom ticker bar is the signature interactive element. Each counter uses a **counter-animate** pattern: JavaScript incrementing a numerical value and updating the DOM at 60fps, with the displayed number formatted using locale-appropriate separators. The numbers do not simply jump -- each digit column scrolls vertically through a strip of 0-9 characters, like a mechanical odometer. Implementation: each digit position is a `
` with `overflow: hidden` and a fixed height of 1.2rem, containing a vertical stack of digits 0-9. On increment, the stack's `translateY` is animated to the target digit using CSS transition with `cubic-bezier(0.34, 1.56, 0.64, 1)` (overshoot spring) over 300ms. The counters start at random large numbers (e.g., 1,247,803) and increment at different rates (every 2.3s, 4.7s, 7.1s respectively -- prime-ish intervals to avoid synchronization). **Editorial Scroll Choreography:** As the user scrolls past the hero, the editorial columns enter using a coordinated sequence: the narrow left column slides in from the left with a 200ms delay, the right column fades in from 20% opacity to 100%. Section labels in the left column use the **counter-animate** pattern for their numbering -- "01," "02," "03" -- with each digit rolling into place as the section enters the viewport. Vertical rules between columns draw downward using `scaleY(0) -> scaleY(1)` with transform-origin at top. **Interstitial Panel Transitions:** When a full-bleed color panel enters the viewport, the transition is abrupt -- no fade, no slide. The panel simply IS there, occupying the full width, creating a jarring visual reset that mirrors the effect of turning a page in a printed magazine. The central vector illustration within each panel uses a **path-draw-svg** effect: SVG strokes draw themselves on over 1.5 seconds using `stroke-dasharray` equal to path length and `stroke-dashoffset` animating from path length to 0. After the stroke completes, fills fade in over 0.3 seconds. **Hover and Interaction Details:** - Links: no color change on hover. Instead, a 2px underline in #E84855 draws from left to right over 0.3 seconds (width animating via `scaleX(0) -> scaleX(1)` with transform-origin left). - Vector illustrations: on hover, all fills shift to their complementary palette color over 0.2 seconds (e.g., #E84855 becomes #00C9A7), creating a sudden chromatic inversion. - Counter ticker: hovering over a counter freezes its animation and displays a tooltip (pure CSS, no JS library) showing a humorous label for the metric. **AVOID:** CTA buttons, pricing tables, stat-grid dashboards, testimonial carousels, hero video backgrounds, hamburger menus, sticky headers (only the counter ticker bar is persistent), gradient backgrounds, drop shadows, border-radius above 2px (sharp corners are doctrine). **Bias toward storytelling:** The page reads like a broadsheet newspaper from an alternate-universe space program -- each section reveals a new facet of this imagined world, and the counter ticker at the bottom provides a constant, reassuring hum of progress. ## Uniqueness Notes **Differentiators from other designs:** 1. **Mechanical Odometer Counter Animation:** The counter-animate pattern (2% frequency) is implemented as a physical odometer metaphor with per-digit vertical scrolling strips, spring-overshoot easing, and prime-interval timing to prevent synchronization. No other design in the portfolio uses counter-animate as a persistent, always-visible navigation element. The counters are not informational -- they are atmospheric, creating a sense of perpetual forward motion that reinforces the optimistic-bright tone. 2. **Zero-Raster Vector Purity:** The vector-art imagery approach (2% frequency) is taken to its logical extreme: there are no raster images whatsoever. Every visual element -- illustrations, decorations, dividers, icons -- is inline SVG or CSS-drawn. This is not a constraint born of minimalism but of conviction: the retro-futuristic world this site inhabits is a world of blueprints and technical drawings, where every line has a purpose and every curve is mathematically defined. 3. **Editorial Asymmetric Column System:** The editorial-flow layout (5% frequency) uses a fixed 30/62/8 column ratio that never reverses, creating a consistent visual heartbeat distinct from the symmetric and centered layouts that dominate the portfolio (centered at 99%, asymmetric at 49%). The narrow left column functions as a marginalia system -- section numbers, pull quotes, decorative vignettes -- reminiscent of medieval manuscript annotation translated into constructivist graphic design. 4. **Flat Absolutism -- No Gradients, No Shadows:** While most designs use gradients (88%) and warm palettes (100%), this design enforces a strict flat-color discipline with a retro-futuristic palette (4% frequency). Every color is 100% opaque, every edge is hard, every overlap is z-index-only. This creates a visual language closer to screen-printed posters than web design, and the restriction becomes a distinctive strength: the eye can parse every element instantly because nothing bleeds into anything else. 5. **Constructivist-Meets-Girard Illustration Vocabulary:** The combination of abstract-tech circuit motifs (6% frequency) with mid-century folk-geometric illustration style (Alexander Girard-inspired badges and device drawings) creates a visual vocabulary that does not exist elsewhere in the portfolio. The retro tech devices (CRT monitors, radar dishes, vacuum tubes) are treated not as nostalgic objects but as icons of an optimistic technological mythology. **Chosen seed/style:** aesthetic: retro, layout: editorial-flow, typography: bebas-bold, palette: retro-futuristic, patterns: counter-animate, imagery: vector-art, motifs: abstract-tech, tone: optimistic-bright **Avoided overused patterns:** centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), minimal imagery (95%), vintage motifs (88%), friendly tone (99%), playful aesthetic (95%), parallax patterns (73%), gradient palette (88%)