Our Place design specConsumer

A warm, domestic, editorial cookware brand whose defining rule is that NOTHING on the page is pure white or pure black — the canvas is cream #fcfaf6 over warm surfaces #f6f3eb and sand #ebe5d4, and the ink is a warm brown #35312e, so the whole palette is shifted toward the kitchen. One terracotta #af5a3c is the only accent, owning every CTA and the Sale label, while olive #6c674d and taupe #9c9074 serve strictly as band fills. Three faces divide the work: Chelt, a LIGHT serif at weight 300, carries the display (60/66 hero, 48/52.8 section) and supplies the editorial register rather than a rustic one; 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 detail is an ARCH radius — 50% 50% 8px 8px / 35% 35% 8px 8px, used 21 times — that gives product cards a domed, pot-lid silhouette above a dominant 4px radius and 9999px pills. The primary CTA is a 4px terracotta block, 48px tall, hovering to #000000. Shadows are nearly absent and structure comes from warm 1px #e6e6e6 and 2px #35312e borders. Unusually for a lifestyle brand there are ZERO gradients, no blur and no canvas: atmosphere is carried by 16 autoplaying videos over flat warm colour bands, with 0.15s motion across an 18-keyframe storefront kit whose two overshoot easings hold the playful register.

Browse Our Place in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

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 radius50% 50% 8px 8px / 35% 35% 8px 8px, used 21 times — that gives product cards a domed, kitchen-tile silhouette.

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.

Color Palette & Roles

TokenHex / valueRole / usage
cream#fcfaf6page canvas (37 uses)
paper#f6f3ebsecondary warm surface
sand#ebe5d4warm surface / hover border
sand-2#ebe5d5sand alt
ink#35312eprimary text + dark fills (2508 uses)
ink-muted#60605esecondary text
ink-3#595752tertiary text
ink-4#6e625awarm muted text
white#fffffftext on dark, card fills
terracotta#af5a3cTHE accent — CTA fill, Sale link
olive#6c674dpromo band fill
taupe#9c9074section fill
grey-line#e6e6e6hairline border (19 uses)
scrimrgba(0,0,0,.1) / .5image 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.

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.
RoleFamilySize/LineWeightTracking
Display (h1)Chelt60/66300normal
Section (h3)Chelt48/52.8300normal
Nav / labelCalibre16/27.2600+1.28px, UPPERCASE
Body / UIPlaid-XS-Web16/17400normal
ButtonCalibre16600+1.28px, UPPERCASE
CaptionPlaid-XS-Web13–14400normal

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.