A concept site for Scrawl, a team whiteboard app.
Scrawl
The brief
Scrawl is a concept SaaS site for a dead-simple online whiteboard: a blank canvas a whole team can draw on, with sticky notes, arrows and live cursors, and no sign-up to start a board. The ask was a landing page in the style of the current wave of product sites (Notion, Overtake): one huge, tight grotesk headline with a single word wrapped in a coloured pill, a pastel second highlight, white space everywhere, and nothing that looks templated. It had to feel fun and fast, and it had to work perfectly on every screen size, not just desktop. The "before" was a deliberately dated 2021 template: gradient nav bar, scrolling marquee, a paragraph of text sitting on a busy stock photo, sidebar widgets and a visitor counter. The job was to turn that into a site people actually want to use.
What we built
A hero that moves. The headline is a wrapped line of words where the pill word cycles through sketched, shared, argued and shipped, and the pill colour changes with it. Built as a small code component so the client can edit the words and colours from the Framer panel.
A real whiteboard, not a screenshot of one. The hero demo is a live canvas you can draw on with five pen colours, drag the sticky notes around, and watch two teammate cursors wander the board. Visitors try the product before they read about it.
Shared layout template. One navigation and one footer as components, applied to every page. On phone the nav collapses to a menu button that opens a full-width drawer and closes again when a page is picked.
Six pages beyond the home page. Pricing with three plans and an FAQ, Contact with a form, Book a demo with a form that has a team-size dropdown and a date picker, Log in, Join, and a 404 in the same pill style.
Working forms. Every form has a dedicated submit button with Pending, Success and Error states.
Design system in Framer. Colour tokens, text styles with tablet and phone size steps, a Button component with Primary and Secondary variants and hover states, so nothing on the site is a one-off.
Desktop, tablet and phone on every page. Grids become single columns, headline pills shrink with their text style, forms go full width. Every page was checked at all three widths before publishing.
SEO and sharing. Unique titles and descriptions per page, one H1 per page, light and dark favicons, Apple touch icon, and a social preview card of the hero.
In their words
Like what you see?
Tell us about your project and we’ll get back to you soon.
Build something like this
ABN 35 396 413 658
·