Artwork image · 4:5
Artwork Title
Oil on canvas · 24 × 30 in · Available
01
Colour palette
A gallery-first palette drawn from the existing identity. Charcoal provides the frame; linen and paper create breathing room; clay is reserved for purposeful moments.
Gallery Ink#303532 · Primary
Soft Charcoal#414743 · Surface
Studio Sage#78837C · Secondary
Morning Mist#AAB0AC · Muted
Canvas Linen#EEEAE2 · Section
Gallery Paper#F8F6F1 · Background
Earthen Clay#A86752 · Accent
Antique Gold#B49358 · Rare accent
02
Typography
Editorial serif headlines give the work a refined gallery voice. A neutral sans serif keeps navigation, captions and practical information clear.
Art in the quiet details.
Original Canadian artwork
Available artwork
Familiar landscapes
A larger introductory style for opening paragraphs, artist statements and important page summaries.
Body copy should feel calm and effortless to read. Keep paragraphs reasonably narrow and allow the artwork, rather than decoration, to carry the visual emphasis.
Artwork details, dates, dimensions and supporting information.
New work · Summer collection
03
Buttons & links
Buttons remain rectangular and restrained. The clay hover state introduces warmth without competing with artwork.
Minimum height: 46px · Horizontal padding: 23px · Letter spacing: 0.12em · Border radius: 2px
04
Spacing rhythm
An eight-point foundation with a few small optical adjustments. Generous spacing makes the website feel like a gallery rather than a catalogue.
XS4px
SM8px
MD16px
LG24px
XL32px
2XL48px
3XL64px
4XL96px
05
Core components
A small collection of repeatable pieces keeps pages consistent while leaving enough flexibility for different collections and stories.
Artwork image · 4:5
Artwork Title
Watercolour · 18 × 24 in · Sold
Artist note
Stories from the studio
Use a quiet card for short editorial content, announcements or collection notes.
Private viewing
Ask about an artwork
Use the dark card sparingly for a meaningful call to action.
Contact Sheila06
Forms
Simple, high-contrast fields with visible labels. Never rely on placeholder text alone to explain what belongs in a field.
Required field
Please enter a complete email address.
07
Layout & imagery
Use a maximum 1240px content width, twelve columns on desktop and generous page gutters. Artwork should never be cropped unless the context is clearly promotional.
16:9 · Hero / editorial
4:3 · Supporting
4:5 · Artwork card
Do
Use generous negative space, preserve artwork proportions and keep interface colours quiet.
Avoid
Heavy shadows, rounded app-like cards, busy textures, overly small text and competing accent colours.
08
Custom PHP & CSS system
The visual system is framework-free. Define shared values once in CSS, then use small PHP partials for repeatable site elements.
| Design token | Value | Use |
|---|---|---|
| --color-ink | #303532 | Headings, primary buttons and dark sections |
| --color-sage | #78837C | Supporting panels and subdued accents |
| --color-paper | #F8F6F1 | Primary page background |
| --color-accent | #A86752 | Links, hover states and small highlights |
| --font-display | EB Garamond, Georgia, serif | H1–H3 and editorial statements |
| --font-body | Arial, Helvetica, sans-serif | Body, navigation, labels and buttons |
| --content-max | 1240px | Desktop content containers |
| --section-space | clamp(3rem, 7vw, 6rem) | Responsive vertical section rhythm |
| --grid-gap | clamp(1.25rem, 3vw, 2rem) | Cards and content grids |
| --radius | 2px | Buttons, fields and cards |
| Tablet breakpoint | 900px | Two-column layouts become stacked |
| Mobile breakpoint | 600px | Compact type, spacing and navigation |
CSS foundation
:root {
--color-ink: #303532;
--color-sage: #78837c;
--color-paper: #f8f6f1;
--color-accent: #a86752;
--font-display: "EB Garamond", Georgia, serif;
--font-body: Arial, Helvetica, sans-serif;
--content-max: 1240px;
--section-space: clamp(3rem, 7vw, 6rem);
--grid-gap: clamp(1.25rem, 3vw, 2rem);
--radius: 2px;
}
.container {
width: min(var(--content-max), calc(100% - 2.5rem));
margin-inline: auto;
}Recommended PHP structure
public_html/
├── index.php
├── available-art.php
├── artwork.php
├── about.php
├── contact.php
├── assets/
│ ├── css/main.css
│ ├── js/main.js
│ ├── images/
│ └── fonts/
└── includes/
├── head.php
├── header.php
├── navigation.php
├── artwork-card.php
└── footer.php