AI Marketing
Esy prototypes · The Esy OS homepage hero

We built five versions of our homepage. Try them all.

Each one has a working copy of our product inside, so you can use it instead of looking at a mockup. Open any version, hover the chart, switch to dark mode, or let the questions play.

See all five
  1. 1Three directionsA, B, C
  2. 2Two mergesD = A + C · E = B + C
Round 1

Three directions

Three different ways to show the product: beside the copy, under it, or driven by questions.

A · SplitKnow what your AI made, and what it cost.Copy on the left, the product window running off the right edge.Try it B · StageYour AI Marketing team’s work and spend, on one page.A centred headline over a full-width window. Numbered chips point at each part.Try it C · TourEvery piece, every dollar, every sign-off.Four plain questions that play through on their own, each lighting its answer.Try it
Round 2

Two merges

We kept the parts we liked. D is A’s headline with C’s questions; E is B’s headline with C’s questions. E shipped.

D · Split Tour (A + C)Know what your AI made, and what it cost.A’s headline, with C’s questions playing through beside the window.Try it E · Stage Tour (B + C)Your AI Marketing team’s work and spend, on one page.B’s centred headline and button, with C’s questions and the window side by side underneath.Try it

The drop-your-URL hero

Round 1

Three moods, one input

Same promise and the same field in all three. What changes is the weather, where the output sits, and whether the headline sells the work or the receipt.

A · DuskMarketing for online shops / restaurants / software teams.A · DuskMarketing for online shops / restaurants / software teams.A night sky with an aurora over the ridge line, a centred serif promise with the audience typing itself, and the sample posts drifting across the bottom.Try it B · DaybreakYour next month of marketing, made tonight.B · DaybreakYour next month of marketing, made tonight.The light one: warm paper and a low sun, copy and field on the left, two columns of posts drifting upward beside them.Try it C · LedgerA month of marketing for the price of lunch.C · LedgerA month of marketing for the price of lunch.The receipt is the hero: every piece itemised with what it cost, the total counting up, and the flagged ones marked as held for you.Try it

The Marketing Engineering hero

Round 1

Three ways to sell the email

Same promise and the same signup in all three. A sells a publication with a beat, B sells a curriculum, C shows the email itself.

A · Front PageLearn to build the AI systems that run marketing.A · Front PageLearn to build the AI systems that run marketing.A centred masthead and signup over a newspaper-style index of the four desks, each with its latest pieces.Try it B · SyllabusMarketing Engineering for the AI era.B · SyllabusMarketing Engineering for the AI era.Copy, signup, and the teacher on the left; a curriculum card on the right that plays through the four desks, taught and coming up.Try it C · The IssueOne email a week on how AI actually runs marketing.C · The IssueOne email a week on how AI actually runs marketing.The product is the email, so the hero shows one: three sample issues as they land in an inbox, beside the signup.Try it
Round 2

Put a face on it

A newsletter is a person writing to you, so round 2 shows the person. D sets the portrait beside the signup, E puts the promise over a generated scene with a face byline, F makes Zev’s headshot the cover of a dark, first-person page. F shipped.

D · Face SplitLearn to build the AI systems that run marketing.D · Face SplitLearn to build the AI systems that run marketing.Copy and signup on the left; Zev’s portrait on the right in a jade ring, with cards for who he is and the latest issue.Try it E · SceneLearn to build the AI systems that run marketing.E · SceneLearn to build the AI systems that run marketing.White type over a background generated through api.esy.com, with a small face byline under the signup: written by Zev.Try it F · StudioI build the AI systems that run marketing, and show you how.F · StudioI build the AI systems that run marketing, and show you how.A magazine cover in the first person: navy, Zev’s headshot large in a jade ring beside “Hi, I’m Zev”, with clip.art and SEOPage as proof.Try it
Round 3

F on a phone

F’s big portrait pushes the signup below the first screen on a phone. Same desktop in all three; on phones G shrinks the face to an avatar, H makes it a profile row, and I moves the portrait under the form. Compare them side by side at /prototypes/education/phones/. H shipped.

G · Studio · AvatarI build the AI systems that run marketing, and show you how.G · Studio · AvatarI build the AI systems that run marketing, and show you how.F on desktop. On a phone, a 64px photo sits beside “Hi, I’m Zev.” and the signup comes up on the first screen.Try it H · Studio · ProfileI build the AI systems that run marketing, and show you how.LiveH · Studio · ProfileI build the AI systems that run marketing, and show you how.F on desktop. On a phone, a profile row: a 112px photo with name and role, then the headline and signup.Try it I · Studio · Photo afterI build the AI systems that run marketing, and show you how.I · Studio · Photo afterI build the AI systems that run marketing, and show you how.F on desktop. On a phone, the copy and signup come first and the big portrait sits under the form.Try it

The homepage share card

Round 1

Three ways to sell the email

A carries the homepage hero onto the card, B lists what every issue gives you, and C leads with the person who writes it.

A · MastheadLearn to build the AI systems that run marketing.The hero as a card: light paper, the same serif promise, "Free weekly email", and the four desks under a heavy rule with "Subscribe free".Try it LiveB · The OfferOne email a week on building the AI systems that run marketing.Navy, with the promise and a Subscribe button on the left, and a card on the right of what every issue gives you.Try it C · The AuthorI build AI marketing systems in production, and show you how.People first: Zev’s portrait, a promise in his own voice, the title of the newest real article, and the ask.Try it

The image-led article page

Round 1

Three ways to lead with an image

A reads like a magazine with the signup mid-article, B makes the image the cover with the title on it, C is a guide with a sticky table of contents and a reading-progress bar.

A · EditorialA magazine read.Title, summary and byline in a reading column, a wide captioned image, and the signup card after the second section.Try it B · CoverThe picture is the cover.The image fills the first screen with the title and byline on it in white; a centred body, then a navy “get the next one” band.Try it C · GuideBuilt for tutorials people skim.Title and signup beside the image, then a sticky table of contents that follows your place, and a reading-progress bar.Try it
Round 2

One merge

D keeps B’s cover and puts C’s contents rail, with the email signup on top, beside the article under it.

D · Cover Guide (B + C)The cover, then a guide.B’s full-screen cover with the title on the image; under it, a sticky left rail with the email signup and the contents, the article on the right, and B’s navy signup band at the end.Try it
Round 3

Where the email goes

Same page, two places for the first ask: D keeps it at the top of the rail, E puts the video articles’ email bar right under the cover. E shipped as the default for articles without a video.

LiveE · Cover BarThe cover, the email bar, then a guide.D with the email ask moved: the same full-width bar that sits under the video on video articles, right under the cover; the rail keeps only the contents.Try it

The framed video article page

Round 1

Three frames

A sets the video in a navy panel on a light page, B centres it in a dark room with a jade ring, C hangs it in a light mat beside the title. B shipped as the page for every video article.

A · StudioA screen on a stage.A · StudioA screen on a stage.Title and byline in the reading column, then the video in a wide navy panel with generous padding, rounded corners and a soft jade glow.Try it B · TheaterA screen in a dark room.LiveB · TheaterA screen in a dark room.A navy opening with the title in white, the video centred beneath in a spotlight with a thin jade ring and dark space all round.Try it C · MatA framed print.C · MatA framed print.The title on the left; the video on the right in a white mat with a hairline shadow, on a quiet light ground.Try it

The LinkedIn banner

Round 1

Three ways to say what he does

A carries the homepage promise onto paper, B lists what he runs on navy, and C puts one short line over a generated scene.

A · MastheadI build the AI systems that run marketing, and show you how.Light paper with a navy rule on top: the homepage promise in the serif, and clip.art and SEOPage as the proof under it.Try it B · ProofMarketing engineer.Navy. The title and where to read him on the left, and a ledger on the right of what he runs: clip.art, SEOPage, and Esy underneath both.Try it C · SceneMarketing, engineered.The education hero’s generated backdrop, glowing paths over a dark valley, with one short line and the newsletter on its dark side.Try it
Round 2

The name leads

Zev asked for no product names and for the banner to say The Marketing Engineer. Two of them are our navy. D sets the name as a newspaper nameplate on paper, E adds the four desks on navy, and F screens C’s scene onto navy.

D · NameplateThe Marketing EngineerThe name set like a newspaper nameplate on paper, with a double rule under it and the promise and esy.com beneath.Try it E · DesksThe Marketing EngineerNavy. The name, one line on what the email is, and the four desks every issue files under: Build, Grow, Operate, Learn.Try it F · NightThe Marketing EngineerOur navy, with C’s generated scene screened onto it so only the glowing paths show, the name as the headline, and the promise and esy.com under it.Try it
Round 3

His desk, with the name

Zev’s current banner is a photo of his setup: real, but it says nothing. G keeps the photo under a navy wash and puts the name on it.

G · Desk (D)The Marketing EngineerZev’s own desk photo, the banner he uses now, under a navy wash that deepens to the right, with the name, the promise and esy.com on it.Try it

The films pages

Round 1

Two directions

A is a premiere: dark and gold, the page as the film’s last reel. B is a storybook: a light index and a starlit film page that ends on a last letter. A’s film page shipped as /films/the-letter-with-no-address.

A · Premiere indexThe Letter With No Address.A · Premiere indexThe Letter With No Address.A full-screen featured film over a slate of posters and the ten stages.Try it A · Final Reel film pageThe page is the film’s last reel.LiveA · Final Reel film pageThe page is the film’s last reel.Curtain-up opening, the animatic, a film strip of the story, cast posters, the cuts as leader frames, the files as film cans, and rolling end credits.Try it B · Storybook indexFilms made from clip art.B · Storybook indexFilms made from clip art.A light index in the publication’s style, with the film as a storybook card.Try it B · Starlight film pageA starlit film page that ends on a letter.B · Starlight film pageA starlit film page that ends on a letter.The Moon path opening, the chapters, and a last letter in place of a footer.Try it
Round 2

Six indexes

The index had to hold films of every kind, not just children’s. Six directions followed (Premiere, Programme, Screens, Picture House, The Reel, Title Sequence); the title sequence shipped as /films.

The courses index

Round 1

Shelf, syllabus, or stage

A lists each course as a book on a shelf with its chapters, B lays every lesson out as one syllabus with the signup in a sticky rail, and C puts the newest course on a navy stage above a grid.

A · ShelfCoursesA · ShelfCoursesA plain serif hero, then one row per course: a typographic cover, what it teaches, its chapters, and a “start with lesson 1” link.Try it B · SyllabusCoursesB · SyllabusCoursesEvery course with every lesson listed and linked, so you can jump in anywhere. The pitch and the email signup ride along in a sticky rail.Try it C · FeaturedCoursesC · FeaturedCoursesA navy stage for the newest course, with its big cover, its lessons and a Start button, then every course as a card below.Try it
Round 2

Built from the homepage

Zev asked for no grids and nothing like the old style, taking from esy.com and /engineer instead. D is /engineer’s masthead over the Latest list, E is the homepage’s numbered sections, and F announces the course like the homepage’s film.

D · MastheadCourses/engineer’s centred serif masthead with the signup, then the homepage’s Latest block: the course as the lead story with a generated cover, and every lesson as a dated row.Try it E · NumberedCoursesE · NumberedCoursesThe homepage’s 01 / 02 sections: a big jade number and the course on the left, a ruled ledger of its lessons on the right, and chips to jump between courses.Try it F · Now showingCoursesThe course announced like the homepage’s film: a tilted poster beside a logline and credits (taught by, each lesson, running time), in navy and jade.Try it
Round 3

The masthead, then the spotlight

D kept the signup on the first screen and F’s poster made the course enticing, so G puts F’s spotlight straight under D’s masthead. H then adds E’s numbered sections for every other course.

LiveG · Masthead + Now showing (D + F)CoursesD’s centred masthead with the signup, then F’s poster, logline and credits spotlighting the newest course, then what’s coming.Try it H · G + Numbered (G + E)CoursesG’s masthead and poster spotlight as course 01, then every other course as E’s numbered section (02, 03…) with its lessons as a ledger, and chips to jump between them.Try it

The course page

Round 1

Poster, masthead, or theater

A opens on the index’s poster and credits, B on /engineer’s centred masthead with a sticky course card, and C on a framed screen with the lessons as a playlist.

LiveA · PosterHow to Use Claude Code for the AI SolopreneurThe index’s Now showing band as the hero, then what you’ll learn beside the lessons as the homepage’s ledger, the teacher, and the resources.Try it B · MastheadHow to Use Claude Code for the AI Solopreneur/engineer’s centred serif masthead with a Start button, then a sticky course card with the cover and the facts beside the lessons as dated rows.Try it C · TheaterHow to Use Claude Code for the AI SolopreneurWatch first: the cover in a framed screen with a big play button, and every lesson as a playlist beside it, then what you’ll learn and the teacher.Try it

The lesson page

Round 1

Theater, studio, or mat

A puts the lesson in the video article’s dark room with the course in a rail, B is a course player with the playlist beside the video, and C frames the video like a print with the notes read as an article.

A · TheaterIntroduction & SetupA · TheaterIntroduction & SetupThe video article’s dark room: the lesson title in white, the video in a spotlight, the transcript under it, then the course’s lessons in a sticky rail beside the notes and up next.Try it B · StudioIntroduction & SetupB · StudioIntroduction & SetupA course player: the video in the studio frame with the course’s playlist beside it on navy, the transcript underneath, then up next and the notes.Try it C · MatIntroduction & SetupC · MatIntroduction & SetupLight and bookish: the title beside the video in a white mat, the notes read like an article with the lessons in a rail, and a navy up-next band.Try it
Round 2

B, in A’s dark room

B showed the whole course on the first screen, which sells it to a stranger. Zev asked for A’s background behind it: D is that, and E adds the email signup under the playlist.

D · Studio · NightIntroduction & SetupD · Studio · Night (B + A)Introduction & SetupB’s layout in A’s dark room: the title in white, the video in A’s thin jade ring, the playlist as glass beside it.Try it E · Studio · Night + signupIntroduction & SetupE · Studio · Night + signup (D)Introduction & SetupD with the rail doing two jobs: the course line and playlist, then “Get the next lesson by email” right under it, where a stranger decides whether to keep going.Try it
Round 3

The notes and what comes next

E’s stage stays; the part under it changes. F reads the notes as a guide with a contents rail and ends on a navy up-next band, G puts a sticky lesson kit beside them, and H ends on a big next-lesson card with the rest of the course.

F · Body · GuideIntroduction & SetupF · Body · Guide (E)Introduction & SetupThe notes read as a guide with a sticky “In this lesson” rail made from their own headings, closing on a full-width navy band: the next lesson big, with Watch next.Try it G · Body · KitIntroduction & SetupG · Body · Kit (E)Introduction & SetupThe notes beside a sticky lesson kit: up next on navy at the top, what the lesson covers, and its real resources. A slim previous / next bar closes the page.Try it H · Body · End cardIntroduction & SetupLiveH · Body · End card (E)Introduction & SetupThe notes centred, opening on a “What you’ll learn” checklist, ending on a big card for the next lesson with the course cover, then the rest of the course.Try it

The editorial standards page

Round 1

Front page, credits, or a tool

A makes the six-month test one huge statement and sets News against Articles as two cards. B bills them like the homepage’s film. C turns the standards into a News-or-article checker you actually use.

A · Front pageEditorial standardsA · Front pageEditorial standards/engineer’s centred masthead, the six-month test huge on navy with its two answers, News and Articles as two cards facing off, and the rules as numbered cards.Try it B · CreditsEditorial standardsB · CreditsEditorial standardsThe homepage’s film announcement: News and Articles billed side by side in a dark room, each with a credits list and what’s showing, then the rules as the homepage’s ledger.Try it C · Decision toolEditorial standardsC · Decision toolEditorial standardsA News-or-article checker: three yes/no questions, a verdict with where it goes and how to build it, then the comparison as a clean table and the rules as cards.Try it
Round 2

C’s top, new middles

Zev picked C. Its masthead and checker stay; the side-by-side and the rules each get three new treatments, one of each per page: D pairs Versus with an accordion, E a spectrum with rules by stage, F tiles with a sticky rule index.

D · Versus + AccordionEditorial standardsD · Versus + Accordion (C)Editorial standardsSide by side as Versus: News on the left, Articles on the right, the row labels down a spine. The rules as an accordion: numbered titles you open one at a time.Try it E · Spectrum + By stageEditorial standardsE · Spectrum + By stage (C)Editorial standardsSide by side as a spectrum: every row a scale from News to Article (“Weeks” to “Years”). The rules grouped by stage: before you write, while you write, after you publish.Try it F · Tiles + IndexEditorial standardsF · Tiles + Index (C)Editorial standardsSide by side as tiles: one card per attribute, split News and Article. The rules with a sticky numbered index beside them that follows your place.Try it
Round 3

The pick

G is Zev’s combination: E’s spectrum under D’s two-sided header, with D’s accordion for the rules.

G · Spectrum in the frame + AccordionEditorial standardsLiveG · Spectrum in the frame + Accordion (E + D)Editorial standardsC’s checker, then E’s News-to-Article scales framed by D’s two-sided header (News on jade, vs, Articles on navy), then D’s accordion of rules.Try it

The homepage’s 03 Films band

Round 1

Poster or strip

A is the live poster band. B presents the film as a strip of its frames running sideways, pausing on hover.

A · Poster bandNow showingThe band until 2026-09-29: the 2:3 poster beside the logline, the credits, Watch the film and the film page.Try it LiveB · Film stripNow showingA card with the title, logline and facts beside a strip of the film’s own frames running slowly sideways, sprocket holes and scene marks included. The next film stacks as a second strip.Try it

The homepage’s clip.art case study

Round 1

Grid, replay, or range

A is live: 12 Clay Office assets. B replays a real run (run-e9d17422) from prompt to receipt. C shows one prompt in six styles, each its own run.

A · Pack gridclip.art runs on Esy OSA · Pack gridclip.art runs on Esy OSThe band until 2026-09-29: a 4×3 grid of finished assets from one pack, Clay Office.Try it B · Run replayclip.art runs on Esy OSA real run, replayed in code: the prompt, six workflow steps lighting up (render, background removal, cutout audit, naming, text gate), the art changing as they do, and the receipt: $0.057 in 37.9 seconds.Try it C · Style rangeclip.art runs on Esy OSOne prompt, a hot dog in sunglasses, in six of clip.art’s styles: flat, watercolor, line art, pixel, clay and 3D. Each is its own recorded run.Try it
Round 2

The replay, made to sell

Zev picked B and asked for it to be far more appealing. D is a cinematic control room, E the brand’s factory as an assembly line, F a spotlight with callouts. All play the same real run, with a clock and cost that track its real timings.

D · Control roomclip.art runs on Esy OSLiveD · Control room (B)clip.art runs on Esy OSA dark console: the render develops from blur under a scan line, the green screen wipes away, the audit traces a jade outline, the name types in, with a live clock, cost ticker and a timeline in the run’s real proportions.Try it E · Assembly lineclip.art runs on Esy OSE · Assembly line (B)clip.art runs on Esy OSThe factory: the hot dog rides a belt through five lit stations, gets cut out, outlined, labelled and stamped PASS, then lands on a shelf beside its style siblings under 53,506 runs recorded. Full width.Try it F · Spotlightclip.art runs on Esy OSF · Spotlight (B)clip.art runs on Esy OSThe piece under a spotlight; as each step finishes, a callout pops in on a leader line with its real result, ending on a stamped receipt: $0.057, 37.9 seconds, live on clip.art.Try it

The /courses hero, with an intro video

Round 1

Beside, below, or on demand

A puts the video beside the promise and signup, B screens it large in a dark room under the masthead, and C keeps the masthead and adds a small Watch the intro pill.

A · SplitCoursesLiveA · SplitCoursesThe promise and signup on the left, the intro framed in navy on the right, both on the first screen.Try it B · ScreeningCoursesB · ScreeningCoursesThe centred masthead, then the intro playing large in the lesson page’s dark room with its jade ring.Try it C · PillCoursesC · PillCoursesThe centred masthead as it is, plus a small Watch the intro thumbnail by the signup that opens the video in a lightbox.Try it

The AI News post

Round 1

Brief, in the story, or at a glance

A reads like a news brief with the story in a rail. B puts the post inside its story with a timeline of the story’s posts. C leads with a key-facts box and ends with short questions and answers.

A · BriefMeta’s Muse agent comes to small businessesA · BriefMeta’s Muse agent comes to small businessesHeadline, byline, image, then what happened, why it matters, the story and what to check, with the rest of the story and the signup in a rail.Try it B · In the storyMeta’s Muse agent comes to small businessesB · In the storyMeta’s Muse agent comes to small businessesA navy bar with the Meta Muse story’s posts on a timeline, this one lit, then the post, then “Earlier in this story” linking to the story page.Try it C · At a glanceMeta’s Muse agent comes to small businessesC · At a glanceMeta’s Muse agent comes to small businessesA key-facts box under the headline (what, for whom, where, price, control), then the post, then short questions and answers.Try it
Round 2

B, three ways

Zev picked B. D adds C’s key facts and questions under B’s story bar, E moves the story into a rail that stays beside the post, F opens with the story so far for readers who land from search.

D · Story + glanceMeta’s Muse agent comes to small businessesD · Story + glance (B + C)Meta’s Muse agent comes to small businessesB’s story bar on top, C’s key facts under the headline, the post, then C’s questions.Try it E · Story railMeta’s Muse agent comes to small businessesE · Story rail (B)Meta’s Muse agent comes to small businessesThe story in a navy rail that stays beside the post: every post top to bottom with its summary, this one lit.Try it F · Story so farMeta’s Muse agent comes to small businessesF · Story so far (B)Meta’s Muse agent comes to small businessesOpens with the story in three dated lines and what’s new today, then the post, then the story line to follow.Try it
Round 3

D, more considered

Zev picked D for its questions, which AI answers read. G, H and I keep D’s page and redesign the story and the key facts: an editorial line and a quiet list (G), story segments and fact tiles (H), a timeline beside the headline and a spec sheet with icons (I). All three add FAQ data.

G · D · EditorialMeta’s Muse agent comes to small businessesG · D · Editorial (D)Meta’s Muse agent comes to small businessesThe story as one line of numbered chapters between hairlines; the key facts as a quiet small-caps list with a jade edge.Try it H · D · ChaptersMeta’s Muse agent comes to small businessesH · D · Chapters (D)Meta’s Muse agent comes to small businessesThe story as segments, “Part 3 of 3”; the key facts as tiles on a warm ground, with price and availability in navy.Try it I · D · Spec sheetMeta’s Muse agent comes to small businessesLiveI · D · Spec sheet (D)Meta’s Muse agent comes to small businessesG’s story line on top, named chapters you can click to preview; the key facts as a two-column spec sheet with an icon each.Try it

The news index

Round 1

Wire, front page, or briefing

A is a newswire grouped by day, with the time and a “why it matters” line on every post. B is a newspaper front: one lead story, two beside it, the rest in brief. C is the week as a numbered briefing you can filter by topic.

A · WireAI NewsA · WireAI NewsPosts grouped by day with the time, the topic and why it matters, beside a sticky rail with the weekly email and the topics.Try it B · Front pageAI NewsB · Front pageAI NewsA newspaper masthead with today’s date, one lead story with an image, two stories beside it, then the rest in brief.Try it C · BriefingThis week, briefly.C · BriefingThis week, briefly.A navy hero with the week’s dates and the signup, then each post numbered and split into what happened and why it matters, with topic filters.Try it
Round 2

B, built to jump on trends

Zev picked B: news has to feed and jump on trends. D adds a trending bar and a live feed beside the lead, E groups the front by trend with the hottest one leading, F makes the lead a developing story with timestamped updates.

D · Front page · LiveAI NewsD · Front page · Live (B)AI NewsB with a trending bar under the masthead and a live feed beside the lead: times first, newest on top. Pick a trend and the feed follows it.Try it E · Front page · Trend deskAI NewsE · Front page · Trend desk (B)AI NewsThe front grouped by trend: the hottest trend leads with its posts and follow-ups, the rest sit in desks of their own, hottest first.Try it F · Front page · DevelopingAI NewsF · Front page · Developing (B)AI NewsThe lead is a running story with timestamped updates on a timeline, like a live blog, over B’s two stories and the briefs.Try it
Round 3

E, three ways to show the other trends

Zev picked E. Its masthead and lead trend stay; the trends under it change. G sets each trend as a row of post cards, H as a board of tiles sized by heat, I as the week drawn in lanes with a dot per post.

G · Trend desk · RowsAI NewsG · Trend desk · Rows (E)AI NewsUnder E’s lead, each trend is a full-width row: its rank, heat and line on the left, its posts as image cards on the right.Try it H · Trend desk · BoardAI NewsH · Trend desk · Board (E)AI NewsUnder E’s lead, one tile per trend, sized by heat with its image behind it. Pick a tile and its posts open under the board.Try it I · Trend desk · LanesAI NewsI · Trend desk · Lanes (E)AI NewsUnder E’s lead, the week as a chart: a lane per trend, a column per day, a dot per post coloured by its label.Try it
Round 4

Something to monitor

Rebuilt on real September 2026 stories. Zev wanted a reason to come back, so each takes E’s lead and adds a monitor: H’s board with charts (J), I’s lanes with G’s cards (K), Google’s update rollout (L), a board of what changed per platform (M), what AI marketing costs from Esy’s own runs (N), and a coverage line per story (O).

J · Board + chartsAI NewsJ · Board + charts (E + H)AI NewsH’s tiles for stories with two or more posts, each with a 30-day dot strip and its newest headline. A story without an image uses its chart as the tile.Try it K · Lanes + cardsAI NewsK · Lanes + cards (E + I + G)AI NewsI’s lanes over 30 days, then G’s cards for each story (newest three), then the one-post stories in brief.Try it L · Rollout trackerAI NewsL · Rollout tracker (E)AI NewsGoogle’s ranking updates this year as a timeline, with the running spam update’s progress: day 6 of up to 14.Try it M · Change boardAI NewsM · Change board (E)AI NewsPlatforms by area (reach, creative, shopping, measurement, AI and agents): the newest change in each cell, green for this week, and what to check.Try it N · Cost indexAI NewsN · Cost index (E)AI NewsWhat it costs to make it with AI: median cost per piece from 8,000 of Esy’s recorded runs, and what moved this month.Try it O · Coverage linesAI NewsO · Coverage lines (E + I)AI NewsA line per story of posts per week over four weeks, with rising, steady or cooling beside it.Try it
Round 5

The pick: E, G and A

Back to the section’s two jobs: jump on trends for SEO, and post to the domain daily. P is E’s lead story, G’s story rows (each pointing at its own story page), and A’s wire of every post. No charts.

P · Trend desk · Rows · WireAI NewsLiveP · Trend desk · Rows · Wire (E + G + A)AI NewsE’s lead story, then up to three more stories as G’s rows (two posts or more, each pointing at its story page), then A’s wire of every post by day.Try it

The about page

Round 1

Letter, studio, or press kit

A tells the story as a numbered letter under /engineer’s masthead. B leads with the homepage’s portrait hero, real numbers and the work as cards. C is practical: facts, a Now list, copyable bios and a headshot.

A · LetterAboutA · LetterAbout/engineer’s masthead, then a first-person letter in five numbered parts: what this is, who writes it, what runs on it, how it’s made, get in touch.Try it B · StudioHi, I’m Zev.B · StudioHi, I’m Zev.The homepage’s navy portrait hero, a strip of real numbers, apps, creatives and films as cards with real visuals, then the longer story and contact.Try it C · Press kitZev UhuruC · Press kitZev UhuruFor people who want to feature him: quick facts, a dated Now list, short and long bios with copy buttons, a headshot download and every link.Try it
Round 2

B, three ways

Zev picked B. D adds the signup to the hero and a timeline of the path, E makes the proof move (counting numbers, the run replay, the explainer, the film strip), and F tightens it to about two screens.

D · Studio · StoryHi, I’m Zev.D · Studio · Story (B)Hi, I’m Zev.B with the weekly email in the hero, and The path between the numbers and the work: fuboTV, Vroom, Esy, clip.art and SEOPage, The Marketing Engineer.Try it E · Studio · LiveHi, I’m Zev.E · Studio · Live (B)Hi, I’m Zev.B with the proof moving: the numbers count up, the clip.art run replays, the explainer plays, and the film runs as a strip.Try it F · Studio · CompactHi, I’m Zev.F · Studio · Compact (B)Hi, I’m Zev.B in about two screens: the numbers and signup in the hero, the work as a slim row, the story beside the contact.Try it
Round 3

D, with the whole career

Zev picked D and added his résumé, crypto years included. G dates the path, H tells it as five chapters, I leads with six numbers from the résumé.

G · Story · Dated pathHi, I’m Zev.G · Story · Dated path (D)Hi, I’m Zev.D’s path with years: Vroom 2016, fuboTV 2019, digital assets 2021, Esy 2024, now The Marketing Engineer. The numbers become #1 for “AI clipart”, 20,000+ pages, a seven-figure exit and 100+ tested pages.Try it H · Story · ChaptersHi, I’m Zev.H · Story · Chapters (D)Hi, I’m Zev.Five chapters with the years large, two proof points and a stat each. The digital-assets years sit in a night-and-gold band, Esy in navy and jade.Try it I · Story · Proof firstHi, I’m Zev.I · Story · Proof first (D)Hi, I’m Zev.Six numbers from the résumé, each tied to its chapter, then a compact dated path, the work and the story.Try it
Round 4

H, three ways to show the work

H with only “What I make” changed. J gives clip.art and SEOPage a card each, K sets the work as the homepage’s numbered rows, L puts it on one stage with a tab per kind.

J · Chapters · Four upHi, I’m Zev.J · Chapters · Four up (H)Hi, I’m Zev.Four cards in a 2×2 grid: clip.art with its six-style range, SEOPage with its own art, the explainer and the film.Try it K · Chapters · LedgerHi, I’m Zev.K · Chapters · Ledger (H)Hi, I’m Zev.The homepage’s 01 Apps, 02 Creatives, 03 Films as wide rows, each with four real frames beside it.Try it L · Chapters · ShowcaseHi, I’m Zev.L · Chapters · Showcase (H)Hi, I’m Zev.One big stage with a tab for apps, creatives and films; each puts its work up large with the credits beside it.Try it
Round 5

K, four styles

Zev liked K’s numbered rows. M sets them on navy, N drops the boxes for a magazine index with wide film strips, O keeps text rows and fills one big preview from the row you point at, P gives each kind its own band like the chapters. N shipped as /about (2026-09-30), with H’s chapters around it.

M · Ledger · NightHi, I’m Zev.M · Ledger · Night (K)Hi, I’m Zev.K on a navy band: jade numbers, the frames lit against the dark.Try it N · Ledger · MagazineHi, I’m Zev.LiveN · Ledger · Magazine (K)Hi, I’m Zev.No boxes: huge serif numbers, hairline rules, and each row’s four frames as one wide 16:9 strip.Try it O · Ledger · PreviewHi, I’m Zev.O · Ledger · Preview (K)Hi, I’m Zev.Text-only rows; the one you point at fills a big preview beside the list with its four frames.Try it P · Ledger · BandsHi, I’m Zev.P · Ledger · Bands (K)Hi, I’m Zev.Each kind in its own band like the chapters: apps on cream, creatives on navy, films in night and gold.Try it

Compose as the homepage’s third app

Round 1

The mark

Three ways to set Compose in the esy logo’s format: the header’s esy | OS lockup with the name swapped, the name in the esy stencil itself, or esy beside Compose’s italic serif.

A · Lockupesy | COMPOSEA · Lockupesy | COMPOSEThe header’s own lockup, esy | OS, with Compose in the tracked caps. The family reads at a glance: one wordmark, a product after the hairline.Try it B · StencilcomposeLiveB · Stencilcompose“compose” set in the esy stencil, with the jade first letter the esy wordmark has. Its own name, unmistakably the same family.Try it C · Penesy ComposeC · Penesy ComposeThe esy stencil, then Compose in its own italic serif: the company in the stencil, the product in the pen.Try it
Round 2

The band

Three ways to give Compose its own band after SEOPage’s: a replay of the editor on night, the team as a path on paper, or the page itself with every claim checkable.

D · ReplayCompose runs on Esy OSLiveD · ReplayCompose runs on Esy OSNight, Compose’s own landing colour. The story beside a replay of the editor taking one real AI News post from the team to live, the same shape as clip.art’s and SEOPage’s bands.Try it E · TeamCompose runs on Esy OSE · TeamCompose runs on Esy OSPaper. The team is the picture: a path across the band, Researcher to Writer to Fact-checker to you to live, each saying what it did on one post. Real AI News posts under it.Try it F · PageCompose runs on Esy OSF · PageCompose runs on Esy OSPaper. The page is the picture: the post as it reads in the editor, every checked claim underlined. Tap one for the Fact-checker’s note and the source.Try it

A shorter homepage: one apps band and AI News

Round 1

One band, three ways to pick

All three keep every app’s story and replay and mount only the one you’re looking at. They differ in how you choose: tabs, a stacked rail, or a tour that runs itself.

A · TabsReal properties, real traffic.A · TabsReal properties, real traffic.The three wordmarks as tabs across the band. The chosen app’s story and replay sit below in the case-study layout, and the band’s colour follows the app.Try it B · RailReal properties, real traffic.B · RailReal properties, real traffic.The old ledger becomes the picker: the apps stacked on the left, the chosen one opened to its story, its replay on the right.Try it C · TourReal properties, real traffic.LiveC · TourReal properties, real traffic.Tabs that advance on their own every 22 seconds with a filling bar, pause while you hover, and stop once you pick an app.Try it

The Esy page builder

Round 1

The picked builder

One page, one rail: Versions, Edit, Checks and History. Picked from seventeen earlier directions built in os.esy.com.

R12 · PickedThree more versions of any section, ranked.Section tabs and Try 3 more above the page; one rail with Versions, Edit, Checks and History.Try it
Round 2

The bar above the page

The section tabs wrapped at a laptop width, so three bars that never do: one row, two rows, or the tools on the section itself.

R18 · One rowThe section is a picker.A section picker with ‹ › replaces the tabs, so the whole bar fits on one row.Try it R19 · Two rowsTabs that never wrap.The tabs sit alone on top and scroll instead of wrapping; the row under them names the open section and holds its actions.Try it R20 · On the sectionThe tools sit on the section.One slim row of tabs; the open section’s tools ride on its top edge and move when you pick another.Try it
Round 3

Its own mode

The builder gets its own header with one way back, and the page and rail fill the window.

R21 · Editor, lightIts own header, in white.← Work, the page, Preview and Send. The page and rail fill the window.Try it R22 · Editor, navyA dark header for a clear change of mode.Exit, the page, undo and the device in the middle, then Preview and Send.Try it R23 · Editor, pathThe path back, always in view.The esy · agency lockup stays; the nav becomes Work › client › page, with Done to go back.Try it

The skills hub

Round 1

Three directions

Learn first (a numbered path), find first (a searchable shelf), or show first (one skill opened, file by file).

A · Field guideSkills that do marketing work.A · Field guideSkills that do marketing work.A numbered path down the left, one marketing job per chapter, each teaching an idea and handing you the skills for it. Install and the email course sit beside the promise.Try it B · ShelfFind the skill for the job.B · ShelfFind the skill for the job.Search and job filters over a shelf of skill cards. Open one to read its SKILL.md and what it made; the how-it-works lesson is a short band, not a course.Try it C · WorkbenchOpen a skill and see how it works.C · WorkbenchOpen a skill and see how it works.One real skill opened up: its files, its SKILL.md with every line explained, the moment it triggers, and what it built. The rest of the shelf and the course follow.Try it
Round 2

In Folio, with the docs’ top

Round one read too much like a blog. Round two moves to Folio (os.esy.com’s brand) and opens like docs.esy.com: a navy hero, a jade-italic second line, a replay in a device. Zev appears small.

D · ReplayAI marketing skills, your agent can run.D · ReplayAI marketing skills, your agent can run.The docs’ own shape: search and “Try” chips beside the headline, then /prototyping replayed from the ask to the three takes it built.Try it E · TourAI marketing skills, your agent can run.E · TourAI marketing skills, your agent can run.The email course beside the headline, and a replay that tours four jobs: what you ask, the skill it picks, what comes back.Try it F · AnatomyAI marketing skills, your agent can run.F · AnatomyAI marketing skills, your agent can run.Zev narrates beside the headline; the replay walks the real SKILL.md part by part, with what each part does and how to write your own.Try it
Round 3

One merge

G is E’s top (the course beside the headline) over D’s replay (the one real skill doing real work). The course is now three real lessons, and it leads into The Marketing Engineer.

G · Course + ReplayAI marketing skills, your agent can run.G · Course + Replay (E + D)AI marketing skills, your agent can run.E’s top (the three-lesson course beside the headline, Zev’s byline) over D’s replay of /prototyping; search joins the bar once the hero scrolls away.Try it
Round 4

E, with a clearer simulator

E won the page; its replay confused people. Three simulators that show the actual work in plain words, one idea at a time: a chat, without-versus-with, and three panels.

H · ChatAI marketing skills, your agent can run.LiveH · Chat (E)AI marketing skills, your agent can run.E with a chat window: you ask, a “Using /skill” chip appears, and the actual work builds beside the chat.Try it I · Without vs withAI marketing skills, your agent can run.I · Without vs with (E)AI marketing skills, your agent can run.E with the same ask answered twice: a generic answer with its problems flagged, then the work the skill makes.Try it J · Three panelsAI marketing skills, your agent can run.J · Three panels (E)AI marketing skills, your agent can run.E with You ask → It picks a skill → You get the work, all three on screen at once while a highlight walks across.Try it

Brand shapes: the e’s cut, brought to life

Round 1

Five motions, one cut

A teal and navy elephant in the e’s pieces, animated five ways: lock together, rearrange, get drawn, walk, or break into tiles.

A · StencilEvery piece locks into place.A · StencilEvery piece locks into place.The elephant arrives as loose stencil pieces and locks together with the loader’s motion and teal pulse, then flaps its ear and swings its trunk.Try it B · TangramThe same fourteen pieces make everything.B · TangramThe same fourteen pieces make everything.One kit of fourteen pieces rearranges into an elephant, a whale, an owl and a tortoise, then folds back into the e.Try it C · BlueprintYou can see how it was made.C · BlueprintYou can see how it was made.The elephant is drafted on a grid piece by piece, outlined, measured and filled, while a ledger records each step.Try it D · ParadeA herd that walks the site.D · ParadeA herd that walks the site.A mother and calf walk across the frame under a chamfered sun; small herds cross dividers and empty pages.Try it E · MosaicBuilt from small, exact tiles.E · MosaicBuilt from small, exact tiles.The elephant sampled into chamfered tiles that settle in a diagonal wave, get a teal scan, and lift under your cursor.Try it
Round 2

Five symbols, no animals

Shapes meant to last as the brand: each one says one thing Esy is. Provenance, the essay, shared context, synthesis, durability.

F · SealEvery artifact carries its seal.F · SealEvery artifact carries its seal.Provenance: an octagon around the e whose eight sides light up step by step, then it presses down and reads Verified.Try it G · FolioAn essay is an attempt.G · FolioAn essay is an attempt.The essay: the e’s spine is a book’s spine, and its other pieces turn like pages, navy on their backs.Try it H · GraphScattered context, one shape.H · GraphScattered context, one shape.Shared context: loose points drift onto the e’s corners, link along its edges, and signals run through it.Try it I · LoomMany threads, one fabric.I · LoomMany threads, one fabric.Synthesis: threads weave row by row, back and forth, into a woven label with the e in it.Try it J · KeystoneThe piece that makes it stand.J · KeystoneThe piece that makes it stand.Durability: stencil stones build an arch on a temporary frame, the e drops in as the keystone, and the frame falls away.Try it
Round 3

Five mascots

Back to characters, this time chosen for what they stand for: an octopus, a raven, a bee, a beaver and a lighthouse, each drawn in the cut.

K · OctopusOne brain, many hands.K · OctopusOne brain, many hands.Eight stencil arms curling in a wave, three holding what they made. Esy is the brain; your tools are the arms.Try it L · RavenMemory that comes back.L · RavenMemory that comes back.Odin’s raven Memory: it flies off, returns with a piece, drops it on the pile it keeps, and lands back on its post.Try it M · BeeMany workers, one hive.M · BeeMany workers, one hive.Bees fly their rounds while an octagon-and-diamond comb (our cut) fills with teal cell by cell and gets capped.Try it N · BeaverBuilds what lasts.N · BeaverBuilds what lasts.A beaver lifts a log onto its dam, the water behind rises, and it slaps its tail. One log at a time.Try it O · LighthouseThe fixed point everything steers by.O · LighthouseThe fixed point everything steers by.The one object: a stepped stencil tower sweeping its beam over boats at night. Esy holds still so everything else can move.Try it
Round 4

One head, many verticals

The octopus three more ways, the bee as a swarm and as a hive, and two organisms built the same way: a mycelium and a man o’ war. Each one also replaces the footer’s factory scene.

P · Octopus HubOne head, every vertical.P · Octopus HubOne head, every vertical.Seen from above: an octagon head with an arm out of each side, a signal lighting each vertical in turn. Without labels it’s an icon.Try it Q · Octopus ColorsOne mind, every surface.Q · Octopus ColorsOne mind, every surface.The octopus changes its skin to match each vertical, like a real one does, and stays the same animal underneath.Try it R · Octopus WorkbenchSix jobs, one head.R · Octopus WorkbenchSix jobs, one head.Over a bench, an arm on every station: typing, drawing, filming, stamping a check, sending, charting, all at once.Try it S · Bee SwarmA swarm with one mind.S · Bee SwarmA swarm with one mind.Thirty-six bees roam, pull into an octagon, then split into three teams on three tasks. Agent swarms, coordinated.Try it T · Bee HiveOne hive, every field.T · Bee HiveOne hive, every field.A stencil skep and six flowers, one per vertical; bees work each flower and come home carrying teal.Try it U · MyceliumOne network, every mushroom.U · MyceliumOne network, every mushroom.Underground, one network grows at 45° from a single knot; a mushroom comes up wherever it surfaces. The platform under the products.Try it V · Man o’ WarOne body, many specialists.V · Man o’ WarOne body, many specialists.Looks like one jellyfish, is a colony: under a teal float, every tentacle is a different specialist.Try it
Round 5

Seven worlds

Animals and symbols, each a whole place: a reef, a river, a night sea, a meadow, a clock, an orbit and a library. The footer on each page is that world in full; the hero is a window onto it.

W · Octopus ReefThe keeper of the garden.W · Octopus ReefThe keeper of the garden.Underwater: the octopus on its den rock in a reef, kelp, coral, fish schools, and a chest of finished work that glows when it opens.Try it X · Beaver RiverThe builder others live around.X · Beaver RiverThe builder others live around.A keystone species: a valley where the dam holds a pond, a lodge sits in it, and beavers work and swim.Try it Y · North StarA fixed goal, and the dots joined up.Y · North StarA fixed goal, and the dots joined up.An eight-point star (two squares in our cut) over a night sea, constellations drawing themselves, a sailboat steering by it.Try it Z · BanyanOne tree, many trunks.Z · BanyanOne tree, many trunks.Roots drop from the branches and thicken into new trunks: one tree spreading across a meadow, built to last centuries.Try it AA · ClockworkOne mainspring, every hand.AA · ClockworkOne mainspring, every hand.An open movement: meshing gears turning at the speeds their teeth set, a pendulum, dials. Engineer-first precision.Try it AB · OrbitEverything in flight, one place that knows.AB · OrbitEverything in flight, one place that knows.Satellites crossing above an octagon planet while one ground dish keeps in touch with all of them. The control plane.Try it AC · LibraryKept, and findable.AC · LibraryKept, and findable.A reading room at night: books dropping into place, a rolling ladder, a card catalog that opens to show where each piece came from.Try it
Round 6

Five octopus worlds

A friendlier octopus (rounder head, bigger eyes, a small smile) in five worlds, each tied to one part of the work: grown with care, checked before it leaves, mapped, kept in time, always on. Each hero can switch back to the original octopus.

AD · Coral NurseryGrown with care, tagged at every step.AD · Coral NurseryGrown with care, tagged at every step.Like a real coral nursery: fragments grow on frames under their tags, and the octopus plants them back on the reef one at a time.Try it AE · Research StationChecked before it leaves.AE · Research StationChecked before it leaves.An undersea lab: the octopus inspects each piece, the checklist ticks down, and only then does it ride a capsule up.Try it AF · CartographerKnows the whole map.AF · CartographerKnows the whole map.The octopus peeks out of a little submarine while sonar traces the seabed and a chart draws itself to match.Try it AG · ConductorMany agents, one tempo.AG · ConductorMany agents, one tempo.Batons in four arms, every arm in time, while twenty-four fish move from a stave to an octagon to a V.Try it AH · Lighthouse KeeperAlways on, built all the way down.AH · Lighthouse KeeperAlways on, built all the way down.A split world: the octopus keeps the light and the log above the water; below, the stone foundation runs to the seabed.Try it
Round 7

The lighthouse and the octopus

Reliable, secure, a guide, one mind running many ends: five worlds that put the octopus with the lighthouse, one where it builds the lighthouse itself. Four neutral octopus designs (Keeper, Beacon, Cap, Mark) switch under every hero.

AI · The BuilderBuilt to last, piece by piece.AI · The BuilderBuilt to last, piece by piece.The octopus builds the lighthouse course by course; when the roof is on, the light comes on and boats arrive.Try it AJ · Harbor MasterOne keeper, every channel.AJ · Harbor MasterOne keeper, every channel.From the lighthouse gallery, the octopus’s arms run under the water to four buoys, guiding a boat into each berth.Try it AK · SentinelSteady in any weather.AK · SentinelSteady in any weather.A storm: rain, lightning, breaking waves. The light holds, the octopus holds on, a boat reaches calm water.Try it AL · The VaultKept safe, lit for all.AL · The VaultKept safe, lit for all.The beam guides above; below, the octopus files a record in an octagon vault and the eight bolts lock.Try it AM · Coast of LightsOne mind, every light.AM · Coast of LightsOne mind, every light.Five lighthouses joined under the sea to the octopus at the main light; a pulse runs out and each one lights.Try it
Round 8

The octopus alone

We chose one symbol: the octopus, one mind with arms that each work on their own. Five worlds, one job each (assemble, inspect, keep, guide, connect), everything it handles abstract. The lighthouse is only a small far light that answers to the work.

AN · AssembleOne whole from many parts.AN · AssembleOne whole from many parts.Eight pieces, one per arm, fit into a large octagon; when it’s whole it fills with light and a far light answers.Try it AO · InspectNothing passes unchecked.AO · InspectNothing passes unchecked.Shapes drift through a gauge beside the octopus; crooked ones are turned square, each gets its mark and joins an ordered row.Try it AP · KeepKept, and traced back.AP · KeepKept, and traced back.Glowing pieces set into a wall of octagon cells, each closed and threaded to the one before.Try it AQ · GuideMany lights, one direction.AQ · GuideMany lights, one direction.Drifting points of light gathered into currents that all run toward one small light on the far horizon.Try it AR · ConnectOne mind, many ends.AR · ConnectOne mind, many ends.Signals run out from the octopus to an inner arc, an outer arc, then across, into one connected whole.Try it
Round 9

Octopuses together

Footer worlds with several of the original octopuses in the reef, working on one shared thing, so the shared thing is the brain: a den city they all add to, a piece handed on with its thread, one coral grown from one heart.

AS · OctopolisOne shared reef, many hands.AS · OctopolisOne shared reef, many hands.Four octopuses share one den city of shells: two bring pieces, one sets the top, one borrows a piece and puts it back.Try it AT · The RelayHanded on, nothing lost.AT · The RelayHanded on, nothing lost.Five octopuses pass one piece arm to arm, refining it at each handoff, a mint thread trailing it the whole way.Try it AU · One ReefDifferent hands, one living thing.AU · One ReefDifferent hands, one living thing.Four octopuses grow the four branches of one coral in turns; its single core pulses with every step.Try it
Round 10

A life in the reef

The octopus (now named Mason) alone again, living its life like a sim: a small script drives it, so it walks, crouches, lifts stones overhead, carries them, builds, rests and looks around. A gate, a den it moves into, a kelp garden. Each page shows the site header and footer with the new logo: teal e, navy sy.

AV · MasonBuilt one slab at a time.LiveAV · MasonBuilt one slab at a time.Mason quarries slabs, lifts each overhead, carries it over and builds an octagon gate, bottom to top; when it’s whole a school swims through. Shipped as the footer world on every page.Try it AW · DenA day in its life.AW · DenA day in its life.It clears the sand, gathers stones from both ends of the reef, builds a den with a roof, moves in, sleeps, and comes back out.Try it AX · GardenerTended, it grows.AX · GardenerTended, it grows.It plants sprouts that grow into kelp as it works, builds a little cairn as it goes, and a school moves in.Try it

Combined runway

Round 1

Three directions

All three keep the live page’s rule that money moved between your own accounts isn’t spending. They differ in what they do with your pay: a switch that recounts it, a bridge that shows it, or a slider that sets it.

A · SwitchOne Runway page, three ways to count it.The live page with Combined · Esy LLC · Personal on top. Every number recounts. Your pay drops out of Combined, is money out for Esy LLC, and is income for you. A per-agency setting turns your personal accounts off, which is how a bigger agency would see Runway.Try it B · SplitBoth sides of your money, side by side.The combined number on top, then Esy LLC and you in two columns, each with its own cash, burn and runway. Between them, a bridge: what the business paid you each month for the last six.Try it C · Pay yourselfHow much should I pay myself?The page as a decision. Drag your monthly pay: the business’s runway and yours move against each other while the combined number stays put, and the slider shades the range that covers your life and keeps the business above six months.Try it
Round 2

One page, three stages

D merges A, B and C into one page, plus the personal paycheck and safety net. Switch the sample founder from paying themselves to funding the business to just started, and the page changes shape with the money. D shipped: it is live on os.esy.com/agency/runway.

LiveD · Merged (A + B + C)One Runway page that changes shape with the money.A’s switch and its one setting. Combined puts B’s two columns and bridge over C’s pay slider; Personal leads with Personal B’s paycheck question and Personal C’s six-month savings target. When the business doesn’t pay you yet, the bridge flips to what you put in, the slider becomes a “not yet” goal, and Personal leads with your safety net.Try it

Personal runway

Round 1

Three directions

Same accounts and the same pay as the combined runway, so the numbers agree. A is the live page on your money; B asks whether your pay covers your life; C treats savings as a safety net.

A · HouseholdThe Runway page, on your own accounts.The live layout scoped to you: free cash, spending, pay from Esy LLC as the money in, and how long it lasts if that pay stopped. Your bills that come back every month sit under the insights, with the Sapphire bill set aside.Try it B · PaycheckDoes what the business pays you cover your life?Twelve months of pay against spending, with the surplus or gap under each month and the months the business skipped or cut your pay in gold. Then the fallback: how long your money lasts if pay stopped today.Try it C · Safety netHow many months your savings cover.Savings as an emergency fund against a six-month goal, what’s already promised in the next 30 days, and a slider for the month the business pays you less, showing your side and the business’s.Try it

The face shape

Round 1

Three shapes from the brand

Each shape comes from something the site already draws: the hive, the e’s 45° cut (and Mason’s head), and the chamfered tags. Only the frame changes; the photo and every component are the real ones.

A · HexagonThe hive.A · HexagonThe hive.Six sides with soft corners, pointing up. Fits the photo at the hero’s usual zoom, so it keeps the shoulders.Try it B · OctagonThe e’s own cut.B · OctagonThe e’s own cut.Every corner cut at 45°, about a quarter in, the way the loader cuts the e. Mason’s head is the same shape. Zooms a little closer to stay inside the photo.Try it C · TagTwo corners cut.C · TagTwo corners cut.The top-left and bottom-right corners cut, like the site’s chamfered tags. The square corners crop closer, so the hero shows the face more than the shoulders.Try it
Round 2

A square

The question narrowed to keeping the circle or using the octagon. The octagon is the brand’s shape, so it can make a person read like a badge. D tries the plain square: editorial, like the site’s cards, and apart from Mason.

D · SquareA photo, not a badge.D · SquareA photo, not a badge.A plain square with barely rounded corners, like a magazine photo. It matches the site’s cards and covers and keeps the face apart from Mason’s octagon. Its corners crop as closely as the tag’s.Try it

The portrait size

Round 1

Three sizes

A face pulls the eye before anything else, so a smaller portrait should hand some of that attention to the headline and the email form. Only the desktop portrait changes.

A · 440The face first.A · 440The face first.The hero as it was until 2026-10-06: a 440px portrait beside the copy, the first thing anyone sees.Try it B · 360The face and the headline, level.LiveB · 360The face and the headline, level.The portrait about a fifth smaller, so the headline gets as much weight as the face.Try it C · 280The words first.C · 280The words first.The portrait at a little under two thirds of today’s size: still a person writing to you, but the headline and the form lead.Try it

The hero backdrop

Round 1

Five quiet shots

Each keeps its left side dark for the words and moves slowly: fading light, sliding shadows, breathing city lights, a passing band of light, a warming beam. The still shows for anyone with reduced motion on.

B1 · Desk at duskWhere the work happens.B1 · Desk at duskWhere the work happens.A clean desk by a tall window at blue hour, a laptop glowing softly, the light outside fading.Try it B2 · Light on architectureCalm, deliberate, built.B2 · Light on architectureCalm, deliberate, built.Concrete and glass, late sun throwing long shadows that slide slowly across the wall.Try it B3 · City through glassScale, out of focus.B3 · City through glassScale, out of focus.A night city fully blurred behind a window, its lights gently breathing.Try it B4 · Dark glass, moving lightPrecision.B4 · Dark glass, moving lightPrecision.A macro of dark glass and brushed metal with one soft band of light passing across it.Try it B5 · Studio, early morningA working studio.B5 · Studio, early morningA working studio.An empty, premium studio at first light, haze in the air and the beam slowly warming.Try it
Round 2

The face comes back

For trust, the person stays the subject: the 360px portrait in front of a softened, darker shot, so the room is where Zev works rather than a second picture beside him.

B6 · Desk + portraitYou, at your desk.B6 · Desk + portrait (B1)You, at your desk.B1’s desk at dusk, softened behind the 360px portrait captioned with the name.Try it B7 · Studio + portraitYou, in the studio.B7 · Studio + portrait (B5)You, in the studio.B5’s morning studio, softened behind the 360px portrait captioned with the name.Try it
Round 3

More of B6

Zev liked B6, so five more rooms at dusk and night with the portrait in front: a night office, a high floor, a loft, and two real skylines he named, New York and Miami.

B8 · Night officeLate, at the desk.B8 · Night officeLate, at the desk.A home office at night: a brass lamp, a bookshelf, the city through the window, behind the portrait.Try it B9 · High floorThe view from up here.B9 · High floorThe view from up here.A corner office high up at dusk, the skyline turning blue and two monitors glowing, behind the portrait.Try it B10 · LoftBrick, steel, evening.B10 · LoftBrick, steel, evening.A loft with steel windows, a desk and plants in the evening, behind the portrait.Try it B11 · New YorkManhattan at blue hour.B11 · New YorkManhattan at blue hour.B6’s desk in a Manhattan office, the Empire State Building lighting up, behind the portrait.Try it B12 · MiamiBiscayne Bay at dusk.B12 · MiamiBiscayne Bay at dusk.B6’s desk in a Miami office, Brickell and the bay under a pink-blue sky, behind the portrait.Try it
Round 4

Centred

B6’s desk with the headline and subtitle centred, and a smaller portrait under them beside the course button, on the left or the right; B15 and B16 are the same on the live hero’s plain navy, with no shot. The photo is Zev’s headshot with a subtle smirk, rimless glasses and a navy studio backdrop.

B13 · Centred, face leftThe words first, then you.B13 · Centred, face left (B6)The words first, then you.B6’s desk, the headline and subtitle centred, then a smaller portrait and name on the left of the course button.Try it B14 · Centred, face rightThe button, then who’s behind it.B14 · Centred, face right (B6)The button, then who’s behind it.B6’s desk, the headline and subtitle centred, then the course button with a smaller portrait and name on its right.Try it B15 · Centred on navy, face leftB13 without the room.B15 · Centred on navy, face left (B13)B13 without the room.B13’s centred layout on the live hero’s plain navy, no shot behind.Try it B16 · Centred on navy, face rightB14 without the room.B16 · Centred on navy, face right (B14)B14 without the room.B14’s centred layout on the live hero’s plain navy, no shot behind.Try it B17 · Centred, original photoB13 with the untouched headshot.B17 · Centred, original photo (B13)B13 with the untouched headshot.B13’s centred layout on the desk at dusk, with Zev’s original headshot: no smirk, glasses or backdrop edits.Try it
Round 5

Smaller, on the left

B9’s high floor (B21–B23) and B10’s loft (B24–B26) with the room left open on the right, and Zev’s photo small on the left with the words: above the headline, beside the button, or signed under it. The photo is Smirk 1 plus glasses and a navy backdrop in one more edit (A).

B21 · High floor, face on topYou, then the claim.B21 · High floor, face on top (B9)You, then the claim.B9’s high floor with the skyline open on the right; a 64px portrait and name sit above the headline on the left.Try it B22 · High floor, face by the buttonYou, beside the ask.B22 · High floor, face by the button (B9)You, beside the ask.B9’s high floor with the skyline open; the portrait and name sit beside the course button on the left.Try it B23 · High floor, signedSigned at the foot.B23 · High floor, signed (B9)Signed at the foot.B9’s high floor with the skyline open; the portrait and name sign off under the button and its fine print.Try it B24 · Loft, face on topYou, then the claim.B24 · Loft, face on top (B10)You, then the claim.B10’s loft with the room open on the right; a 64px portrait and name sit above the headline on the left.Try it B25 · Loft, face by the buttonYou, beside the ask.B25 · Loft, face by the button (B10)You, beside the ask.B10’s loft with the room open; the portrait and name sit beside the course button on the left.Try it B26 · Loft, signedSigned at the foot.B26 · Loft, signed (B10)Signed at the foot.B10’s loft with the room open; the portrait and name sign off under the button and its fine print.Try it B27 · Loft, signed, solid copy sideB26, the words on solid navy.B27 · Loft, signed, solid copy side (B26)B26, the words on solid navy.B26 with the copy side nearly solid navy, fading quickly so the loft on the right stays clear.Try it B28 · Loft, signed, original photoB27 with the untouched headshot.B28 · Loft, signed, original photo (B27)B27 with the untouched headshot.B27 exactly, with Zev’s original headshot in the signature: no smirk, glasses or backdrop edits.Try it
Round 6

Socials behind the photo

B28 with Zev’s LinkedIn and GitHub one hover away: a pop card above the head, a profile card, or the photo growing into a close-up. Each opens on hover, keyboard focus or a tap.

B29 · Socials: pop cardA card above the head.B29 · Socials: pop card (B28)A card above the head.B28 with a small card that pops above the photo on hover or tap: a close-up, the name, LinkedIn and GitHub.Try it B30 · Socials: profile cardA profile hover card.B30 · Socials: profile card (B28)A profile hover card.B28 with a wider hover card: the close-up beside the name, a proof line, and LinkedIn and GitHub buttons.Try it B31 · Socials: zoomThe photo grows.B31 · Socials: zoom (B28)The photo grows.B28 where the photo itself grows into a big close-up on hover or tap, with LinkedIn and GitHub icons under it.Try it B32 · High floor, signed, profile cardB23 with what B28 and B30 settled.B32 · High floor, signed, profile card (B23 + B28 + B30)B23 with what B28 and B30 settled.B23’s high floor signed at the foot, with Zev’s original photo, the near-solid copy side (B27) and the profile card on hover (B30).Try it
Round 7

Where the work happens

B32’s layout over four new shots: an empty open office after hours with its screens still working, the same floor as the lights go off, a data center at dusk, and a data center campus from above. The agents work after everyone leaves.

B33 · Open office, after hoursThe floor empties; the work goes on.B33 · Open office, after hours (B32)The floor empties; the work goes on.B32 over an empty open office at night, the nearest screens showing traffic and search dashboards whose lines keep moving (redone in round 8; the first cut had blank, blurred screens).Try it B34 · Open office, last lightThe lights go off; the screens stay on.B34 · Open office, last light (B32)The lights go off; the screens stay on.B32 over an open office at dusk, the overhead lights switching off row by row while the monitors stay on.Try it B35 · Data center at duskWhere the agents run.B35 · Data center at dusk (B32)Where the agents run.B32 over a quiet data center in open country at dusk, vapor drifting from the roof, lights on wet concrete.Try it B36 · Data center from aboveThe campus at night.B36 · Data center from above (B32)The campus at night.B32 over a slow aerial drift across a data center campus in dark forest, rooftop fans turning.Try it
Round 8

People at work

B33 redone with analytics and search dashboards on its screens, then real people, shot like a documentary rather than a film: a dev from behind at a window desk, a dev whose finished work fills the second screen, a team still at work in the evening, and two colleagues reading a dashboard together.

B37 · Zev at the window deskThe one person, at work.B37 · Zev at the window desk (B32)The one person, at work.B32 over Zev seen from behind at a window desk on a high floor at dusk: code on the left screen, search performance climbing on the right (redone in rounds 9–10 from his reference sheet, head turned to the screens; the first cut was a stranger, with code on both screens).Try it B38 · Zev, the pages appearType, and the work arrives.B38 · Zev, the pages appear (B32)Type, and the work arrives.B32 over Zev from behind: code on the left screen, and on the right one, finished clip-art pages fill a grid as he types (redone in round 10; the first cut was a stranger with product photos).Try it B39 · The floor at workA team still at it.B39 · The floor at work (B32)A team still at it.B32 over a marketing and engineering team at their desks in the early evening, dashboards and code on their screens, one leaning in to a colleague.Try it B40 · Two at a dashboardReading the numbers together.B40 · Two at a dashboard (B32)Reading the numbers together.B32 over two colleagues at one desk, one seated and one leaning in, reading a traffic dashboard against a city at blue hour.Try it
Round 9

The one person is Zev

A dev from behind next to Zev’s signed photo read as Zev, and wasn’t. B37 redone as Zev himself: a photoreal reference sheet edited from his headshot, then the window desk from that sheet, with code on one screen and search performance climbing on the other.

Round 10

Smoother, and B38 too

Zev saw creases across the back of his neck, and the side of his face looked off. B37 re-shot from the sheet with his head turned to the screens and held still, and B38 made Zev too, its second screen a grid of finished clip-art pages: the 30,000 pages, visible.

Round 11

The data center, and Esy on the screen

Zev walking inside a data center, seen only from behind, the camera following at a steady distance so the loop never jumps: a cold aisle, a catwalk over the hall, a glass corridor. And B38 around the real product: a screenshot of os.esy.com/agency/search composited onto his monitor (models garble UI), close over the shoulder or at the desk.

B41 · Zev in the cold aisleWalking the aisle.B41 · Zev in the cold aisle (B32)Walking the aisle.B32 over Zev from behind, walking a long cold aisle between server racks, the camera following at a steady distance.Try it B42 · Zev on the catwalkAbove the hall.B42 · Zev on the catwalk (B32)Above the hall.B32 over Zev from behind on a steel catwalk above a vast data hall, rows of racks glowing below.Try it B43 · Zev in the glass corridorPast the glass.B43 · Zev in the glass corridor (B32)Past the glass.B32 over Zev from behind in a glass corridor, server racks glowing behind the glass on his right.Try it B44 · Esy Search, over the shoulderThe real product, on screen.B44 · Esy Search, over the shoulder (B38)The real product, on screen.B32 over Zev’s left shoulder, his big monitor on the right showing the real os.esy.com/agency/search page, logo and nav included: the screenshot baked onto the screen in every frame, since the video model garbles UI.Try it B45 · Esy Search, at the deskB38, with Esy on the screen.LiveB45 · Esy Search, at the desk (B38)B38, with Esy on the screen.B38’s desk with the clip-art grid swapped for the real os.esy.com/agency/search page on his second screen.Try it
Round 12

Other screens

B44 and B45’s screens made sharper (retina captures baked at 1080p) and B45’s chart animating from the live page. Other os.esy.com/agency screens (the morning brief, home, outreach, the full Search view) were tried on both monitors as local previews and left out: they show real operating numbers. B45 went live as HomeHeroAtWork.

The homepage promise

Round 1

Three openings

A says who’s writing, B argues with a claim people have heard, C makes a blunt one of its own. The course isn’t written yet, so its fine print says the lessons arrive as they’re published. C shipped as the homepage and B as esy.com/seo.

A · BuilderI build the AI systems that run marketing.A · BuilderI build the AI systems that run marketing.Today’s headline, with a subtitle about what the course teaches: systems that do a marketing team’s work, with the code.Try it B · SEO isn’t deadSEO isn’t dead. It runs on AI now.LiveB · SEO isn’t deadSEO isn’t dead. It runs on AI now.Opens on SEO, the work clip.art and SEOPage grow on: people still search, and AI changed who does the work.Try it C · EngineeringAI marketing is an engineering job now.LiveC · EngineeringAI marketing is an engineering job now.A blunt claim that names the publication’s idea: the results come from systems, not prompts, and one person can build them.Try it

The retired page (410)

Round 1

Three directions

The same layout as the 404. A files the old page away, B buries it for good, C shows the site moving on to what it makes now. B shipped as the page every retired address shows.

A · ArchiveThis page was retired.A · ArchiveThis page was retired.Mason lifts the slab marked 410 out of his gate, files it in a crate, and fits a fresh piece in its place. The copy says we kept it: retired, not lost.Try it B · BuriedThis page is gone for good.LiveB · BuriedThis page is gone for good.Mason sets the 410 slab on the seabed beside his finished gate and heaps sand over it. The plainest answer: it was removed on purpose and isn’t coming back.Try it C · Moved onWe’ve moved on from this page.C · Moved onWe’ve moved on from this page.The old 410 slab lies overgrown on the seabed while Mason builds his gate. The ways back become cards that say what each section is, so the page points forward.Try it

The course cover, with Mason

Round 1

Five concepts

Mason is the hero every time, alone and calm, and what he works on stays abstract. They differ in what the cover says: the terminal, the lessons, the prompt, a film poster, or his reef.

A · TerminalHe types; the terminal writes itself.A · TerminalHe types; the terminal writes itself.Mason in front of a stencil terminal, his tips glowing like keys while the lines type themselves out.Try it B · LessonsEvery lesson in one of his arms.B · LessonsEvery lesson in one of his arms.The course’s lessons as numbered tiles in Mason’s arms, lighting in order as the octagon around him fills in.Try it C · PromptYou’re the last piece.C · PromptYou’re the last piece.Mason builds the prompt sign from stencil slabs, like the footer’s gate, and holds the cursor out before it sets and blinks.Try it D · NightA premiere in deep water.D · NightA premiere in deep water.A film poster: one giant cursor blinking at the top and Mason rising through its beam, mostly dark so the gold title reads.Try it E · ReefAt home in the reef.E · ReefAt home in the reef.Mason at a stone desk in the footer’s reef, with a slab screen typing beside him: the same world as the bottom of every page.Try it
Round 2

Mason at work

A real workspace in our cut, one warm lamp and the terminal’s glow, with Mason as the main character doing the work in it, no people. Each cover gives him a different job; he holds still except when typing, the work moves, and the esy brand sits at the top centre.

F · StudioAt his desk.F · StudioAt his desk.Mason from behind at his desk at night, his tentacles pressing the keys as the terminal on his monitor types.Try it G · WindowBy the window.G · WindowBy the window.Mason from behind at a window ledge over the night city, typing on a laptop whose terminal faces him.Try it H · FloatingFeeding the terminal.H · FloatingFeeding the terminal.The original poster in our cut: a terminal over night hills, Mason on its title bar against the moon letting files drop in, the finished ones falling to the desk.Try it I · Flat-layMason at the keys.I · Flat-layMason at the keys.The desk from above: the top of Mason’s head at the laptop, his tentacles pressing keys in turn as the terminal types.Try it J · Two screensCoding on both screens.J · Two screensCoding on both screens.Mason from behind at a desk with an editor and a terminal, his tentacles on the keyboard between them.Try it
Round 3

The merge

F’s studio, with J’s two screens: Mason from behind at his desk, an editor and the terminal side by side. K shipped as the Claude Code course’s cover.

K · Studio, two screensHis desk, both screens.LiveK · Studio, two screens (F + J)His desk, both screens.F’s room (shelf, lamp, city window, plant) with J’s two screens: Mason from behind at his desk at night, tentacles pressing the keys between an editor and the terminal.Try it

The newsletter page

Round 1

Three openings

A leads with the promise and a numbered archive, B lets the latest issue make the case on its own, C puts Zev’s face first. The issues are samples written around real facts.

A · The BatchAI marketing, built in public.A · The BatchAI marketing, built in public.A light masthead with the promise and signup, the latest issue featured, then every issue as a numbered list.Try it B · Read firstThe latest issue is the page.B · Read firstThe latest issue is the page.This week’s issue in full as the page, with the signup and past issues in a column beside it.Try it C · StudioEvery week, one AI marketing system I run.C · StudioEvery week, one AI marketing system I run.The homepage’s navy hero with Zev’s portrait and the newsletter’s promise, then every issue as a card.Try it
Round 2

Closer to Substack

A publication home like Substack’s: the newsletter’s own masthead and tabs, a big cover for the latest issue, and covers generated through api.esy.com for every issue. D is the front page, E leads with the signup, F is a magazine grid with the week’s news.

D · PublicationA front page, like Substack’s.D · PublicationA front page, like Substack’s.The newsletter’s own masthead and tabs, the latest issue as a big cover with “Read the latest”, a “Most popular” row, then a dark signup band.Try it E · WelcomeThe signup leads, the latest cover beside it.E · WelcomeThe signup leads, the latest cover beside it.A navy welcome card with the promise and signup beside the latest issue’s cover, then a Latest / Top feed with covers on each row.Try it F · MagazineA lead cover and the week’s news.F · MagazineA lead cover and the week’s news.The latest issue two-thirds wide with the others stacked beside it, the week’s AI marketing news across the page, then the signup band.Try it
Round 3

Below the cover

D’s top, closer to Substack (the name alone, the title lifted to the middle of a brighter cover), and three takes on the rest after Dan Koe’s Substack: a feed of issues with covers on the right, with a rail of Esy’s own properties (G), the week’s news (H), or no rail and the signup inline (I).

G · Feed + railFeed, and Esy beside it.G · Feed + rail (D)Feed, and Esy beside it.D’s cover, then a Latest / Top feed with covers on the right and a rail: the newsletter card with the signup, then “Also from Esy”.Try it H · Feed + newsFeed, and the week’s news beside it.H · Feed + news (D)Feed, and the week’s news beside it.D’s cover, the same feed, and a rail with the signup and this week’s AI Marketing News.Try it I · Wide feedOne wide feed, signup inline.I · Wide feed (D)One wide feed, signup inline.D’s cover, then a wider feed with bigger covers and a News tab, and the signup inline after the second issue.Try it
Round 4

Real covers

The generated glowing scenes read as 2023 AI art, so the covers move into the room from the homepage video and the YouTube thumbnails. J puts each issue’s real page on the monitor at Zev’s desk; K shows the issue’s headline result as a card over the room, out of focus. Both on the live page.

J · Real screenThe real thing, on his screen.LiveJ · Real screen (I)The real thing, on his screen.The live page with new covers: a photo of the desk from the homepage video, the issue’s real page on the monitor (clip.art, AI Marketing News, SEOPage).Try it K · Proof cardThe result, as a card.K · Proof card (I)The result, as a card.The live page with new covers: the same room out of focus, the issue’s headline result as a crisp card (#1 for “AI clipart”, the newsroom, cited by AI).Try it

A newsletter issue on the web

Round 1

Three readings

Each issue covers one system, then the week’s AI marketing news (real AI Marketing News posts). L1 reads like the email, L2 keeps the sections and signup beside you, L3 opens on a cover.

L1 · LetterIt reads like the email.L1 · LetterIt reads like the email.One narrow column: the masthead line, the issue, the signup at the end, then older and newer issues.Try it L2 · GuideSections and signup beside you.L2 · GuideSections and signup beside you.A reading page with a sticky rail: the issue’s sections to jump between, and the signup always in view.Try it L3 · CoverA cover for every issue.L3 · CoverA cover for every issue.A navy cover with the issue number big, the issue under it, a full-width signup band, then the other issues.Try it

AI Marketing Tools

Round 1

Three ways in

K1 lets you search and filter by job, K2 names the tool I run for each job and the others worth knowing, K3 is a comparison table and a section per job with FAQs.

K1 · DirectorySearch and filter every tool.K1 · DirectorySearch and filter every tool.Search, job chips and “has a tutorial” / “we use it” toggles over a grid of tool cards.Try it K2 · My stackWhat I run, job by job.K2 · My stackWhat I run, job by job.For each job, the tool Esy runs on with my take and its tutorial, then the others worth knowing.Try it K3 · GuideThe best AI marketing tools, compared.K3 · GuideThe best AI marketing tools, compared.A comparison table, a section per job and FAQs: the article “best ai marketing tools” searches expect.Try it
Round 2

More directories

Three more versions of K1: a sidebar of filters beside wide rows (K4), big job tiles to start from (K5), and “what I run” picks above the searchable grid (K6). Every take now ends with the not-affiliated line.

K4 · SidebarFilters beside the list.K4 · Sidebar (K1)Filters beside the list.K1 as a classic directory: jobs, “we use it”, “has a tutorial” and “free plan” in a sticky left rail, wide rows on the right.Try it K5 · Jobs firstStart from the job.K5 · Jobs first (K1)Start from the job.Big job tiles (“What do you need help with?”), then that job’s tools, with a bar to switch jobs.Try it K6 · Picks + directoryMy picks, then every tool.K6 · Picks + directory (K1 + K2)My picks, then every tool.K2’s “what I run” picks across the top, then K1’s searchable, filterable grid underneath.Try it
Round 3

Three looks

Visually different directories, each with a real hero and motion as you scroll, and art generated through api.esy.com: K7 is immersive navy, K8 has every tool drifting behind a light hero and job boxes that open in place, K9 is an editorial toolkit with a sticky job menu and swipeable rows.

K7 · NightAn immersive navy directory.K7 · NightAn immersive navy directory.A full-bleed art hero with the title, search and job pills in it; dark cards fade up as you scroll and glow jade on hover.Try it K8 · OrbitEvery tool, drifting.LiveK8 · OrbitEvery tool, drifting.A light hero with every tool’s tile drifting in slow rows behind the title; a featured pick, then job boxes that open in place.Try it K9 · MagazineThe 2026 AI Marketing Toolkit.K9 · MagazineThe 2026 AI Marketing Toolkit.An editorial cover hero with art, a sticky job menu that follows your scroll, and each job as a swipeable row with its own cover.Try it

The topics page

Round 1

Three openings

T1 shows each topic as a big cover with its newest article, T2 lists them like a table of contents with articles beside each, T3 lets you pick a topic and see it fill a panel. T3 shipped as esy.com/topics.

T1 · CoversA shelf of covers.T1 · CoversA shelf of covers.Every topic as a big cover in the newsletter’s style, with its count and newest article under it.Try it T2 · ContentsA table of contents.T2 · ContentsA table of contents.Numbered topics in jade serif, what each covers, and its newest articles beside it.Try it T3 · ExplorerPick a topic, see it fill the room.LiveT3 · ExplorerPick a topic, see it fill the room.A navy page with cut-corner topic tiles; the picked topic’s cover, story and articles fill a panel beside them.Try it

Esy OS runs your AI workers and keeps the books.

What they made, what it cost for each client, and what's waiting for your sign-off, on one page.

Join the waitlist