# Design Language for yome.cam ## Aesthetics and Tone yome.cam (v2) is a **Graffiti Pan-Sky Sidewalk** -- a horizontal-scrolling mural where a sky-gradient wall has been spray-painted with mono-spaced graffiti tags, gradient-mesh paint blobs, and pastel bubble-letter exclamations that drift slowly past the viewer as if walking down a long boulevard. The aesthetic is **graffiti**: stencil bursts, layered tags, drip lines, paint-splatter halos, but rendered in a professional disciplined hand -- as if a commissioned mural for a 2027 design conference rather than a back-alley spray. The .cam suffix is read as "camera roll" -- the long pan of a 60-second smartphone panorama dragged sideways. The tone is **professional**: this is graffiti without the rebellion -- the graffiti vocabulary used with editorial restraint. Bubble-playful motifs (rounded soft bubbles, friendly halos, joyful punctuation marks) carry the page's emotional register, balanced by the disciplined mono typography. Gradient-mesh imagery -- soft multi-color cloud-like paint patches -- form the wall's underlying atmospheric color. Scroll-triggered animations are mapped to the horizontal scroll direction, so as the visitor drags right, paint blobs bloom and tags appear in sequence. The narrative spine: a single horizontal mural-pan from left to right, spanning 4-6 full viewport-widths of horizontal scroll. The visitor enters at the west wall (cool pre-dawn blues) and arrives at the east wall (warm sunrise gold), with seven graffiti "tags" along the way, each one a station of the panorama. Bubble-playful exclamations punctuate the mural at irregular intervals. The whole experience is a long horizontal walk past someone else's careful art. ## Layout Motifs and Structure The composition is a **horizontal-scroll** layout -- the page scrolls sideways, not vertically. On desktop, the wheel/trackpad maps vertical scroll inputs to horizontal page motion via a JavaScript scroll-translator. On mobile, the layout converts to a horizontal swipe gallery (or fallback to a vertical stack of 7 panels). Horizontal-scroll (4% layout) is the design's defining choice and demands every element be designed for sideways motion. **Macro structure:** - **Threshold (Panel 0, 100vw):** The west wall of the mural. A deep pre-dawn gradient-mesh sky (cool blues and lavenders), with the wordmark "yome.cam" stenciled at the bottom-left in mono type, 84px, with a slight spray-paint texture. A single bubble-playful exclamation "← pan →" hovers in the lower-right corner. A bubble-arrow icon suggests the horizontal motion. - **Seven Tags (Panels 1-7, 100vw each):** Each panel is a single graffiti tag on a slowly shifting gradient-mesh sky: - **Panel 1: BLUE.HOUR** -- a stencil-style mono tag in pale cyan, with a soft bubble halo behind it. - **Panel 2: VIOLET.DAWN** -- a tag in violet, with drip-line drops descending from the bottom of each letter. - **Panel 3: ROSE.OPENING** -- a tag in coral-pink, with a small bubble-playful flower icon floating above. - **Panel 4: GOLD.WALL** -- a tag in amber-gold, with paint-splatter halos around each letter. - **Panel 5: COPPER.LIGHT** -- a tag in burnt-copper, with thin gradient-mesh "shadows" beneath. - **Panel 6: HORIZON.SHIFT** -- a tag in warm orange, with a small bubble-arrow pointing east. - **Panel 7: YOME.** -- the final tag, in white-on-amber, signed with a thick spray-stroke flourish. Each panel's background gradient-mesh shifts one step along the dawn-color spectrum (cool blue → lavender → rose → amber → gold). The transitions are smooth -- the wall is one continuous mural, segmented only by the seven tags. - **East Wall (Panel 8, 100vw):** The mural's eastern end -- a warm sunrise gradient-mesh with a final small bubble-playful sign "→ end of the wall, see you tomorrow," and a small mono colophon in the lower-right. **Spatial grammar:** Total page width is 800-900vw (8-9 viewport widths). Vertical height is 100vh -- the page is a long horizontal strip. Within each panel, the tag is positioned at varied vertical and horizontal positions (some center, some top-left, some bottom-right) so the panorama does not feel like a slideshow. Bubble-playful motifs drift between panels, sometimes crossing panel boundaries. The gradient-mesh background flows continuously, ignoring panel boundaries. ## Typography and Palette **Fonts (all Google Fonts):** - **Display mono (tags):** "JetBrains Mono" weight 800 at clamp(80px, 12vw, 200px), letter-spacing 0em. A bold mono used for all seven tag names (BLUE.HOUR, VIOLET.DAWN, etc.). The mono adds disciplined typographic structure to the graffiti aesthetic. - **Sub-labels and small mono:** "JetBrains Mono" weight 400 at 14-18px, letter-spacing 0.04em. Used for small annotations beneath tags ("est. 04:48 AM," "tag count: 1 of 7"). - **Bubble-playful exclamations:** "Fraunces" weight 700 italic at 28-48px, with very loose tracking (0.04em) for the "pan →" "see you tomorrow" "← pan →" friendly notes. Fraunces italic carries an inviting humanism that contrasts the mono's discipline. - **Wordmark:** "JetBrains Mono" weight 700 at 84px, lowercase. **Palette (gradient palette, dawn-spectrum from blue to gold):** - **Cool blues (west end):** #2E3868 (pre-dawn deep), #5A6E9C (cool dawn), #87A1C8 (sky-blue), #B5C8E0 (pale blue). - **Lavender / rose (mid):** #B5A0D8 (lavender-dawn), #D8A0BC (rose-dawn), #E8C0C8 (soft rose). - **Amber / gold (east end):** #E8B47A (warm amber), #DA8E4A (copper-gold), #B5662E (deep amber). - **Bubble-playful accent:** #FFE066 (soft sunshine yellow) used for friendly halos and bubble exclamations. - **Spray-paint accents:** #FFFFFF (white spray-overlay) and #1A1626 (deep midnight, for stenciled outlines and the threshold's pre-dawn sky). **Type-color rules:** Mono tags render in white #FFFFFF on cool panels (west end), in deep midnight #1A1626 on warm panels (east end), with a soft 8px outer drop shadow that suggests spray-paint glow. Fraunces bubble-playful exclamations render in sunshine yellow #FFE066. The gradient-mesh fills the background; tags overlay it without modifying it. ## Imagery and Motifs **Core visual motifs:** - **Gradient-mesh imagery (imagery mandate):** The mural's continuous background is a 16-stop gradient-mesh flowing from deep pre-dawn blue at the west edge through lavender, rose, copper, to deep amber at the east edge. The mesh is not a simple linear gradient -- it has soft cloud-like color patches that overlap and blend, creating the impression of dawn light moving across a wall. The mesh shifts subtly over time (24-second drift loops) so even when the visitor stops scrolling, the wall is alive. - **Bubble-playful motifs (motif mandate):** Friendly rounded shapes punctuate the mural: soft bubble halos behind several tags (a faint 40% opacity yellow circle), small bubble-arrow indicators at the threshold and east wall, a few bubble exclamation marks ("!") drifting between panels, a small bubble-flower icon at Panel 3, a bubble-asterisk in Panel 7. The bubbles are soft, smile-shaped, and never aggressive. They are the design's emotional register -- the graffiti is professional but bubbly. - **Spray-paint texture overlays:** Each tag carries a faint spray-paint texture overlay -- a noise pattern simulating air-brushed paint, with a slight "drip" on a few letters (1-2 drip lines descending from the bottom of select letters). The spray texture is subtle (12% opacity) and never overwhelms the legibility of the mono type. - **Drip-line ornaments:** Two or three drip-lines descend from select tags' letters, drawn as thin 2-3px vertical strokes in the tag's color. The drips are intentionally short (15-40px) and end with a small rounded paint-drop. - **Stencil-edge effects:** The seven mono tags carry a subtle stencil-edge effect on their outlines -- a 1px white outline at 70% opacity around each letter, simulating the gap left by a stencil. This makes the tags feel applied, not typed. ## Prompts for Implementation **Opening narrative:** Page loads on the west-wall pre-dawn sky. The gradient-mesh fades in over 1.4s as cool blues and lavenders settle. The wordmark "yome.cam" appears in mono with a spray-paint reveal -- each letter is "sprayed" via a brief radial-blur-to-sharp transition (90ms per letter, cascading). The bubble-playful "← pan →" arrow appears in the lower-right with a soft bubble-bloom (300ms scale + fade). A small mono instruction "scroll to walk the wall" types in (45cps) and then fades after 4 seconds. **Scroll narrative:** As the visitor scrolls (vertically input, mapped to horizontal motion), the page pans sideways. Each panel's tag is scroll-triggered: the tag appears when the panel reaches 50% viewport position, with the following sequence: 1. The bubble halo behind the tag fades in (400ms). 2. The mono tag letters spray-reveal one by one (60ms cascade per letter, 80-120ms per letter total). 3. The drip-lines descend from select letters (700ms each, staggered 80ms apart). 4. Small annotations beneath the tag type in (40cps). 5. Any bubble-playful motifs near the tag drift in from off-panel. **Background mesh drift:** The gradient-mesh continuously drifts at 24-second loop intervals -- soft color patches move horizontally at 0.6px/frame. This motion is independent of scroll and provides life when the visitor pauses. **Inter-panel bubble drift:** Small bubble-playful motifs (asterisks, exclamation marks, friendly arrows) drift across panel boundaries on slow horizontal trajectories. They enter from off-screen-right and exit off-screen-left at 0.4px/frame. **East-wall closure:** As the visitor reaches Panel 8 (the east wall), the gradient-mesh warms to a peak amber-gold. The final tag "YOME." appears with a thicker spray-stroke flourish (a 4px white spray-arc curving beneath the letters). The bubble-arrow "→ see you tomorrow" appears at the bottom-right. **Avoid:** No buttons, no nav, no CTAs, no pricing, no testimonials, no stat blocks, no contact forms. No video (the panorama is the experience). No flat icons except the bubble motifs. No round buttons or pills beyond the bubble exclamations. No raster photography -- everything is graffiti-painted on gradient-mesh. **Tone in motion:** Calm horizontal pan, spray-reveal tags, soft bubble bloom, gentle inter-panel drift. Curves are cubic-bezier(.4, 0, .2, 1) for tag entries and a slow linear drift for the gradient-mesh. Nothing bounces; the wall is steady. ## Uniqueness Notes **Differentiators from other designs:** 1. **Professional graffiti:** Graffiti aesthetic (1%) used with editorial discipline -- mono typography, restrained color, no aggressive layering. The graffiti vocabulary is repurposed as commissioned mural rather than rebel art. No other site pairs graffiti with professional tone. 2. **Horizontal-scroll mural:** Horizontal-scroll (4% layout) used as a literal mural-pan -- the visitor walks sideways past 7 graffiti tags. The horizontal motion is the entire navigation. No vertical scroll inside panels. 3. **Gradient-mesh as continuous wall:** Gradient palette (75% overused) and gradient-mesh imagery (3% imagery) combined as a single continuous 16-stop dawn gradient flowing across 8-9 viewport widths. The mesh is the wall's pigment. 4. **Bubble-playful as emotional register:** Bubble-playful motifs (2% motifs) used as the design's emotional warmth -- soft halos, friendly exclamations, smile-shaped accents. The bubbles balance the disciplined mono. 5. **Mono typography at graffiti scale:** Mono typography (82% overused) used at 200px stencil-tag sizes, with spray-paint texture and drip-lines. Mono as graffiti calligraphy, not as code-block UI. 6. **Scroll-triggered (33%) mapped to horizontal pan:** Scroll-triggered patterns reframed as a horizontal trigger system -- tags appear at horizontal position 50% of viewport. The scroll-trigger is the mural-pan mechanism, not a card-grid scroll-in. **Chosen seed:** aesthetic: graffiti, layout: horizontal-scroll, typography: mono, palette: gradient, patterns: scroll-triggered, imagery: gradient-mesh, motifs: bubble-playful, tone: professional. **Avoided patterns from frequency analysis:** parallax (94%), card-grid (90%), centered (94%), photography (90%), mysterious-moody (71%), warm palette (92%) -- used here only as the east-wall end of the gradient. The default vertical-scroll architecture is AVOIDED entirely.