Design Direction — Atelier Khelifi Portfolio Website

1. Design Philosophy

The site should feel like Yasmine's workshop — warm, handmade, personal. The palette is drawn from Tunisian leather and medina architecture: rich browns, warm sand tones, deep burgundy. Nothing glossy or corporate. Every visual choice honors the craft. The leather should look like leather. The stitching should be visible. The design stays out of the way and lets the work speak.

2. Color Palette

The palette is deliberately restrained. The leather and the photography provide the visual richness. The site's job is to frame the work, not compete with it.

3. Typography

Google Fonts. A serif typeface for headings — something with warmth and weight that evokes craft without feeling decorative. A clean sans-serif for body text — readable at small sizes, professional without being clinical. Load weights 400 (regular) and 700 (bold) for both families.

Body text: 16-18px, line-height 1.5-1.6. Headings should feel substantial but not heavy — they introduce sections, they don't shout. Caption text slightly smaller than body, in a lighter weight.

4. Layout Approach

Mobile-first. The base design targets 375px. Media queries expand the layout at two breakpoints:

• 768px (tablet): Two-column gallery grid. Navigation expands from stacked to horizontal. Content gains side margins.
• 1280px (desktop): Three-column gallery grid. Maximum content width with centered layout. Generous whitespace on either side.

Single column on mobile for everything — gallery, process page text, contact form. No cramming. Let each piece of content breathe. On desktop, the gallery opens up into a grid, but the process page remains single-column with a comfortable reading width (max 720px).

5. Page Descriptions

Portfolio (index.html): A hero section at the top with "Atelier Khelifi" and a short tagline about handcrafted leather goods from Tunis. Below, the gallery grid organized by category — bags first, then wallets, belts, and custom pieces. Each photograph sits inside a <figure> with a <figcaption> describing the piece: its name, leather type, and a detail about its construction. The images are the content. Keep surrounding elements minimal.

Process (about.html): Long-form content structured with a clear heading hierarchy. Sections: the leather (vegetable tanning and why she refuses chrome tanning), the stitching (hand-saddle-stitching with traditional tools), the heritage (her grandmother's influence and the techniques passed down). Inline images of the workshop — tools on the wall, leather being cut, finished edges — break up the text and give the reader a sense of place.

Contact (contact.html): A centered form with three fields: Name, Email, and Message. Each field has a visible label. The submit button uses the burgundy accent color (#6B1C23) with cream text. Below the form, a short note: "Yasmine responds personally, usually within a day or two." Simple, warm, inviting.

6. Navigation

Shared navigation across all three pages. Three links: Portfolio (index.html), Process (about.html), Contact (contact.html). "Atelier Khelifi" appears as the site name on the left side of the navigation bar.

Horizontal layout on desktop and tablet. On mobile, a hamburger menu or vertically stacked links — either approach works as long as all three links are accessible. The navigation background uses the secondary color (#D2B48C) to distinguish it from the page content.

7. Image Treatment

Product photographs are the centerpiece of the site. Display them large — minimum 600px wide on desktop, full width on mobile. No cropping. Maintain original aspect ratios. Each image should have generous padding around it so the leather breathes against the cream background.

Captions sit below each image in a lighter weight, slightly smaller than body text. They describe the piece — not just "bag" but "Structured day bag in saddle leather with hand-stitched seams and solid brass hardware."