01
Section 01
Colour Palette
The Phil Moore Studio palette is built on restraint. Warm near-blacks, dusty reds, and soft neutrals create the premium, editorial tone. Each family is intentional — never decorative for its own sake.
Monochrome — Foundation
Near Black
#121212
Primary headings, key UI text
Dark Gray
#4C4C4C
Body copy, secondary text
Mid Gray
#A6A6A6
Labels, captions, placeholders
Light Gray
#D3D3D3
Dividers, borders, rules
Soft Gray
#E9E9E9
Card fills, input backgrounds
Near White
#FEFDFB
Page backgrounds, surface fills
The backbone of all layouts. Near Black and Near White anchor every composition. Grays provide hierarchy across body copy, UI states, dividers, and secondary labels.
Brand Red — Signature
Deep Burgundy
#3D040F
Dark covers, footer backgrounds
Brand Red
#79071D
SVG graphics, covers, dark surfaces
Brand Red Light
#A8152E
CTAs, accents, labels on light surfaces
Soft Red
#BC838E
Muted accents, icon tints
Pale Red
#DEC1C7
Warm fills, hover states
Blush
#EFE0E3
Section backgrounds, card tints
The defining tone of the brand. Brand Red (#79071D) is the primary signature — used for SVG graphics, covers, and dark surfaces. Brand Red Light (#A8152E) is the light-surface variant — CTAs, accents, and labels on white or cream. Both are interchangeable within the red family; pick the one that passes contrast for the surface you are working on.
Rose — Warm Neutrals
Rose Mid
#C9B8B2
Warm card fills, panel tints
Rose Light
#E5DDD9
Section backgrounds, light fills
Rose Pale
#F3EFED
Subtle surface tints, backgrounds
Warm background tones where near-white feels too stark. They carry the red family warmth without any overt colour — invisible to most, felt by everyone.
Orange — Energy & Warmth
Orange
#FE9331
Warm highlights, warm CTAs
Peach
#FEB775
Eyebrow text on dark, warm accents
Pale Peach
#FEDBBA
Border accents, warm fills
Cream
#FEF6EE
Callout backgrounds throughout
Reserved for warmth and energy. Never used as a primary brand colour. Peach accents eyebrows on dark. Cream is the standard callout background throughout the system.
Steel Teal — Cool Contrast
Steel Teal
#487A8E
Technical headings, secondary accents, diagrams
Teal Soft
#7BA3B3
Secondary badges, subtle accents, links
Teal Pale
#C2D6DE
Callout backgrounds, highlight fills
Teal Wash
#E8F0F3
Technical section backgrounds, subtle fills
A sophisticated counterpoint to the warm palette. Used selectively for client reports, data charts, and contexts where the red family would feel too dominant.
02
Section 02
Typography
Two typefaces. One system. Montserrat provides the structural backbone — geometric, precise, adaptable across weights. Beyond Infinity provides the human signature — expressive, rare, and used with restraint.
Layer 1 — Primary: Montserrat
Phil-Moore.com
The structural voice of the brand. Clean and geometric across all weights from 300 to 900. Used for every heading, body paragraph, label, UI element, and navigation item.
Display
56px / Black 900
Phil Moore
H1
40px / ExtraBold 800
Brand System
H2
28px / Bold 700
Colour Palette
H3
20px / SemiBold 600
Section Overview
Body
15px / Regular 400
Clear, confident prose. Montserrat at reading weight carries authority without heaviness. Designed to breathe.
Label
10px / Bold 700
Section Label · Eyebrow Text
03
Section 03
Beyond Infinity — The Signature Font
Beyond Infinity is the brand's handwritten accent. It appears only where a human touch is needed — never in body text, never in headings, never in UI labels. It is the signature, not the voice.
Layer 2 — Accent: Beyond Infinity
Phil Moore
72px — Brand Signature
Studio
48–56px — Sign-off
Thank you
32–42px — Personal touch
| Context | Where It Appears | Size / Treatment |
|---|
| Logo | Cover pages, headers, footers | As part of the Phil Moore logo lockup |
| Signature sign-off | Proposals, estimates | Large (48–56px), paired with tracked uppercase subtitle |
| Personal touch | Thank-you pages, handwritten-feel moments | Medium (32–42px), warm contrast to structured layout |
| Watermark / ghost | Cover backgrounds, decorative layering | Very large, low opacity (10–15%), purely atmospheric |
The Rule
Beyond Infinity never appears as body text, headings, labels, or navigation. It is reserved exclusively for the signature, sign-off, and atmospheric moments. When in doubt, use Montserrat.
Use Beyond Infinity For
✓The Phil Moore logo and brand signature
✓Sign-off on proposals, quotes, and estimates
✓Personal thank-you moments and client-facing warmth
✓Ghost watermark effects at large sizes, low opacity
Never Use Beyond Infinity For
✗Body copy or long-form text
✗Section headings or page titles
✗Navigation, labels, or UI elements
✗Client deliverables without Phil's explicit approval
04
Section 04
Graphic Elements
A small vocabulary of mark-making. Each element is geometric, intentional, and rooted in the brand's editorial character. They texture without cluttering — always in service of the layout, never as decoration.
01
Stripe Lines
Dense vertical rule. 2px bars, 4px gaps. Used in cover areas, panel edges, and hero backgrounds. Always monochrome.
02
Plus Symbol
Montserrat Light 300. Geometric cross used as spacer, marker, or decorative bullet. Brand Red only.
03
Dot Pattern
Uniform circular grid at 11px intervals. Cover and structural panels only. Never on coloured backgrounds.
04
Ghost Numerals
Montserrat Black 900 at 100–160px. Brand Red at 4–5% opacity. Anchored top-right of section headings.
05
Signature Accent
Beyond Infinity at 48–56px. The human moment in an otherwise geometric system. Always Brand Red.
Element Rule
Graphic elements are deployed one at a time per layout zone. Never stack multiple elements in the same panel. Contrast comes from isolation, not accumulation.
05
Section 05
Layout Principles
The grid is the brand. Generous margins, precise alignment, and deliberate white space communicate quality before a single word is read. These principles apply across every touchpoint.
01 — Whitespace
Breathe First
Layouts should feel like they have room to expand. Minimum 48px gutter on all sides. Section padding never below 64px. Density is earned through repetition, not compression.
02 — Hierarchy
Weight Over Colour
Use font weight and size before colour to establish reading order. Red is reserved for the most critical accent — one per section maximum. Hierarchy through contrast, not noise.
03 — Alignment
Left-Anchored
All type aligns left except for centred cover displays. No justified text. No orphaned lines. Headings tighten at clamp minimums — never wrap awkwardly.
04 — Restraint
One Move Per Section
One graphic element. One accent colour moment. One decorative choice per layout zone. Restraint is the system's primary aesthetic tool. When in doubt, remove.
06
Section 06
Buttons
Two primary button colours — one for each surface. Never use the dark red on white, or the light red on dark. Buttons follow the same surface rule as all other interactive elements.
Radius Token Reference — Layout D (Rounded)
| Token |
Value |
Applied to |
| --r-flat | 0px | Tables, dividers, rules, structural bars |
| --r-input | 10px | Form inputs, search fields |
| --r-md | 14px | Cards, panels, callouts, palette swatches |
| --r-nav | 18px | Navigation elements, floating header |
| --r-lg | 20px | Large containers, hero panels, type scale wrapper |
| --r-pill | 100px | Buttons, badges, filter tabs, section label chips |
Light Surface
Primary uses #A8152E on light surfaces. Buttons are pill-shaped (100px) in the rounded design language.
Dark Surface
Primary uses #79071D — the dark-surface red. Rich and deep on black.
07
Section 07
Badge System
Pill-shaped task and category labels. Always light backgrounds — no dark fills under any circumstances. 8 core slots drawn from the V2 palette. Use core first; draw from extension only when all 8 are assigned to different categories.
Core Palette — 8 slots
SEO
Design
Email
Strategy
Comms
Retainer
Meeting
Dev
Extension Palette — off-brand pastels
Green
Purple
Blue
Amber
Olive
Pink
Slate
Badge rules. Badges are always pill-shaped (100px radius) regardless of layout context — they are interactive status labels, not structural containers. Never assign the same colour to two different categories. Email and Strategy badges use #D4710A (not #FE9331) — the primary orange fails contrast on cream backgrounds.
Extension badge borders. Extension palette badges optionally carry a 1px border at 0.2 opacity from the same hue family (e.g. 1px solid rgba(46,107,34,0.2) for green). This is omitted in this reference to keep visual consistency with the core palette. Apply the border in production contexts where extra definition is needed against light backgrounds.
08
Section 08
Colour Rules
Three rules that govern how the palette is applied in practice. These are not guidelines — they are decisions locked in April 2026 and apply to every touchpoint without exception.
01 — Orange Contrast
Do Not Use on White
Brand Strategy
#FE9331 — pm-orange
Fails WCAG AA on white and cream backgrounds. Reserve for dark surfaces and portal eyebrows only.
Use on Light Surfaces
Brand Strategy
#D4710A — pm-orange-light
Calibrated for white and cream. Passes WCAG AA. Use for eyebrow labels, badge text, and any orange element on a light background.
02 — Shadow Tokens
--shadow-card
0 2px 20px rgba(18,18,18,0.07),
0 1px 4px rgba(18,18,18,0.04)
Inner cards — party blocks, totals panels, stat boxes. Lower intensity so they do not compete with the page shadow.
--shadow-page
0 8px 48px rgba(18,18,18,0.12),
0 2px 8px rgba(18,18,18,0.06)
The document page container. Creates the floated-card effect that lifts the white document off the off-white background.
03 — Eyebrow vs Label
Brand Identity System
pm-eyebrow
Orange #FE9331 on dark, #D4710A on light. Used for section category calls — the highest-level label in the hierarchy. One per section.
Client · April 2026
pm-label
Mid-gray #A6A6A6. Used for metadata, field names, date stamps, and secondary classification. Never the lead element on a page.
09
Section 09
Digital Glass System
The glass system is the surface language for web portals, dashboards, and interactive digital products. It operates in two modes — dark and light — sharing a unified token set with surface-adjusted values. It is never used in print, PDF, or email.
01 — Dark and Light Modes
Dark Mode
PHIL MOORE
Work
About
Services
Contact
Revenue
£48.2k
This month
Neutral glass — sits in the scene without drawing colour attention.
Clients
12
Active
Red glass — deep burgundy tint. Priority or brand-critical content.
Projects
6
In progress
Teal glass — deep ocean tint. Data, reports, and analytical content.
Light Mode
PHIL MOORE
Work
About
Services
Contact
Revenue
£48.2k
This month
Frosted white glass — airy and clean on light backgrounds.
Clients
12
Active
Red glass — very subtle warm blush. Brand-critical or highlighted.
Projects
6
In progress
Teal glass — cool aqua wash. Data, analytics, and reporting contexts.
02 — Background System
Every glass surface sits on an animated blob background — three radial gradients in motion, overlaid with a fine dot pattern. The blobs use the brand colour family (red, teal, warm) at different opacities for each mode. They should always be present when the glass system is in use.
Dark Mode Blobs
Red blob — 70vw
rgba(121,7,29, 0.52) · top-left · 18s
Teal blob — 55vw
rgba(72,122,142, 0.38) · bottom-right · 22s
Warm blob — 45vw
rgba(254,183,117, 0.14) · centre · 26s
Dot overlay
rgba(222,193,199, 0.07) · 32px grid
Light Mode Blobs
Red blob — 70vw
rgba(168,21,46, 0.10) · top-left · 18s
Teal blob — 55vw
rgba(72,122,142, 0.09) · bottom-right · 22s
Warm blob — 45vw
rgba(254,183,117, 0.13) · centre · 26s
Dot overlay
rgba(18,18,18, 0.04) · 32px grid
03 — Glass Tokens
| Token | Dark Mode Value | Light Mode Value |
|---|
| --glass-bg (neutral) | rgba(14, 14, 14, 0.55) | rgba(255, 255, 255, 0.76) |
| --glass-bg-red | rgba(50, 3, 12, 0.55) | rgba(168, 21, 46, 0.04) |
| --glass-bg-teal | rgba(14, 34, 42, 0.55) | rgba(72, 122, 142, 0.045) |
| --glass-blur | 28px for cards and nav · 44px for modals and heavy focus states |
| --glass-border (neutral) | rgba(255, 255, 255, 0.08) | rgba(0, 0, 0, 0.055) |
| --glass-border-red | rgba(188, 131, 142, 0.20) | rgba(168, 21, 46, 0.12) |
| --glass-border-teal | rgba(123, 163, 179, 0.20) | rgba(72, 122, 142, 0.12) |
| --glass-top-glint | inset 0 1px 0 rgba(255,255,255, 0.13) | inset 0 1px 0 rgba(255,255,255, 1.0) |
| --glass-shadow | 0 8px 40px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35) | 0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03) |
| Card radius (glass only) | 14px — glass cards only. Document cards remain 10px. |
| Nav and button radius | 100px pill — unchanged across both systems. |
| Brand red | #79071D (dark surface) | #A8152E (light surface) |
| Orange | #FE9331 | #D4710A (WCAG AA on white) |
04 — When to Use Each System
Glass System
Web portals and client dashboards. The studio artifact hub. Landing pages. Interactive digital products. Any context where backdrop-filter and animation are supported and appropriate.
Document System
Invoices, timesheets, proposals, and reports. Print documents and PDFs. Email campaigns. Anything static, non-screen, or client-facing in a formal context. Use the Rounded v1.2 token set.
