Halflight

Editorial agency site, Lisbon

by Owais

Repo Live site

Description

Halflight is a five-page website for a made-up creative studio in Lisbon working across brand, web, development and marketing. It is white and editorial: the hero line "we believe in brave, beautiful work" slides through a collage of client work, and every image shows the work in context, on packaging, signs, billboards and record sleeves, with the client's name in the shot. The pages cover home, work, a case study, the studio and contact.

Use it for:

a design, branding or digital agency website
a studio site with case studies, a team page and a contact form
a clean editorial template to fill with your own projects

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude builds the five pages with one shared stylesheet and script.
Generate the images with Higgsfield
Connect Higgsfield to Claude Code and ask Claude to generate the 36 images in one medium-format film style, with each client's name on its product, sign or billboard. Your own project photos work too.
Preview and fix
Ask Claude to start a local preview. Click through all five pages on desktop and phone, then ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a five-page website for Halflight, an independent creative studio in Lisbon, with a London office, doing brand, web design, development, marketing and content. Pages: Home, Work, a case study template, Studio and Contact.

Use plain HTML, CSS and JavaScript with Lenis smooth scroll and no build step. Keep all projects, crew and news as data in one shared script, and share one header and footer across the pages.

Design: white page, black text, greys and thin hairlines, with one accent (lime #d9f56c) used only on the "New" tag. Switzer at weight 400 for almost everything and Instrument Serif italic only on a few key words. Sentence case everywhere. Logo: a circle with a horizon line and a half sun that rises on hover.

Images: no stock models. Show the work in context, with each client's logo on a product, sign, package, billboard or screen, all in one soft medium-format film look: 9 clients with 2 images each, 6 studio photos and 12 crew portraits against the same plaster wall.

Home:
1. Loader: images flicker in a frame, then burst into the collage.
2. Hero: the giant line "we believe in brave, beautiful work" slides through a collage of 10 work photos. Hovering one lifts it and shows its second image.
3. An intro statement with three figures.
4. Four featured case studies in alternating layouts.
5. Client logos and a "More work" grid with tags.
6. About: underlined phrases fan out related photos at the cursor, then the crew's faces.
7. News cards and the footer.

Other pages:
- Work: filter chips (All, Web design, Development, Brand, Marketing) and a grid or index view.
- Case study: name, details, a big image, the brief, the response, results, a quote and the next case.
- Studio: the statement circled by the 12 crew portraits, then who we are, services, process, crew and awards.
- Contact: a form with validation and an FAQ.

The header turns into a centred pill on scroll. The footer has both addresses, a live Lisbon clock and a giant "Halflight" whose letters get bolder near the cursor. Make it responsive down to 390px and accessible.