Rill

The brief

A smart water bottle for people who forget to drink, and everything it needs to launch. The category is loud. Caps spin, LEDs blink, and apps nag with streaks and red badges. Rill goes the other way. The bottle glows softly when your level drops, the app says one plain sentence, and then both get out of the way. The line that holds it together is "Drink when you're thirsty, not when we're watching."

This is concept work. Rill is a made-up brand we built as a flagship, to show one studio shipping the brand, the app, the film and the ads as one system. Nothing is for sale and every number in the app is sample data.

What we made

• A logo suite with the mark and wordmark, lockups in horizontal and stacked forms, one-colour and small-size cuts, and true-pixel versions at 16, 24 and 32 px
• A guidelines page that reads on a phone and exports as six 4:3 spreads
• Packaging with panels for the front, side, back and top, a care card, a travel sleeve and a reverse tuck end carton dieline
• Five applications (email header, sticker sheet, app icon, retail shelf card, tote)
• Drip, a calm water-drop mascot with eight expressions and a 4 s loop
• A 15-screen clickable app prototype, from onboarding and pairing through Today, Week and Reminders to an empty state and an offline state
• A launch landing page with the app running live inside it
• A 30.1 s launch film, cut at 16:9 and 9:16
• An ad test pack with six static ads in two sizes across three hook angles, plus four video ads from 6 to 10 s
• A social system with a nine-post grid, three Reels and three editable templates

How it works

The film, ads, Reels and grid are drawn in code with HTML canvas and SVG, rendered frame by frame and encoded with ffmpeg. They share one palette and two self-hosted typefaces, Fraunces and Inter. Every piece is scored with "Midnight Stroll", an original instrumental we own, cut into its own bed per piece and measured at -14.0 LUFS integrated (one ad sits at -14.1).

The app is plain HTML, CSS and JavaScript with no build step. Logging a glass really moves the level. In the click-through test it went from 67 to 79 percent and the headline followed. On a phone it runs full screen, and on a desktop it sits in a phone frame. The landing page embeds the same prototype as a real iframe you can tap, and its hero waterline is tied to scroll position, not a timer.

These checks ran on the finished set. The app click-through passed 46 of 46 at 390x844 and in the desktop frame, with zero console errors. The landing page passed 14 of 14 checks at 1440 and 390 wide. Lighthouse mobile scored 87 and 88 for performance across two runs and 100 for accessibility. The identity verify suite reported zero problems across the board frames, contrast pairs, the Drip loop and the 24 small-size cuts. A band check found no black edge bands on any of the nine MP4s or on any static, post, board or cover.

What we threw away

Two directions went to the owner at stage 1. "Ember Pulse" was warm amber on basalt and felt closer to gym equipment. It lost to "Quiet Level", the calm teal system, because the soft glow was the whole idea and the quieter palette let it read.

The stage 1 mark was a closed capsule with no neck or cap, so it read as a vial or a battery. Its water also stopped short of the floor, which at 16 px looked like a floating insert. The final mark has a cap and a neck. It has shoulders and a flat base too, and the flat top of the water is the level line.

QA threw out more. One Reel had a 410 px solid black band along the bottom for its first 6.7 s. The first social and ad overview boards ran off the page. The first dieline was four rectangles with no glue flap or tucks. All three were rebuilt, and the boards now come out of HTML with an overflow gate that fails the build. Four earlier grid posts were replaced and set aside.