# Our Place — Marketing site Design Spec

> Source: fromourplace.com (live DOM, computed styles), 2026-07-25. 0 stylesheets
> blocked. Shopify storefront with 26 :root vars, most of them layout; §2 is read
> from computed fills/text. Button `:hover` matched no rule on the hero CTA
> (theme uses utility classes), so §4 hover is taken from the loose set —
> `.button__main:hover` and `.submit-button:hover` — and labelled as such.
> Reality check: **the hint is accurate on all three counts.** Warm ✓ (cream
> #fcfaf6 canvas, warm brown-black #35312e ink), terracotta ✓ (#af5a3c is the
> CTA and the one accent), editorial ✓ (a 60px Chelt serif display over
> UPPERCASE wide-tracked Calibre nav). What it misses is the single most
> characteristic detail: an **ARCH radius** —
> `50% 50% 8px 8px / 35% 35% 8px 8px`, used 21 times — that gives product cards
> a domed, kitchen-tile silhouette.

## 1. Visual Theme & Atmosphere

A warm, domestic, editorial cookware brand. The canvas is a soft cream and the
ink a warm brown-black, so nothing on the page is truly white or truly black —
the whole palette is shifted toward the kitchen. A light serif display (Chelt at
weight 300) carries headlines with a magazine feel, while navigation is set in
UPPERCASE Calibre with wide 1.28px tracking, giving the chrome a tidy,
shop-front rhythm. One terracotta accent owns every call to action, backed by an
olive promo band and sand-toned surfaces. The signature shape is an arch: product
cards are domed at the top like a tile or a pot lid. Feels: warm, domestic,
editorial, considered.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| cream | #fcfaf6 | page canvas (37 uses) |
| paper | #f6f3eb | secondary warm surface |
| sand | #ebe5d4 | warm surface / hover border |
| sand-2 | #ebe5d5 | sand alt |
| ink | #35312e | primary text + dark fills (2508 uses) |
| ink-muted | #60605e | secondary text |
| ink-3 | #595752 | tertiary text |
| ink-4 | #6e625a | warm muted text |
| white | #ffffff | text on dark, card fills |
| terracotta | #af5a3c | THE accent — CTA fill, Sale link |
| olive | #6c674d | promo band fill |
| taupe | #9c9074 | section fill |
| grey-line | #e6e6e6 | hairline border (19 uses) |
| scrim | rgba(0,0,0,.1) / .5 | image overlays |

Rules: nothing is pure white or pure black — the canvas is cream #fcfaf6 and the
"black" is a warm #35312e. Terracotta is the **only** accent and is reserved for
CTAs and the Sale label; olive and taupe are band fills, not accents.

## 3. Typography Rules

Three families with clear jobs. **Chelt** — a light serif — is the display voice
at weight **300** (60/66 hero, 48/52.8 section), which is unusually light for a
serif and is what makes the page feel editorial rather than rustic. **Calibre**
handles navigation and labels at weight 600, UPPERCASE, with wide **+1.28px**
tracking. **Plaid-XS-Web** is the body/UI workhorse (the most-used family on the
page) at 16/17. Tracking is normal everywhere except the uppercase nav.

> Specimen substitution: previews load **Playfair Display** for Chelt and
> **Inter** for Calibre / Plaid (one bundled Google Fonts link). The site ships
> the licensed Chelt, Calibre and Plaid webfonts.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Chelt | 60/66 | 300 | normal |
| Section (h3) | Chelt | 48/52.8 | 300 | normal |
| Nav / label | Calibre | 16/27.2 | 600 | +1.28px, UPPERCASE |
| Body / UI | Plaid-XS-Web | 16/17 | 400 | normal |
| Button | Calibre | 16 | 600 | +1.28px, UPPERCASE |
| Caption | Plaid-XS-Web | 13–14 | 400 | normal |

## 4. Component Stylings

The primary CTA is a **4px**-radius terracotta #af5a3c block, 48px tall, `0 16px`,
with a 2px transparent border (so it can gain a visible border on state change)
and an UPPERCASE Calibre label. Nav items are borderless UPPERCASE text at 48–64px
tall. The dominant page radius is **4px** (146 uses) with 9999px pills (37) and
8px (22) — plus the signature **arch**. Borders are warm: 1px #e6e6e6 hairlines,
and a heavier **2px #35312e** on outlined controls.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | #af5a3c, #fff, 4px, 48px, UPPER +1.28px | `.button__main:hover` → #000000 | site sets `outline:none` | — | not observed |
| Submit button | filled | → #ffffff bg, #35312e text, border #ebe5d4, shadow `rgba(0,0,0,.1) 0 2px 4px` | `outline:none` | — | — |
| Nav link | #35312e, UPPER | underline / colour shift | — | — | — |
| Sale link | #af5a3c, UPPER | — | — | — | — |

Focus note: the theme sets `outline:none` on both `:focus` and `:focus-visible`
for submit buttons — an **anti-pattern**. Supply a visible ring (e.g.
`0 0 0 2px #35312e`) rather than transcribing the removal.

## 5. Layout Principles

A dark #35312e utility bar (rewards, rotating promo carousel, stores/support)
sits above a cream nav bar with the serif wordmark left, UPPERCASE categories
centred and three icons right. The hero is a full-bleed autoplaying video with
left-aligned serif headline, sub and one terracotta CTA. Below, an olive promo
band, then product grids in arch-topped cards. 5 container queries size the
product components.

## 6. Depth & Elevation

Radius scale: **4px** dominant, 8px, 30px, 100px, 9999px pills, 2px — and the
signature **arch**: `50% 50% 8px 8px / 35% 35% 8px 8px` (21 uses), a domed top
with squared-off bottom corners used on product cards. Shadows are almost absent:
just `rgba(0,0,0,.2) 0 0 18px` and `rgba(0,0,0,.5) 0 1px 4px`, both on floating
chrome, plus a `rgba(0,0,0,.1) 0 2px 4px` that appears only on button hover.
Structure is carried by warm borders — 1px #e6e6e6, 1px/2px #35312e, 1px #60605e.
No backdrop filters.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | fades (dominant, 41x) |
| color, background, border, fill, stroke | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | chrome colour changes |
| all | 0.1s | ease | fast micro-interactions |
| opacity, left, visibility | 0.4s | linear | carousel slides |
| height | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | accordions |

House transition: a quick **0.15s cubic-bezier(.4,0,.2,1)**. 18 `@keyframes`
covering a full storefront kit: five numbered `slide1`–`slide5` (the promo
carousel), `marquee`/`marquee2` scrolling strips, `cart-badge-pop` and
`cart-badge-radar` (add-to-cart feedback), `shine`, `ping`, `lengthen`,
`lds-ellipsis1/2/3` loaders and fades. A notably rich easing library is declared,
including two **overshoot** curves — `cubic-bezier(0.175,0.885,0.32,1.275)` and
`cubic-bezier(0.68,-0.55,0.265,1.55)` — which is where the "playful" register
lives. The site ships **one `prefers-reduced-motion: reduce` block** — honour it,
especially given 16 videos.

## 8. Backgrounds, Effects & WebGL

Notably effect-free for a lifestyle brand: **zero gradients**, no backdrop
filters, no canvas/WebGL, no grain, and only 1 raster background layer. The page
is carried instead by **16 `<video>` elements** — autoplaying product and
lifestyle loops — over flat warm colour bands (cream, olive, taupe). Atmosphere
is motion and warm flat colour, nothing procedural.

## 9. Do's and Don'ts

### Do
- Shift the whole palette warm: cream #fcfaf6 canvas, warm brown-black #35312e ink — never pure white or black.
- Set display type in a LIGHT serif (weight 300) for the editorial register.
- Set nav and buttons in UPPERCASE with wide +1.28px tracking.
- Reserve terracotta #af5a3c for CTAs and Sale; use olive and taupe as band fills only.
- Use the arch radius `50% 50% 8px 8px / 35% 35% 8px 8px` on product cards — it is the signature shape.
- Keep shadows minimal; structure with warm 1px/2px borders.
- Honour the reduced-motion block; there are 16 autoplaying videos.

### Don't
- Don't introduce pure #ffffff or #000000 into the palette.
- Don't set the serif display bold — it stays at 300.
- Don't use terracotta as a background band.
- Don't rely on gradients or blur; the site has none.
- Don't copy the `outline:none` focus removal — supply a real ring.

## 10. Responsive Behavior

An extremely dense Shopify-theme ladder (65 distinct steps, em and px mixed).
The load-bearing ones:

| Breakpoint | What changes |
|---|---|
| 376–550px | phone tiers |
| 46.875em (750px) / 749–768px | phone → tablet seam |
| 62.5em (1000px) / 1024px | desktop layout |
| 1280px | wide desktop |
| 1440px | wide content cap |
| 1900px | ultra-wide |

Also present: 31.23em, 31.25em, 37.5em, 50em, and px steps at 400, 425, 426, 450,
480, 500, 530, 564, 576, 600, 640, 700, 739, 748, 860, 890, 896, 897, 900, 949,
950, 951, 960, 992, 1026, 1079, 1080, 1100, 1136, 1200, 1279, 1360, 1366, 1400.
**5 container queries.** No dark-scheme blocks (`darkSchemeBlocks:0`). **1
reduced-motion block.**

## 11. Agent Prompt Guide

- Canvas `#fcfaf6` · Surface `#f6f3eb` / `#ebe5d4` · Ink `#35312e` · Muted `#60605e` · Border `#e6e6e6` / 2px `#35312e` · Accent `#af5a3c` · Bands `#6c674d` / `#9c9074`
- Font: Chelt light serif display 300 (Playfair Display stand-in) + Calibre UPPERCASE nav 600 +1.28px + Plaid body (Inter) · Body: 16/17 · Radius: 4px / **arch `50% 50% 8px 8px / 35% 35% 8px 8px`** · Control height: 48px
- Focus: site sets `outline:none` — add `0 0 0 2px #35312e` · Hover: CTA → #000000 · Motion: 0.15s cubic-bezier(.4,0,.2,1)

<our-place_design_language>
Warm, domestic, editorial cookware brand where NOTHING is pure white or black —
the canvas is cream #fcfaf6 with warm surfaces #f6f3eb and sand #ebe5d4, and the
"black" is a warm brown #35312e, with #60605e muted. One terracotta #af5a3c is
the only accent, owning every CTA and the Sale label, backed by an olive #6c674d
promo band and taupe #9c9074 section fill — those are band fills, never accents.
Three faces divide the work: Chelt, a LIGHT serif at weight 300, carries display
(60/66 hero, 48/52.8 section) and creates the editorial register; Calibre sets
nav, labels and buttons in UPPERCASE at 600 with wide +1.28px tracking; and
Plaid-XS-Web is the 16/17 body workhorse. The signature shape is an ARCH —
border-radius 50% 50% 8px 8px / 35% 35% 8px 8px — giving product cards a domed,
pot-lid silhouette, alongside a dominant 4px radius and 9999px pills. The primary
CTA is a 4px terracotta block, 48px tall at 0 16px with a 2px transparent border,
hovering to #000000. Shadows are nearly absent; structure is warm 1px #e6e6e6 and
2px #35312e borders. There are ZERO gradients, no blur and no canvas — atmosphere
comes from 16 autoplaying videos over flat warm colour bands. Motion is a quick
0.15s cubic-bezier(.4,0,.2,1) across an 18-keyframe storefront kit (promo
carousel slide1-5, marquees, cart-badge-pop/radar), with two overshoot easings
carrying the playful register, and a real prefers-reduced-motion block ships.
Feels: warm, domestic, editorial. Avoid: pure white or black, a bold serif,
terracotta as a background, gradients or blur, copying the outline:none focus.
</our-place_design_language>