Shopify Launch — Creative Direction Package
Maison Théo is the neighborhood chocolate maker who treats every batch like it's being made for a friend. The digital experience should feel like stepping into a warm atelier on a cold Montreal morning — you smell the roasting cocoa before you see the shelves. This is not luxury chocolate dressed down; it's craft chocolate that doesn't need to dress up.
Every color is derived from the brand's photography and material world — wood surfaces, kraft paper, dark chocolate, cocoa powder, and natural light. Nothing is imposed; everything is observed.
« On fait nos tablettes en petits lots chaque mardi. Venez sentir l'atelier. »
We make our bars in small batches every Tuesday. Come smell the shop.
« Découvrez l'excellence du chocolat artisanal. Une expérience sensorielle d'exception vous attend. »
Discover the excellence of artisanal chocolate. An exceptional sensory experience awaits.
The first example speaks in first person, names a specific day, and invites you to a physical place with a physical sense — smell. It sounds like a person. The second uses impersonal promotional language, deploys "excellence" and "exceptional" — words that mean nothing because every brand uses them. Maison Théo should always sound like Théo talking, never like a marketing department writing. First person, present tense, specific details over vague claims.
The full homepage scroll from announcement bar to footer. Click the wireframe to enlarge. Each section is detailed in the cards that follow.
Kraft background, free delivery message. Persistent, understated.
Announcement bar · Scheme 3Logo left, menu center. Sticky on scroll. Transparent → Warm Linen transition.
Header · Scheme 1Process photo left (60%), headline + CTA right (40%). Close-up, not wide lifestyle.
Image with text · Scheme 1Tempered Dark background, Warm Linen text. Visual rhythm shift from commerce to storytelling.
Rich text · Scheme 2Four equal columns: Sélection → Torréfaction → Conchage → Moulage. Square photos.
Multicolumn (4) · Scheme 1Three products per row. Natural surface photography. Kraft card backgrounds, warm hover shadows.
Featured collection · Scheme 1Text left, atelier photo right. Founder story under 100 words. No CTA — the story is the destination.
Image with text · Scheme 1Kraft background. Warm input styling. Cocoa Terre submit button — deliberately not the primary CTA color.
Email signup · Scheme 3Tempered Dark echoes the process section. Tagline, nav links, social, payment icons.
Footer · Scheme 2Every section specifies the Dawn section type, the color scheme to assign, and the exact creative direction. Priority badges indicate where the most impact lives.
Textured surfaces only. Natural wood, kraft paper, raw linen. Never white, never transparent, never studio-lit. The surface is part of the story — it says "this was made by hand on a real table in a real shop."
Warm natural light, shallow depth of field for details, flat-lay for arrangements. Slight amber color temperature. Shadows present and soft — never eliminated. The photography should feel like you could reach out and touch the surface texture.
The existing Instagram photography IS the brand. Do not recommend a professional reshoot. Provide light editing guidelines: consistent warmth (+10), consistent crop ratios (1:1 product, 3:4 feature), minimum 2000px for retina.
Match the existing aesthetic. Same surfaces (the wooden table, the kraft paper). Same natural window light. Same warmth. The worst thing you can do is hire a photographer who gives you clean, polished images that don't match.
Critical: Product images should never be placed on white backgrounds for this brand. If marketplace or aggregator requirements demand white-background shots, create them separately — they are not used on the Shopify store. The warm, textured photography is a non-negotiable brand signal.
| Background | #3C2415 |
| Text | #F5F0E8 |
| Font | DM Sans 600 |
| Size | 16px |
| Case | sentence case |
| Padding | 16px 32px |
| Radius | 4px |
| Hover | darken → #2C1810 |
| Background | transparent |
| Text | #B5704F |
| Border | 1.5px #B5704F |
| Font | DM Sans 500 |
| Size | 16px |
| Case | sentence case |
| Radius | 4px |
| Hover | fill #B5704F, text #F5F0E8 |
| Color | #B5704F |
| Underline | rgba, 30% opacity |
| Offset | 3px |
| Hover | underline 100% |
| Background | #F5F0E8 |
| Border | 1.5px #C4B5A0 |
| Text | #2C1810 |
| Placeholder | #C4B5A0 |
| Radius | 4px |
| Focus | border → #B5704F |
Rationale: Sentence case ("Ajouter au panier") matches the unhurried, honest tone — uppercase CTAs feel corporate and urgent. The chocolate brown makes the button the most prominent interactive element without introducing a new color. The product IS the brand color.
Dawn handles 90% of this brief natively. Custom CSS is limited to ~30 lines of progressive enhancement in tokens.css. No JavaScript required. No apps needed for launch.
Hero split layout: Achieved by using "Image with text" section in the hero position instead of "Image banner." No custom code — this is a section choice, not a workaround.
0 lines CSSTypography (Fraunces + DM Sans): Both fonts are available in Dawn's font picker. Select via Theme Settings → Typography. No @font-face needed.
0 lines CSSColor schemes: Three schemes configured in Theme Settings → Colors. Each section selects its scheme. Fully native.
0 lines CSSDark sections (process, footer): Apply Scheme 2 (Tempered Dark) via section settings. Dawn handles text/background inversion natively.
0 lines CSSProduct card styling: Kraft background, warm shadow on hover, 6px border-radius. Dawn's default cards are minimal — enhancement via tokens.css.
~10 lines CSSButton fine-tuning: Sentence case enforcement, exact padding/radius, hover darkening. Dawn defaults to uppercase buttons.
~12 lines CSSNewsletter input styling: Warm linen background and kraft border instead of Dawn's default white. Submit button color override to Cocoa Terre.
~8 lines CSSAlong with this brief, your team receives three files that translate the creative direction into code-ready specifications. Here's what each one does and where it goes.
All custom styles in one ~30-line file. Colors, fonts, spacing, button overrides — everything Dawn doesn't handle natively.
Every design decision in a format AI coding tools read automatically. Place it in your project root — Claude Code, Cursor, or Windsurf will follow the direction.
Interactive implementation guide. Theme setup, section order, settings for each section, and what to avoid — with a progress checklist and downloadable assets.
Working with AI tools? Place DESIGN.md in your Shopify theme project root. Your AI assistant will read it automatically and follow the design direction — exact colors, fonts, spacing, and what to avoid. You can prompt it directly: "Style the product cards according to DESIGN.md."
Before development begins, we'd like to align on a few key creative decisions. Each one reflects an intentional choice — here's the reasoning and the question.
We've intentionally removed the quick-checkout buttons (Apple Pay, Shop Pay) to keep the buying experience focused and on-brand. The product page should feel like a considered purchase, not a fast transaction. We recommend revisiting this decision after 90 days with real sales data.
The homepage opens with a split layout — a close-up process photo on the left, your headline on the right. This gives more presence and intimacy than the typical full-width banner you see on most Shopify stores.
The newsletter section uses a Kraft background instead of matching the rest of the page, and the submit button is Cocoa Terre (#B5704F) instead of the primary dark brown. This deliberate contrast signals "this is different" — it's an invitation, not a sales push.
The store's primary language is French (Quebec tone — warm, direct, not formal). We recommend English as a secondary toggle for visitors outside Quebec, but all default copy, headlines, and product descriptions should be written in French first.