01 The Brand System
The complete visual identity for Phil Moore Studio. 19 colors across 4 families, 2 typefaces (Montserrat for structure, Beyond Infinity for personality), and 3 graphic elements for texture and depth. A warm core palette with a cool accent for contrast. Every element has a defined role.
Full palette at a glance
19 colors. 4 families. Every one connected by undertone or function.
02 Foundation: Neutral Grays
These carry the structural weight of every design. Body text, backgrounds, borders, dividers. They are true neutrals with no color cast, so they stay invisible while the accent families do the talking.
03 Brand Accent: Red Family
This is the primary identity. Deep Burgundy anchors the brand with weight and sophistication. Brand Red drives action. The lighter tints carry warmth through backgrounds and decorative elements without competing with the core.
A smooth gradient from dark to light, all sharing the same red-pink undertone.
04 Warm Highlight: Orange Family
Orange is the energy color. In light mode, it appears sparingly as a label or highlight. In dark mode, it leads as the primary accent. The family runs from full-saturation Orange down to the barely-there Cream.
In light mode: maximum two appearances per document. In dark mode: orange becomes the primary interactive accent, replacing Brand Red as the dominant foreground color.
05 Rose-Warm Neutrals
The warm neutral family uses a pink-rose undertone that connects seamlessly to the red family. These colors handle warm section fills, table headers, and subtle background tones throughout the brand system.
Red family into rose neutrals
The pink undertone carries through seamlessly from brand reds into warm neutrals. No temperature break anywhere in the sequence.
06 Cool Accent: Steel Teal Family
The Steel Teal family mirrors the orange family structure: a full-strength accent, a softer mid-tone, a pale tint, and a wash. This provides a complete cool-tone toolkit for contrast against the warm palette.
Orange vs Steel Teal: mirrored families
Full > Soft > Pale > Wash
Same structure. Mirrors the orange ramp exactly.
Steel Teal is the differentiation color. Use it for technical sections in proposals, secondary CTAs in dark mode, diagram accents, informational callout boxes, or anywhere visual contrast is needed without reaching for orange or red. It should never replace red as the primary accent.
07 Typography System
Two layers. Montserrat does 95% of the work. Beyond Infinity adds the personal, human touch. They serve completely different purposes and should never compete.
Layer 1: Montserrat (Workhorse)
Design Estimate
Weights in use: 300 (light, subtitles), 400 (regular, body), 500 (medium, UI elements), 600 (semi-bold, data values), 700 (bold, headings and labels), 900 (black, display titles and covers).
Key behaviours: Uppercase with wide tracking (+3-4px letter-spacing) for labels and section markers. Sentence case for body text. Title case for section headings. The hierarchy comes from weight, size, tracking, and case.
Fallback: Arial. When Montserrat cannot be embedded (Word docs, some PDFs), Arial provides the closest available geometric sans-serif.
Layer 2: Beyond Infinity (Signature)
Beyond Infinity is a brand mark element, not a text font. It appears in these specific contexts only:
| Context | Where It Appears | Size / Treatment |
|---|---|---|
| Logo | Cover pages, headers, footers | As part of the Phil Moore logo lockup |
| Signature sign-off | Proposals (About Me, final page), 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 |
Beyond Infinity never appears as body text, headings, labels, or navigation. It never carries information that the reader needs to parse quickly. Its job is to make the brand feel personal and human in specific, controlled moments. The contrast between the tight, structured Montserrat system and the loose, flowing script is what gives the brand its character.
08 Graphic Elements
These are the signature textures and marks. They add depth, rhythm, and personality to layouts without introducing new colors. Each one is a Phil Moore design hallmark.
| Element | Where to Use | Color Options | Rules |
|---|---|---|---|
| Dot Pattern | Footer panels, decorative fills, section backgrounds | Pale Red on Near White (primary), Teal Pale on white (technical variant) | Always on a quiet background. Never behind body text. Max 50% page width. |
| Stripe Lines | Page edges, section dividers, framing elements | Near Black (primary), Brand Red (accent), Soft Gray (subtle) | Always vertical. Border or edge treatment, not a background fill. Pair with generous whitespace. |
| Plus Symbol | Cover pages, section breaks, layout accents | Brand Red (primary), Near Black (dark covers), Mid Gray (subtle) | Maximum one per page. Light weight (300) at large scale. Corners or margins, never centered over content. |
Dot pattern color variants
09 Color Usage by Context
A quick-reference for which color goes where across light and dark modes.
Text hierarchy
| Context | Light Mode | Dark Mode |
|---|---|---|
| Display / H1 | Near Black (900 weight, uppercase) | Cream |
| H2 Headings | Deep Burgundy or Near Black | Rose Light |
| H3 / Technical | Steel Teal (differentiating) or Dark Gray | Teal Soft |
| Body Text | Near Black (400 weight) | Soft Gray |
| Secondary Text | Dark Gray | Mid Gray |
| Labels / Metadata | Mid Gray (700 weight, uppercase, tracked) | Mid Gray |
Backgrounds & surfaces
| Context | Light Mode | Dark Mode |
|---|---|---|
| Page Background | Near White | Near Black |
| Cover / Hero Block | Near Black | Near Black |
| Warm Section Fill | Rose Pale or Blush | N/A |
| Cool Section Fill | Teal Wash | N/A |
| Callout (Warm) | Cream with Brand Red left border | N/A |
| Callout (Technical) | Teal Wash with Steel Teal left border | N/A |
| Table Header | Near Black or Rose Light | Near Black |
| Table Even Rows | Rose Pale or Soft Gray | N/A |
Accents & interactive elements
| Context | Light Mode | Dark Mode |
|---|---|---|
| Primary CTA | Brand Red (white text) | Orange (dark text) |
| Secondary CTA | Deep Burgundy (white text) | Steel Teal (white text) |
| Accent Borders | Brand Red (4-6px left borders) | Orange |
| Cover Accent Bar | Brand Red (6px, left edge) | Brand Red (6px, left edge) |
| Balance / Total Bar | Peach background, dark text | Peach background, dark text |
| Highlight Label | Orange (sparingly, max 2 per doc) | Orange (primary accent) |
10 Design Token Reference
The complete CSS custom property list for all 19 colors, organized by family. Use these exact names in code and design systems.
/* Foundation */
--pm-near-black: #121212;
--pm-dark-gray: #4C4C4C;
--pm-mid-gray: #A6A6A6;
--pm-light-gray: #D3D3D3;
--pm-soft-gray: #E9E9E9;
--pm-near-white: #FEFDFB;
/* Brand Red Family */
--pm-deep-burgundy: #3D040F;
--pm-brand-red: #79071D;
--pm-soft-red: #BC838E;
--pm-pale-red: #DEC1C7;
--pm-blush: #EFE0E3;
/* Orange Family */
--pm-orange: #FE9331;
--pm-peach: #FEB775;
--pm-pale-peach: #FEDBBA;
--pm-cream: #FEF6EE;
/* Rose-Warm Neutrals */
--pm-rose-mid: #C9B8B2;
--pm-rose-light: #E5DDD9;
--pm-rose-pale: #F3EFED;
/* Steel Teal Family */
--pm-steel-teal: #487A8E;
--pm-teal-soft: #7BA3B3;
--pm-teal-pale: #C2D6DE;
--pm-teal-wash: #E8F0F3;