# DESIGN.md > The design brief for **drtseng**, the generative-video practice and teaching site of Shih-Lun Tseng, Ph.D. This document is published with the site as a teaching artifact. The footer link `View the design brief` opens this file. --- ## North Star drtseng exists in the space between two audiences who rarely share a website: **commercial clients** sourcing premium generative-video work, and **entrepreneurs and institutions** learning to operate inside hybrid (human + AI) creative pipelines. The site speaks to both by leading with the work and letting the academic credential anchor the credibility, never the reverse. Three jobs run in parallel on every page: 1. **Frame the AI-generated work without competing with it.** Vertical AI video is the centerpiece; chrome must defer. 2. **Signal scholarly authority.** This is the portfolio of a professor, not a creator-economy account. Restraint is the brand. 3. **Be teachably good.** Students will reverse-engineer this site. The code, the tokens, and the structure should all read as "this is how it's done." --- ## Brand Identity **Brand name.** `drtseng`, all lowercase, one word, no period. The wordmark is treated as a digital-native handle, the same string a viewer would type as a URL or a username. The academic title is deliberately absent from the wordmark; the credential lives in the About section, where it carries more weight than it would in a logo. **No "studio" framing.** drtseng is not a studio. It is a person. All copy refers to the brand as `drtseng` directly, the way a director might refer to themselves on a poster. This avoids the small dishonesty of a one-person practice claiming a team. **Tagline (locked).** > Generative video, practiced and taught. Set in the hero as a three-line headline with the word *hybrid* italicized in brass: > Generative video > *hybrid* workflow. > Practiced and taught. The tagline carries the brand's full thesis. *Generative video* names the medium. *Practiced and taught* names the dual mission (commercial work + university teaching). The italicized *hybrid workflow* in the middle anchors the human + machine collaboration that defines the practice. --- ## Style System ### Color (Inkwell palette) | Token | Value | Use | |---|---|---| | `--bg` | `#0A0A0A` | Page background. Rich near-black, not pure `#000`, which flickers against video edges and crushes shadows. | | `--surface` | `#141416` | Cards, modals. One step lighter, barely perceptible. | | `--hairline` | `#1F1F22` | 1px dividers only. | | `--ink` | `#F4F4EF` | Primary text. Warm off-white, easier on the eye than pure white. | | `--muted` | `#8A8A85` | Secondary text, captions, metadata. | | `--accent` | `#C9A961` | Brass. The single restrained accent. Used only for hover states, link underlines, the active scroll indicator, and section number labels. | **Banned colors.** Anything pastel. Anything neon. Anything that reads as "tech startup gradient." No purple-to-pink. No safety-orange CTAs. ### Typography Single typeface family for harmony, used at extreme size contrast for drama. The only expressive move is the type scale itself: a hero headline at 128px next to body at 16px is the design. | Role | Family | Weight | Notes | |---|---|---|---| | Display | Inter | 500–600 | Hero, project titles, section headings. Tracking `-0.02` to `-0.035em`. | | Body | Inter | 400 | 16px desktop, 15px mobile. Line-height 1.55. | | Mono / utility | JetBrains Mono | 400 | Captions, project metadata, nav links, "Demonstrates" tags. 11–14px. Letter-spacing `0.1em`+, uppercase. | The mono caption running under each video (`format · runtime · aspect · model · year`) is the single most professorial microdetail on the site. ### Spacing, layout, motion - **Spacing scale.** 4px base: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192`. - **Grid.** 12-col, max-width 1440px, 32px gutters desktop, 16px mobile. Vertical video sits in a centered band, leaving generous gutters on each side for typography. *That gutter is the gallery wall.* - **Radius.** Sharp `0px` everywhere except video and image containers, which carry a 4px radius. Sharpness reads professional; tiny radius on media reads contemporary. - **Motion.** Custom easing `cubic-bezier(0.65, 0, 0.35, 1)`. Default durations: 600ms reveals, 300ms hovers, 1200ms hero entrance. `prefers-reduced-motion` collapses everything to instant fades. - **Cursor.** Native. No custom cursor. Custom cursors veer playful, conflict with the anti-childish constraint. ### Punctuation rule (locked) **No em dashes anywhere on the site.** Replacements depend on context: period for hard breaks, comma for asides, colon for explanations, middle dot (`·`) for inline separators in captions and section labels. --- ## Layout & Sitemap Single-page, top to bottom. Pinned scroll-driven video sections. | # | Section | Job | |---|---|---| | 0 | **Sticky header** | Brand mark `drtseng` + minimal nav: Reel / Work / Capabilities / drtseng / Contact. | | 1 | **Hero** | Tagline at extreme scale. No video. Confidence through restraint. | | 2 | **Reel** | The 2-minute "Big in Japan" reel. Pinned, vertical, autoplay muted. Click to expand with sound. Right gutter credits Crystal Sparkle / Zero Takes. | | 3 | **Selected Work** | Ten shorts. Each pinned in turn. Numbered 01–10. Sequenced as a curriculum: commercial, vlog, storytelling, action. One landscape piece (06) demonstrates aspect-ratio flexibility. | | 4 | **Capabilities** | Four blocks: Business / Advanced Prompting / Hybrid Workflows / Taste & Critique. Each block pairs commercial practice with classroom teaching. | | 5 | **Recognition** | The hard stat as the headline ("Top 200 most-remixed of 2M Sora users"), Sora media kit + stats images, plus a pull quote. The credibility moment. | | 6 | **drtseng (About)** | Section heading is literally `drtseng`, accessed via the nav link `drtseng`. Names Shih-Lun Tseng, Ph.D., links to CSU Information Systems. | | 7 | **Contact** | Minimal form: Name / Email / Message. Open to any inquiry. Submit prepares an email via `mailto:`. | | 8 | **Footer** | Brand mark, year, email, one-line note that the site is a teaching artifact. | --- ## Selected Work (10 pieces, locked order) The work is sequenced as a curriculum, not a chronology. Each piece is positioned as a directed exercise, with citation where appropriate. The mono caption under each title carries: format · runtime · aspect · gen-model · year. The trailing brass keyword line names the teachable concepts the piece embodies. | # | Category | Title | File | Model | Note | |---|---|---|---|---|---| | 01 | Commercial | Waffle House | `wafflehouse.mp4` | Sora | Brand-introduction film. Homage to AMC Theatres / Nicole Kidman (2021). | | 02 | Commercial | Japanese Commercial | `03-tokyo-spots.mp4` | Sora | A study in commercial language. | | 03 | Commercial | Domestic Futures | `04-domestic-futures.mp4` | Sora | A futuristic product demonstration. | | 04 | Commercial | The Michelin Hamster | `06-michelin-hamster.mp4` | Sora | Branded comedy. Homage to The Bear (FX, 2022). Credits community collaborator [Byeson](https://byesons.com/). | | 05 | Vlog | TikTok Vlog | `05-exchange.mp4` | Sora | TikTok-style platform-native short. | | 06 | Vlog | YouTube Vlog | `08-true-crime.mp4` | Sora | **Landscape (16:9)**. Demonstrates aspect-ratio flexibility. | | 07 | Storytelling | Short Form Storytelling | `shortform-cinematic.mp4` | Sora | Cinematic storytelling in 10 seconds. | | 08 | Storytelling | Lexi's World | `waynesworld.mp4` | **Seedance 2.0** | Re-creation of Wayne's World (Spheeris, 1992). Tests how faithfully the model reproduces a known scene. Music: [Wayne's World Theme](https://music.apple.com/us/song/waynes-world-theme/377806691). | | 09 | Action | Run | `01-run-emily.mp4` | Sora | Kinetic edit. Homage to Run Lola Run (Tykwer, 1998). | | 10 | Action | Fight Choreography | `kassandra.mp4` | **Seedance 2.0** | Hollywood-style action sequence, period-fantasy art direction. Music: [Legend of the Eagle Bearer](https://music.apple.com/us/song/legend-of-the-eagle-bearer-main-theme-feat-mike-georgiades/1640097640) from Assassin's Creed Odyssey. | ### Gen-model labeling convention Every piece carries its generation model in the mono caption. A small, scholarly detail that triples as transparency, source attribution, and a teaching cue. **Sora** for files originating from OpenAI's Sora. **Seedance 2.0** for files carrying the "AI Cast" TikTok watermark visible in the source. A reader can scan a caption like `action sequence · 0:12 · 9:16 · seedance 2.0 · 2026` and know which model produced what. Over time, this builds intuition for which models excel at which kinds of work. Model selection is itself a craft skill. ### Music attribution Pieces generated in Seedance 2.0 use third-party music. Each carries an inline music credit in the project note linking to the Apple Music page for the track. This honors source attribution and gives the visitor a way to hear the piece as intended. ### Community-credit pattern Two collaborator credits live in the site, both written so the directionality is honest. drtseng is a participant in the AI video community, not its center. 1. **Crystal Sparkle / Zero Takes** in the Reel. Crystal Sparkle is a recurring AI character created by [Zero Takes](https://www.zerotakes.com/), the larger creator. drtseng works within Zero Takes' creator community and uses Crystal Sparkle across formats to demonstrate generative videos. Credit lives in the reel's right gutter under a "With" caption. 2. **Byeson** in The Michelin Hamster. A nod to [Byeson](https://byesons.com/), a fellow creator in the AI video community whose hamster-chef thread shaped the work. Credit lives inline in the project note. The pattern is intentional. **Community attribution as house style.** It signals (a) drtseng is part of a broader creator network, not an island, and (b) academic and commercial work can credit creator-economy peers without breaking register. ### Pedagogical framing (the keyword tag) Every work item ends with a small brass-mono line of bullet-separated keywords: > `pace · continuity · cut as engine` The keywords name the teachable concepts the piece embodies. There is no "Demonstrates ·" prefix. The tag's purpose is self-evident from format and placement. To a brand client the keywords read as production credits (what skills drtseng can deliver). To a student or institution they read as curriculum tags (what concepts this piece teaches). The same data point serves both jobs, which is the whole point of drtseng's positioning. --- ## Capabilities (the make-and-teach pattern) Section header: *"What drtseng makes, he teaches."* Sub-line: *"Every capability below is practiced and taught in the university classroom. drtseng and the syllabus share the same craft."* Each block follows a two-part structure: a plain-text first sentence describing what the capability is, then an italicized second sentence stating the practice/teach pairing. This is the brand's dual mission rendered as a design pattern. | 01 | **Business** | Social media marketing, AI content monetization, AI influencer management. Methods that scale from a single founder to an enterprise team. | | 02 | **Advanced Prompting** | The craft skill behind every frame: directing models with the precision that makes output read as intent, not accident. | | 03 | **Hybrid Workflows** | Production pipelines that integrate AI tools into existing creative processes without losing creative control. | | 04 | **Taste & Critique** | The discerning eye that separates intent from output. The difference between AI-as-"slop" and AI-as-craft. | --- ## Recognition The hard number IS the persuasion engine. Headline: > One of the top 200 most-remixed creators on Sora, out of two million users. Sub-line: *"Taken from publicly available platform data."* The Sora media kit (March 2026) and performance summary (April 2026) sit below as visual proof. The pull quote at the bottom anchors the section: *"The work shown here is graded against the same bar as the world's most-watched generative AI video creators."* --- ## About (the academic anchor) Section labeled `drtseng` to match the brand mark. Statement: > drtseng is *Shih-Lun Tseng, Ph.D.*, professor of [Information Systems](https://business.csuohio.edu/information-systems) at an AACSB-accredited Business School in a public university, and one of the first faculty in the United States teaching the commercial application of generative video. Body: *"The work shown here informs the curriculum; the curriculum informs the work."* The CSU Information Systems link makes the credential verifiable. The phrase "one of the first faculty in the United States" is the strongest claim on the site and earns its place because the Information Systems link makes it falsifiable. --- ## Contact Minimal form. Three fields: Name, Email, Message. Submit prepares an email to `sl.allentseng@gmail.com` via `mailto:`. The form is intentionally simple to invite *any* kind of inquiry rather than funnel everyone into a commercial-pitch shape. To wire it to a real backend later, replace the submit handler in `script.js` with a `fetch()` call to a service like Formspree, Basin, or Netlify Forms. Header: *"Get in touch."* Sub: *"Inquiries about commercial work, university programs, speaking, or anything else. Replies within two business days."* --- ## Tone of Voice Professional and academic. Third-person on the home and About sections. First-person allowed in project captions where appropriate. No exclamation marks anywhere. No emoji. Sentences are declarative and short. **Banned phrases.** "Hey there." "Welcome!" "Let's create something amazing." Anything ending in "✨". Anything with "passionate" or "I love what I do." Anything that reads as influencer-creator vocabulary. **Content safety rule.** Nothing NSFW anywhere on the site, in any video, image, prompt excerpt, or caption. All shown work is classroom-appropriate. --- ## Implementation - **No frameworks.** Vanilla HTML, CSS, JS. Single page. Two CDN font links (Inter + JetBrains Mono). No animation library. Uses native CSS `position: sticky` and `IntersectionObserver`. Deliberate: students can read the source. - **Favicon.** Inline SVG data URI in the HTML head. A brass `d` on near-black. No separate file required, no extra HTTP request, ages well at any scaling. - **Video performance.** All `