# Design Language for yami.cam ## Aesthetics and Tone yami.cam (v2) is an **Anti-Design Sunset Observatory** -- a single-column field report from a quiet rooftop where a half-broken pinhole camera looks west into a long sunset and refuses to be a tidy product page. The aesthetic is **anti-design**: deliberate misalignments, refused symmetries, naked monospaced runs of metadata sitting next to oversized futura-geometric type set at impossible weights, photographic 3D renders mounted with crooked tape, and entire blank fields where a header "should" be. The .cam suffix is read as "camera obscura" -- not a product, not a service, just an empty room with a hole through which warm orange light enters and lands on the wall. The tone is **calm-serene**: this is anti-design without irony, anger, or shock. There are no glitch hazards, no clashing magenta-on-lime, no torn JPEGs. Instead the design is calm anti-design: the gentle anti-design of a found object on a quiet shelf, of an unmade bed in afternoon light. The misalignments do not assault the viewer; they soothe. Crooked headings sit beside futura-geometric subheads that are *too* perfect, and the contrast reads as breath -- as honesty rather than aggression. The narrative spine: the page is one long sunset, scrolling slowly from cold pre-dusk to deep amber to the indigo afterglow. A single 3D render of a "yami camera" -- a fictional cylindrical pinhole device floating in mid-air -- rotates 0.4 degrees per second in the background. The visitor's job is simply to scroll, to watch the colors shift from cool dusk-violet through sunset-warm into night, and to read a few fragmentary captions placed at angles between the photographs. The sci-fi-hud motifs lurk only in the bottom-corner crop marks and one slowly pulsing exposure-meter ring. Everything else refuses cleanness. ## Layout Motifs and Structure The composition is a **single-column** layout -- one slightly off-center column (max-width 640px) shifted 36px right of true center, as if the typesetter forgot to align it. The column is interrupted at irregular intervals by full-bleed 3D-render breakaways and by tilted caption strips. Everything refuses the 12-column grid; instead, columns shift left and right by 8-24px between sections. **Macro structure:** - **Threshold (Section 0, 100vh):** A single oversized futura word "YAMI." set in 320px black, top-left, with severe negative leading. Beneath it, in tiny mono, a deliberately mis-kerned line reads "an observatory of one camera -- looking west, slowly." A pulse-attention exposure-meter ring (sci-fi-hud) hovers in the bottom-right corner, pulsing at a slow 5.4s breath. - **Pinhole (Section 1, 140vh):** A full-bleed 3D-render of the floating yami camera (a cylindrical brushed-aluminum tube with a pinhole lens, suspended in space). The render rotates 0.4 deg/s. Across the camera body, in mono, six lines of metadata read like a museum tag ("focal: infinite / iso: dusk / shutter: one breath"). The metadata is rotated 1.8 degrees clockwise -- not enough to be "broken," just enough to be wrong. - **The Long Sunset (Sections 2-5, scrolls):** Four "exposures" -- each a single oversized futura word ("HORIZON.", "VERMILION.", "AFTERGLOW.", "VOID.") set at 240-320px black weight, paired with a 90-word fragment in mono, and a small 3D-rendered sunset gradient panel mounted as if taped to the page with a slightly crooked single piece of paper tape (visible torn edges, a small shadow). Each section's palette shifts one stop warmer along the sunset-warm wheel. - **Aperture (Section 6, 60vh):** A single pulse-attention sci-fi-hud ring at center -- an aperture diaphragm dilating and contracting on a 9s breath. Below it, a single mono line reads " the camera has closed." in lowercase. - **Tail (Section 7, 50vh):** A tiny mono colophon, deliberately mis-aligned to the right edge, fading into the indigo afterglow at the document's foot. **Spatial grammar:** The page rejects centering. Every block is offset by 8-36px from where it "should" be. Vertical rhythms break: 96px / 132px / 88px / 196px / 64px gaps between sections, never a regular cadence. Two tape-marks per render appear at slightly mismatched angles. Pulse-attention rings sit at corners, never at center -- except the final aperture, which earns its place at center by being the one symmetric thing in the whole design. ## Typography and Palette **Fonts (all Google Fonts):** - **Display words:** "Sora" at clamp(140px, 28vw, 320px), weight 800, letter-spacing -0.04em -- a futura-geometric face used at brutal sizes for the four sunset words. Sora reads as a contemporary Futura-descended geometric and feels both perfect and slightly wrong at this scale, exactly the anti-design tension required. - **Subheads and small display:** "Sora" weight 400 at 28-44px, letter-spacing 0em. - **Mono captions and metadata:** "JetBrains Mono" weight 400 at 13-15px, letter-spacing 0.04em. Used for all captions, metadata, the colophon, and the deliberately mis-kerned threshold line. Never bold, never italic. - **Hand-set (one occurrence only):** "Caveat" at 18px, used exactly once on the "the camera has closed." line at Section 6 -- the only handwritten note in the entire design. **Palette (sunset-warm wheel, eight stops cool-to-warm, plus one cool ground anchor):** - **Cool ground (top):** #2E2F4A (dusk-indigo) and #4A4760 (slate-violet). - **Mid sunset:** #C77052 (terracotta-glow), #E08F4A (amber-mid), #F2B45C (honey-light). - **Warm peak:** #F7723B (vermilion-fire), #C7321E (deep-rust), #FFE8C2 (eyelid-cream). - **Afterglow (bottom):** #5A2547 (plum-afterglow), #1A1326 (indigo-end). - **Mono accent:** #0B0B12 (text on cream sections) and #F2EDE2 (text on indigo sections). Never any color other than these on type -- type stays bichromatic, the photography carries the chroma. **Type-color rules:** Sora display words always render in dense black #0B0B12 on cream/honey grounds, and in eyelid-cream #FFE8C2 on rust/indigo grounds. Mono captions always render in 70% opacity of the contrast color. The Caveat hand-note renders in vermilion #F7723B. ## Imagery and Motifs **Core visual motifs:** - **3D-render imagery (imagery mandate):** Three core 3D renders carry the page: (a) the cylindrical yami camera floating against a soft dusk gradient, rendered with matte brushed-aluminum, a single pinhole bored straight through, and a soft global-illumination shadow beneath; (b) four small "exposure-panel" renders -- thin rectangular slabs of glass holding the sunset gradient at four different times of day, each photographed against a velvet ground; (c) one aperture-diaphragm render at Section 6, monochrome brushed-steel. All renders read as physical objects, never as UI. - **Sci-fi-hud motifs (motif mandate):** Three hud elements appear, each a thin monoline ring or rule: the threshold exposure-meter ring (bottom-right corner, Section 0), the final aperture ring (center, Section 6), and a tiny rangefinder cross-mark printed faintly on each exposure-panel render. All hud elements are 1px stroke, no fill, in mono accent color. The hud never grows into a "dashboard" -- it stays as a quiet trio of camera-internal symbols. - **Tape-mount motif:** Each exposure-panel render appears as if taped to the page with a single piece of off-white paper tape, slightly translucent, with a soft 6px drop shadow. The tape angle differs every time (3deg, -1deg, 5deg, -2deg). The tape is never perfectly aligned. - **Crooked metadata strips:** Each 3D render is annotated by a mono metadata strip rotated 1.5-2.5 degrees off horizontal. The rotation alternates: clockwise, counterclockwise, clockwise. The misalignment is never random; it is composed. - **Pulse-attention rings:** Two pulse-attention rings carry the entire pattern duty: the corner exposure-meter (5.4s slow breath) and the central aperture (9s deep breath). No other element pulses. Pulse-attention is restrained, not anxious. ## Prompts for Implementation **Opening narrative:** Page loads on dusk-indigo #2E2F4A. The single word "YAMI." types in via a 1.4s heavy-stroke reveal (each letter drops 24px into place, 60ms cascade). The mono threshold line types in 800ms later as a slow typewriter (24cps). The pulse-attention exposure-meter ring ignites last, blinking once at 800ms then settling into its 5.4s breath. Nothing else happens for 1.4 seconds. **Scroll narrative:** As the visitor scrolls, the background color of the document slowly transitions through the sunset-warm wheel via a smooth interpolation tied to scroll position (not to time). Cool dusk-indigo at 0vh, terracotta at 200vh, vermilion peak at 500vh, plum-afterglow at 800vh, indigo-end at 1000vh. The 3D camera render at Section 1 rotates continuously at 0.4 deg/s regardless of scroll. As each oversized word enters viewport, it slides up from below with intentional 2-degree over-rotation, then settles to its mis-aligned final angle -- the over-rotation is the only "incorrect" motion in the design and reads as anti-design honesty. **Tape-mount reveals:** The four exposure-panels are revealed as if a hand peeled off a piece of tape -- the tape strip wipes from one edge to the other in 700ms, exposing the gradient panel beneath. Each panel's reveal direction alternates: tape peels left-to-right, then right-to-left, then top-to-bottom, then bottom-to-top. **Aperture closure:** At Section 6, the aperture diaphragm ring dilates from a 32px radius to a 180px radius over 6 seconds as the visitor scrolls into the section, then closes back to a 12px point and holds. The mono line "the camera has closed." types in (24cps) just as the aperture reaches its smallest point. Then, 600ms later, the Caveat hand-note appears in vermilion as a single quick fade. **Avoid:** No buttons, no nav, no menu, no pricing, no testimonials, no stat blocks, no CTAs. No video. No icons beyond the three hud rings. No round corners on any frame -- everything is sharp-cornered or torn-edged tape. No glitch effects, no broken-pixel art, no jittering text -- the anti-design here is *calm*. **Tone in motion:** Every motion is slow and breathing. Curves are cubic-bezier(.4,.0,.2,1) or slower. Nothing snaps. Nothing pops. The camera takes one long exposure across the entire scroll. ## Uniqueness Notes **Differentiators from other designs:** 1. **Calm anti-design:** Anti-design (2% category) is normally aggressive (clashing colors, glitch text, broken layouts). Here it is calm and meditative -- mis-alignments at 1.8 degrees, paper tape at 3 degrees, crooked metadata. The anti-design is honest, not hostile. No other site in the corpus pairs anti-design with calm-serene tone. 2. **Sunset-warm palette as a scroll-driven gradient narrative:** The entire document color drifts through 8 sunset stops tied to scroll position. Sunset-warm (1% palette) is rarely used; tying it to a full-page scroll-driven hue shift is novel. 3. **3D-render as physical museum object, not UI:** The yami camera and the exposure panels are rendered as physical brushed-aluminum and velvet-mounted objects, never as floating UI cards. 3D-render imagery (rare) is used here as object photography, not as decorative gradient mesh. 4. **Two pulse-attention rings, all other motion forbidden:** The pulse-attention pattern (4% category) does the entire motion duty for the design, alongside the rotating camera. No parallax (94% AVOIDED), no scroll-triggered card reveals (33% AVOIDED). Pulse is the heartbeat; the camera rotation is the breath. 5. **Futura-geometric at 320px:** Sora used at 320-pixel weight-800 sizes is anti-design's brutal punctuation against tiny mono captions. The contrast is the design language. Mono typography (82% overused) is used sparingly here, only for captions -- inverted from the corpus norm. 6. **One-time Caveat handwriting:** A single line of handwritten font (Caveat) appears exactly once in the entire design, on the camera-closure moment. Handwritten typography (10%) reserved for one ceremonial whisper. **Chosen seed:** aesthetic: anti-design, layout: single-column, typography: futura-geometric, palette: sunset-warm, patterns: pulse-attention, imagery: 3d-render, motifs: sci-fi-hud, tone: calm-serene. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%), photography (90%), mysterious-moody (71%), warm-palette (92%) as a flat wash (used here only as a scroll-driven gradient narrative), mono typography (82%) as primary type (here only for captions).