Visual Identity System — 2026
Phil Moore Studio is a boutique ecommerce growth studio designing and building high-performance digital storefronts. This document is the authoritative visual reference for the studio's identity system — colours, type, graphic elements, and usage rules.
+The Phil Moore Studio identity system is built on confident restraint — every element earns its place. The design language communicates precision, capability, and considered craft without announcing itself.
This document is a reusable template. Client brand tokens — colours, typefaces, graphic elements — replace the Phil Moore Studio values when building a client-facing version. The structure, hierarchy, and layout remain constant.
| Principle | Description |
|---|---|
| Document = Product | The guide's own craft signals studio quality. Every layout decision 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. |
| Delight in the Details | The cover, the chip, the token block — micro-moments should feel genuinely crafted, not assembled from defaults. |
19 tokens across four families. The palette is anchored by a signature red and a warm neutral system — deep darks for authority, near-whites for clarity, and a warm tonal scale that runs between them.
Montserrat anchors the system with geometric confidence and a broad weight range. Beyond Infinity acts as a signature mark — used sparingly for brand moments, never for body copy or UI text.
Beyond Infinity is a brand signal, not a reading font. Use it at display scale (48px minimum) in limited contexts: cover pages, signature hero sections, brand callouts. It must always appear alongside Montserrat — never in isolation as the sole typeface on a surface.
Fluid clamp() values preserve rhythm across viewport sizes. Minimum ratio between adjacent steps: 1.25×. Flat scales read as uncommitted — avoid them.
| Step | Sample | Clamp Value | Weight | Usage |
|---|---|---|---|---|
| Display | Aa | clamp(48px,8vw,96px) |
900 | Hero headings, cover wordmarks |
| H1 | Aa | clamp(32px,4.5vw,56px) |
800 | Page-level headings |
| H2 | Aa | clamp(24px,3vw,36px) |
700 | Section headings |
| H3 | Aa | clamp(18px,2vw,24px) |
600 | Subheadings, card titles |
| Body | Aa | 16px |
400 | All body copy |
| Small | Aa | 13px |
400 | Captions, table content, helper text |
| Label | AA | 8–10px |
700 | Category tags, metadata, section labels |
Three brand elements form the visual grammar of the studio. Each has a specific structural role — they are not decorative afterthoughts but load-bearing components of the identity system.
Never combine all three elements in a single composition. Each should appear with breathing room — the stripe divides, the dot marks, the plus anchors. Crowding any two together weakens both. The stripe runs horizontally only; never rotate it into a vertical side-stripe border on callouts or cards.
| Element | Avoid |
|---|---|
| Dot | Do not use at body text scale as a bullet replacement. Minimum 24px diameter in compositions. |
| Stripe | Stripes run horizontally only. Never rotate to create vertical side-stripe borders on callouts, cards, or blockquotes. |
| Plus | Uses Montserrat Thin (100 weight) at display scale only. Do not substitute with a Unicode plus, heavier weight, or icon libraries. |
The Phil Moore Studio wordmark is typographic — Montserrat Black, tightly tracked. There is no separate icon or logomark. The name is the mark.
Never stretch, condense, recolour, outline, or shadow the wordmark. Do not place it on photographic backgrounds where contrast cannot be guaranteed. Minimum reproduction width: 120px.
Three usage tables define the roles each token plays in text, surfaces, and interactive states — not the tokens themselves. Roles stay consistent across client adaptations; only the token values change.
| 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, helper text |
| Accent | Brand Red | #CC2B2B | Section labels, category markers, active states |
| Role | Token | Hex | Usage |
|---|---|---|---|
| Page ground | Off White | #FAFAF8 | Primary page background, document ground |
| Elevated | White | #FFFFFF | Cards, modals, elevated panels |
| Tinted | Cream | #F4F1ED | Note backgrounds, callouts, secondary surfaces |
| Dark | Ink Deep | #1B1B1B | Dark sections, code blocks, footer, spine |
| Border | Mist | #E5E1DC | Table lines, card borders, horizontal rules |
| Role | Token | Hex | Usage |
|---|---|---|---|
| Primary action | Brand Red | #CC2B2B | CTA buttons, active links, primary interactive elements |
| Hover / press | Red Dark | #961F1F | Button hover states, pressed states, focus rings |
| Premium accent | Gold | #B8975A | Premium tier badges, special callouts, highlights |
The studio writes with confidence and precision. Copy should feel considered, not casual — expert without being inaccessible. The voice is direct, warm, and declarative.
| 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 — proposals, reports, invoices, brand guides — follow consistent formatting standards. The document is the delivery; how it looks is part of the service quality.
| Element | Treatment |
|---|---|
| Cover | Horizontal split. Client name and document title in top white panel (large, bold). Context and date in dark bottom panel. Plus symbol as structural anchor. |
| Section headings | Numbered spine (dark column, large ghost number). Red category label above heading. Descriptor paragraph below. Heading separated from content by hairline border. |
| Tables | Hairline borders throughout. Left-aligned. First column in primary colour weight. Header row in 8px uppercase label format. |
| Notes / callouts | Full perimeter border. Warm cream background. Red uppercase label. No side-stripe borders under any circumstance. |
| Color chips | Portrait 2:3 aspect ratio. 2px border-radius. Token name and hex value below each chip. Grouped by family with labeled dividers. |
| Footer | Dark band mirroring the spine. Client name and document title displayed in label weight. PM Studio branding on outer wrapper only. |
All brand colours are declared as CSS custom properties. Use these tokens throughout any implementation — never hardcode hex values directly into component styles. When adapting for a client, redeclare the namespace with the client's prefix.
/* Phil Moore Studio — CSS Custom Properties */
/* Redeclare namespace per client (e.g. --sp-* for Sculpted Peaks) */
/* ── 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;
When building a client version, declare a new :root block with the client's token namespace (e.g. --sp-gold: #AB8C52 for Sculpted Peaks). The document structure, layout, spacing scale, and typographic hierarchy remain identical — only the token values change.