# Design Language for aei.st ## Aesthetics and Tone aei.st is a hand-drawn zine pinned to a neon-lit corkboard -- a site that feels like flipping through a friend's scrapbook at a late-night diner where every surface glows hot pink and electric lime. The hand-drawn aesthetic is not precious or delicate; it is loose-line, marker-on-cardstock, slightly wobbly. Borders are sketched SVG strokes with visible overshoot. Corners are rounded unevenly. Decorative elements look hand-lettered with a fat chisel-tip marker, not generated by a computer. The tone is warm, friendly, and disarmingly casual -- like a note slipped into your jacket pocket that says "hey, look at this cool thing." There is zero corporate posturing, zero startup energy. The site reads like a personal broadcast from someone who genuinely likes sharing ideas. The dopamine-neon palette injects an impossible brightness into the hand-drawn linework, creating a tension between analog imperfection and digital saturation that feels distinctly 2020s. Inspiration: Risograph print culture, VHS-era MTV title cards, Japanese purikura sticker machines, Keith Haring's subway chalk drawings, the handwriting on the walls of a college radio station booth. ## Layout Motifs and Structure The layout is a strict single-column vertical scroll. No sidebars, no split-screens, no multi-column grids. Content flows in one continuous stream, like a vertical zine. The column is deliberately narrow -- max-width 680px on desktop, centered, with enormous side margins that become the "corkboard" background space where decorative retro-pattern elements float. **Structure:** - **Hero zone:** Full-viewport, single centered headline in oversized hand-drawn type. Below the headline, a single photograph (Polaroid-style, tilted 2-3 degrees with a thick white border and a drop-shadow drawn as a sketched rectangle offset by 4px). No buttons, no CTAs -- just a warm greeting and an image. - **Content stream:** Sections are separated by hand-drawn divider lines -- wiggly SVG `` elements that look like someone dragged a marker across paper. Each section contains one idea: a heading, a short paragraph, and optionally a photograph or a hand-drawn doodle. - **Interstitial moments:** Between every 2-3 content sections, a full-width "sticker" element breaks the column -- a retro-pattern shape (checkerboard, zigzag, or polka-dot fill) rotated 5-12 degrees, containing a single word or short phrase in handwritten type. These are the site's punctuation marks. - **Footer:** A hand-drawn horizontal line, a small doodle of a star or smiley, and a single line of text. No link grids, no newsletter signups. Vertical rhythm is generous: 80px between sections on desktop, 48px on mobile. The narrow column and ample whitespace create a reading experience that feels intimate rather than empty. ## Typography and Palette **Typography:** - **Display / Headlines:** "Caveat" (Google Fonts) -- a handwritten script with natural character variation, slightly condensed and energetic. Used at 3rem-5rem for section headings, with line-height: 1.1. No text-transform -- the natural mixed case of handwriting is the point. Weight: 700 for headlines, giving thick marker-like strokes. - **Body / Paragraphs:** "Space Grotesk" (Google Fonts) -- a proportional sans-grotesk with a subtly geometric skeleton and distinctive letterforms (the single-story 'a', the straight-leg 'R'). Used at 18px/1.75 for body text, 15px/1.6 for captions and metadata. Weight: 400 for body, 500 for emphasis. The contrast between the handwritten display type and the precise-but-friendly body type creates a zine-like editorial hierarchy. - **Accent / Sticker Text:** "Baloo 2" (Google Fonts) -- a rounded, bubbly sans-serif that evokes sticker-pack or logo-on-a-skateboard energy. Used only for the interstitial sticker moments at 2rem-3rem, weight 700, always with a slight CSS rotation transform (-3 to 5 degrees). **Palette:** - **Background (Corkboard):** #1a1127 -- a deep warm purple-black that reads as a neon-lit dark surface, not a cold void. - **Card / Column Surface:** #f7f0e8 -- a warm off-white parchment, the "paper" of the zine pages. - **Primary Neon (Hot Pink):** #ff2d7b -- the dominant accent, used for underline-draw animations, sticker borders, and hover states. High saturation, impossible to ignore. - **Secondary Neon (Electric Lime):** #a6ff00 -- used for secondary accents, highlighted words, and the occasional sticker fill. This is the "highlighter marker" color. - **Tertiary Neon (Vivid Cyan):** #00e5ff -- used sparingly for links, visited-state differentiators, and the occasional decorative doodle. Completes the dopamine triad. - **Sketch Ink:** #2a2438 -- the color of all hand-drawn SVG strokes, divider lines, and border sketches. Dark enough to read clearly on the parchment surface, warm enough to avoid looking clinical. - **Text Body:** #3d3450 -- a softened dark purple for body text, warmer than pure black, harmonizing with the overall palette. - **Sticker Fill:** #ffe156 -- a warm electric yellow used only inside the interstitial retro-pattern stickers. Reminiscent of caution tape and purikura frames. ## Imagery and Motifs **Photography Style:** All photographs are presented in a "Polaroid instant print" treatment: rectangular, slightly desaturated (CSS filter: saturate(0.85) contrast(1.05)), with a thick 12px white border rendered as a CSS border on a container that has a slight rotation (transform: rotate(-2deg) to rotate(3deg), randomized per image). Below the photo, inside the white border's bottom padding (24px), a caption appears in "Caveat" at 14px -- mimicking handwriting on a Polaroid. Photos should depict candid, warm, human moments: hands holding objects, sunlit textures, urban details, close-up analog artifacts (cassette tapes, handwritten notes, vintage stickers). No stock-photo sterility. **Hand-Drawn SVG Elements:** - **Divider lines:** Wavy `` elements with non-uniform stroke-width (achieved via SVG `` or simply hand-authored irregular paths). Stroke color: #2a2438. Stroke-dasharray animation on scroll entry, drawing the line left-to-right over 800ms. - **Doodles:** Small SVG illustrations scattered in the margins -- stars with uneven points, spirals, arrows, exclamation marks, smiley faces. All use the sketch-ink color with 2-3px stroke-width and no fill, except occasional fills in #ff2d7b or #a6ff00. - **Corner squiggles:** Every content card has small hand-drawn corner brackets (L-shaped squiggles) instead of CSS border-radius or box-shadow. These are inline SVGs positioned absolutely at each corner. **Retro-Pattern Motifs:** The interstitial sticker elements use CSS-generated retro patterns as fills: - **Checkerboard:** 12px squares alternating #ff2d7b and #ffe156, generated via repeating-linear-gradient. - **Zigzag:** A zigzag border pattern in #a6ff00 on #1a1127, using a repeated conic-gradient. - **Polka dots:** 8px circles of #00e5ff on #ff2d7b background, generated via radial-gradient. - **Halftone dots:** A grid of dots graduating in size, created via radial-gradient with varying sizes, used as a background texture on the corkboard surface at very low opacity (0.04). These patterns reference 1980s-90s graphic design ephemera -- the Memphis Group, Saved by the Bell title cards, and Haring's Pop Shop packaging. ## Prompts for Implementation **Full-Screen Narrative Scroll:** The site must be experienced as a single uninterrupted vertical narrative. There is no navigation bar -- only a small hand-drawn logo/wordmark ("aei.st" in Caveat at 24px) pinned to the top-left with position: fixed, fading in after the hero scrolls out. The hero is a 100vh welcome moment: the domain name drawn enormous in Caveat (8rem+ on desktop), a single Polaroid photo below, and a one-sentence greeting in Space Grotesk. No scroll indicators -- the generous spacing invites natural scrolling. **Underline-Draw Animations (Primary Pattern):** Every section heading has an animated underline that draws itself on scroll entry. Implementation: a `` wrapping the heading text, with a pseudo-element (::after) that uses a hand-drawn wavy SVG as a background-image. On entry (IntersectionObserver, threshold 0.3), the pseudo-element animates from `clip-path: inset(0 100% 0 0)` to `clip-path: inset(0 0 0 0)` over 600ms with ease-out timing. The underline SVG is #ff2d7b, 4px thick, and intentionally wobbly -- not a straight line. On hover, the underline shifts color to #a6ff00 with a 200ms transition. **Sticker Pop Animations:** The interstitial sticker elements enter with a "slap" animation: they scale from 0.3 to 1.05 to 1.0 (a slight overshoot bounce) over 400ms, combined with a rotation snap (rotating from +15deg to their final resting rotation). This mimics the physical act of slapping a sticker onto a surface. Triggered by IntersectionObserver at threshold 0.5. **Polaroid Scatter:** When multiple photographs appear in sequence, they overlap slightly and fan out like someone tossed a handful of Polaroids onto a table. Each photo has a unique rotation (-4deg to +4deg) and a small vertical offset. On scroll entry, they animate from a stacked position (all overlapping at center) to their scattered positions over 500ms with staggered delays (100ms between each). **Sketched Border Draw-On:** Content cards do not appear with borders already drawn. On scroll entry, the four corner-bracket SVGs animate their stroke-dashoffset from full-hidden to zero over 400ms, making the hand-drawn corners appear to sketch themselves into existence. The top-left and bottom-right corners animate simultaneously, followed by top-right and bottom-left 150ms later -- mimicking someone quickly sketching a frame. **AVOID:** CTA buttons, pricing tables, stat counters, testimonial carousels, gradient mesh backgrounds, parallax depth layers, card grids, dashboard-style layouts. This site has no "conversion funnel." It is a place to be, not a tool to use. **Performance Note:** All hand-drawn SVG elements should be inline (not external files) for instant rendering. The wavy underline SVG paths should be reused via `` references to a single `` block. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Hand-drawn SVG linework as structural architecture:** No other design in this collection uses hand-drawn, intentionally imperfect SVG strokes as the primary structural element. While other designs use clean CSS borders, box-shadows, or gradient edges to define content boundaries, aei.st uses wobbly sketched corner-brackets and wavy divider lines that look like marker on paper. This is not a decorative flourish applied to a standard layout -- the hand-drawn quality IS the layout system. 2. **Dopamine-neon palette on analog textures:** The combination of extremely saturated neon colors (#ff2d7b, #a6ff00, #00e5ff) applied to an explicitly analog, hand-drawn visual language is unique in this collection. Other neon-palette sites pair neon with digital aesthetics (glitch, terminal, cyberpunk). aei.st puts screaming neon ink on parchment-textured paper, creating a specific visual tension that references risograph printing and screen-printed zines. 3. **Single-column zine format with no navigation or CTAs:** While other designs use single-column layouts, none commit to the zine conceit this fully. There is no navbar, no sidebar, no footer link grid, no call-to-action. The narrow 680px column with enormous margins, hand-drawn dividers, and interstitial sticker interruptions creates a reading experience closer to a printed publication than a website. The "sticker pop" animations reinforce the physical-object metaphor. 4. **Polaroid photography treatment as sole image format:** Every photograph is presented identically -- white-bordered, slightly rotated, with a handwritten caption below. No hero banners, no full-bleed images, no background photos. This consistent treatment transforms photography into a collection of artifacts, reinforcing the scrapbook/zine identity. 5. **Retro-pattern sticker interstitials as pacing device:** The checkerboard/zigzag/polka-dot sticker elements placed between content sections are a unique pacing mechanism not found in other designs. They function like the decorative interruptions in a 1990s Nickelodeon bumper -- joyful, non-informational visual punctuation that breaks up the reading flow and reinforces the friendly, dopamine-rich tone. **Chosen seed/style:** aesthetic: hand-drawn, layout: single-column, typography: sans-grotesk, palette: dopamine-neon, patterns: underline-draw, imagery: photography, motifs: retro-patterns, tone: friendly **Avoided patterns from frequency analysis:** - Avoided asymmetric layout (95% usage) -- used single-column instead - Avoided mono typography (95% usage) -- used sans-grotesk (Space Grotesk) + handwritten (Caveat) instead - Avoided parallax/stagger patterns (95% usage) -- used underline-draw and custom sticker-pop animations instead - Avoided tech motifs (95% usage) -- used retro-patterns (checkerboard, zigzag, polka dots) instead - Avoided minimal imagery (87% usage) -- used photography with specific Polaroid treatment instead - Avoided gradient palette (95% usage) -- used flat dopamine-neon colors with no gradients in the primary palette