Complete technical specification — design system, data schemas, API routes, authentication and integrations.
The palette is built to convey refinement and artistic sensibility. Gold on a dark background creates the premium contrast that positions the brand in the luxury art market — the same visual language used by prestigious galleries and high-end auction houses.
Gold is the central colour of the identity. Each variation — from solid to 12% opacity — serves a specific purpose to maintain consistency across buttons, borders, badges and visual effects.
#C9A84C--goldThe main colour. Action buttons, highlighted titles, icons, section labels. The first element the visitor notices.
#E8D48B--gold-lightHover state for buttons and links. A lighter version that visually confirms the element is clickable.
#0A0A0A--bgText colour on gold buttons. The dark contrast on gold ensures legibility in CTAs.
rgba(201,168,76,0.12)--gold-dimGold at 12% — background for badges, tags and highlight boxes. Subtle emphasis without competing with text.
rgba(201,168,76,0.25)--gold-glowGold at 25% — box-shadow on button hover. Creates the premium "light" sensation of fine art lighting.
rgba(201,168,76,0.18)--gold-borderGold at 18% — borders for cards, inputs and dividers. Subtle in default state to avoid visual noise.
rgba(201,168,76,0.35)--gold-border-hGold at 35% — borders on hover, focus and active. The extra glow confirms the element is interactive.
Four dark layers that create visual depth. Each level is slightly lighter, allowing cards and elements to "float" above the background without heavy shadows.
#0A0A0A--bgThe base background of all pages. Near-black, but with enough warmth to avoid feeling industrial.
#101010--bg-cardBackground for all cards, content boxes and the mobile menu. One level above the background to create visual separation.
#141414--bg-elBackground for interactive elements on hover — when the user interacts with a card, this level appears to give visual feedback.
#1A1A1A--bg-surfThe highest level. Used in dropdowns and tooltips — elements that "float" above everything else.
Six text tones organised by visual hierarchy. Gold highlights navigation elements and accents; neutral tones guide the visitor's eye from title to supporting content.
#C9A84C--goldText colour for section labels (01 — WHO WE ARE), accents in titles with <em>, brand name in header, links on hover and icons.
#E8D48B--gold-lightGold text on hover state — navigation links, menu items and buttons when the user interacts.
#F0EDE6--textAll titles, names and information the visitor needs to see first. A warm tone that is gentle on the eyes against a dark background.
#C8C3B8--text-sParagraphs and supporting text. Visible enough for comfortable reading, but does not compete with titles.
#8A8578--text-mShort descriptions, form placeholders and metadata. Guides the eye without dominating the page.
#5A5549--text-dTertiary information — timestamps, legal notes and footer. Present but discreet.
Colours reserved for communicating states to the user — success of a form submission, an important warning or supporting information. Never used for decoration.
#6FCF97--greenConfirmation of successful actions — form submitted, order confirmed, feature included in plan.
rgba(111,207,151,0.1)--green-dimSoft background for success badges. Used in the shipping table to indicate included items.
#E87461--red-softAlerts requiring attention — form errors, stock warnings, weak points in competitive analysis.
#7B9EFF--blueNeutral information that deserves highlighting — "should have" badges, reference links, technical area in features.
rgba(100,140,255,0.1)--blue-dimSoft background for informational badges. Used in "should" priority tags and "v2" version.
Three typeface families, each with a clear role. The combination of a classical serif for impact, a modern sans-serif for legibility and a monospaced face for technical precision creates the premium visual language of the project.
--serifGoogle FontsA serif with artistic personality. The curves and stroke contrast convey sophistication and authority — ideal for a brand selling fine art. The visitor feels "premium" before reading a word.
All section titles, the hero headline, artwork names and collection headings.
Georgia, serif--sansGoogle FontsA clean geometric sans-serif that ensures maximum legibility at any screen size. Light weight (300) creates elegant paragraphs; Semi-Bold (600) gives firmness to card titles and buttons.
All body text, card descriptions, buttons, navigation, forms and labels. The font the visitor reads most.
system-ui, sans-serif--monoGoogle FontsA monospaced font designed for legibility at small sizes. Used in technical and navigation contexts — conveys precision and attention to detail without being intimidating.
Section labels (01 — SHOP), technology tags, priority badges, versions (v1/v2), prices and the navigation menu.
monospaceEach typographic weight has a function in the visual hierarchy. The rule is simple: the more important the information, the heavier the weight. This ensures the visitor always knows where to look first.
The primary weight for long paragraphs. Thin enough to be elegant on a dark background, but fully legible on any device.
The "neutral" weight. Used in serif headings that should be elegant without shouting, and in base text where Light would be too subtle.
Creates gentle emphasis — navigation links and section labels use this weight to stand out from body text without being "bold".
The "action" weight. All card titles, buttons and sub-headings use Semi-Bold to indicate they are entry points into the content.
Reserved for high-impact information — the brand name, prices and milestone percentages. Used sparingly to maintain its power.
An 11-level scale covering everything from the hero title to the smallest medium tag. Each level has defined size, weight, font and spacing so that any element added to the site naturally fits the visual hierarchy.
<h1 (hero)>clamp(2.4rem, 5.5vw, 4.5rem)Line1.15Font--serifWeight400The first thing the visitor sees. Responsive — 4.5rem on desktop, 2.4rem on mobile. Only one per page.
<h2 (section)>clamp(1.8rem, 3.5vw, 2.6rem)Line1.25Font--serifWeight400Title of each main section — "Shop", "Collections", "About". Marks the entrance to a new content block.
<h3 (card group)>1.5remLine1.3Font--serifWeight400Sub-title within a section — collection heading, artwork medium, proposed positioning.
<h3 (timeline)>1.2remLine1.4Font--serifWeight400Titles for timeline phases, collections and pillars. Large enough to be a visual stopping point.
<h4 (card)>0.95remLine1.5Font--sansWeight600Title of each individual card — artworks, collections, features. The visitor reads these to decide what to explore.
<h3 (sub)>1remLine1.5Font--sansWeight600Introduces a sub-block within a section — "Commission Process", "Shipping Info", "Selected Works".
<p>0.95remLine1.7Font--sansWeight300Descriptive paragraphs in sections. Generous line-height (1.7) for reading comfort on a dark background.
<p (card)>0.84remLine1.7Font--sansWeight300Text inside cards — artwork descriptions, collection details, feature text.
<span>0.78remLine1.6Font--sansWeight300Contextual information — edition numbers, shipping metadata, footnotes.
<div/span>0.62remLine1Font--monoWeight500The "numbering" of each section. Always uppercase, with wide letter-spacing. Defines the page cadence.
<span>0.6remLine1Font--monoWeight500The smallest text elements. Medium badges, priority tags and versions. Always inside pills or with a background.
2xs4px0.25remInline gaps, badge paddingxs8px0.5remComponent internal gapssm12px0.75remInput padding, small gapsmd16px1remCard padding, standard gaplg24px1.5remSection padding (mobile)xl32px2remSection padding (desktop), spacers2xl48px3remContent block margins3xl64px4remSection vertical (mobile)4xl96px6remSection vertical (desktop)“The painting is even more beautiful in person”
Sarah M. — London
Works Sold
Countries
Certificate of authenticity included
Paintings
Prints
Collections
About
FAQ
Contact
We use cookies to improve your experience and analyse site traffic.
Material Symbols Outlined via Google Fonts
25 pages with routes, data sources and components
Hierarchical structure of all project routes
7 user journeys — from first contact to conversion
105 features by version, priority and area
Interactive low-fi prototypes with links to each page detail
GA4 events, meta tags, Open Graph and conversion funnel
No traditional database — Sanity CMS for all content, Stripe for all orders. Schemas below reflect Sanity document types and Stripe objects.
_idstringSanity document IDtitlestringNOT NULLslugslugUNIQUEmediumstringoil, watercolour, print, mixeddimensionsobject{ width, height, unit }pricenumberGBPavailablebooleanDEFAULT trueimagesimage[]Cloudinary via SanitydescriptionrichTextcollectionreference→ collections._idtagsstring[][]featuredbooleanDEFAULT false_createdAtdatetimeauto_idstringSanity document IDtitlestringNOT NULLslugslugUNIQUEcoverImageimageCloudinary via SanitydescriptionrichTextartistNoterichTextartworksreference[]→ artworks._id_idstringSanity document IDnamestringNOT NULLemailstringNOT NULLphonestringsubjectstringSubject or briefmessagetextbudgetstringBudget rangesizestringRequested dimensionsstatusstringnew, reviewed, accepted, declined_createdAtdatetimeauto_idstringSingleton documentsiteNamestringsiteDescriptiontextcontactEmailstringsocialLinksobject{ instagram, facebook, pinterest }shippingInfotextidstringStripe PaymentIntent IDcustomer_emailstringNOT NULLamountintegerIn pence (GBP)currencystringDEFAULT "gbp"statusstringsucceeded, pending, failedmetadataobject{ artwork_id, artwork_title, ... }shippingobjectStripe shipping address objectcreatedtimestampStripe timestampNext.js App Router — validation via Zod, JSON responses.
/api/checkoutCreate Stripe Checkout Session — returns session URL for redirect
{ items: [{ artworkId, title, price, quantity }], customerEmail }/api/webhooks/stripeStripe webhook — handle payment_intent.succeeded, charge.refunded events
Stripe payload (signature verified)/api/webhooks/sanitySanity webhook — trigger ISR revalidation on content publish
Sanity payload (secret verified)/api/commissionCommission request form submission — saves to Sanity, sends confirmation email
{ name, email, phone?, subject, message, budget?, size? }/api/contactSimple contact form submission — sends email notification
{ name, email, message }Artwork added to cart stored in localStorage / React context — no login required
User clicks checkout → POST /api/checkout creates a Stripe Checkout Session
Browser redirected to Stripe-hosted checkout page with pre-filled cart details
Stripe handles payment, 3D Secure authentication and fraud detection
Stripe sends payment_intent.succeeded event to /api/webhooks/stripe — verified via HMAC signature
User redirected to /order-confirmation with session ID — confirmation email sent via Stripe
Data flow between Stripe, Sanity and the site.
Stripe payment_intent.succeeded → POST /api/webhooks/stripe → send confirmation email, mark artwork as sold in Sanity
Stripe charge.refunded → webhook → update artwork availability in Sanity → notify via email
Sanity webhook → POST /api/webhooks/sanity → trigger Next.js ISR revalidation of /shop and /collections pages
POST /api/commission → save to Sanity commissionRequests → send confirmation to customer, notify artist via email