Design specification

1. Purpose

Kunnart needs a calm public site that puts paintings and collectibles first, lets a collector buy or request a commission, and lets the studio update works, orders, and requests without a developer. The proposal from Adlio Limited (19 October 2026) is the scope. This specification turns that scope into screens, states, and rules. It is the reference for visual design and for the later production build.

The prototype in this folder is the companion. It is HTML, CSS, and JavaScript opened in a browser. Payments, email, and hosting are represented, not connected.

2. Scope map

3. Audience

Collectors

People comparing a painting with a wall. They need a large photograph, an honest price in naira, dimensions, and a short path to purchase. They should understand when a work is already sold.

Commission clients

Households, and occasionally a business, who want a work that does not exist yet. They need to explain the idea without being forced into a payment.

Kunnart

The studio user. Routine tasks are: add a work, change a price, mark a work sold, read an order, update its status, and read a commission request with its images.

4. Principles

1. The artwork is the largest thing on the page. Chrome stays thin.
2. Cream, black, and one antique gold. No second accent colour for decoration.
3. Prices and availability are always visible before a collector is asked to act.
4. Sold work remains in the record. It is not deleted from the public site.
5. A commission is a conversation, not a checkout.
6. The studio desk uses the same materials as the public site, with denser tables.

5. Structure

Primary navigation is Works, Portfolio, Commissions, The Artist, and Bag. The studio desk is in the footer so it does not compete with the art. The specification is linked from the footer for this review only and should be removed from the public footer at launch.

6. Flows

Buy a work

1. Open Works, or a featured work on the homepage.
2. Filter by painting or collectible, availability, and search.
3. Open the work. If it is available, add it to the bag. Originals cannot be added twice.
4. Review the bag. Remove a line if needed. Delivery is not priced yet.
5. Checkout: contact, address, delivery, payment.
6. Paystack asks for a simulated confirmation. Bank transfer places the order as awaiting payment and shows the account plus the order number as the narration.
7. Confirmation states what happened. The order appears in the studio desk.

Request a commission

1. Open Commissions from the navigation or the dark band on the homepage.
2. Enter name, email, phone, idea, size, and budget. Timing is optional.
3. Attach up to four reference images, or send the note without them.
4. The page confirms a request number. The same request appears in the studio desk.

Update the studio

1. Sign in at Studio desk.
2. Add a work with a photograph, price, and availability, or edit an existing one.
3. Mark a work sold from the list, or from an order.
4. Open an order and move its status. Open a request, write a private note, and set its status.

7. Visual system

Direction: a luxury gallery. Cream grounds, large photographs, and a serif display face. Interface text is a light grotesque, set small and tracked wide when it is a label. Corners are square. Shadows are rare. Motion is limited to a slow image zoom and the film crossfade.

Colour

Type

Outfit is the interface face: navigation, buttons, labels, and body. Navigation and buttons are 11–12px, uppercase, tracking about 0.16–0.22em. Body copy is 16–17px with a line height near 1.7. The homepage title uses a tight line height, around 0.9, so the photograph can stay large.

Space and grid

The content width is 1240px. Page padding is 24px on desktop and 16px on a phone. Sections use 72px of vertical space. The shop is three columns on desktop, two on a tablet, one on a phone. The artwork page is a sticky text column beside a large image until the layout becomes a single column under 980px.

Photography

Works are photographed straight on, with the canvas or object filling the frame and a cream or plaster ground. Do not crop through the middle of a figure in the catalogue card. The detail page may letterbox so the whole work remains visible. Alt text describes the picture, not only the title.

8. Components

Buttons in the system:

9. Pages

Home

Split introduction: statement on the left, one tall painting on the right. Then the current collection (three paintings), the studio film, three collectibles, a short quote with a portrait, and a dark commission band. The film control is a real button. The still sequence is the prototype for the video Kunnart will supply.

Works

Search matches title, medium, collection, and description. Chips switch between all works, paintings, and collectibles. Availability and sort sit beside them. The result count is announced for assistive technology. An empty filter explains itself and does not look like a broken page.

Artwork

Breadcrumb, title, one-sentence summary, price, availability, medium, dimensions, year, collection, and a longer description. Add to bag is the primary action. Request a commission is secondary, for people who want something related rather than this exact work. Related works of the same type sit below. Unknown ids show a return link.

Portfolio

Editorial rows, alternating image and text. This is not a shop. Clicking an image opens it larger. Categories used: solo exhibition, private commission, studio series.

The artist

Portrait, then style, inspiration, and how the studio works. Three facts repeat the offer: unique works, direct payment, commissions by request.

Bag and checkout

The bag lists image, title, medium, availability, and price, with remove. Checkout is one page, not a multi-step wizard, because the order is usually one or two works. The summary stays in view on desktop and updates when delivery changes.

Confirmation

Paystack confirms a simulated receipt. Bank transfer repeats the account, the amount, and the order number to use as the narration.

10. Commerce

Order statuses, in order of a normal sale: Awaiting payment, Paid, Preparing, In transit, Delivered. Cancelled is available from the desk at any point. Marking the artwork sold is a separate action so a paid order and a catalogue status cannot drift without the studio choosing it.

11. Commissions

Required: name, email, phone, idea (at least a short paragraph), size, budget. Optional: timing and reference images. Sizes are Small under 50 cm, Medium 50–90 cm, Large 90–150 cm, Monumental over 150 cm, and Not sure yet. Budgets are five naira bands from under ₦200,000 to above ₦2,000,000.

Images: JPEG, PNG, or other browser-readable image, up to four, each under 8 MB. The prototype stores a reduced preview in the browser. Production should store files on the server and email the studio.

Request statuses: New, In review, Quoted, Accepted, Declined. The studio note is private and is not shown to the customer in this scope. The prototype does not send email.

12. Studio desk

Sign-in for the prototype is studio@kunnart.art / kunnart, shown on the sign-in screen. The session ends when the browser tab session ends. Production needs a real password, not a shared one printed on the page.

Overview

Counts for available works, sold works, open orders, and active requests, plus the latest orders and requests. Reset prototype data restores the sample catalogue edits, bag, orders, and requests. That control is for review only.

Artworks

Search, photograph, type, price, status. Edit opens the full form. Mark sold and Mark available are one-click. The form also offers Reserved, a homepage flag, and removal from the public catalogue. A new work needs a photograph before it can be saved. Saved works appear on the public Works page immediately in this prototype.

Orders

List and detail. Detail shows the collector, address, lines, delivery, payment method, note, and total. Status is saved explicitly. Each line can be marked sold.

Commissions

List and detail. Detail shows the brief, size, budget, timing, reference images, status, and studio note.

13. Content model

A work has: id, title, type (painting or collectible), medium, dimensions, year, price, availability, surface note, collection, featured flag, image, alt text, summary, description. An order has: id, date, customer, delivery, payment, line items, note, status, subtotal, delivery fee, total. A commission has: id, date, contact, idea, size, budget, timing, references, status, studio note. Portfolio entries are editorial and are not the same records as purchasable works, even when they share an image.

14. Responsive and access

Breakpoints: one column under 720px, simplified grids under 980px, full gallery layout above that. The header becomes a menu button. Tap targets for buttons are at least 40px tall. Images scale down instead of overflowing.

Each page has one h1, a skip link, visible focus in gold, form errors next to the field, and alt text on works. The shop count uses a live region. The payment dialog is marked as a dialog. Portfolio and the payment layer close with Escape where a close control exists. Reduced-motion preferences stop the film zoom and the card zoom transition.

Colour contrast: ink on cream for body text, cream on ink for primary buttons. Gold is for labels and focus, not for small body text.

15. SEO and Google Business Profile

Each public page has a unique title and description. The artwork page adds structured data for the work, the artist name, the price, and availability. Heading order is title, then section titles. Production should add a sitemap, remove the prototype noindex tag, and write titles around the way people search: the artist name, Lagos, original paintings, and commissions.

Google Business Profile is a launch task, not a page. When Kunnart confirms a public studio or viewing address, create or claim the profile, use the same name and phone as the site, add photographs of the work rather than posters, and choose categories such as artist and art gallery if they match the business. Do not publish a map pin until the address is real and approved. The prototype deliberately has no fake map.

16. Prototype limits

• Paystack is simulated. No charge is made.
• Bank details are samples.
• Orders, requests, catalogue edits, and the bag are stored in this browser only.
• The homepage film is a sequence of stills, not the final video file.
• There is no customer account. The proposal treats accounts as a later functional change.
• Email is not sent. The desk is the inbox for this review.
• The biography, portrait, and quote are written for the prototype and must be replaced.

17. Placeholders to replace

Open the prototype from the homepage. Sign in to the desk with the details on the sign-in screen.