Morrow — Independent image & design studio
Build the complete experience
Create a complete responsive portfolio for Morrow, a fictional independent image and design studio. Deliver four working HTML pages: the portfolio index and three separate project case studies, together with their local images, font, credits, JavaScript, and this full prompt. The index must immediately show the studio's point of view beside the work. This is an image-led portfolio with a scrollable information rail, not a software landing page with a new name.
The exact main headline is “Images with a point of view.” The concise introduction is “Art direction, still life, and visual stories. Thoughtfully made. A little unexpected.” The primary action is “Start a conversation.” The three project names are Soft Form, Blue Hour, and Open Edition. All three are self-initiated fictional studies. Present them confidently but never imply actual client commissions, commercial results, awards, or an operating agency. The contact flow prepares a local, unsent brief.
Reference, authorship, and evidence
The principal composition reference is Kima by Thaer Swailem: https://www.framer.com/marketplace/templates/kima/ . Its live preview is https://kima.framer.media/ . The marketplace listing, live index, and Pulse project page were visited on September 8, 2026. Observed principles are a compact information column, dominant photographic work, independent desktop scrolling, restrained project captions, and a consistent split composition on project pages. These are the principles to study. Do not copy Kima's source code, personal identity, biography, client names, images, testimonials, or claims.
Additional visual research used the first page of https://collectui.com/designs/framer-ui-design-inspiration and https://collectui.com/designs/hero-section-ui-design-inspiration . Those collections demonstrate variety in hero composition and focused UI treatments; they are not downloadable source packages, and this prompt does not claim every entry was inspected. Morrow is an original coded adaptation, not a Framer-native remix. Its downloadable package contains its own HTML implementation.
Morrow deliberately uses a light mineral canvas, charcoal typography, cobalt image accents, three original generated visual studies, project-category filtering, and a local inquiry dialog. Do not reuse the Aven, Relay, Tandem, Serein, or Folio page shell. No logo cloud, dashboard mockup, software feature grid, pricing plans, fabricated metrics, or testimonial carousel belongs in this portfolio.
Composition and layout system
On a wide desktop, use a two-region grid. The left information rail occupies approximately 29% of the available width, with a practical minimum near 290px. The remaining width belongs to the work. Separate these regions with one quiet vertical rule. Cap the overall page near 2000px so unusually large screens do not stretch text and images indefinitely. The rail is sticky at the viewport top, exactly one dynamic viewport high, independently vertically scrollable, and keyboard focusable. The work region follows normal document scrolling. Use natural scrolling rather than a wheel-event interception or artificial scroll physics.
Inside the work region, show a small Selected work heading and theme control, then category controls, then the actual photographs. Use a two-column image arrangement: a tall fashion photograph on the left, the cobalt vessel and open art book stacked on the right. The left image spans two grid rows. This visual hierarchy must be apparent before the visitor scrolls. Do not equalize all three image heights; their different proportions are a defining feature.
The work grid is followed by a typographic studio note, not a fourth fake project. Its message is “Less noise. More feeling↗” with a smaller explanatory line and a conversation action. Finish with a quiet end-of-work row and a back-to-top link. On mid-sized tablets, the available work region becomes a single image column while the rail remains visible. On phones, remove the independent scroll region entirely and create one ordinary document flow.
Color, typography, and spacing
Use #f4f4f0 for the light canvas, #20221f for primary text, #6a6e66 for secondary text, #d7dad1 for divider rules, #e9ebe4 for subtle selected surfaces, and #354af0 for a restrained cobalt accent. In dark mode use #151713 for the canvas, #f0f2e9 for text, #a6ada0 for secondary copy, #353b31 for dividers, #252a21 for panels, and #aeb7ff for an accessible accent. Photographs remain in their original colors in both themes; do not blanket-filter them into grayscale.
Use the bundled Geist variable font. Body text is 16px with roughly 1.55 line-height. The introductory description is 18px and reasonably narrow. Main display type uses fluid sizing around 36–62px on desktop, close line-height, medium weight, and tight but readable tracking. Project-page display text can reach approximately 66px in the rail and 82px in the main statement at wide sizes. Do not shrink content to squeeze it into a narrow column. Small uppercase metadata is secondary; regular labels, controls, and body text remain readable.
The wordmark is a text treatment, approximately 36px, with a small raised northeast arrow. The supplied design uses a compact descriptor beside the wordmark. This descriptor is tertiary display text, not critical navigation.
Use roughly 24–30px outer padding on desktop and 20px on phones. Prefer thin rules, generous section pauses, and flat surfaces. Image corners are approximately 5px. The contact dialog has a modest 10px radius. Rounded pills are reserved for primary actions and category controls; do not wrap every paragraph in a card. The portfolio's sophistication comes from image scale, sequence, and alignment.
Index content and information rail
The rail begins with the Morrow wordmark and “Independent image & design studio.” Below it, place the small line “A practice in seeing,” the main headline, the introduction, and the primary conversation button. The opening should be compact enough to leave the selected-work image wall visible beside it on a normal laptop.
A simple navigation group follows: Selected work with the count 03, The practice, and Get in touch. Selected work leads to the work region, The practice leads to the about section, and Get in touch opens the inquiry dialog. All links must have actual targets. The about section is headed “A considered way of looking.” Its copy describes an independent studio concept exploring image and design, strong ideas, quiet details, and three self-initiated studies. Do not invent years of experience, major clients, customer satisfaction statistics, or institutional recognition.
The next rail section lists three disciplines as text rows: Art direction with Concept, Image language, Campaigns; Still life with Objects, Material, Color; Editorial with Sequence, Print, Digital stories. These are concise descriptions, not clickable controls unless you implement a useful destination. Close the rail with “Have something in mind?” and “Let’s make it interesting.” Include a second conversation button, a return link to ProtoSites, a credits link, and a discreet statement that this is a fictional studio with original generated imagery.
Selected work and exact project content
Soft Form is project 01, year 2026, discipline Art direction. Use the tall portrait image. Its short line is “An exercise in restraint.” Its description is: “A study of the space between a person and the shape they inhabit. Sculptural clothing, quiet architecture, and light that leaves room for ambiguity.” The brief is to create an intimate fashion image without relying on a conventional portrait, using posture, fabric, and framing. The approach is a reduced palette, partial facial concealment, and an architectural setting that structures the image without becoming its subject. The scope is Fashion editorial, Image direction, and Digital presentation. Its outcome is one editorial image, a responsive portfolio presentation, and a direction for a potential longer series.
Blue Hour is project 02, year 2026, discipline Still life. Use the cobalt glass image. Its short line is “Light becomes the material.” Its description is: “A cobalt object, an ordinary afternoon, and a small experiment in seeing. A still-life study of refraction, surface, and the shadow an object leaves behind.” The brief gives one object enough presence to carry a visual study without decorative props or an invented product story. The approach treats the vessel as both subject and lens, using directional light, reflections, stone, and negative space. Scope is Object study, Color direction, and Digital presentation. The vessel is a generated concept, not a purchasable product.
Open Edition is project 03, year 2026, discipline Editorial. Use the open-book image. Its short line is “A little friction. A new perspective.” Its description is: “A printed-object study at the intersection of image, sequence, and color. An open book becomes a frame for a graphic conversation in blue, black, and orange.” The brief explores an editorial identity through the physical presence of a book. The approach uses an electric tabletop, contrasting pages, large image fields, and small captions. Scope is Editorial direction, Print concept, and Digital presentation. The publication is fictional and is not an existing book for sale.
Each image and project title links to its matching HTML case-study page. Put the project name, discipline, and year in captions directly beneath the image. Show a subtle Explore study action on hover and keyboard focus. Do not hide the only project link behind hover; the full image itself remains a semantic anchor. The captions should align cleanly without being laid over busy photography.
Project pages
Create soft-form.html, blue-hour.html, and open-edition.html. Each page retains the studio identity rail, an All work return link, project number and year, project name, description, a definition list of discipline, format and scope, and separate brief and approach sections. Format must read Independent concept. The same local inquiry dialog remains available from the closing rail action.
The main project region begins with compact discipline and year metadata plus the theme control. Show one large hero photograph with a caption and image-study number. Use the actual supplied asset; never fabricate a second project photograph by treating a crop as a separate commissioned result. The Soft Form hero uses a broader desktop crop while retaining the person's face and silhouette; on mobile it returns to a portrait proportion. The other two images retain their landscape proportions.
Below the hero, place an oversized statement drawn from the project's short line, followed by the honest outcome description. A two-column notes section describes composition and the fact that these are original generated studies. Include a credits link. End with a next-project link containing the next project's title and a small preview image. Sequence Soft Form → Blue Hour → Open Edition → Soft Form. Include All work and Back to top navigation. Do not use empty Live website links for fictional projects.
Functional behavior and state
Category controls are All work, Art direction, Still life, and Editorial. All work is initially selected and shows three studies. Choosing a discipline shows only the corresponding project, updates aria-pressed for every control, and announces the count in a polite live region. The typographic studio note is hidden during a filtered view so it cannot be mistaken for a matching result. Returning to All work restores the original three-project sequence. Filtering must not navigate away or reload the page.
The theme control switches the complete page between the defined light and dark palettes. Its accessible name must describe the action that will occur, such as Use dark theme. Persist the theme preference in a namespaced local-storage key when available. Catch unavailable-storage failures and still allow the theme to work for the current visit. Do not store inquiry text or personal information in local storage.
Conversation buttons open a native modal dialog with an explicit heading, a visible Close control, and a short explanation that nothing is sent. The form contains a required name, a project-type select, and a required project description with a sensible minimum and maximum length. Use associated labels and browser validation. Submission prepares a plain-text brief locally, replaces the form with a reviewable result, and exposes Download brief and Edit brief. Editing restores the entered values. Download creates a local text file with an unmistakable unsent-draft statement. No fetch, email sending, CRM write, payment, or backend request belongs in this interaction.
Escape closes the dialog. Closing restores focus to the button that opened it. Clicking the backdrop may close it, but clicking empty space inside the dialog must not accidentally dismiss it. Keep the dialog within the dynamic viewport, with internal scrolling for small screens. Render user-entered text with textContent, not innerHTML, to prevent markup injection. Revoke temporary download object URLs after the browser has had time to initiate the download.
Assets and exact image-generation briefs
Use the packaged portrait.webp, vessel.webp, and book.webp. hero.webp is a compatibility duplicate of portrait.webp for the ProtoSites offline gallery, not a fourth unique asset. Use the included Geist variable font and license. Keep CREDITS.txt and provenance.json with the downloadable website. All asset paths must remain relative so the extracted package works without a framework server. Do not depend on remote images or Google Fonts at runtime.
Portrait generation brief: an original tall 3:4 editorial photograph of an adult person in a black sculptural coat, face partly obscured by fabric, warm gray architectural studio, cinematic soft natural light, authentic textile texture, poised composition, subtle film grain, and no text, logo, or watermark.
Vessel generation brief: an original landscape 4:3 still life of a single sculptural cobalt blue glass vessel on pale blue stone, dramatic refracted afternoon light, large quiet negative space, luminous glass with honest material texture, calm geometric composition, and no text, logo, or watermark.
Book generation brief: an original landscape 4:3 photograph of an open art book with abstract black and vivid tangerine photographic spreads on a cobalt tabletop, natural paper texture, directional daylight, sophisticated composition, and no readable brand, text, UI, logo, or watermark. The exact recorded prompts and generation method are in provenance.json.
Do not replace these with generic unsourced image URLs. If producing an adaptation with different assets, create or license a coherent new set and update credits. Preserve natural aspect ratios and focal points. Compression should preserve texture and avoid obvious banding. Reserve image dimensions before loading so the layout does not jump.
Responsive and accessibility contract
Test at least 1280px, 768px, 390px, and 320px widths. Above the mobile breakpoint, the information rail has independent scroll and the work uses document scroll. At phone widths, remove the fixed-height rail and put identity, introduction, navigation, work, about, services, and footer into one logical visual flow. The actual DOM must remain understandable to a screen reader; a Skip to work link allows users to bypass the longer introduction. Do not trap wheel, touch, or keyboard scrolling.
On narrow phones, use a single image column. On larger phones, a two-column arrangement is acceptable only while images and captions remain useful. Category controls may wrap; never shrink their text to unreadable sizes. Project pages stack their notes and keep the next-project control within the viewport. Textareas resize vertically and forms remain usable with the virtual keyboard. Verify long entered text wraps in the review panel without horizontal overflow.
Use visible focus outlines, semantic headings, actual links for navigation, buttons for state changes, and meaningful alt text. Only the mobile visual reordering may change presentation order; do not remove information from assistive technology. The theme toggle, filter state, and dialog must remain understandable without color alone. Ensure dark-mode secondary text and borders retain adequate contrast. Respect reduced motion by disabling smooth scroll and decorative transitions. Do not add a cursor replacement, autoplay video, aggressive parallax, or continuous movement that obstructs browsing.
Motion and finishing
Keep motion localized: project images scale subtly on hover, the Explore study label moves a few pixels into view, and primary actions have a small hover response. Never hide initial page content behind an entrance timeline. No scroll-jacking is required. Make default, hover, focus, pressed, selected, and disabled states intentional. Reduced motion should leave all content visible and every function usable.
Before delivery, open every case-study link, use all filters, change the theme and reload, open and close the inquiry with both button and Escape, submit valid content, edit the resulting brief, and download it. Check images, font, credits, and all relative links from the extracted package. Inspect the layout at the named viewport sizes and verify that no body-level horizontal scrolling exists. Confirm the inquiry does not make a network submission. Run the parent application's normal build after integration.
Deliver the four pages, three unique generated images, font and license, exact provenance, complete prompt, and downloadable source package. Add the design to ProtoSites with an explicit Kima reference credit and call it a coded adaptation. Do not count discovered marketplace links, imported metadata, or unfinished concepts as completed builds. The finished result should demonstrate its distinct composition through the actual working page.
Reference interaction handler
The following is the implemented local interaction logic. Preserve the behaviors while keeping markup and names aligned.
(() => {
const themeButton = document.querySelector('#theme-toggle');
function applyTheme(dark) {
document.body.classList.toggle('dark', dark);
themeButton?.setAttribute(
'aria-label',
dark ? 'Use light theme' : 'Use dark theme',
);
}
try {
applyTheme(localStorage.getItem('morrow-theme') === 'dark');
} catch {}
themeButton?.addEventListener('click', () => {
const dark = !document.body.classList.contains('dark');
applyTheme(dark);
try {
localStorage.setItem('morrow-theme', dark ? 'dark' : 'light');
} catch {}
});
const filters = [...document.querySelectorAll('[data-filter]')];
filters.forEach((button) =>
button.addEventListener('click', () => {
const selected = button.dataset.filter;
let count = 0;
filters.forEach((item) =>
item.setAttribute('aria-pressed', String(item === button)),
);
document.querySelectorAll('[data-category]').forEach((card) => {
card.hidden =
selected !== 'All work' && card.dataset.category !== selected;
if (!card.hidden) count++;
});
document.querySelector('#work-count').textContent =
`${count} ${count === 1 ? 'study' : 'studies'}`;
document.querySelector('.studio-note').hidden = selected !== 'All work';
}),
);
const dialog = document.querySelector('#contact-dialog');
let opener = null;
document.querySelectorAll('[data-contact]').forEach((button) =>
button.addEventListener('click', () => {
opener = button;
dialog.showModal();
}),
);
document
.querySelector('.close-dialog')
.addEventListener('click', () => dialog.close());
dialog.addEventListener('close', () => opener?.focus());
dialog.addEventListener('click', (event) => {
if (event.target !== dialog) return;
const box = dialog.getBoundingClientRect();
if (
event.clientX < box.left ||
event.clientX > box.right ||
event.clientY < box.top ||
event.clientY > box.bottom
)
dialog.close();
});
const form = document.querySelector('#inquiry');
const result = document.querySelector('#brief-result');
let brief = '';
form.addEventListener('input', (event) => {
if (
event.target instanceof HTMLInputElement ||
event.target instanceof HTMLTextAreaElement
)
event.target.setCustomValidity('');
});
form.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(form);
const text = (key) => {
const value = data.get(key);
return typeof value === 'string' ? value.trim() : '';
};
const name = form.querySelector('[name="name"]');
const description = form.querySelector('[name="brief"]');
name.setCustomValidity(text('name') ? '' : 'Enter your name.');
description.setCustomValidity(
text('brief').length >= 10
? ''
: 'Describe your project in at least 10 characters.',
);
if (!form.reportValidity()) return;
brief = `MORROW / PROJECT INQUIRY DRAFT\n\nName: ${text('name')}\nDiscipline: ${text('type')}\n\n${text('brief')}\n\nPrepared locally. This is an unsent draft for a fictional studio.`;
document.querySelector('#brief-text').textContent = brief;
form.hidden = true;
result.hidden = false;
document.querySelector('#download-brief').focus();
});
document.querySelector('#edit-brief').addEventListener('click', () => {
result.hidden = true;
form.hidden = false;
form.querySelector('input').focus();
});
document.querySelector('#download-brief').addEventListener('click', () => {
const url = URL.createObjectURL(
new Blob([brief], { type: 'text/plain;charset=utf-8' }),
);
const link = document.createElement('a');
link.href = url;
link.download = 'morrow-project-brief.txt';
link.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
});
})();