# Wix Show & Tell — Visual System Spec v1
**Art Direction:** Jessica | **For implementation by:** Thibault
**Date:** 2026-03-23 | **Direction:** Made Thought editorial

---

## 0. Design Principles (Non-Negotiable)

- Typography carries hierarchy. Decoration carries nothing.
- Every number must be specific. No "approximately" or "roughly."
- Warm off-white, not cold gray. The page should feel like paper, not a dashboard.
- Images earn their space. Placeholders should communicate production intent.

---

## 1. Typography

### Font Pairing
```
Display (serif):  Cormorant Garamond — import from Google Fonts
                  Weights: 300 (Light), 400 (Regular)
                  URL: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap

Sans:             Inter — existing import, keep
                  Weights: 300, 400, 500, 600
```

**Why Cormorant:** Made Thought uses editorial serifs for the "big moment" — the claim, the headline, the thing that makes you pause. Cormorant at light weight (300) at large sizes has the right thinness — monumental but not heavy. Inter handles everything structural.

---

### Type Scale

| Element | Font | Weight | Size | Line Height | Tracking | Color |
|---|---|---|---|---|---|---|
| Hero headline (display) | Cormorant Garamond | 300 | Variable (see §5) | 0.95 | -0.02em | #1a1a1a |
| Hero subline | Inter | 300 | 15px | 1.5 | 0.03em | #888888 |
| Section marker (e.g. "Curious Endeavor") | Inter | 500 | 10px | 1 | 0.2em | #cc0000 |
| Section marker secondary (gray) | Inter | 500 | 10px | 1 | 0.2em | #999999 |
| Story body | Cormorant Garamond | 400 | 26px | 1.65 | -0.01em | #1a1a1a |
| Work number (01, 02…) | Inter | 500 | 10px | 1 | 0.2em | #cc0000 |
| Work separator (/) | Inter | 300 | 10px | 1 | 0 | #999999 |
| Work label (Brand Identity) | Inter | 500 | 10px | 1 | 0.2em | #999999 |
| Work headline (work-line) | Inter | 400 | 28px | 1.25 | -0.02em | #1a1a1a |
| Work caption | Inter | 300 | 15px | 1.65 | 0 | #5a5a5a |
| Team partner name | Inter | 500 | 14px | 1.3 | 0 | #1a1a1a |
| Team partner role | Inter | 300 | 12px | 1.4 | 0.02em | #999999 |
| Team agent name | Inter | 400 | 12px | 1.3 | 0 | #1a1a1a |
| Team agent role | Inter | 300 | 11px | 1.4 | 0.02em | #999999 |
| Nav wordmark "CE" | Inter | 600 | 13px | 1 | 0.04em | #1a1a1a |
| Nav URL | Inter | 300 | 13px | 1 | 0.01em | #999999 |
| Footer copy | Inter | 300 | 12px | 1 | 0 | #999999 |
| Team quote | Cormorant Garamond | 400 | 22px | 1.5 | -0.01em | #1a1a1a |
| Team sub | Inter | 300 | 15px | 1.5 | 0 | #888888 |

**CSS change required:**
```css
/* Add to :root imports */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap');

/* Body font stays Inter */
body { font-family: 'Inter', sans-serif; }

/* Apply Cormorant to display elements */
.hero-headline,
.story-body,
.team-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
```

---

## 2. Grid

### Global Container
```
max-width: 1200px
padding: 0 80px
(unchanged — correct)
```

### Per-Section Column Logic

**Story section (§ "Curious Endeavor"):**
```
grid-template-columns: 36% 64%
gap: 0
```
36% left holds label + rule — it's quiet, just an anchor. 64% for the text body — needs room to breathe at 26px serif.

**Work sections — default (text left, visual right):**
```
grid-template-columns: 38% 62%
gap: 0
.work-left: padding-right: 72px
.work-right: padding-left: 0
```
The visual gets 62% — Made Thought gives images dominance. Text is the tightly edited context column.

**Work sections — reversed (sections 02, 04 if we add more):**
```
grid-template-columns: 62% 38%
.work-right (visual): order: -1  [CSS flex/grid reorder]
.work-left (text): padding-left: 72px; padding-right: 0
```
Alternate the image side every other case study. This is the Made Thought editorial cadence — left, right, left, right.

**Hero (see §5 — not a grid, it's positioned):**
```
No grid. position: absolute within 100vh container.
```

**Team grid:**
```
Partners: grid-template-columns: repeat(4, 1fr); gap: 48px
Agents:   grid-template-columns: repeat(8, 1fr); gap: 24px
```

---

## 3. Section Rhythm

### Vertical Spacing
```css
:root {
  --section-padding-xl: 160px;   /* story, team */
  --section-padding-lg: 120px;   /* work sections */
  --section-padding-sm: 48px;    /* footer */
}
```

| Section | Top padding | Bottom padding |
|---|---|---|
| #story | 160px | 160px |
| .work-section | 120px | 120px |
| #team | 160px | 160px |
| footer | 48px | 48px |

### Borders / Rules

All horizontal rules: `1px solid #e5e5e5` — no variation in weight.  
Hierarchy comes from spacing, not line thickness.

**Applied to:**
- `#story` top: `border-top: 1px solid #e5e5e5`
- `.work-section` top: `border-top: 1px solid #e5e5e5`
- `#team` top: `border-top: 1px solid #e5e5e5`
- `.team-divider`: `height: 1px; background: #e5e5e5; margin: 56px 0`
- `footer` top: `border-top: 1px solid #e5e5e5`
- Nav bottom: `border-bottom: 1px solid #e5e5e5` (keep)

**Section rule (the short red stroke under section markers):**
```css
.section-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: #cc0000;
  margin-top: 10px;
}
```
Width is 32px, not 40px — slightly shorter, more restrained.

**Number row margin:**
```css
.work-number-row { margin-bottom: 32px; }   /* was 40px — tighten it */
```

**Work headline → caption gap:**
```css
.work-line { margin-bottom: 16px; }   /* was 20px */
```

---

## 4. Color

### Palette (Full)
```
--white:            #ffffff        page background
--black:            #1a1a1a        primary text
--mid:              #5a5a5a        captions, secondary copy (was #666, slightly darker)
--light:            #888888        tertiary text, nav url (was #999, slightly darker for legibility)
--subtle:           #999999        roles, footer text
--red:              #cc0000        CE brand red — numbers, markers (unchanged)
--border:           #e5e5e5        all horizontal rules (unchanged)
--placeholder-bg:   #f0efed        warm off-white for all placeholders and avatar circles
--placeholder-border: #d8d5d0     warm mid-gray border for placeholders
--placeholder-text: #b0aca5        warm gray for placeholder labels
--avatar-bg:        #f0efed        partner avatar circles (matches placeholder)
--agent-bg:         #f0efed        agent avatar circles (matches placeholder)
```

**Key change:** Every gray that was cold (#f4f4f4, #f0f0f0) becomes warm (#f0efed). This is the single biggest visual shift — the page stops feeling like a SaaS dashboard and starts feeling like editorial print.

**#f0efed derivation:** It's white (#ffffff) shifted 6 toward warm — R:240, G:239, B:237. Barely perceptible on white background but clearly warmer next to cold grays.

**No additional tones.** The palette is white / near-black / red / warm-gray. Adding more colors dilutes the restraint.

---

## 5. Hero — Treatment 1 Specification

### Confirmed Layout
- Index "01" anchored top-left
- Headline anchored bottom-left, mixed scale
- Font: Cormorant Garamond 300

### Exact Positioning
```css
#hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  /* remove: align-items/justify-content/text-align from current centered layout */
}

.hero-index {
  position: absolute;
  top: 96px;           /* 56px nav height + 40px below nav */
  left: 80px;          /* matches --pad */
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cc0000;
}

.hero-headline {
  position: absolute;
  bottom: 20vh;        /* ~180px at 900px viewport, ~216px at 1080px */
  left: 80px;          /* matches --pad */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  text-transform: none;   /* REMOVE uppercase from current style */
  text-align: left;
}

.hero-subline {
  position: absolute;
  bottom: calc(20vh - 44px);   /* 44px below the bottom of the headline block */
  left: 80px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #888888;
  /* margin-top won't work on positioned element — calc from bottom instead */
}
```

### Headline Mixed Scale (the three lines)
```
Line 1: "One director."      → font-size: 72px
Line 2: "One methodology."   → font-size: 104px     ← THE BIG CLAIM
Line 3: "Every project."     → font-size: 64px
```
Line 2 is 44% larger than line 1. This IS the Mixed Scale treatment — the methodology is the center of mass. Lines 1 and 3 bracket it.

**Subline text:** "Not an agency. A production system." — unchanged, just repositioned.

**Hero scroll cue:**
```css
.hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 80px;           /* left-align to match headline, not centered */
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #999999;
}
```
Change `↓` to `↓ Scroll` or keep bare `↓` — either works. Left-align it.

---

## 6. Work Section Placeholders

### Current problem
`aspect-ratio: 4/3` with `#f4f4f4` background feels like a Figma wireframe. It communicates "we didn't think about this."

### Spec
```css
.work-placeholder {
  background: #f0efed;
  border: 1px solid #d8d5d0;
  aspect-ratio: 16 / 9;        /* cinematic, not boxy */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

/* Corner brackets — production-quality placeholder signal */
.work-placeholder::before,
.work-placeholder::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #b0aca5;
  border-style: solid;
}

.work-placeholder::before {
  top: 16px;
  left: 16px;
  border-width: 1px 0 0 1px;
}

.work-placeholder::after {
  bottom: 16px;
  right: 16px;
  border-width: 0 1px 1px 0;
}

.work-placeholder-number {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cc0000;
}

.work-placeholder-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b0aca5;
}
```

### HTML structure change for placeholder
```html
<!-- Replace current single <span> with: -->
<div class="work-placeholder">
  <span class="work-placeholder-number">01</span>
  <span class="work-placeholder-label">Olevia Brand Identity</span>
</div>
```

Corner brackets (via ::before/::after) + red number + warm-gray label = clearly intentional, not lazy.

---

## 7. Team Grid

### Partner Circles
```css
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0efed;
  border: 1px solid #d8d5d0;
  margin-bottom: 16px;
}
```
Up from 72px → 80px. More presence. Slight increase matters at 4-column.

### Partner Typography
```css
.team-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 4px;
  letter-spacing: 0;
}

.team-role {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #999999;
  letter-spacing: 0.02em;
}
```

### Partners Grid
```css
.team-partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: start;
}
```

### Agent Circles
```css
.team-agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0efed;
  border: 1px solid #d8d5d0;
  margin-bottom: 10px;
}
```
Down from 48px → 44px. Agents are smaller — visual hierarchy: partners lead.

### Agent Typography
```css
/* Override inline styles — put in stylesheet */
.team-agents .team-name {
  font-size: 12px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.team-agents .team-role {
  font-size: 11px;
  font-weight: 300;
  color: #999999;
  letter-spacing: 0.02em;
}
```

### Agents Grid
```css
.team-agents {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 24px;
  align-items: start;
}
```

### Team Divider
```css
.team-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 56px 0;     /* up from 48px — more air */
}
```

### Team Row Labels
```css
.team-row-label {
  font-size: 10px;    /* down from 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #cc0000;
  margin-bottom: 48px;
}

.team-row-label.secondary {
  color: #999999;
  margin-bottom: 32px;
}
```

---

## 8. Nav (Minor Refinements)

```css
nav {
  height: 56px;                 /* unchanged */
  border-bottom: 1px solid #e5e5e5;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}

.nav-wordmark {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1a1a;
}

.nav-url {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #999999;
}
```
No changes to nav structure. It's already clean.

---

## 9. CSS Variables — Final Set

Replace the current `:root` block with:

```css
:root {
  --red:                #cc0000;
  --black:              #1a1a1a;
  --mid:                #5a5a5a;
  --light:              #888888;
  --subtle:             #999999;
  --border:             #e5e5e5;
  --placeholder-bg:     #f0efed;
  --placeholder-border: #d8d5d0;
  --placeholder-text:   #b0aca5;
  --avatar-bg:          #f0efed;
  --agent-bg:           #f0efed;
  --max:                1200px;
  --pad:                80px;
  --section-xl:         160px;
  --section-lg:         120px;
  --section-sm:          48px;
}
```

---

## 10. Implementation Priority

**Do first (highest visual impact):**
1. Hero — reposition from centered to bottom-left, add Cormorant, apply mixed scale
2. Color — swap all cold grays to `#f0efed` across placeholders and avatars
3. Placeholder aspect ratio — 4/3 → 16/9 + corner brackets

**Do second:**
4. Story body — apply Cormorant Garamond 26px
5. Team sizes — 80px partners, 44px agents
6. Work grid — 38/62 split, alternate image sides for sections 02+

**Do last:**
7. Fine-tune spacing numbers (section rhythm)
8. Add `--mid` → `#5a5a5a` color shift across captions

---

## 11. What NOT to Change

- GSAP animation logic — it's solid, don't touch
- Nav height (56px)
- Container max-width (1200px) and padding (80px)
- CE red (#cc0000) — locked
- Border color (#e5e5e5) — already correct weight
- Work headline copy and section structure — visual spec only

---

*Spec v1 — Jessica | Wix Show & Tell | 2026-03-23*
*Next: Thibault implements, Anton reviews live page, Jessica signs off on render.*