Showcase
Built with Tileio
Five small websites for fictional businesses, put together from 77 layers in the library, with new copy and one palette each. Open a site, or follow its layers back to the catalogue.
01 · Dark · 3 pages
Patchwell
Release-notes software
A changelog tool for software teams that publishes one release note to an in-app widget, a public changelog, an email digest and Slack. The site is a home page, pricing with a sign-up form, and Patchwell's own changelog.
Built from 18 layers
›Where each layer went
- Smart Sticky NavSite header on every page, with a phone menu
- Typing Headline with CursorHome hero: “Write once. Ship to …” with the channel cycling
- Aurora DriftWarm aurora behind the home hero
- Border Beam ButtonHero Start free button
- Logo MarqueeFictional customer wordmarks
- With / Without ToggleRelease day before and after
- Icon Grid that Draws its IconsEight features, icons draw in
- Tech & Dev IconsThe eight feature icons
- Calendar Heatmap TimelineA year of deploys, one square a day
- Glow CTAClosing call to action on home
- Toast StackRelease-day demo toasts in the CTA
- Toggle PricingPlans with monthly and yearly prices
- Compare PricingPlan comparison table
- Tabbed FAQ with CountsPricing questions by topic
- Confetti SignupCreate-workspace form on pricing
- Changelog that Knows What You MissedThe whole changelog page
- Footer with a Live Status BarFooter with live status bar
- Arrows & UI IconsArrows, menu, close and check marks
02 · Light · 3 pages
Kestrel Lane Vets
Veterinary practice
An independent small-animal vet in Bristol, with its prices published, care plans you can compare by species, a team you can filter, and online booking that follows its opening hours.
Built from 13 layers
›Where each layer went
- Mega MenuSite nav with a Services mega panel
- Split HeroHome hero, three scroll chapters with photos
- Service Cards that ExpandSix services that expand with prices
- Comparison Table with a Reference ColumnKestrel Care plans compared
- Rating Bars that FillClient reviews filtered by stars
- Search FAQSearchable front-desk questions
- Clinician Directory with Search and Open SlotsTeam page: filter vets and nurses
- Reveal FooterFooter on every page
- Clinic Booking CalendarBook page: type, vet, day, time
- Segmented ControlDog, Cat, Rabbit plan prices
- Topo MorphContour map behind Find us
- Health IconsMenu and service icons, drawn on
- Initials AvatarsStaff avatars in the directory
Photos on Unsplash by Julie Marsh, Lloyd Henneman and T Dritz.
03 · Dark · 3 pages
Lantern Quay Brewing Co.
Brewery and taproom
A small Liverpool brewery with a dockside taproom. You can fill a bag with cans and merch, check this week's quiz, music and food trucks, book a brewhouse tour, and see opening hours that know what day it is.
Built from 18 layers
›Where each layer went
- Pill NavHeader on every page, bar morphs to pill
- Hamburger Morph NavPhone menu button and sheet
- Marquee HeroHome hero with beer-style marquee rows
- AmberLive amber glow behind the home hero
- Counter Roll TextHome brewery numbers band
- Product Cards with Add-to-Stepper MorphCan shop on home and beers
- How it Works with a Progress RopeHome brewing process in four steps
- Award Laurels on a ShelfHome medals shelf
- Glow CTAHome taproom call with live hours
- Clip Reveal ImagePhoto reveals on beers and taproom
- Size Picker with Fit Finder and Restock AlertsBeers page merch tee with fit finder
- Split-text Gradient Sweep HeroTaproom page hero headline
- Rising BubblesBubbles behind the taproom hero
- Conference Programme with Day Tabs and Clash WarningsThis week's events and food trucks
- Split CTABrewhouse tour date check
- Flip-card FAQ GridTaproom house rules as flip cards
- Wordmark FooterFooter on every page
- Food IconsPairings, delivery options, food trucks
Photos on Unsplash by Missy Fant, Lens Fables and Josh Olalde.
04 · Light · 3 pages
Typecase
Coworking space
Coworking on three floors of a 1908 print works in Leeds. Plans and add-ons total as you pick, a calendar shows when the meeting rooms are free, and a visit page says who is in right now.
Built from 16 layers
›Where each layer went
- Drawer NavHeader with circle-reveal menu, every page
- Bento HeroHome hero with live building tiles
- Hover Lift CardThe three floors and meeting rooms cards
- Avatar Marquee with Role FilterMembers drifting by, filtered by trade
- Masonry WallMember quotes wall with filters
- Tiers PricingHot desk, fixed desk, office plans
- Add-ons StackLocker, post, bike, parking add-ons total
- Month Calendar with Keyboard Grid and Day BookingsMeeting-room availability and member events
- Office Cards with Local TimeVisit page: who is in right now
- Floating Label InputBook-a-tour form fields
- Mega FooterSticky reveal footer, every page
- Line GridDrifting paper grid behind the hero
- Arrows & UI IconsPlan checkmarks and card arrows
- Geometric AvatarsCompany marks on member quotes
- Travel IconsGetting-here glyphs, add-on icons
- Eco IconsBike glyph for storage and route
Photos on Unsplash by Rodeo Project Management Software, Copernico, Alesia Kazantceva and Nastuh Abootalebi.
05 · Light · 2 pages
The Strop Room
Barbershop
A four-chair barbershop in Manchester's Northern Quarter: prices, barbers, walk-in rules and its own products, plus a booking page that totals your services, prices the barber you pick and offers free slots.
Built from 14 layers
›Where each layer went
- Colour-flip NavPill nav that flips over dark bands
- Work List with Full-bleed Hover PreviewPrice index with drawn hover previews
- Team Portraits that Follow the PointerThe four barbers as drawn portraits
- Marquee RowsCustomer reviews in two moving rows
- Split-reveal CarouselOwn-label products at the counter
- Footer that Folds into an AccordionFooter with live opening hours
- Salon Price List with Stylist Levels and a Visit BuilderServices, barber levels and live total
- Multi-step FormBarber, time slot and details booking
- Magnetic ButtonHero call-to-action buttons
- Highlight Marker TextWalk-in rules and booking policies
- Popover MenuPhone navigation menu
- Diagonal StripesThe barber pole beside the hero photo
- Scribbles & ArrowsHero underline, squiggle, booking arrow
- Line Portrait AvatarsBarber choices in the booking form
Photos on Unsplash by Nathon Oski, Hai Phung and dwi rina.
The businesses, people, prices and reviews on these sites are made up. Photographs are hotlinked from Unsplash under the Unsplash licence.
