A boutique ecommerce growth studio designing and building high-performance digital storefronts. This document is the authoritative visual reference for the studio's complete identity system.
The Phil Moore Studio identity system is built on confident restraint — every element earns its place.
This document is a reusable template. Client brand tokens replace the Phil Moore Studio values when creating a client-facing version. Structure, hierarchy, and layout remain constant — only the tokens change.
| Principle | Description |
|---|---|
| Document = Product | The guide's craft signals studio quality. Every layout and typographic call is a sample of the work. |
| Structure First | Section hierarchy, rhythm, and white space carry the weight. Decoration enters only where it reinforces meaning. |
| Confident Restraint | Premium means every element earns its place. Restraint is the voice, not a compromise. |
| Adaptable Foundation | The template absorbs any client's brand tokens without structural surgery. The bones stay; the skin changes. |
19 tokens across four families — reds, neutrals, warm grays, and accents.
Montserrat anchors the system. Beyond Infinity acts as signature — used sparingly for brand moments only.
Beyond Infinity is a brand signal, not a reading font. Minimum 48px. Must always appear alongside Montserrat — never as the sole typeface on a surface.
Fluid clamp() values across 7 steps. Minimum 1.25× ratio between adjacent steps.
| Step | Sample | Clamp Value | Weight | Usage |
|---|---|---|---|---|
| Display | Aa | clamp(48px,8vw,96px) |
900 | Hero, cover wordmarks |
| H1 | Aa | clamp(32px,4.5vw,56px) |
800 | Page headings |
| H2 | Aa | clamp(24px,3vw,36px) |
700 | Section headings |
| H3 | Aa | clamp(18px,2vw,24px) |
600 | Subheadings |
| Body | Aa | 16px |
400 | All body copy |
| Small | Aa | 13px |
400 | Captions, table data |
| Label | AA | 8–10px |
700 | Category tags, metadata |
Three brand elements — dot, stripe, plus — each with a specific structural role.
Never combine all three elements in a single composition. The stripe runs horizontally only — never rotated into a vertical side-stripe border on callouts or cards.
Typographic wordmark in Montserrat Black. The name is the mark.
Never stretch, recolour, outline, or apply effects to the wordmark. Minimum reproduction width: 120px.
Three tables define the roles each token plays — text, surfaces, and interactive states.
| Role | Token | Hex | Usage |
|---|---|---|---|
| Primary | Ink | #1B1B1B | Headings, key labels, high-priority content |
| Secondary | Ink Mid | #3D3D3D | Body copy, descriptions, supporting text |
| Muted | Stone | #787878 | Captions, metadata, timestamps |
| Accent | Brand Red | #CC2B2B | Section labels, category markers, active states |
| Role | Token | Hex | Usage |
|---|---|---|---|
| Page ground | Off White | #FAFAF8 | Primary page background |
| Elevated | White | #FFFFFF | Cards, modals, elevated panels |
| Tinted | Cream | #F4F1ED | Note backgrounds, callouts, secondary surfaces |
| Dark | Ink Deep | #1B1B1B | Dark sections, code blocks, footer |
| Border | Mist | #E5E1DC | Table lines, card borders, rules |
| Role | Token | Hex | Usage |
|---|---|---|---|
| Primary action | Brand Red | #CC2B2B | CTA buttons, active links, primary interactive |
| Hover / press | Red Dark | #961F1F | Button hover states, pressed, focus rings |
| Premium accent | Gold | #B8975A | Premium badges, special highlights |
Direct, warm, and declarative. Expert without being inaccessible.
| Write | Not |
|---|---|
| We build storefronts that convert. | We help brands with their online presence and digital strategy. |
| The results speak. | We're proud of the incredible results we've achieved for our amazing clients. |
| Precision, not volume. | We offer a comprehensive range of services across multiple verticals. |
| Select clients. Deep work. | We partner with clients of all sizes to deliver best-in-class solutions. |
Avoid superlatives, filler adjectives, and vague value claims. If a sentence could appear on any agency website, rewrite it until it could only appear on ours.
All studio documents follow consistent formatting. The document is the delivery — formatting is part of the service quality.
| Element | Treatment |
|---|---|
| Cover | Full-drench background. Signature Beyond Infinity above. Montserrat Black wordmark below. Document meta in footer strip. |
| Section headers | Full-width colour band. Section number as large ghost element. Label + title + descriptor inside the band. |
| Tables | Hairline borders. Cream header row. Left-aligned. First column in primary weight. 8px uppercase header labels. |
| Notes / callouts | Full perimeter border. Warm cream background. Red uppercase label above. No side-stripe borders. |
| Color chips | Portrait 2:3 chips grouped under family bands. Each family band drenched in its family's key colour. |
| Footer | Brand red band. Client name and document title in white label text. |
All brand colours as CSS custom properties. Never hardcode hex values — always use tokens.
/* Phil Moore Studio — CSS Custom Properties */
/* Redeclare namespace per client when adapting */
/* ── Reds ────────────────────────── */
--pm-red: #CC2B2B;
--pm-red-light: #E8534F;
--pm-red-dark: #961F1F;
/* ── Neutrals ─────────────────────── */
--pm-ink: #1B1B1B;
--pm-ink-mid: #3D3D3D;
--pm-stone: #787878;
--pm-mist: #E5E1DC;
--pm-cream: #F4F1ED;
/* ── Warm Grays ───────────────────── */
--pm-warm-100: #F0EDE8;
--pm-warm-200: #DDD8D0;
--pm-warm-300: #C4BDB2;
--pm-warm-400: #A09891;
--pm-warm-500: #7D7570;
/* ── Accents + Utilities ──────────── */
--pm-gold: #B8975A;
--pm-navy: #1E2A4A;
--pm-charcoal: #2C2C2C;
--pm-ink-deep: #1B1B1B;
--pm-off-white: #FAFAF8;
--pm-white: #FFFFFF;
Declare a new :root block with the client's token namespace. Document structure, layout, and typographic hierarchy remain identical.